CSS + HTML

html 和css都是标记语言,现在用他们来分别进行网页结构设计,网页风格设计。
<head>
<style>
.mystyle1
{
color: green;
background-color: orange;
}
</style>
</head>

用户自定义的样式的名称不属于任何html标记。 我们可以使用属性"class"设置标记的样式。
示例1:
<font class=mystyle1> 我的风格 </font>
结果1: 我的风格 

示例2:
<a href="index.php" class=mystyle1> 我的风格 </a>
结果2: 我的风格 

大致上有三种方法来设置html标记的样式:
a) 内置
b) 内部
c) 外部的CSS
内嵌样式
在html标记中这种样式的属性值为内置。
示例: <font style="color: red; background-color: orange;"> 测试字体 </font>
结果: 测试字体

内部样式
我们可以使用它来定义head标记的样式。
在head标记中我们定义的样式就像示例中给出的一样。
内部样式样式有三种方法可以使用:
普遍, 
标识符, 
用户定义. 
1。我想让所有相似的html标记有相同的样式。例如: 我想让每个<font>标记中的文本内容加粗?
<head>
<style>
a
{
color: green;
}
</style>
</head>
如果像这样使用内部样式,则样式将在整个页面的该标签中生效。即页面中的所有的"a"标记将应该该样式。
2,全局样式时,它将为所有的标记类型设置同样的样式。但是在大多数情况下我们想要相同的标记类型在不同的位置有不同的样式。
<head>
<style>
a#test1
{
color: red;
background-color: orange;
}
a#test2
{
color: green;
background-color: yellow;
}
</style>
</head>

如果我们在标识符中使用内部样式时,我们需要为样式设置ID,这样才会有效。

示例1:
<a href=”index.php” id=test1> 指数 </a>
结果1: 指数 

示例2:
<a href=”index.php” id=test2> 指数 </a>
结果2: 指数

我该如何创建外部样式表文件?

我们把以下的样式放在文本文件中,例如:mystyle.css
<style>
.mystyle1
{
color: green;
background-color: orange;
}
</style>

在html中如何设置背景图片重复?

a)repeat:这个值说明背景图片在两个方向上重复
b)repeat-x:这个值说明背景图片仅仅在垂直方向上重复
c)repeat-y:这个值说明背景图片仅仅在水平方向上重复
d)no-repeat:这个值说明背景图片没有重复
如何产生onMouseover效果?
当鼠标在链接或者背景上时,如何让它们的颜色发生改变?

步骤1:
在head段落中添加文本要改变的样式,具体如下,
<head>
<style>
/*这是怎样的文字会在鼠标滑过*/
.colc{
font-family: san-serif;
color: #9EFF36;
}

/*这是如何看待文本将鼠标。注意:”悬停”是最最重要的变化这里*/
.colc:hover
{
font-family: san-serif;
color: #456745;
}
</style>
</head>

步骤2:
当鼠标在文本上方时,设置文本要出现的样式
例如:
<a href=””  class=”colc”> 这是将鼠标移动到文字</a>

注意:在这里我们使用标记”class”来设置样式。样式名称”将创建在header段落中。
—————————–

要让背景颜色发生改变,就像上面解释的一样,在样式标记中添加”background-color”属性。
例如:形成的样式就是
.colc2{
font-family: san-serif;
color: #9EFF36;
}

/*这是如何看待文本将鼠标。注意:”悬停”是最最重要的变化这里*/
.colc2:hover
{
background-color: #245250;
}

把这种样式设置到html标记中
<a href=””  class=”colc”> 这是OnMouseOver效应 </a>

水平线: <hr>
这是用于画出新的水平线的特殊标记。
这不需要结束标记。


This tag has the attribute 这个标记通过使用属性”width”来说明线的宽度。
<hr width=60%> 是用于定义以下的线


在一定的时间间隔后,我想让网页自动重定向?

为了进行页面重新定向,我们应当使用在html中使用head标记内的Meta标记。 推荐刷新的时间大于5秒,这是因为我们要考虑页面加载的时间。

例如:

<meta http-equiv=”refresh” content=”5; url=http://www.hscripts.com”>

这个代码将用于5秒之后重新定向你的网页到http://www.hscripts.com。

  • 属性 http-equiv=”refresh”是用于请求刷新页面。
  • 属性content=”5; URL=http://www.hscripts.com”是用于以秒来设置事件间隔,在这之后,页面重新定向到目标页面。
  • 在’url=’之后你不能使用分号。
  • 使用这个meta标记在一定的时间间隔后会自动重新定向到目标页面。为了确保重新定向到预置页面,可以编辑属性 “content“,来设置合适的时间值和目标网址。这将在所有扩展和服务器端语言(如php, jsp, asp等)中起作用。

我想让在页面上的一小部分在每隔一定的时间间隔后会加载,该怎么做?

页面的内容或者小部分需要每隔一定时间就动态更新。加载全部页面是不明智的。我们就通过嵌入框架来完成。

<html>
<head>
<meta http-equiv=”Refresh” content=”5″>
</head>
<body bgcolor=#faa9aa>
2061816660</body>
</html>

通过使用内联框架,把动态页面设置成我们的主页。在这里我们要使用表格和嵌入页面设置成网站上表格的一列。

<html>
<body>
这是内联框架的测试页面。在以下的框架中你只能看到内容,在每隔5秒,内联框架就会加载。 <br><br>

</body>
</html>

我想让网页在每几秒就重新载入?
我该如何让html页面自动刷新?

Advertisements

tools make you run faster

node.jsnodejs.org)运行快开发快的服务器框架,使用v8跑javascript

express.jsexpressjs.com) node.js上目前最好的网站服务器框架,尤其特别合适做REST协议。

jadejade-lang.com)一个非常干净易用的html模板语言

Yeoman:构建漂亮Web应用的工具和框架

http://yeoman.io/ 旨在为开发者提供一系列健壮的工具、程序库工作流,帮助他们快速构建出漂亮、引人注目的Web应用。

Yeoman is a robust and opinionated client-side stack, comprised of tools and frameworks that can help developers quickly build beautiful web applications. We take care of providing everything needed to get started without any of the normal headaches associated with a manual setup.

前端工程构建工具——Yeoman

Yeoman是Google的团队和外部贡献者团队合作开发的,他的目标是通过Grunt(一个用于开发任务自动化的命令行工具)和Bower(一个HTML、CSS、Javascript和图片等前端资源的包管理器)的包装为开发者创建一个易用的工作流。

yeoman定义了一套用于提高前端工程师效率的规范工作流工具。

效率和规范是yeoman的核心诉求,后面明河讲解yeoman使用场景时会说到,yeoman是如何提高你的项目效率。

打个比喻:如果前端项目是工厂的产品的话,yeoman就像工厂的流水线,标准化、傻瓜化、批量化产品生产,生产过程乏味了,但效率提高了。

Yeoman的目的不仅是要为新项目建立工作流,同时还是为了解决前端开发所面临的诸多严重问题,例如零散的依赖关系。

 Yeoman主要有三部分组成:yo(脚手架工具)、grunt(构建工具)、bower(包管理器)。这三个工具是分别独立开发的,但是需要配合使用,来实现我们高效的工作流模式。
下面这幅图很形象的表明了他们三者之间的协作关系。

通常在开发新项目时我们都需要配置工程环境,开发目录,需要下载一些库、框架文件(如 jQuery、Backbone 等),配置编译环境(Less、Sass、Coffeescript等),甚至还要配置单元测试框架,过程非常繁琐,还没开始编码时间就耗了大半天。为了解决这个问题 Paul Irish、Addy Osmani、Sindre Sorhus、Mickael Daniel、Eric Bidelman 和 Yeoman 社区共同开发的一个项目——Yeoman。

Yeoman 是由三个工具的组成:YO、GRUNT、BOWER

YO:Yeoman核心工具,项目工程依赖目录和文件生成工具,项目生产环境和编译环境生成工具。
GRUNT:前端构建工具,jQuery就是使用这个工具打包的。
BOWER:Web 开发的包管理器,概念上类似 npm,npm 专注于 NodeJs 模块,而 bower 专注于 CSS、JavaScript、图像等前端相关内容的管理。

Yeoman 特性:

  • 快速创建骨架应用程序——使用可自定义的模板(例如:HTML5、Boilerplate、Twitter Bootstrap等)、AMD(通过RequireJS)以及其他工具轻松地创建新项目的骨架。
  • 自动编译 CoffeeScrip 和 Compass——在做出变更的时候,Yeoman 的 LiveReload 监视进程会自动编译源文件,并刷新浏览器,而不需要你手动执行。
  • 自动完善你的脚本——所有脚本都会自动针对 JSHint 运行,从而确保它们遵循语言的最佳实践。
  • 内建的预览服务器——你不需要启动自己的 HTTP 服务器。内建的服务器用一条命令就可以启动。
  • 非常棒的图像优化——使用 OptPNG 和 JPEGTran 对所有图像做了优化
  • 生成 AppCache 清单——Yeoman 会为你生成应用程序缓存的清单,你只需要构建项目就好。
  • “杀手级”的构建过程——你所做的工作不仅被精简到最少,让你更加专注,为你节省大量工作。
  • 集成的包管理——Yeoman 让你可以通过命令行轻松地查找新的包,安装并保持更新,而不需要你打开浏览器。
  • 对ES6模块语法的支持——你可以使用最新的 ECMAScript 6 模块语法来编写模块。这还是一种实验性的特性,它会被转换成 eS5,从而你可以在所有流行的浏览器中使用编写的代码。
  • PhantomJS单元测试——你可以通过 PhantomJS 轻松地运行单元测试。当你创建新的应用程序的时候,它还会为你自动创建测试内容的骨架。

相比于传统的开发方式。我需要首先确定用哪些框架,然后各个网站收集源代码,进行整合,还要部署一个测试的Web服务器,不管是用(Apache、Nginx还是Xampp),最后还要做代码的优化。而现在使用了Yeoman之后,所有的这些工作都被自动化、流程化了,我只需要按照既定的步骤来做,很多事情Yeoman都帮我做好了,对于前端开发来说,节省了非常多的力气。而且,生成项目的代码质量也都很不错。

生活在西班牙

自己动手丰衣足食

BlueAsteroid

Just another WordPress.com site

Jing's Blog

Just another WordPress.com site

Start from here......

我的心情魔方

天才遠私廚

希望能做一個分享各種資訊的好地方

语义噪声

西瓜大丸子汤的博客

笑对人生,傲立寰宇

Just another WordPress.com site

Where On Earth Is Waldo?

A Project By Melanie Coles

the Serious Computer Vision Blog

A blog about computer vision and serious stuff

Cauthy's Blog

paper review...

Cornell Computer Vision Seminar Blog

Blog for CS 7670 - Special Topics in Computer Vision

datarazzi

Life through nerd-colored glasses

Luciana Haill

Brainwaves Augmenting Consciousness

槑烎

1,2,∞

Dr Paul Tennent

and the university of nottingham

turn off the lights, please

A bunch of random, thinned and stateless thoughts around the Web