CSS

来源：互联网发布：js children用法编辑：程序博客网时间：2024/05/21 09:31

这里写图片描述 什么是CSS
称之为层叠样式单
它是一种专门描述结构文档的表现方式的文档，主要用于网页风格设计，包括字体大小，颜色，以及元素的精确定位等
在传统的web网页设计里，使用CSS能让单调的HTML网页更富想象力
CSS的引入方式
CSS可以控制HTML文档的显示，但在控制文档显示之前，首先应在需要显示的HTML文档中引入CSS样式单，四种引入方式：
  1. 使用内联样式：这种方式将样式内联定义到具体的HTML元素上，通常用于精确控制一个HTML元素的表现。
  2. 使用内部样式定义：这种方式是通过在HTML文档头定义样式单部分来实现，在这种方式上，每批CSS样式只控制一份HTML文档
  3.链接外部样式文件：这种方式将样式文件彻底与HTML文档分离，样式文件需要额外引入。在这种方式下，一份样式可控制多份文档
  4. 导入外部样式文件：这种方式与第三种方式类似，只是使用@import来引入外部样式文件

1. 使用内联样式

*是所有样式中最为直接的一种，它直接对HTML标签使用style属性

<p style="color:#FF0000; font-size:20px; text-decoration:underline;"> Hello world </p>

color 字体颜色 font-size 字体大小 text-decoration 字体样式使用内联样式与html文件未分离，效率低

2. 使用内部样式定义

*是将CSS写在

<html> <head>  <title> New Document </title>  <style type="text/css">  <!--     p{        color:#FF0000;        text-decoration:underline;        font-weight:bold;        font-size:25px     }  -->  </style> </head> <body>  <p> Hello world </p> </body></html>

结构与表现形式进行了分离

3.链接外部样式文件

*使用频率最高，让结构与表现分离语法：

<link type="text/css" rel="stylesheet" href="外部样式文件">

实例：HTML文件：

<html> <head>  <title> New Document </title>  <link type="text/css" rel="stylesheet" href="1.css"> </head> <body>  <p> Hello world </p> </body></html>

CSS文件：

p{color:#FF0000;text-decoration:underline;font-weight:bold;font-size:25px}

4. 导入外部样式文件

*与link方式功能类似，就是语法不同，在

<html> <head>  <title> New Document </title>  <style type="text/css">  <!--  @import url(1.css);  -->  </style> </head> <body>  <p> Hello world </p> </body></html>

CSS文件

<html> <head>  <title> New Document </title>  <style type="text/css">  <!--  @import url(1.css);  -->  </style> </head> <body>  <p> Hello world </p> </body></html>

**各种方式的优先级**内联 > 内部 > import > link**CSS选择器**—–CSS样式的语法总遵循如下格式：

Selector{    property:value1;    property:value2;}

Selector(选择器):选择器决定该样式定义对哪些元素起作用{property:value1; property:value2;}（属性定义）：属性定义部分决定这些样式起怎样的作用（字体，颜色，布局等）

1.标记选择器（元素选择器）

E{......}    <!--其中E代表有效的HTML元素，已经设计好的标签，如P,div标签等等-->

2.类选择器

[E](可省略).classvalue(类名){....}

实例：

<html> <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <title> New Document </title>  <style type="text/css">     .one{color:red; font-size:18px}; <!--谁都可以引用-->     div.two{color:green; font-size:30px}; <!--只有div标签引用class two时才能起作用-->      </style> </head> <body>  <p class="one"> Hello world </p>  <p> Hello world </p>  <p class="two"> Hello world </p>  <!--不是div标签，所以引用无效，字体未改变-->  <div class="two">hello world</div>  <div class="one"> Hello world </div> </body></html>

同时运用多个类选择器：

<html> <head>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   <title> New Document </title>   <style type="text/css">     .top{         background-color:gray;      }       .one{         color:red;          font-size:22px;     }   </style> </head> <body>  <p> Hello world </p>  <p class="one"> Hello world </p>  <p class="top"> Hello world </p>    <p class="top one"> Hello world </p> <!--同时使用top和one--> </body></html>

![这里写图片描述](http://img.blog.csdn.net/20170809111752226?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvTmF1eDE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)

3.ID选择器

[E]#idvalue(id选择器名){......}

实例：

<html> <head>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   <title> New Document </title>   <style type="text/css">     div#top{         background-color:gray;      }       #two{         font-weight:bold;     }     #one{         color:red;          font-size:22px;     }   </style> </head> <body>  <p> Hello world </p>  <p id="one"> Hello world </p>  <p id="two"> Hello world </p>  <p id="two one"> Hello world </p>  <div id="top">hello world</div> </body></html>

![这里写图片描述](http://img.blog.csdn.net/20170809155406705?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvTmF1eDE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)可以发现id选择器不能引用多个id选择器，而类选择器可以一次引用多个类选择器

4.选择器组合

Selector1.Selector2.Selector3{.......}  <!--Selector1等都是有效的选择器-->

实例：

<html> <head>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   <title> New Document </title>   <style type="text/css">     h1,h2,h3,p{               color:blue;      }       h2.special,.special,#one{           color:red;     }  </style> </head> <body>  <p> Hello world </p>  <p class="special"> Hello world </p>  <h2> Hello world </h2>  <h2 class="special"> Hello world </h2>  <p id="one"> Hello world </p> </body></html>

![这里写图片描述](http://img.blog.csdn.net/20170809160628837?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvTmF1eDE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)

5.选择器嵌套

Selector1 Selector2 {.......}  <!--选择器之间是空格分割而不是逗号-->

实例：

<html> <head>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   <title> New Document </title>   <style type="text/css">       p b{               color:red;         text-decoration:underline;             }    </style> </head> <body>  <p>嵌套使<b>用<b>CSS</b></b>标记的方法</p>  嵌套之外的<b>标记</b>不生效 </body></html>

![这里写图片描述](http://img.blog.csdn.net/20170809162339662?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvTmF1eDE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)只有在p标签内的b标签才会改变样式## CSS字体和文本相关属性 ##**控制字体相关属性：**![这里写图片描述](http://img.blog.csdn.net/20170809162456805?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvTmF1eDE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)**控制文本相关属性：**![这里写图片描述](http://img.blog.csdn.net/20170809162550050?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvTmF1eDE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)注意： .one b{……}使用.one选择器的标签里面的b标签，样式是…..## CSS边框和背景相关属性 ##**边框的属性**在html中有很多元素都有边框的属性，比如img元素，块级标签元素等。![这里写图片描述](http://img.blog.csdn.net/20170809164545196?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvTmF1eDE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)实例：

<html> <head>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   <title> New Document </title>   <style>       img{               border-left-style:dotted;         border-left-color:#FF990;         border-left-width:5px;         border-right-style:dotted;         border-right-color:#33CC33;         border-right-width:20px;         border-top-style:solid;         border-top-color:red;         border-top-width:10px;         border-bottom-style:groove;         border-bottom-color:green;         border-bottom-width:15px;       }    </style> </head> <body>   <img src="timg.jpg"> </body></html>

![这里写图片描述](http://img.blog.csdn.net/20170809165345720?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvTmF1eDE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)简写：

img{   border-right:5px double red;   border-left:8px solid green;}

**背景的属性**![这里写图片描述](http://img.blog.csdn.net/20170809165948969?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvTmF1eDE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)实例：

<html> <head>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   <title> New Document </title>   <style>       body{               background-image:url(timg.jpg);         background-repeat:repeat;       }       p{color:white;}  </style> </head> <body>   <p>说唱会馆是国内风格规划最为明确，最超前的厂牌，最早开始   紧跟潮流大规模做TRAP音乐的，从14年底开始到16年国内厂牌大规模Trap，在国内圈子，   会馆基本是领先一年的理念。包括在youtube注册专门的频道，注重MV在国外圈子的发布，   和韩国，美国等等其他国家rapper合作，这一点都是领先国内厂牌的。至少从规划来说，   说唱会馆是最为清晰的一个。国内实力前5的rapper，说唱会馆占了两个（谢帝，马思唯）   以及其他都是全国顶尖实力的rapper.当然这是个人看法。和大部分人的看法不同，其实说   唱会馆成员，除了谢帝普通话一般般之外，其他人的普通话rap其实也是一样拿手，只是因   为四川话确实在rap方面有得天独厚的优势，加上会馆理念坚持方言，大家才不怎么出普通话歌曲而已。   自2012年起每年说唱会馆会举办数场专场演出，取得了良好的市场反应，于2015年10月1日   举办中国内地Hip Hop音乐首次万人演唱会（谢帝之"好耍"演唱会   </p> </body></html>

![这里写图片描述](http://img.blog.csdn.net/20170809171148782?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvTmF1eDE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)同样我们可以把这些背景样式属性组合起来写background:url(2.jpg) no-repeat 200px 25px## CSS列表和表格相关属性 ##**列表的属性：**![这里写图片描述](http://img.blog.csdn.net/20170809172041657?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvTmF1eDE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)**表格的属性：**![这里写图片描述](http://img.blog.csdn.net/20170809172306138?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvTmF1eDE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)## CSS常用伪类别属性 ##对

<style>   a:link{     color:#005799;     text-decoration:none;   }   a:visited{     color:#000000;     text-decoration:none;   }      a:hover{     color:#FFFF00;     text-decoration:ubderline;   }      a:active{     color:#FF0000;     text-decoration:underline;   }</style>

## CSS定位和DIV布局 ##

一.盒子模型

我们可以把页面中的元素都可以看做一个盒子，占据着一定的页面空间，这些占据的空间往往比单纯的内容要大，换句话说，我们可以调整盒子的边框和距离的参数来调节盒子的位置
这里写图片描述

可以看出，一个盒子的宽度（或高度）是由content+padding+border+margin,并且对于任何一个盒子，都可以分别设定4条边各自的border,padding,margin。因此我们可以利用好盒子的属性，就能很好的实现各种各样的排版
border(边框)：
border属性主要有3个，分别为color,width,style（实现，虚线等）通常在设置border时常常将三个属性进行很好的配合
实例：

<html> <head>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   <title> New Document </title>   <style type="text/css">      div{        border-width:6px;        border-color:red;        margin:20px;        padding:5px;        background-color:gray;      }  </style> </head> <body>   <div style="border-style:dashed">hello world</div>   <div style="border-style:dotted">hello world</div>   <div style="border-style:double">hello world</div>   <div style="border-style:solid">hello world</div> </body></html>

dashed: 点划线
dotted: 点
double: 双划线
solid: 实心线
这里写图片描述
padding:
用于控制content(内容)和border（边框）之间的距离
实例：

<html> <head>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />     <title> New Document </title>   <style type="text/css">     .outside{        padding:10px 30px 50px 200px;            border:1px solid #000000;                   background-color:#fffcd3;            }     .inside{        background-color:#66b2ff;                   border:1px solid #005dbc;                   width:100%;        line-height:40px;        text-align:center;        font-family:Arial;     }  </style> </head> <body>   <div class="outside">        <div class="inside">hello world</div>   </div> </body></html>

这里写图片描述
margin:
元素与元素之间的距离
实例：

<html> <head>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   <title> New Document </title>   <style type="text/css">      span{        background-color:#a2d2ff;        text-align:center;        font-family:Arial,Helvetica,sans-serif;        font-size:12px;        padding:10px;      }      span.left{        margin-right:30px;        background-color:#a9d6ff;      }      span.right{        margin-left:40px;        background-color:#eeb0b0;      }  </style> </head> <body>   <span class="left">hello</span><span class="right">world</span> </body></html>

这里写图片描述
hello和world之间的距离是margin-left+margin-right=70px
但是两个块级元素（div）之间的距离不再是margin-top与margin-bottom的和，而是两者之中的较大者
元素定义
网页中各种元素都必须有自己的位置，从而搭建出整个页面的结构，我们介绍使用CSS的float,position和index属性来进行块元素的定位
float的定位是CSS排版中最重要的手段，属性float的值很简单，可以设置为left,right或者默认值none,当设置了元素向左或向右浮动时，元素会向其父元素的左侧或右侧靠紧
float标签:
1.不用float标签

<html> <head>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   <title> New Document </title>   <style type="text/css">      body{        margin:15px;        font-family:Arial;        font-size:12px;      }      .father{        background-color:#fffea6;        border:1px solid #111111;        padding:25px;      }      .son1{        padding:10px;        margin:5px;        background-color:#70baff;        border:1px dashed #111111;      }      .son2{        padding:5px;        margin:0px;        background-color:#ffd270;        border:1px dashed #111111;      }   </style> </head> <body>   <div class="father">       <div class="son1">float1</div>       <div class="son2">float2</div>   </div> </body></html>

这里写图片描述
padding和margin的区别：
在CSS中margin是指从自身边框到另一个容器边框之间的距离，就是容器外距离。在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离，就是容器内距离。
2.给son1中加入float:left
当加入这句话时，son1会尽可能向父容器的左边框靠拢，但此时son1并不会和父边框完全闭合，因为father设置了padding:25px,而son1设置了margin:5px,因此会相差30px
当一个子元素加入float后，这个子元素就不在属于父元素了
这里写图片描述
当son1设置了float以后，son1的宽度仅仅是它的内容本身加上自己的padding，对于父容器而言它已经不属于父块了，所以在其下面的son2会上来，它内部的内容绕在son1周围，并且保持着son1所设置的margin距离。
实例2：

<html> <head>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   <title> New Document </title>   <style type="text/css">     body{        margin:5px;        font-family:Arial;        font-size:13px;      }      h3{        background-color:#a5d1ff;        border:1px dotted #222222;      }      .block1{        padding-left:10px;        margin-right:10px;        float:left;      }  </style> </head> <body>   <div class="block1"><img src="1timg.jpg" border="0"></div>   <div>rap是一个黑人俚语中的词语，相当于“谈话”（talking），中文意思为说唱。   即有节奏地说话的特殊唱歌形式。发源于纽约贫困黑人聚居区。它以在机械的节奏声的背景下，   快速地诉说一连串押韵的诗句为特征。这种形式来源之一是过去电台节目主持人在介绍唱片时   所用的一种快速的、押韵的行话性的语言。斥责或说唱音乐的节奏，布鲁斯音乐风格包括vocals   等巧妙得和音乐融合。陪同一般包括电子鼓敲打与样品（数字式地被隔绝的酣然的叮咬) 被结合   从其它音乐录音。1979 年第一斥责纪录被创造了并且风格上升了到突起在20年代中期。虽然期限   斥责互换性经常被使用与配合敲打并以节律唱诵的音乐，后者期限包含亚文化群，说唱音乐是简   单地一份。期限配合敲打并以节律唱诵的音乐rap</div>   <h3>说唱起源</h3>   <div>从最早期的词组的当中一个获得被使用在斥责，和可能被发现在精液录音"交谈者的欢欣"    (1979) 由Sugarhill 帮会。除说唱音乐之外，配合敲打并以节律唱诵的音乐亚文化群并且包括   其它形式表示，包括断裂跳舞和街道画艺术并且一个独特的俗话词汇量和流行观念。</div> </body></html>

这里写图片描述
本来图片在块级标签中，应当占据一整行，但此时div设置了float：left，所以图片尽量向左边靠，文字内容就浮上来。
问题：设置了块1向左浮动，便产生了图文混排的效果，但是作为内容部分第二段的标题，以达到突显的目的，不想参与图文混排，想单独起一行，如何处理？
在CSS中可以通过设置块元素的clear属性来清除float的影响，主要可以设置一下三个值left,right,both
因此在h3中加入clear：left；

position定位：

*
position和float一样，也是css排版中非常重要的概念。position从字面意思上看就是制定块的位置。即块相对于其父块的位置和相对它自身应该在的位置
1.设置position：absolute

<html> <head>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   <title> New Document </title>   <style type="text/css">     #father{        background-color:black;        border:1px doshed #000000;        width:100%;        height:100%;     }     body{        margin:5px;        font-family:Arial;        font-size:13px;      }      #block{        background-color:#fff0ac;        border:1px doshed #000000;        padding:10px;        position:absolute;        left:20px;        top:40px;      }  </style> </head> <body>   <div id="father">     <div id="block">absolute</div>   </div> </body></html>

一个子元素设置position：absolute后，它就脱离了父元素。
其左边框设置的距离是相对页面body的距离，而不是父块的距离
2.设置position：relative
这时子块是相对于自身在父块的原先位置来进行定位的
将子块position设置为relative时，子块仍属于父块，只是相对于自己在父块中的原先位置有了移动的变化
3.z-index属性
用于调整定位时重叠块的上下位置，当块设置了position属性时，该值便可设置各块之间的重叠高低关系，默认值为0.值越大时，块就在越上面

CSS实战：

CSS的排版是一种流行的排版观念。它将页面首先在整体上进行<div>标记分块，然后对各个块进行css定位，最后再这个快中添加相应的内容。
设计网站思路：
1. 对页面进行整体分析
2. 确定整个页面主要分为几大块
3. 使用DIV标签进行结构化
4. 通过CSS来美化定位每个模块
写一个旅游网站：
1. 先将页面分块
HTML文件：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   <meta name="Keywords" content="新疆，美丽的地方">   <meta name="Description" content="新疆是一个美丽的地方，让人神往的地方，每年都有很多游人来此游玩">   <title>新疆旅游网</title>   <link href="css.css" rel="stylesheet" type="text/css"> </head> <body>   <!--整体外层容器-->   <div id="container">      <!--banner条-->      <div id="banner">          <img src="a2.jpg">      </div>      <!--全局导航条-->      <div id="globllink">      </div>      <!--左侧栏-->      <div id="left">      </div>      <!--中间内容栏-->      <div id="middle">      </div>      <!--右侧栏-->      <div id="right">      </div>      <!--脚注-->      <div id="footer">      </div> </body></html>

CSS文件：

body{    background:#2286c6;    margin:0px;    padding:0px;    font-size:12px;    font-family:Arial;}#container{    margin:0px auto;    width:780px;    height:600px;    text-aligin:left;    background:white;}#banner{    margin:0px;    padding:0px;    background:yellow;    height:150px;    width:100%}#globllink{    margin:0px;    padding:0px;    background:black;    height:50px;    width:100%}#left{    width:200px;    height:370px;    background:pink;    margin:0px;    padding:0px 0px 5px 0px;    float:left;}#middle{    width:400px;    height:370px;    background:orange;    margin:0px 2px;    padding:5px 0px 5px 0px;    color:white;    float:left;}#right{    width:176px;    height:370px;    background:purple;    margin:0px ;    padding:0px 0px 5px 0px;    float:left;}#footer{    width:100%;    height:30px;    background:white;    margin:0px ;    padding:1px 0px;    clear:both;}

这里写图片描述
2. 优化每个div模块
<1 全局导航条
html文件

<div id="globllink">         <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>         </ul>      </div>

CSS文件

#globllink{    margin:0px;    padding:0px;    background:black; }#globllink ul{                /*globllink里的ul样式*/    list-style-type:none;    /*取消list前面的小圆点*/    margin:0px;    padding:0px;}#globllink ul li{                /*globllink里的ul样式*/    float:left;    text-align:center;    width:95px;}#globllink ul li a{                    display:block;     /*本来a为行级标签，此设置将a改为块级标签*/    padding:9px 6px 11px 6px;    margin:opx;    background:url("button2.jpg") no-repeat;}#globllink a:link,#globllink a:visited{                    color:#004a87;    text-decoration:underline;}#globllink a:hover{                    color:#004a87;    text-decoration:none;    background:url("button3.jpg") no-repeat;}

这里写图片描述
<2 左侧栏效果
左侧栏主要分为两个模块，天气查询和今日推荐，分块可以使用div标签
html文件

 <!--左侧栏-->      <div id="left">         <div id="weather">            <h3><span>天气查询</span></h3>            <ul>            <li>乌鲁木齐&nbsp;&nbsp;&nbsp;雷阵雨 20℃-31℃</li>            <li>吐鲁番&nbsp;&nbsp;&nbsp;多云转晴 20℃-28℃</li>            <li>齐齐哈尔&nbsp;&nbsp;&nbsp;晴     25℃-32℃</li>            <li>鲁尔勒&nbsp;&nbsp;&nbsp;阵雨转阴 21℃-31℃</li>            <li>克拉玛依&nbsp;&nbsp;&nbsp;雷阵雨 26℃-30℃</li>            </ul>         </div>         <div id="today">            <h3><span>今日推荐</span></h3>            <ul>            <li><a href="#"><img src="a7.jpg"></a></li>            <li><a href="#">喀纳斯河</a></li>            <li><a href="#"><img src="a8.jpg"></a></li>            <li><a href="#">布尔津</a></li>            <li><a href="#"><img src="a9.jpg"></a></li>            <li><a href="#">天山之路</a></li>            </ul>          </div>      </div>

CSS文件

#left{    width:200px;    background:white;    margin:0px;    padding:0px 0px 0px 0px;    color:#d8ecff;    float:left;}#weather{    background:url("a6.jpg") no-repeat;    margin:0px 2px;    background-color:#035e8d;}#weather h3{    font-size:12px;    color:white;    padding:10px 0px 0px 74px;}#weather ul{    margin:8px 5px 0px 5px;    color:white;    padding:10px 0px 8px 5px;    list-style-type:none;}#today h3{    color:#003973;    font-size:12px;    padding:4px 0px 2px 15px;    margin:0px 0px 5px 0px;    background:#98d8f9;}#today{    background:#046ca2;    margin:0px 2px;    padding:0px 0px 10px 0px;}#today ul{    list-style-type:none;    padding:0px;    margin:-5px 0px 0px 0px;}#today ul li{    text-align:center;}#today ul li img{    margin:8px 0px 0px 0px;}#today ul li a:link,#today ul li a:visited{    color:#d8ecff;    text-decoration:none;}#today ul li a:hover{    color:#ffff00;    text-decoration:underline;}

这里写图片描述
<3 实现内容栏效果
html文件

  <!--中间内容栏-->      <div id="middle">         <div id="ghost"><a href="#" title="魔鬼城探秘"><img src="a10.jpg" border="0"></a></div>         <div id="beauty">            <h3><span>美景寻踪</span></h3>            <ul>               <li><a href="#"><img src="a11.jpg"></a></li>               <li><a href="#"><img src="b2.jpg"></a></li>               <li><a href="#"><img src="b3.jpg"></a></li>               <li><a href="#"><img src="b4.jpg"></a></li>            </ul>        </div>        <div id="route">           <h3><span>线路精选</span></h3>           <ul>              <li><a href="#">吐鲁番-库尔勒-库车-塔中-和田-喀什</a></li>              <li><a href="#">乌鲁木齐-天池-克拉玛依-乌伦古湖-喀纳斯</a></li>              <li><a href="#">乌鲁木齐-奎屯-乔尔玛-那拉提-巴音布鲁克</a></li>              <li><a href="#">乌鲁木齐-五彩城-将军戈壁-吉木萨尔</a></li>           </ul>        </div>      </div>

CSS文件

#middle{    width:400px;    margin:0px 2px;    padding:5px 0px 5px 0px;    background:white;    color:white;    float:left;}#middle div{    margin:0px 5px;}#middle h3{    margin:0px;    padding:0px;    height:41px;}#middle h3 span{    display:none;  /*去掉文字换为背景图片*/}#beauty{    margin:15px 0px 0px 0px;    padding:0px;}#beauty h3{    background:url("b1.jpg") no-repeat;}#beauty ul,#route ul{    list-style-type:none;    margin:3px 1px 0px 1px;    padding:0px;}#beauty ul li{    float:left;    width:92px;    text-align:center;    margin:0px 2px 0px 2px;}#beauty ul li img{    border:1px solid #4ab0ff;}#route{    clear:both;    margin:0px;    padding:5px 0px 15px 0px;}#route h3{    background:url("c1.jpg") no-repeat;}#route ul li{    padding:3px 0px 0px 30px;}#route ul li a:link,#route ul li a:visited{    text-decoration:none;    color:#004e8a;}#route ul li a:hover{    text-decoration:underline;    color:#000000;}

这里写图片描述
<4 右侧栏
HTML文件

 <!--右侧栏-->      <div id="right">         <div id="map">            <h3><span>新疆风光</span></h3>            <p><a href="#" title="点击查看大图"><img src="c2.jpg"></a></p>            <p><a href="#" title="点击查看大图"><img src="c3.jpg"></a></p>         </div>         <div id="food">         <h3><span>小吃推荐</span></h3>         <ul>            <li><a href="#">17号抓饭</a></li>            <li><a href="#">大盘鸡</a></li>            <li><a href="#">五一夜市</a></li>            <li><a href="#">水果</a></li>         </ul>         </div>         <div id="life">         <h3><span>宾馆酒店</span></h3>         <ul>            <li><a href="#">美丽华大饭店</a></li>            <li><a href="#">海德大饭店</a></li>            <li><a href="#">银都大饭店</a></li>            <li><a href="#">洪福大饭店</a></li>         </ul>         </div>      </div>

CSS文件

#right{    width:176px;    background:white;    margin:0px ;    padding:0px 0px 5px 0px;    float:left;}#right div{    margin:0px 4px;    background:#046ca2;}#right div h3{    font-size:12px;    padding:4px 0px 2px 15px;    color:#003973;    margin:0px 0px 5px 0px;    background:#98d8f9;} #map p{    text-align:center;    margin:0px;    padding:2px 0px 5px 0px;}#map p img{    border:1px solid #ffffff;}#food,#life{    padding-top:3px;}#food ul,#life ul{    list-style-type:none;    padding:0px 0px 10px 0px;    margin:10px 10px 0px 10px;}#food ul li,#life ul li{    color:white;    padding:3px 0px 3px 12px;    border-bottom:1px dashed #eeeeee;}#food ul li a:link,#food ul li a:visited,#life ul li a:link,#life ul li a:visited{    color:white;    text-decoration:none;}#food ul li a:hover,#life ul li a:hover{    color:yellow;    text-decoration:underline;}

这里写图片描述
<5 脚注
HTML文件

<div id="footer">         <p>艾萨克 &copy; 版权所有 <a href="mailto:demo@demo.com">demo@demo.com</a></p>      </div>

CSS文件

#footer{    height:30px;    background:white;    margin:1px 0px 0px 0px;    padding:1px 0px;    clear:both;}#footer p{    text-align:center;    padding:0px;    margin:4px 5px 4px 5px;    background:#98d8f9;}

整体界面：
这里写图片描述

阅读全文

0 0

CSS

**1. 使用内联样式**

**2. 使用内部样式定义**

**3.链接外部样式文件**

**4. 导入外部样式文件**

**1.标记选择器（元素选择器）**

**2.类选择器**

**3.ID选择器**

**4.选择器组合**

**5.选择器嵌套**

一.盒子模型

position定位：

CSS实战：

1. 使用内联样式

2. 使用内部样式定义

3.链接外部样式文件

4. 导入外部样式文件

1.标记选择器（元素选择器）

2.类选择器

3.ID选择器

4.选择器组合

5.选择器嵌套