css图文教程(css div练习)

• 教程

纵向导航菜单及二级弹出菜单

垂直列表

标签的默认样式

css派生选择器

css选择器的分组

垂直二级列表

: 18px;font-family: 宋体, SimSun;">■相对定位和绝对定位

一、纵向列表

<div id=”menu”>

 <ul>

 <li>首页</li>

 <li>网页版式布局</li>

 <li>div+css教程</li>

 <li>div+css实例</li>

 <li>常用代码</li>

 <li>站长杂谈</li>

 <li>技术文档</li>

 <li>资源下载</li>

 <li>图片素材</li>

 </ul>

 </div>

<!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″ />

<style type=”text/css”>

body { font-family: Verdana; font-size: 12px; line-height: 1.5; }

a { color: #000; text-decoration: none; }

a:hover { color: #F00; }

#menu { width: 100px; border: 1px solid #CCC; }

#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; }

</style>

</head>

<body>

<div id=”menu”>

<ul>

<li><a href=”@#”>首页</a></li>

<li><a href=””>网页版式布局</a></li>

<li><a href=””>div+css教程</a></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图文教程(css div练习)

二、标签的默认样式

body默认外边距，另外本例中ul前的圆点及左侧的内边距，另h1-h6字体大小各不相同，em默认为斜体，strong表示粗体。正因为有这些默认样式，一个设计合理的页面，即使没有加载样式，也能让用户很容易阅读

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; }

三、css派生选择器

#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; }

#menu ul和#menu ul li即为派生选择器

四、css选择器的分组

可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。在下面的例子中，我们对所有的标题元素进行了分组。所有的标题元素都是绿色的，p段落、div分区、span都是20像素字体。

h1,h2,h3,h4,h5,h6 { color: green; } 

p,div,span{ font-size:20px; }

五、纵向二级列表

css图文教程(css div练习)

六、相对定位和绝对定位

■定位标签：position

■包含属性：relative（相对） absolute（绝对）

 

1.position:relative; 如果对一个元素进行相对定位，首先它将出现在它所在的位置上。然后通过设置垂直或水平位置，让这个元素”相对于”它的原始起点进行移动。（再一点，相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其他框）

 

2.position:absolute; 表示绝对定位，位置将依据浏览器左上角开始计算。绝对定位使元素脱离文档流，因此不占据空间。普通文档流中元素的布局就像绝对定位的元素不存在时一样。（因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素并可以通过z-index来控制它层级次序。z-index的值越高，它显示的越在上层。）

 

3.父容器使用相对定位，子元素使用绝对定位后，这样子元素的位置不再相对于浏览器左上角，而是相对于父容器左上角

 

4.相对定位和绝对定位需要配合top、right、bottom、left使用来定位具体位置，这四个属性只有在该元素使用定位后才生效，其它情况下无效。另外这四个属性同时只能使用相邻的两个，不能即使用上又使用下，或即使用左，又使用右

超链接伪类

■链接的四种样式

■将链接转换为块状

■用css制作按钮

■首字下沉

一、超链接的四种样式

a:link {color: #FF0000} /* 未访问的链接 */

 a:visited {color: #00FF00} /* 已访问的链接 */

 a:hover {color: #FF00FF} /* 鼠标移动到链接上 */

 a:active {color: #0000FF} /* 选定的链接 */

二、将链接转换为块级元素

a { display: block; height: 30px; width: 100px; line-height: 30px; text-align: center; background: #CCC; }

三、用css制作按钮

<!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″ />

<style type=”text/css”>

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; }

a:hover { background: url(/upload/2010-08/14/014304_btn_bg_hover.gif) no-repeat 0px 0px;}

</style>

</head>

<body>

<p><a href=””>免费注册</a></p>

</body>

</html>

css图文教程(css div练习)

四、首字下沉

<!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″ />

<style type=”text/css”>

p { width: 400px; line-height: 1.5; font-size: 14px; }

p:first-letter { font-family: “microsoft yahei”; font-size: 40px; float: left; padding-right: 10px; line-height: 1; }

</style>

</head>

<body>

<p>标准之路[www.aa25.cn]提供DIV+CSS教程,DIV+CSS视频教程,web2.0标准,DIV+CSS布局入门教程,网页布局实例,css布局实例,div+css模板,div+css实例解析,网站重构，网页代码,水晶图标,幻灯广告图片.教程适合初学者循序渐进学习!</p>

</body>

</html>

html列表

■ul无序和ol有序列表

■改变项目符号样式或用图片定义项目符号

■横向图文列表

■浮动后父容器高度自适应

■IE6的双倍边距bug

一、ul无序和ol有序列表

<div id=”layout”>

 <ul>

<li><a title=”1″ href=”” target=”_blank”>1</a></li>

<li><a title=”2″ href=”” target=”_blank”>2</a></li>

<li><a title=”3″ href=”” target=”_blank”>3</a></li>

<li><a title=”4″ href=”” target=”_blank”>4</a></li>

<li><a title=”5″ href=”” target=”_blank”>5</a></li>

 </ul>

 </div>

css图文教程(css div练习)

<!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″ />

<style type=”text/css”>

#layout ul { list-style: none; }

#layout ul li { background: url(/upload/2010-08/17/icon.gif) no-repeat 0px 4px; padding-left: 20px; }

</style>

</head>

<body>

<div id=”layout”>

<ul>

<li><a title=”1″ href=”” target=”_blank”>1</a></li>

<li><a title=”2″ href=”” target=”_blank”>2</a></li>

<li><a title=”3″ href=”” target=”_blank”>3</a></li>

<li><a title=”4″ href=”” target=”_blank”>4</a></li>

<li><a title=”5″ href=”” target=”_blank”>5</a></li>

</ul>

</div>

</body>

</html>

css图文教程(css div练习)

四、 浮动后父容器高度自适应

#layout { width:400px; border:2px solid #ccc; padding:2px;}

没有被内容元素给撑高，要解决这个问题，需要使用以下样式

overflow:auto;是让高度自适应， zoom:1;是为了兼容IE6而写

五、IE6的双倍边距bug

当浮动后设置左侧外边距时后，最左侧将显示为双倍边距，比如设置为20，而在IE6下却显示40px，解决这个问题只需应用一个样式 

display:inline;

其他相关内容（关注本公众号，带您详细了解）

网站DIV+CSS教程培训教程X(HTMLCSS基础知识)一

网站DIV+CSS教程培训教程X(HTMLCSS基础知识)二

网站DIV+CSS教程培训教程X(HTMLCSS基础知识)三

内容来源网络，如有侵权，联系删除，本文地址：https://www.230890.com/zhan/169809.html

赞 (0)

相关推荐