今天这个实例主要是运用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
喜欢就支持一下吧