流淌

希望我能从点点滴滴的学习中汇聚这些小的知识点并且积累起来。

用<code>只能标记一行代码，在显示的时候能同时保留程序中的引号和空格。

用<pre>可以用来显示大段的代码，同时在显示的时候保留空格和标点。

<label>不是input的必须项目，但是最好加上。如果没有需要for和form的值，可以<label><input......></label>，可以实现相同的效果。

---

横向的ul菜单

第一步：建立一个无序列表
我们先建立一个无序列表，来建立菜单的结构。代码是：

<ul>
<li><a href="1">首页</a></li>
<li><a href="2">产品介绍</a></li>
<li><a href="3">服务介绍</a></li>
<li><a href="4">技术支持</a></li>
<li><a href="5">立刻购买</a></li>
<li><a href="6">联系我们</a></li>
</ul>

第二步：隐藏li的默认样式
因为看起来不是很好看，菜单通常都不需要li默认的圆点，我们给UL定义一个样式来消除这些圆点。

当然，为了更好的控制整个菜单，我们把菜单放在一个div里。页面代码变成：

<div class="test"> <ul>
<li><a href="1">首页</a></li>
<li><a href="2">产品介绍</a></li>
<li><a href="3">服务介绍</a></li>
<li><a href="4">技术支持</a></li>
<li><a href="5">立刻购买</a></li>
<li><a href="6">联系我们</a></li>
</ul> </div>

CSS定义为：

.test ul{list-style:none;}

说明：“.test ul”表示我要定义的样式将作用在test的层里的ul标签上。

现在的效果是没有圆点了：

第三步：关键的浮动
这里是菜单变成横向的关键，我们给li元素加上一个“float:left;”属性，让每个li浮动在前面一个li的左面。

CSS定义为：

.test li{float:left;}

菜单变横向了。就这么简单！下面需要做的就是优化细节了。

第四步：调整宽度
菜单都挤在一起不好看怎么办？我们来调节li的宽度。

在CSS中添加定义width:100px指定一个li的宽度是100px，当然你可以根据你的需要调整数值：

.test li{float:left;width:100px;}

效果是：

如果我们同时定义外面div的宽度，li就会根据div的宽度自动换行，例如定义了div宽350px，6个li的总宽度是600px，一行排不下就自动变成两行：

.test{width:350px;}

第五步：设置基本链接效果
接下来，我们通过CSS来设置链接的样式，分别定义:link、:visited、:hover的状态

.test a:link{color:#666;background:#CCC;text-decoration:none;}
.test a:visited{color:#666;text-decoration:underline;}
.test a:hover{color:#FFF; font-weight:bold;text-decoration:underline;background:#F00;}

第六步：将链接以块级元素显示
有朋友问，菜单链接的背景色为什么没有填满整个li的宽度？恩，解决的方法很简单，在a的样式定义中增加display:block，使链接以块级元素显示。

同时我们微调了如下细节：

用text-align:center将菜单文字居中；
用height:30px增加背景的高度；
用margin-left:3px使每个菜单之间空3px距离；
用line-height:30px;定义行高，使链接文字纵向居中；
CSS定义象这样：

.test a{display:block；text-align:center;height:30px;}
.test li{float:left;width:100px;background:#CCC;margin-left:3px;line-height:30px;}

 

这样就漂亮多了吧。

第七步：定义背景图片
我们通常都会在每个链接前加一个小图标，这样导航更清楚。CSS是采用定义li的背景图片来实现的：

.test a:link{color:#666;background:url(arrow_off.gif) #CCC no-repeat 5px 12px;text-decoration:none;}
.test a:hover{color:#FFF; font-weight:bold;text-decoration:none;background:url(arrow_on.gif) #F00 no-repeat 5px 12px;}

说明：“background:url(arrow_off.gif) #CCC no-repeat 5px 12px;”这句代码是一个CSS缩写，表示背景图片是arrow_off.gif；背景颜色是#CCC；背景图片不重复"no-repeat"，背景图片的位置是左边距5px、上边距12px；

默认状态下，图标为arrow.off.gif，当鼠标移动到链接上，图标变为arrow_on.gif

效果变成：

现在css的完整代码是：

.test ul{list-style:none;}
.test li{float:left;width:100px;background:#CCC;margin-left:3px;line-height:30px;}
.test a{display:block;text-align:center;height:30px;}
.test a:link{color:#666;background:url(arrow_off.gif) #CCC no-repeat 5px 12px;text-decoration:none;}
.test a:visited{color:#666;text-decoration:underline;}
.test a:hover{color:#FFF; font-weight:bold;text-decoration:none;background:url(arrow_on.gif) #F00 no-repeat 5px 12px;}

页面的完整代码是：

<div class="test">
<ul>
<li><a href="1">首页</a></li>
<li><a href="2">产品介绍</a></li>
<li><a href="3">服务介绍</a></li>
<li><a href="4">技术支持</a></li>
<li><a href="5">立刻购买</a></li>
<li><a href="6">联系我们</a></li>
</ul>
</div>

好了，主要步骤就是这7步，立刻拷贝和修改代码试试，你也可以用CSS做横向菜单了！

---

table summary=>表格中的摘要

---

a标签的target  可以来选择点开链接的时候用什么样的浏览器标签方式打开

---

 CSS 中的属性值类型有只有下面几种 

1. Integers and real numbers  整数和实数
2. Lengths, Percentages  长度 百分比
3. URLs and URIs  网址
4. Counters 计数器？
5. Colors 颜色
6. Strings 字符串
7. Unsupported Values  不支持的值

---

<form action="save.php" method="post" >
    <label>爱好:</label>
    <select>
      <option value="看书">看书</option>
      <option value="旅游" selected=selected>旅游</option>  /*selected属性可以设定option默认的显示值*/
      <option value="运动">运动</option>
      <option value="购物">购物</option>
    </select>
</form>

如果 select中加入 multiple="multiple"属性，则可以用ctrl+鼠标 实现多选

---

CSS全称为“层叠样式表 (Cascading Style Sheets)”

---

我们在做网页代码的时，有些特殊的情况需要为某些样式设置具有最高权值，怎么办？这时候我们可以使用 !important 来解决。

如下代码：

p{color:red!important;}
p{color:green;}
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>

注意：!important要写在分号的前面

---

如何给浏览器标签页加上页面的logo

<link rel="icon" href="img/favicon.ico" type="image/x-icon">

必须保证logo的图片格式为ico，切忌不能是png和JPEG
---