效果图：
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
<title></title>
<link rel="stylesheet" href="css/base.css" />
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="layout">
<header class="jd_header">
<div class="jd_header_box">
<a href="#" class="icon_logo"></a>
<form action="#">
<span class="icon_search"></span>
<input type="search" placeholder="提示站位">
</form>
<a href="#" class="login">登录</a>
</div>
</header>
<div class="jd_banner">
<ul class="clearfix">
<li><a href=""></a><img src="images/l8.jpg" alt=""></li>
<li><a href=""></a><img src="images/l1.jpg" alt=""></li>
<li><a href=""></a><img src="images/l2.jpg" alt=""></li>
<li><a href=""></a><img src="images/l3.jpg" alt=""></li>
<li><a href=""></a><img src="images/l4.jpg" alt=""></li>
<li><a href=""></a><img src="images/l5.jpg" alt=""></li>
<li><a href=""></a><img src="images/l6.jpg" alt=""></li>
<li><a href=""></a><img src="images/l7.jpg" alt=""></li>
<li><a href=""></a><img src="images/l8.jpg" alt=""></li>
<li><a href=""></a><img src="images/l1.jpg" alt=""></li>
</ul>
<ul>
<li class="now"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<!--nav.jd_nav>ul>(li>a>img+p{分类查询})*8-->
<nav class="jd_nav">
<ul class="clearfix">
<li><a href=""><img src="images/nav0.png" alt="">
<p>分类查询</p>
</a></li>
<li><a href=""><img src="images/nav1.png" alt="">
<p>分类查询</p>
</a></li>
<li><a href=""><img src="images/nav2.png" alt="">
<p>分类查询</p>
</a></li>
<li><a href=""><img src="images/nav3.png" alt="">
<p>分类查询</p>
</a></li>
<li><a href=""><img src="images/nav4.png" alt="">
<p>分类查询</p>
</a></li>
<li><a href=""><img src="images/nav5.png" alt="">
<p>分类查询</p>
</a></li>
<li><a href=""><img src="images/nav6.png" alt="">
<p>分类查询</p>
</a></li>
<li><a href=""><img src="images/nav7.png" alt="">
<p>分类查询</p>
</a></li>
</ul>
</nav>
</div>
</body>
</html>
index.css
.layout{
width:100%;
max-width: 640px;
min-width: 300px;
margin:0 auto;
position: relative;
}
.jd_header{
position: fixed;
left: 0;
top:0;
height:40px;
width:100%;
z-index:1000;
}
.jd_header>.jd_header_box{
position: relative;
width: 100%;
max-width: 640px;
min-width: 300px;
margin:0 auto;
background: rgba(201,21,35,0);
height:40px;
}
.jd_header>.jd_header_box>.icon_logo{
width:60px;
height:36px;
position: absolute;
/*background: url("../images/sprites.png") no-repeat;*/
/*background-size:200px 200px;*/
background-position: 0 -103px;
top: 4px;
left: 10px;
}
.jd_header>.jd_header_box>.login{
width: 50px;
height: 40px;
line-height:40px;
text-align: center;
color: #ffffff;
position: absolute;
right:0;
top:0;
font-size: 15px;
}
.jd_header>.jd_header_box>form{
width:100%;
padding-left:75px;
padding-right:50px;
height:40px;
position: relative;
}
.jd_header>.jd_header_box>form>input{
width:100%;
height:30px;
border-radius:15px;
margin-top:5px;
padding-left:34px;
}
.jd_header>.jd_header_box>form>.icon_search{
height:20px;
width:20px;
position: absolute;
background-position: -60px -109px;
top:10px;
left:85px;
}
.jd_banner{
width: 100%;
position: relative;
overflow: hidden;
}
.jd_banner>ul:first-child{
width: 1000%;
transform: translateX(-10%);
-webkit-transform:translateX(-10%);
}
.jd_banner>ul:first-child>li{
width: 10%;
float: left;
}
.jd_banner>ul:first-child>li>a{
width: 100%;
display: block;
}
.jd_banner>ul:first-child>li>a>img{
width: 100%;
display: block;
}
.jd_banner>ul:last-child{
width: 118px;
position: absolute;
height: 6px;
bottom: 6px;
left: 50%;
margin-left: -59px;
}
.jd_banner>ul:last-child>li{
width: 6px;
height: 6px;
float: left;
border-radius: 3px;
border:1px solid #ffffff;
margin-left: 10px;
}
.jd_banner>ul:last-child>li.now{
background: #ffffff;
}
.jd_banner>ul:last-child>li:nth-child(1){
margin-left: 0;
}
/*导航栏模块*/
.jd_nav{
width: 100%;
background: #ffffff;
border-bottom: 1px solid #e0e0e0;
}
.jd_nav>ul{
width: 100%;
padding:10px 0;
}
.jd_nav>ul>li{
width: 25%;
float: left;
}
.jd_nav>ul>li>a{
display: block;
}
.jd_nav>ul>li>a>img{
width: 40px;
height: 40px;
display: block;
margin:0 auto ;
}
.jd_nav>ul>li>a>p{
text-align: center;
color: #666666;
font-size: 12px;
padding: 6px 0;
}
base.css
/*重置样式*/
*,::before,::after{
/*选择所有的标签*/
margin:0;
padding:0;
/*清楚移动端默认的 点击高亮效果*/
-webkit-tap-highlight-color:transparent;
/*设置所有的都是以边框开始计算宽度 百分比*/
-webkit-box-sizing:border-box;/*兼容*/
box-sizing:border-box;
}
body{
font-size:14px;
font-family:"Microsoft YaHei",sans-serif;/*设备默认字体*/
color:333;
}
a{
color:333;
text-decoration:none;/*不显示下划线*/
}
a:hover{
text-decoration:none;/*不显示下划线*/
}
ul,ol{
list-style:none;
}
input{
border:none;
outline:none;
/*清除移动端默认的表单样式*/
-webkit-appearance:none;
}
/*公共样式*/
.f_left{
float:left;
}
.f_right{
float:right;
}
.clearfix::before,.clearfix::after{
content:"";
height:0;
line-height:0;
display:block;
visibility:hidden;
clear:both;
}
[class^="icon_"]{
background: url("../images/sprites.png") no-repeat;
background-size:200px 200px;
}
.clearfix::before,.clearfix::after{
时间： 2024-10-16 15:50:26