Heim > Artikel > Web-Frontend > Div+Css的初步运用_html/css_WEB-ITnose
Div+Css的初步运用_html/css_WEB-ITnose
- PHP中文网Original
- 2016-06-24 11:40:11860Durchsuche
Div+Css的初步运用
采用DIV+CSS模式的网站具有以下优势：1、表现和内容相分离 2、代码简洁，提高页面浏览速度 3、易于维护和改版 4、提高搜索引擎对网页的索引效率。
html文件中放置CSS有三种类型：内联、内嵌、外联三种。
感觉Css中必须要清楚它的六中选择符：1、HTML选择符 2、类选择符 3、ID选择符 4、伪元素选择符 5、关联选择符 6、组合选择符。
Css中包涵六大类属性：1、字体属性 2、文本属性 3、背景属性 4、边框属性 5、鼠标属性 6、列表属性。
以下实例：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>定义栏目区块</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div id="wrapper">
<div>
<h3>
<a>标题</a>
</h3>
</div>
<div>
<ul>
<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>
<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>
<li><a href="">11个大光头</a></li>
<li><a href="">12个大光头</a></li>
</ul>
</div>
<div>
<a href=""></a>
</div>
</div>
</body>
</html>css
body{
text-align : center;
font : 12px Arial,宋体；
}
#wrapper{
margin : 0 auto;
padding : 0px;
width : 300px;
text-align : left;
}
.title{
font : left;
width : 100%;
height : 24px;
background : url(./images/titbg.gif);
}
.title h3{
margin : 0px;
padding : 0px;
line-height : 24px;
font-size : 12px;
text-indent : 30px;
background : url(./images/tittb.gif) no-repeat 3% 50%;
}
.list{
width : 298px !important;
width : 300px;
float : left;
border : 1px solid #d8d8d8;
border-top : 0px;
}
.list ul { float : left;
list-style-type : none;
margin :0px;
padding : 0px;
}
.list ul li { float : left;
line-height : 20px;
margin : 0px 5px;
width : 45%;
background : url(./images/sidebottom.gif) repeat-x 50% bottom;
}
.list ul li a{
padding-left : 12px;
background : url(./images/bullet.gif) no-repeat 0 50%}
.one{
height : 5px;
width : 100%; float : left;
overflow : hidden
}
a:link, a:visited{
text-decoration : none;
color : green;
}
a:hover{
position : relative;
top : 1px;
left : 1px;
text-decoration : underline;
color : black;
}效果图
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：网页设计的标准尺寸_html/css_WEB-ITnoseNächster Artikel：基于CSS3动态背景登录框代码_html/css_WEB-ITnose