CSS3学习3----举例

发布时间：2019-09-14 09:51:10编辑：auto阅读（1724）

    1.浏览器支持的四种状态：

    ①：link → 未访问的 链接 。

    ②：visited → 已访问的 链接 。

    ③：hover → 鼠标正停在上面的 链接 。

    ④：active → 正在点击的链接 

     

    eg>

     

    1. <html xmlns="http://www.w3.org/1999/xhtml"> 
    2. <head> 
    3.     <meta http-equiv="Content-Type" content="text/html;charset=GBK" /> 
    4.     <title>link-visited-hover-active</title> 
    5.     <style type="text/css"> 
    6.         .button{ 
    7.             background-p_w_picpath:url(1.png); 
    8.             background-repeat:no-repeat; 
    9.             width:122px; 
    10.             height:42px; 
    11.             display:block; 
    12.             line-height:42px; /*★此两行保证文字绝对居中！*/ 
    13.             text-align:center; /*★此两行保证文字绝对居中！*/ 
    14.             text-decoration:none; 
    15.         } 
    16.         .button:hover{ 
    17.             background-p_w_picpath:url(2.png); 
    18.             /*background:#fff; 发现这个起作用了！上面一行不起作用了！！*/ 
    19.         } 
    20.         .mail:link{ 
    21.             background-p_w_picpath:url(mail.png); 
    22.             background-repeat:no-repeat; 
    23.             padding-left:25px; /*根据图片的大小来设定*/ 
    24.             text-decoration:none; /*去掉下划线*/ 
    25.         } 
    26.         .mail:visited{ 
    27.             background-p_w_picpath:url(yes.png); 
    28.         } 
    29.         a:hover{ 
    30.             background:#cacaca; 
    31.             /*我们上面给.button设置了背景图片，现在又对a标签设置了背景色。 
    32.             发现背景图片起作用了！注：给一个标签同时设置背景色和图片，图片在前。*/ 
    33.         } 
    34.     </style> 
    35. </head> 
    36. <body> 
    37.     <a class="button" href="http://google.com.hk">google</a> 
    38.     <a class="mail" href="http://baidu.com">baidu</a> 
    39. </body> 
    40. </html> 

    2.鼠标经过时添加下划线：

    a:hover{

          color:#ccc;

          text-decoration:underline;

    }

    3.网站垂直导航栏的创建：（也许对你有用）

     

    源码：

    1. <html xmlns="http://www.w3.org/1999/xhtml"> 
    2. <head> 
    3.     <meta http-equiv="Content-Type" content="text/html;charset=GBK" /> 
    4.     <title>link-visited-hover-active</title> 
    5.     <style type="text/css"> 
    6.         ul{ 
    7.             paddint-left:0px; /*完全居左*/ 
    8.             list-style-type:none; /*去掉项目符号*/ 
    9.         } 
    10.         ul li{ 
    11.             height:30px; 
    12.             width:200px; 
    13.             border:1px dashed #ccc; 
    14.             border-bottom:none; /*让中间的分界线不易*/ 
    15.             line-height:30px; /*使文字完全居中*/ 
    16.             text-align:center; /*使文字完全居中*/ 
    17.         } 
    18.         ul li a{ 
    19.             text-decoration:none; /*去掉下划线*/ 
    20.             height:30px; 
    21.             width:200px; 
    22.             display:block; 
    23.         } 
    24.         ul li a:hover{ 
    25.             background:#ccc; 
    26.         } 
    27.         .last{ 
    28.             border-bottom:1px dashed #ccc; 
    29.         } 
    30.     </style> 
    31. </head> 
    32. <body> 
    33.     <ul> 
    34.         <li><a href="#">Link1</a></li> 
    35.         <li><a href="#">Link2</a></li> 
    36.         <li><a href="#">Link3</a></li> 
    37.         <li class="last"><a href="#">Link4</a></li> 
    38.     </ul> 
    39. </body> 
    40. </html> 

    4.网站水平导航栏的创建：（也许对你有用）

     

    源码：

     

    1. <html xmlns="http://www.w3.org/1999/xhtml"> 
    2. <head> 
    3.     <meta http-equiv="Content-Type" content="text/html;charset=GBK" /> 
    4.     <title>link-visited-hover-active</title> 
    5.     <style type="text/css"> 
    6.         ul{ 
    7.             paddint-left:0px; /*完全居左*/ 
    8.             list-style-type:none; /*去掉项目符号*/ 
    9.         } 
    10.         ul li{ 
    11.             height:30px; 
    12.             width:200px; 
    13.             border:1px dashed #ccc; 
    14.              
    15.             /*border-bottom:none; 让中间的分界线不易*/ 
    16.             border-right:none;/*change*/ 
    17.             float:left; /*change*/ 
    18.              
    19.             line-height:30px; /*使文字完全居中*/ 
    20.             text-align:center; /*使文字完全居中*/ 
    21.         } 
    22.         ul li a{ 
    23.             text-decoration:none; /*去掉下划线*/ 
    24.             height:30px; 
    25.             width:200px; 
    26.             display:block; 
    27.         } 
    28.         ul li a:hover{ 
    29.             background:#ccc; 
    30.         } 
    31.         .last{ 
    32.             /*border-bottom:1px dashed #ccc;*/ 
    33.             border-right:1px dashed #ccc; /*change*/ 
    34.         } 
    35.     </style> 
    36. </head> 
    37. <body> 
    38.     <ul> 
    39.         <li><a href="#">Link1</a></li> 
    40.         <li><a href="#">Link2</a></li> 
    41.         <li><a href="#">Link3</a></li> 
    42.         <li class="last"><a href="#">Link4</a></li> 
    43.     </ul> 
    44. </body> 
    45. </html> 

     

    5.当鼠标放上去可以变成“手”：★

    cursor:pointer;

     

    6.网页的布局：★★★（也许对你有用）

    如下面的网页布局：

     

    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=GBK" /> 
    5.     <title></title> 
    6.     <style type="text/css"> 
    7.         body{ 
    8.             margin:0px; 
    9.             padding:0px; 
    10.         } 
    11.         #top{ 
    12.             width:960px; 
    13.             height:100px; 
    14.             background:#cc0000; 
    15.             margin-left:auto; /*网页完全居中*/ 
    16.             margin-right:auto; /*网页完全居中*/ 
    17.         } 
    18.         #contains{ 
    19.             width:960px; 
    20.             height:900px; 
    21.             background:#4096ee; 
    22.             margin-left:auto; /*网页完全居中*/ 
    23.             margin-right:auto; /*网页完全居中*/ 
    24.              
    25.         } 
    26.         #left{ 
    27.             width:120px; 
    28.             height:900px; 
    29.             background:#c79810; 
    30.             float:left; /*左浮动*/ 
    31.         } 
    32.         #right{ 
    33.             width:830px; 
    34.             height:900px; 
    35.             background:#ff7400; 
    36.             float:right; /*右浮动*/ 
    37.         } 
    38.     </style> 
    39. </head> 
    40. <body> 
    41.     <div id="top"></div> 
    42.     <div id="contains"> 
    43.         <div id="left"></div> 
    44.         <div id="right"></div> 
    45.     </div> 
    46. </body> 
    47. </html> 

    7.圆角的产生的属性：(根据需要改变属性值)

    eg.

    border-radius:5px 5px 5px 5px;


    8.光感产生属性：(根据需要改变属性值)

    eg.

    box-shadow:0 5px 5px #06c;

    或 box-shadow:0 5px 5px rgba(0,0,0,0.15);


    9.浮动（float）的学习：

    注意：不参与浮动，清除浮动带来的影响用：clear:both;

     

    eg.不清除浮动时，

     

    清除浮动后：

     

    代码：

     

    1. <html xmlns="http://www.w3.org/1999/xhtml"> 
    2. <head> 
    3.     <meta http-equiv="Content-Type" content="text/html;charset=GBK" /> 
    4.     <title>float</title> 
    5.     <style type="text/css"> 
    6.         body{ 
    7.             margin:0px; 
    8.             padding:0px; 
    9.         } 
    10.         div{ 
    11.             width:300px; 
    12.             height:300px; 
    13.         } 
    14.         .div1{ 
    15.             background:#ff7400; 
    16.             float:left; 
    17.         } 
    18.         .div2{ 
    19.             background:#008c00; 
    20.             float:left; 
    21.         } 
    22.         .div3{ 
    23.             width:800px; 
    24.             background:#356a00; 
    25.             clear:both;/*★不参与浮动！清除浮动带来的影响！*/ 
    26.             /*说明：★div1,div2,div3不在一个容器里，也会发生分层。 
    27.             当不清除浮动时，div3的一部分被覆盖！！*/ 
    28.         } 
    29.     </style> 
    30. </head> 
    31. <body> 
    32.     <div class="div1">div1</div> 
    33.     <div class="div2">div2</div> 
    34.     <div class="div3">div3</div> 
    35. </body> 
    36. </html> 

    10.相对定位和绝对定位

    注意：绝对定位和相对定位经常是一起使用的！！

    eg.

    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=GBK" /> 
    5.     <title>相对定位和绝对定位</title> 
    6.     <style type="text/css"> 
    7.         body{ 
    8.             margin:0px; 
    9.             padding:0px; 
    10.         } 
    11.         .div1{ 
    12.             width:960px; 
    13.             height:300px; 
    14.             position:relative; /*★相对定位*/ 
    15.             margin-left:auto; 
    16.             margin-right:auto; 
    17.             background:#ff2000; 
    18.         } 
    19.         .div2{ 
    20.             width:50px; 
    21.             height:50px; 
    22.             background:#008c00; 
    23.             position:absolute; /*绝对定位*/ 
    24.             right:0px; /*绝对定位的位置*/ 
    25.             top:0px; /*绝对定位的位置设置*/ 
    26.         } 
    27.     </style> 
    28. </head> 
    29. <body> 
    30.     <div class="div1"> 
    31.         <div class="div2"></div> 
    32.     </div> 
    33. </body> 
    34. </html> 

    效果：

     

     

    《2》。对于绝对定位：对于上面的浮动的div1,div2,div3，我们还可以通过绝对定位对其进行设置。如：

    .div1{

    width:300px;

    height:300px;

    background:#ff7400;

    position:absolute;

    top:20px; /*距离上面的距离*/

    left:90px; /*距离左边的距离；还有的属性：top,bottom,right,left*/

    z-index:99; /*数值越大，越靠上；；它是控制几个层之间的层次关系！！*/

    }

     

    11.固定定位：（在有些网页中，我们常看到网页的左右两边有浮动广告，无论我们怎么上下拉升网页，广告就在网页的中间位置！！）

     

     

    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=GBK" /> 
    5.     <title></title> 
    6.     <style type="text/css"> 
    7.         body{ 
    8.             margin:0px; 
    9.             padding:0px; 
    10.             height:1000px; 
    11.         } 
    12.         #div2{ 
    13.             background:#fe8400; 
    14.             position:fixed; /*固定*/ 
    15.             right:10px; 
    16.             top:350px; 
    17.             width:150px; 
    18.             height:100px; 
    19.         } 
    20.     </style> 
    21. </head> 
    22. <body> 
    23.  
    24.         <div id="div2"> 
    25.             我是广告！固定在网页左右的固定广告！ 
    26.             你想去掉我吗？？？？？？ 
    27.         </div> 
    28.  
    29. </body> 
    30. </html> 

     

     

     

     

     

     

     

     

关键字：

上一篇： H3C 基本操作命令

下一篇： 使用GNS3和ENSP联动实验OSPF