CSS では、任意の要素をフローティングにすることができます。フローティング要素は、要素の種類に関係なく、ブロックレベルのボックスを生成します。また、幅を指定する必要があります。そうでない場合、フローティングに使用できるスペースがフローティング要素よりも小さい場合は、さらに幅が狭くなります。要素を配置するのに十分なスペースが確保されるまで、次の行に続きます。 注意深い友人は、上の例の #main div もここでは定義されていないことを発見しましたが、余分なテキストは画像の下 (#side) に設定されていますか?左: #side? の本文までは実行されません。これを考えることができるなら、あなたは確かに賢すぎます。 CSS スタイルシートに次の行を追加します
#main { margin-left:202px;}
3 ピクセルのバグは、IE6 の有名なバグです。浮動要素が非浮動要素に隣接すると、この 3 ピクセルのバグが発生します。この問題を解決するには、#side に _margin-right:-3px を追加してください。このスタイルが IE6 専用に有効になるように、必ず先頭にアンダースコアを追加してください。 IE7やFFでも正常に表示されます。 # は仮想リンクであり、どのページも指しません。 デフォルトのラベルスタイルを削除します body, ul, li, h1, h2, h3, h4, h5, h6, p, form, dl, dt, dd { margin: 0px; font-size: 12px; -weight:normal; }
ul { list-style: none; }
img { border-style: none; } #menu ul と #menu ul li は、前の #menu を削除すると、 ul タグが再定義され、再定義された属性がグローバルに適用されます。#menu を先頭に追加すると、そのスタイルの設定は #menu の下の ul に対してのみ有効になります。これはプログラミングにおけるローカル変数に似ており、ul を直接定義することはグローバル変数と同等です。 #menu ul li は、メニュー要素内の ul の下の li として定義されます。派生セレクターを使用すると、スタイルを定義するために各 li のスタイル名を定義する必要がなくなり、派生セレクターを使用してスタイルを選択するだけで済みます。これで効率が大幅に向上します。 セレクターをグループ化して、グループ化されたセレクターが同じ宣言を共有するようにすることができます。グループ化する必要があるセレクターを区切るにはカンマを使用します。以下の例では、すべての見出し要素をグループ化しています。すべてのタイトル要素は緑色で、p 段落、div パーティション、およびスパンはすべて 20 ピクセルのフォントです。
h1,h2,h3,h4,h5,h6 { color: green;
}
p,div,span{
}
垂直セカンダリリスト <!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>ログイン後にコピー
次へCSS スタイル シートで、最初に #menu ul li を変更し、position: 相対値を追加します。display: none を定義した後、デフォルトで非表示になります。#menu ul li ul の位置: left: 0px; ; とすると、親要素 li に対して上が 0、左が 100 の位置に表示されます。最後に、マウスが上に移動したときに下位レベルのメニューを表示するスタイルを設定します。このスタイルは、メニューの下の ul とメニューの下の li の ID を定義することを意味します。マウスがその上に移動すると、ul のスタイルが display:block に設定され、マウスがその上に移動したときにこのコンテンツが表示されることを指します。これにより、今日必要な効果も実現されます。
相対配置と絶対配置: 1.position:relative; 要素が相対配置されている場合、最初にその位置に表示されます。次に、垂直または水平位置を設定して、元の開始点を「基準にして」要素を移動します。 (もう 1 点、相対的に配置された場合、要素が移動されるかどうかに関係なく、要素は元のスペースを占有します。したがって、要素を移動すると、要素は他のボックスを覆います) 2.position:absolute; は絶対配置を意味します。位置はブラウザの左上隅に基づいて計算が開始されます。 絶対配置では要素をドキュメント フローから取り出すため、スペースを占有しません。通常のドキュメント フロー内の要素は、絶対配置された要素が存在しないかのようにレイアウトされます。 (絶対に配置されたボックスはドキュメント フローとは関係がないため、ページ上の他の要素をカバーでき、その階層順序は Z インデックスによって制御できます。Z インデックスの値が大きいほど、より高い位置に表示されます。)
3 . 親コンテナーが相対配置を使用し、子要素が絶対配置を使用すると、子要素の位置はブラウザーの左上隅を基準とするのではなく、親コンテナーの左上隅を基準とするようになります
4。相対位置と絶対位置は、上、右、下、左と調整する必要があります。これらの 4 つの属性は、要素が配置された後にのみ有効になり、その他の場合は無効になります。なお、この4つの属性は同時に使用できるのは隣接する2つだけです。上下を同時に使用したり、左右を同時に使用したりすることはできません。
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>ログイン後にコピー
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>ログイン後にコピー
改变项目符号样式或用图片定义项目符号:项目符号还可以以图像形式，如下图： 这种形式对图像控制不是很灵活，所以实际应用当中一般用背景图片来实现，在上例基础上将项目符号设置为 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>ログイン後にコピー
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>
ログイン後にコピー
接下来添加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>ログイン後にコピー
当一个容器内元素都浮动后，它将高度将不会随着内部元素高度的增加而增加，所以造成内容元素的显示超出了容器。
要解决这个问题，需要使用以下样式
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>ログイン後にコピー
ウェブフロントエンド
7480
15
今すぐ Toutiao の記事を公開してお金を稼ぐにはどうすればよいですか?今すぐ Toutiao で記事を公開して収入を増やす方法!
Mar 15, 2024 pm 04:13 PM
PHP 関数ライブラリ設計の原則と標準
Jun 16, 2023 am 11:37 AM
見逃せない本質: Go 言語オープンソース プロジェクトのトップ 5 の紹介
Jan 30, 2024 am 09:28 AM
HTML5で記事を追加するにはどうすればよいですか?
Sep 12, 2023 am 11:37 AM
Vitalik の新しい記事の解釈: BLOB 領域が効率的に使用されていない Rollup はなぜ開発困難に陥るのか?
Apr 01, 2024 pm 08:16 PM
WeChatで記事と録画を同時に送信する詳細な方法
Mar 26, 2024 am 09:16 AM
PHP 関数を分類するためにどのような基準を使用できますか?
Apr 19, 2024 am 09:30 AM
Dreamweaver CMS 記事のコンテンツが消えた場合はどうすればよいですか?素早い解決策
Mar 29, 2024 am 11:36 AM
