<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="Untitl.css">
<title>导航与轮播图</title>
</head>
<body>
<div class="top">
<div class="content">
<!--logo搜索框-->
<div class="logos">
<a href="" class="logo"><img src="images/logo.png" alt=""></a>
<div class="search">
<from>
<input type="search" name="search" id="search">
<button>
</button>
</from>
</div>
<div class="quick">
<a href="" class="iconfont icon-huiyuan1"><img width="40px" src="images/1.JPG"></a>
<a href="" class="iconfont icon-danmu1"><img width="40px" src="images/2.JPG"></a>
<a href="" class="iconfont icon-fabu"><img width="40px" src="images/3.JPG"></a>
<a href="" class="iconfont icon-fangda"><img width="40px" src="images/4.JPG"></a>
<a href="" class="iconfont icon-huiyuan2"><img width="40px" src="images/5.JPG"></a>
<a href="" class="iconfont icon-dianzan"><img width="40px" src="images/6.JPG"></a>
</div>
</div>
<!--列表--><div class="main"><div class="nav"><div class="pic"><span class="iconfont icon-gongdan"></span><div><spean>资讯</spean><span>学习</span></div></div><div class="links"><li><a href="">器材</a></li><li><a href="">大师</a></li><li><a href="">学院</a></li><li><a href="">实战</a></li><li><a href="">大赛</a></li><li><a href="">裤子</a></li><li><a href="">影视</a></li><li><a href="">其它</a></li></div></div><div class="nav"><div class="pic"><span class="iconfont icon-renwujincheng"></span><div><span>爱好</span><span>姐妹</span></div></div><div class="links"><li><a href="">有品</a></li><li><a href="">图片</a></li><li><a href="">喝水</a></li><li><a href="">飞机</a></li><li><a href="">坦克</a></li><li><a href="">气球</a></li><li><a href="">毛线</a></li><li><a href="">其它</a></li></div></div><div class="nav"><div class="pic"><span class="iconfont icon-gongdan"></span><div><span>软件</span><span>技能</span></div></div><div class="links"><li><a href="">学习</a></li><li><a href="">爱国</a></li><li><a href="">敬业</a></li><li><a href="">友善</a></li><li><a href="">富强</a></li><li><a href="">互助</a></li><li><a href="">仁义</a></li><li><a href="">其它</a></li></div></div><div class="nav"><div class="pic"><span class="iconfont icon-DOC"></span><div><span>编程</span><span>美女</span></div></div><div class="links"><li><a href="">吃饭</a></li><li><a href="">周易</a></li><li><a href="">黄山</a></li><li><a href="">合肥</a></li><li><a href="">上海</a></li><li><a href="">杭州</a></li><li><a href="">北京</a></li><li><a href="">其它</a></li></div></div></div><!--图片--><div class="slider"><a href=""><img src="images/a.jpg" alt=""></a><a href=""><img src="images/banner-right.jpg" alt=""></a></div></div>
</div>
</body>
</html>
@charset “utf-8”;
/ CSS Document /
/首页导航+轮播图/
.top {
background-color: #fff;
padding: 30px 0 40px;
display: flex;
flex-direction: column;
}
.top .content {
width: 1200px;
margin: auto;
}
/logo搜索框/
.top .content .logos {
display: flex;
align-content:left;
}
.top .content .logos {
display: flex;
}
/搜索框/
.search {
width: 430px;
display: inline-block;
position: relative;/定位类型/
left: 200px;
}
.quick{
display: inline-block;
position: relative;
left:300px;
}
.top .content .logos .search input {
width: 333px;
height: 36px;
border: 1px solid #cccccc;
border-radius: 10px;
outline: none;
padding: 6px;
align-self: center;/垂直居中/
}
.top .content .logos .search input:hover {
box-shadow: 0 0 5px #888888;
}
.top .content .logos .search label {
font-size: 28px;
position: relative;
top: 2px;
left: -38px;
align-self: center;
}
button{
background: url(“images/7.png”);
width: 29px;
height: 30px;
position: absolute;
top: 3px;
left: 300px;
border: none;
}
/快速入口/
.top .content .logos .quick {
width: 300px;
display: flex;
justify-content: space-between;
}
/图标设置/
.top .content .logos .quick a {
font-size: 33px;
align-self: center;
}
.top .content .logos .quick a:hover {
color: red;
}
/列表/
.top .content .main {
margin: 20px auto;
display: grid;
grid-template-columns: repeat(4, 300px);
}
.top .content .main .nav {
display: flex;
}
.top .content .main .nav .pic {
padding-right: 10px;
border-right: 1px solid #cccccc;
display: flex;
}
.top .content .main .nav .pic span {
font-size: 15px;
color:#272727;
}
.top .content .main .nav .pic div {
padding-left: 5px;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.top .content .main .nav .links {
padding-left: 10px;
display: grid;
grid-template-columns: repeat(4, minmax(30px, auto));
grid-column-gap: 10px;
}
.links{
list-style: none;
}
/图片/
.top .content .slider {
display: grid;
grid-template-columns: 900px 295px;
grid-column-gap: 5px;
}
.top .content .slider img:last-of-type:hover {
box-shadow: 0 0 8px #888888;
}
a{
text-decoration: none;
color: #2b2b2b;
}