In CSS, any element can be floated. The floating element will generate a block-level box, regardless of what kind of element it is; and a width must be specified, otherwise it will be as narrow as possible; in addition, when the space available for floating is less than the floating element, it will run to the next line , until you have enough space to put it down. Careful friends have discovered that in the above example, the #main div also defines margin-left:120px; which is not defined here, but the extra text runs into the image (#side) Below, after setting margin-left:, will it not run to the text of #side? If you can think of this, you are indeed too smart. It is indeed the case. Add the following line to the css style sheet #main { margin-left:202px;}
The 3-pixel bug is a famous bug in IE6. When a floating element is adjacent to a non-floating element, this 3-pixel bug will appear. To solve this problem, please add _margin-right:-3px on #side; remember to add an underscore in front so that this style will take effect specifically for IE6. It will still display normally under IE7 and FF. # is a virtual link and does not point to any page. Remove the default label styles body, ul, li, h1, h2, h3, h4, h5, h6, p, form, dl, dt, dd { margin: 0px; padding: 0px; font-size: 12px; font-weight: normal; }
ul { list-style: none; }
img { border-style: none; } #menu ul and #menu ul li are derived Selector, if we remove the #menu in front, then the ul tag will be redefined, and the redefined attributes will be applied globally. After adding #menu in front, it will be defined as the style of ul in the menu element. Setting its style only takes effect on the ul under #menu, not the ul after it. This is a bit like a local variable in programming, and directly defining ul is equivalent to a global variable. #menu ul li is defined as the li under ul within the menu element. The derived selector allows us to no longer need to define a style name for each li to define the style. We only need to use the derived selector to select from its parent element. That’s it, this can greatly improve efficiency. You can group selectors so that grouped selectors share the same declaration. Use commas to separate selectors that need to be grouped. In the example below, we have grouped all heading elements. All title elements are green, and p paragraphs, div partitions, and spans are all 20 pixel fonts.
h1,h2,h3,h4,h5,h6 {
color: green;
}
p,div,span{
font-size:20px;
}
Vertical secondary list
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><script type="text/javascript"><!--//--><![CDATA[//><!--startList = function() {if (document.all&&document.getElementById) {navRoot = document.getElementById("menu");var allli = navRoot.getElementsByTagName("li")for (i=0; i<allli.length; i++) {node = allli[i];node.onmouseover=function() {this.className+=" current";}node.onmouseout=function() {this.className=this.className.replace(" current", "");}}}}window.onload=startList;//--><!]]></script><style type="text/css">body { font-family: Verdana; font-size: 12px; line-height: 1.5; }img { border-style: none; }a { color: #000; text-decoration: none; }a:hover { color: #F00; }#menu { width: 100px; border: 1px solid #CCC; border-bottom:none;}#menu ul { list-style: none; margin: 0px; padding: 0px; }#menu ul li { background: #eee; padding: 0px 8px; height: 26px; line-height: 26px; border-bottom: 1px solid #CCC; position:relative; }#menu ul li ul { display:none; position: absolute; left: 100px; top: 0px; width:100px; border:1px solid #ccc; border-bottom:none; }#menu ul li.current ul { display:block;}#menu ul li:hover ul { display:block;}</style></head><body><div id="menu"><ul><li><a href="#">首页</a></li><li><a href="#">网页版式布局</a><ul><li><a href="#">自适应宽度</a></li><li><a href="#">固定宽度</a></li></ul></li><li><a href="#">div+css教程</a><ul><li><a href="#">新手入门</a></li><li><a href="#">视频教程</a></li><li><a href="#">常见问题</a></li></ul></li><li><a href="#">div+css实例</a></li><li><a href="#">常用代码</a></li><li><a href="#">站长杂谈</a></li><li><a href="#">技术文档</a></li><li><a href="#">资源下载</a></li><li><a href="#">图片素材</a></li></ul></div></body></html>Copy after login
Next, modify the css style sheet, first modify #menu ul li, and add a position:relative; attribute to it; After defining display:none, it will be hidden by default; define #menu ul li ul's position: absolute; left: 100px; top: 0px;, then it will be 0 relative to the top of its parent element li, and 100 to the left The location is displayed. Finally, we set the style to display the lower-level menu when the mouse moves over it; #menu ul li:hover ul. This style is difficult to understand. It means to define the ID of ul under menu and li under menu. When the mouse moves over, the style of ul is set to display:block refers to displaying this piece of content when the mouse moves over it, which also achieves the effect we want today.
Relative positioning and absolute positioning: 1.position:relative; If an element is relatively positioned, first it will appear at its location. Then move the element "relative to" its original starting point by setting a vertical or horizontal position. (One more point, when positioned relatively, the element still occupies the original space regardless of whether it is moved. Therefore, moving the element will cause it to cover other boxes)
2.position:absolute; means absolute positioning, and the position will be based on Starting from the upper left corner of the browser. Absolute positioning takes the element out of the document flow so it doesn't take up space. Elements in normal document flow are laid out as if absolutely positioned elements were not present. (Because absolutely positioned boxes have nothing to do with document flow, they can cover other elements on the page and their hierarchical order can be controlled by z-index. The higher the z-index, the further up it appears.)
3. After the parent container uses relative positioning and the child element uses absolute positioning, the position of the child element is no longer relative to the upper left corner of the browser, but relative to the upper left corner of the parent container
4. Relative Positioning and absolute positioning need to be used with top, right, bottom, and left to locate the specific position. These four attributes only take effect after the element is positioned, and are invalid in other cases. In addition, these four attributes can only use two adjacent ones at the same time. You cannot use up and down at the same time, or use left and right at the same time
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */ 注意：四种状态的顺序一定不能颠倒，否则有些不生效 链接在默认状态下是内联元素，转换为块级元素后可以获得更大的点击区域，可以设置宽度和高度，将链接转换为块状，只需增加一个display:block的css属性即可。 学会了把超链接转换为块级元素，想制作个css按钮简直太简单了，只需在上一步的基础上增加一个按钮的背景图片即可实现。下面以制作淘宝网首页的免费注册按钮来讲解，设置最常用的默认样式和鼠标移上时的样式，如下图
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <style type="text/css"> 6 a { display: block; height: 34px; width: 107px; line-height: 2; text-align: center; background: url(/upload/2010-08/14/014304_btn_bg.gif) no-repeat 0px 0px; color: #d84700; font-size: 14px; font-weight: bold; text-decoration: none; padding-top: 3px; } 7 a:hover { background: url(/upload/2010-08/14/014304_btn_bg_hover.gif) no-repeat 0px 0px;} 8 </style> 9 </head>10 <body>11 <p><a href="#">免费注册</a></p>12 </body>13 </html>Copy after login
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <style type="text/css"> 6 p { width: 400px; line-height: 1.5; font-size: 14px; } 7 p:first-letter { font-family: "microsoft yahei"; font-size: 40px; float: left; padding-right: 10px; line-height: 1; } 8 </style> 9 </head>10 <body>11 <p>标准之路[www.aa25.cn]提供DIV+CSS教程,DIV+CSS视频教程,web2.0标准,DIV+CSS布局入门教程,网页布局实例,css布局实例,div+css模板,div+css实例解析,网站重构，网页代码,水晶图标,幻灯广告图片.教程适合初学者循序渐进学习!</p>12 </body>13 </html>Copy after login
改变项目符号样式或用图片定义项目符号:项目符号还可以以图像形式，如下图： 这种形式对图像控制不是很灵活，所以实际应用当中一般用背景图片来实现，在上例基础上将项目符号设置为 list-style: none;，然后
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <style type="text/css"> 6 #layout ul { list-style: none; } 7 #layout ul li { background: url(/upload/2010-08/17/icon.gif) no-repeat 0px 4px; padding-left: 20px; } 8 </style> 9 </head>10 <body>11 <div id="layout">12 <ul>13 <li><a title="第五天 超链接伪类" href="/div_css/906.shtml" target="_blank">第五天 超链接伪类</a></li>14 <li><a title="第四天 纵向导航菜单" href="/div_css/905.shtml" target="_blank">第四天 纵向导航菜单</a></li>15 <li><a title="第三天 二列和三列布局" href="/div_css/904.shtml" target="_blank">第三天 二列和三列布局</a></li>16 <li><a title="第二天 一列布局" href="/div_css/903.shtml" target="_blank">第二天 一列布局</a></li>17 <li><a title="第一天 XHTML CSS基础知识" href="/div_css/902.shtml" target="_blank">第一天 XHTML CSS基础知识</a></li>18 </ul>19 </div>20 </body>21 </html>Copy after login
1 <div id="layout"> 2 <ul> 3 <li><a href="#"><img src="images/pic.gif" width="68" height="54" />三亚</a></li> 4 <li><a href="#"><img src="images/pic.gif" width="68" height="54" />三亚</a></li> 5 <li><a href="#"><img src="images/pic.gif" width="68" height="54" />三亚</a></li> 6 <li><a href="#"><img src="images/pic.gif" width="68" height="54" />三亚</a></li> 7 <li><a href="#"><img src="images/pic.gif" width="68" height="54" />三亚</a></li> 8 <li><a href="#"><img src="images/pic.gif" width="68" height="54" />三亚</a></li> 9 <li><a href="#"><img src="images/pic.gif" width="68" height="54" />三亚</a></li>10 <li><a href="#"><img src="images/pic.gif" width="68" height="54" />三亚</a></li>11 <li><a href="#"><img src="images/pic.gif" width="68" height="54" />三亚</a></li>12 <li><a href="#"><img src="images/pic.gif" width="68" height="54" />三亚</a></li>13 <li><a href="#"><img src="images/pic.gif" width="68" height="54" />三亚</a></li>14 <li><a href="#"><img src="images/pic.gif" width="68" height="54" />三亚</a></li>15 <li><a href="#"><img src="images/pic.gif" width="68" height="54" />三亚</a></li>16 <li><a href="#"><img src="images/pic.gif" width="68" height="54" />三亚</a></li>17 <li><a href="#"><img src="images/pic.gif" width="68" height="54" />三亚</a></li>18 <li><a href="#"><img src="images/pic.gif" width="68" height="54" />三亚</a></li>19 </ul>20 </div>
Copy after login
接下来添加css样式，这里用到一个很重要的css属性：float，这个属性在第三天的教程当中已详细讲解过，这里不太赘述。先添加如下全局样式：
body { margin:0 auto; font-size:12px; font-family:Verdana; line-height:1.5;}
ul,dl,dt,dd,h1,h2,h3,h4,h5,h6,form { padding:0; margin:0;}
ul { list-style:none;}
img { border:0px;}
a { color:#05a; text-decoration:none;}
a:hover { color:#f00;}
然后让每个li元素浮动起来，这样就实现了横向排列 根据上节课的内容，把a转换为块级元素后可以设置宽高并增大点击区域
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <style type="text/css"> 6 body { margin:0 auto; font-size:12px; font-family:Verdana; line-height:1.5;} 7 ul,dl,dt,dd,h1,h2,h3,h4,h5,h6,form { padding:0; margin:0;} 8 ul { list-style:none;} 9 img { border:0px;}10 a { color:#05a; text-decoration:none;}11 a:hover { color:#f00;}12 #layout ul li { width:72px; float:left; margin:20px 0 0px 20px; display:inline; text-align:center;}13 #layout ul li a { display:block;}14 #layout ul li a img { padding:1px; border:1px solid #e1e1e1; margin-bottom:3px;}15 #layout ul li a:hover img { padding:0px; border:2px solid #f98510;}16 </style>17 </head>18 <body>19 <div id="layout">20 <ul>21 <li><a href="#"><img src="/upload/2010-08/17/pic.jpg" width="68" height="54" />三亚</a></li>22 <li><a href="#"><img src="/upload/2010-08/17/pic.jpg" width="68" height="54" />三亚</a></li>23 <li><a href="#"><img src="/upload/2010-08/17/pic.jpg" width="68" height="54" />三亚</a></li>24 <li><a href="#"><img src="/upload/2010-08/17/pic.jpg" width="68" height="54" />三亚</a></li>25 <li><a href="#"><img src="/upload/2010-08/17/pic.jpg" width="68" height="54" />三亚</a></li>26 <li><a href="#"><img src="/upload/2010-08/17/pic.jpg" width="68" height="54" />三亚</a></li>27 <li><a href="#"><img src="/upload/2010-08/17/pic.jpg" width="68" height="54" />三亚</a></li>28 <li><a href="#"><img src="/upload/2010-08/17/pic.jpg" width="68" height="54" />三亚</a></li>29 <li><a href="#"><img src="/upload/2010-08/17/pic.jpg" width="68" height="54" />三亚</a></li>30 <li><a href="#"><img src="/upload/2010-08/17/pic.jpg" width="68" height="54" />三亚</a></li>31 <li><a href="#"><img src="/upload/2010-08/17/pic.jpg" width="68" height="54" />三亚</a></li>32 <li><a href="#"><img src="/upload/2010-08/17/pic.jpg" width="68" height="54" />三亚</a></li>33 <li><a href="#"><img src="/upload/2010-08/17/pic.jpg" width="68" height="54" />三亚</a></li>34 <li><a href="#"><img src="/upload/2010-08/17/pic.jpg" width="68" height="54" />三亚</a></li>35 <li><a href="#"><img src="/upload/2010-08/17/pic.jpg" width="68" height="54" />三亚</a></li>36 <li><a href="#"><img src="/upload/2010-08/17/pic.jpg" width="68" height="54" />三亚</a></li>37 </ul>38 </div>39 </body>40 </html>Copy after login
当一个容器内元素都浮动后，它将高度将不会随着内部元素高度的增加而增加，所以造成内容元素的显示超出了容器。
要解决这个问题，需要使用以下样式
overflow:auto; zoom:1;
overflow:auto;是让高度自适应， zoom:1;是为了兼容IE6而写
由于不同的浏览器，比如IE 6,IE 7,IE8,Mozilla Firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。 这个针对不同的浏览器写不同的CSS code的过程，就叫CSS hack。这里的overflow:auto; zoom:1;就是所谓的css hack，这种形式是应用我们常用的代码来解决不兼容问题，也会用到添加一些特殊符号的形式，它本身没有意义，只是针对不同浏览器是否对它识别来实现的 IE6双倍编辑bug，这又是IE6一个著名的bug，也是我们经常遇到的。如上例，当浮动后设置左侧外边距时后，最左侧将显示为双倍边距，比如设置为20，而在IE6下却显示40px，解决这个问题只需应用一个样式，大家记住就可以了
-
display:inline;
CSS Sprites在国内很多人叫css精灵或css雪碧。它是把网页中一些背景图片整合到一张图片文件中，再利用CSS的背景图片定位到要显示的位置。这样做可以减少文件体积，减少对服务器的请求次数，提高效率。
讲CSS Sprites之前，先把背景图片给搞清楚
#menu ul li a { background:#ccc url(images/nav_bg2.gif) 0 0 no-repeat; }
css背景属性缩写后如上所示，#ccc表示背景色；url（）里是背景图片路径；接下来的两个数值参数分别是左右和上下，第一个参数表示距左多少px，第二个参数表示距上多少，这和padding的简写方式是不 一样，一定不要弄混。另外再强调一点css中值为0可以不带单位，其它数值都必须带单位（line-height值为多少倍时，zoom，z-index除外）；no-repeat表示背景图片向哪个方向重复，此时为不重复。
还需说明一点的是定位图片位置的参数是以图片的左上角为原点的，理解了这些，CSS Sprites技术就基本上懂了，就是靠背景图片定位来实现的。
定位和浮动都可以分栏布局，到底什么时候用浮动，什么时候用定位呢？
当一个元素使用绝对定位后，它的位置将依据浏览器左上角开始计算或相对于父容器（在父容器使用相对定位时）。 绝对定位使元素脱离文档流，因此不占据空间。普通文档流中元素的布局就当绝对定位的元素不存在时一样。因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素。
而浮动元素的定位还是基于正常的文档流，然后从文档流中抽出并尽可能远的移动至左侧或者右侧。文字内容会围绕在浮动元素周围。当一个元素从正常文档流中抽出后，仍然在文档流中的其他元素将忽略该元素并填补他原先的空间。它只是改变了文档流的显示，而没有脱离文档流，理解了这一点，就很容易弄明白什么时候用定位，什么时候用浮动了。
一个元素浮动或绝对定位后，它将自动转换为块级元素，而不论该元素本身是什么类型。
宽度自适应按钮
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <style type="text/css"> 6 a { display: block; float:left; margin:5px; height: 37px;line-height: 37px; text-align: center; background: url(/upload/2010-08/17/091722_btn_bg.gif) no-repeat 0px 0px; color: #d84700; font-size: 14px; font-weight: bold; text-decoration: none; padding-left:18px; } 7 a span { display:block; background: url(/upload/2010-08/17/091722_btn_bg.gif) no-repeat right 0px; padding-right:20px;} 8 a:hover { background: url(/upload/2010-08/17/091722_btn_bg.gif) no-repeat 0px -37px;} 9 a:hover span{ background: url(/upload/2010-08/17/091722_btn_bg.gif) no-repeat right -37px;}10 </style>11 </head>12 <body>13 <p><a href="#"><span>免费注册</span></a><a href="#"><span>登录</span></a><a href="#"><span>在淘宝网上开店</span></a></p>14 </body>15 </html>Copy after login
Web Front-end
