html:
<!DOCTYPE html>
<html>
<head>
<title>特征布局二</title>
<meta name="generator" content="Bluefish 2.2.7" >
<meta name="author" content="dst" >
<meta name="date" content="2018-09-12T20:27:59+0800" >
<meta name="copyright" content="">
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="expires" content="0">
<link href="css/特征布局2.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="box">
<a href="https://www.godaddy.com" class="nav"><span>首页</span></a>
<a href="https://www.qq.com" class="nav"><span>网站建设</span></a>
<a href="https://www.163.com" class="nav"><span>程序开发</span></a>
<a href="https://www.sina.com" class="nav"><span>网络营销</span></a>
<a href="https://www.youxia.com" id="vi" class="nav"><span>企业VI</span></a>
<a href="https://www.duote.com" class="nav"><span>案例演示</span></a>
<a href="https://www.test-godaddy.com" class="nav"><span>联系我们</span></a>
<img src="img/new.png">
</div>
</body>
</html>
css:
.box{
width: 960px;
height: 40px;
border: 1px solid;
margin: 55px auto;
background-color: #55a8ea;
position: relative;
}
span{
display: inline-block;
width: 100px;
height: 100%;
background-color: #55a8ea;
font:14px 微软雅黑;
color: white;
text-align: center;
line-height: 40px;
float: left;
}
img{
position: absolute;
left: 433.5px;
top: -7px;
}
a:hover span{
background-color: #00619f;
}
效果图：
特征布局2.png
html:
<!DOCTYPE html>
<html>
<head>
<title>特征布局3</title>
<meta name="generator" content="Bluefish 2.2.7" >
<meta name="author" content="dst" >
<meta name="date" content="2018-09-13T00:48:22+0800" >
<meta name="copyright" content="">
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="expires" content="0">
<link href="css/特征布局3.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="outer clearfix">
<span id="imgdisplay">图片展示</span>
<div>
<a href="#"><img src="img/goods" alt="goods"/></a>
<a href="#"><img src="img/goods" alt="goods"/></a>
<a href="#"><img src="img/goods" alt="goods"/></a>
<a href="#"><img src="img/goods" alt="goods"/></a>
<a href="#"><img src="img/goods" alt="goods"/></a>
<a href="#"><img src="img/goods" alt="goods"/></a>
<a href="#"><img src="img/goods" alt="goods"/></a>
<a href="#"><img src="img/goods" alt="goods"/></a>
<a href="#"><img src="img/goods" alt="goods"/></a>
<a href="#"><img src="img/goods" alt="goods"/></a>
</div>
</div>
</body>
</html>
css:
.outer{
width: 958px;
height: 270px;
border: 1px gray solid;
margin: 50px auto;
position: relative;
}
#imgdisplay{
display: block;
width: 100px;
height: 50px;
font: 18px 微软雅黑;
color: #000;
line-height: 50px;
text-align: center;
border-bottom: red 2px solid;
margin-left: 20px;
}
.outer #imgdisplay:after{
position: absolute;
content: "";
width: 816px;
height: 50px;
border-bottom: 1px gray solid;
left: 120px;
}
img{
margin: 20px 9px 5px 20px;
float: left;
}
效果图：
特征布局3.png
网友评论