你的位置:首页 > 网页设计

[网页设计]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、列表属性。

以下实例:

——————————————html————————————————————--

<!DOCTYPE HTML><html lang="en"><head>  <meta charset="UTF-8">  <title>定义栏目区块</title>  <link rel="stylesheet" href="./style.css" /></head><body><div id="wrapper">  <div class="title">    <h3>      <a>标题</a>    </h3>  </div>  <div class="list">    <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 class="one">    <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;}

————————————效果图————————————————

做的都是些最基础的东西,望各位提些宝贵意见!谢谢了!