位置：首页-资讯-后端开发

CSS3学习3----举例

2023-01-31 06:32

短信预约 -IT技能 免费直播动态提醒

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

①：link → 未访问的链接。

②：visited → 已访问的链接。

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

④：active → 正在点击的链接

eg>

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html;charset=GBK" /> 
    <title>link-visited-hover-active</title> 
    <style type="text/css"> 
        .button{ 
            background-p_w_picpath:url(1.png); 
            background-repeat:no-repeat; 
            width:122px; 
            height:42px; 
            display:block; 
            line-height:42px;  
            text-align:center;  
            text-decoration:none; 
        } 
        .button:hover{ 
            background-p_w_picpath:url(2.png); 
             
        } 
        .mail:link{ 
            background-p_w_picpath:url(mail.png); 
            background-repeat:no-repeat; 
            padding-left:25px;  
            text-decoration:none;  
        } 
        .mail:visited{ 
            background-p_w_picpath:url(yes.png); 
        } 
        a:hover{ 
            background:#cacaca; 
             
        } 
    </style> 
</head> 
<body> 
    <a class="button" href="http://google.com.hk">google</a> 
    <a class="mail" href="http://baidu.com">baidu</a> 
</body> 
</html>

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

a:hover{

color:#ccc;

text-decoration:underline;

}

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

源码：

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html;charset=GBK" /> 
    <title>link-visited-hover-active</title> 
    <style type="text/css"> 
        ul{ 
            paddint-left:0px;  
            list-style-type:none;  
        } 
        ul li{ 
            height:30px; 
            width:200px; 
            border:1px dashed #ccc; 
            border-bottom:none;  
            line-height:30px;  
            text-align:center;  
        } 
        ul li a{ 
            text-decoration:none;  
            height:30px; 
            width:200px; 
            display:block; 
        } 
        ul li a:hover{ 
            background:#ccc; 
        } 
        .last{ 
            border-bottom:1px dashed #ccc; 
        } 
    </style> 
</head> 
<body> 
    <ul> 
        <li><a href="#">Link1</a></li> 
        <li><a href="#">Link2</a></li> 
        <li><a href="#">Link3</a></li> 
        <li class="last"><a href="#">Link4</a></li> 
    </ul> 
</body> 
</html>

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

源码：

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html;charset=GBK" /> 
    <title>link-visited-hover-active</title> 
    <style type="text/css"> 
        ul{ 
            paddint-left:0px;  
            list-style-type:none;  
        } 
        ul li{ 
            height:30px; 
            width:200px; 
            border:1px dashed #ccc; 
             
             
            border-right:none; 
            float:left;  
             
            line-height:30px;  
            text-align:center;  
        } 
        ul li a{ 
            text-decoration:none;  
            height:30px; 
            width:200px; 
            display:block; 
        } 
        ul li a:hover{ 
            background:#ccc; 
        } 
        .last{ 
             
            border-right:1px dashed #ccc;  
        } 
    </style> 
</head> 
<body> 
    <ul> 
        <li><a href="#">Link1</a></li> 
        <li><a href="#">Link2</a></li> 
        <li><a href="#">Link3</a></li> 
        <li class="last"><a href="#">Link4</a></li> 
    </ul> 
</body> 
</html>

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

cursor:pointer;

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

如下面的网页布局：

html代码为：

<!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=GBK" /> 
    <title></title> 
    <style type="text/css"> 
        body{ 
            margin:0px; 
            padding:0px; 
        } 
        #top{ 
            width:960px; 
            height:100px; 
            background:#cc0000; 
            margin-left:auto;  
            margin-right:auto;  
        } 
        #contains{ 
            width:960px; 
            height:900px; 
            background:#4096ee; 
            margin-left:auto;  
            margin-right:auto;  
             
        } 
        #left{ 
            width:120px; 
            height:900px; 
            background:#c79810; 
            float:left;  
        } 
        #right{ 
            width:830px; 
            height:900px; 
            background:#ff7400; 
            float:right;  
        } 
    </style> 
</head> 
<body> 
    <div id="top"></div> 
    <div id="contains"> 
        <div id="left"></div> 
        <div id="right"></div> 
    </div> 
</body> 
</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.不清除浮动时，

清除浮动后：

代码：

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html;charset=GBK" /> 
    <title>float</title> 
    <style type="text/css"> 
        body{ 
            margin:0px; 
            padding:0px; 
        } 
        div{ 
            width:300px; 
            height:300px; 
        } 
        .div1{ 
            background:#ff7400; 
            float:left; 
        } 
        .div2{ 
            background:#008c00; 
            float:left; 
        } 
        .div3{ 
            width:800px; 
            background:#356a00; 
            clear:both; 
             
        } 
    </style> 
</head> 
<body> 
    <div class="div1">div1</div> 
    <div class="div2">div2</div> 
    <div class="div3">div3</div> 
</body> 
</html>

10.相对定位和绝对定位

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

eg.

<!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=GBK" /> 
    <title>相对定位和绝对定位</title> 
    <style type="text/css"> 
        body{ 
            margin:0px; 
            padding:0px; 
        } 
        .div1{ 
            width:960px; 
            height:300px; 
            position:relative;  
            margin-left:auto; 
            margin-right:auto; 
            background:#ff2000; 
        } 
        .div2{ 
            width:50px; 
            height:50px; 
            background:#008c00; 
            position:absolute;  
            right:0px;  
            top:0px;  
        } 
    </style> 
</head> 
<body> 
    <div class="div1"> 
        <div class="div2"></div> 
    </div> 
</body> 
</html>

效果：

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

.div1{

width:300px;

height:300px;

background:#ff7400;

position:absolute;

top:20px;

left:90px;

z-index:99;

}

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

<!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=GBK" /> 
    <title></title> 
    <style type="text/css"> 
        body{ 
            margin:0px; 
            padding:0px; 
            height:1000px; 
        } 
        #div2{ 
            background:#fe8400; 
            position:fixed;  
            right:10px; 
            top:350px; 
            width:150px; 
            height:100px; 
        } 
    </style> 
</head> 
<body> 
 
        <div id="div2"> 
            我是广告！固定在网页左右的固定广告！ 
            你想去掉我吗？？？？？？ 
        </div> 
 
</body> 
</html>