适合新手的实例

今天这个实例主要是运用div和a标签

我先说一说a标签的作用

a标签是超链接,用于跳转网页,其中有伪类link,hover,visited,active

a:link,a:visited{
            color: black;
            text-decoration: none;
        }
        a:hover,a:active{
            color: #929a9d;
        }

一般我们都是link,visited和hover,active一起使用的

link:是默认的样式
visited:是被访问过后的样式,但只能设置颜色
hover:是鼠标悬停时的样式
active:鼠标点击不放时的样式(一般不使用)

整个代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>企业新闻</title>
    <style>
        body,.zt,h2,.lb,li{padding: 0;margin: 0;}
        .zt{
            width: 350px;
            height: 190px;
            font-size: 15px;
            margin: 50px auto;
            border: #65646d solid 1px;
        }
        h2{
          line-height: 50px;
            color:white;
            font-size: 20px;
            padding-left: 34px;
            background:#8c8c8c url("tp/laba.jpg") no-repeat 10px 13px;
            box-shadow:0px -10px #65646d inset;
        }
        .lb{
            padding: 10px 0 0 10px;
            background: #f1f1f1;
        }
        .lb li{
            list-style-type: none;
            height: 26px;
            background:url("tp/laba.png") no-repeat left top;
            padding-left: 25px;
        }
        a:link,a:visited{
            color: black;
            text-decoration: none;
        }
        a:hover,a:active{
            color: #929a9d;
        }
    </style>
</head>
<body>
    <div class="zt">
            <h2>企业新闻</h2>
    <ul class="lb">
            <li><a href="#" target="_blank">美库打造有影响力的互联网企业</a></li>
            <li><a href="#">充分尊重和信任员工,建立互信合作的团队</a></li>
            <li><a href="#">通过互联网服务助力客户企业不断发展</a></li>
            <li><a href="#">梦想、责任、信任、创新、感恩、分享、协作</a></li>
            <li><a href="#">为企业提供一站式网络营销服务的人才</a></li>
    </ul>
    </div>
</body>
</html>
© 版权声明
THE END
喜欢就支持一下吧
点赞0
分享
评论 抢沙发
helin的头像-余心资源

昵称

取消
昵称表情代码图片