<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="index_header.css" />
<link rel="stylesheet" href="./static/font/iconfont.css" />
<title>12月20日作业</title>
</head>
<body>
<div class="index-header">
<div class="content">
<!-- logo与搜索框,快速入口 -->
<div class="log-search">
<a href="" class="logo"
><img src="./static/images/logo.png" alt=""
/></a>
<div class="search">
<input type="search" name="search" id="search" />
<label for="search" class="iconfont icon-jinduchaxun"></label>
</div>
<div class="quick-entry">
<a href="" class="iconfont icon-huiyuan1"></a>
<a href="" class="iconfont icon-danmu1"></a>
<a href="" class="iconfont icon-fabu"></a>
<a href="" class="iconfont icon-fangda"></a>
<a href="" class="iconfont icon-huiyuan2 "></a>
<a href="" class="iconfont icon-dianzan"></a>
</div>
</div>
<!-- 主导航 -->
<div class="main-nav">
<!-- 导航详情1 -->
<div class="nav-detail">
<!-- 左侧描述与图标 -->
<div class="pic">
<span class="iconfont icon-gongdan"></span>
<div>
<span>咨询</span>
<span>学习</span>
</div>
</div>
<!-- 右侧导航链接 -->
<div class="links">
<a href="">器材</a>
<a href="">大师</a>
<a href="">学院</a>
<a href="">实战</a>
<a href="">大赛</a>
<a href="">裤子</a>
<a href="">影视</a>
<a href="">其他</a>
</div>
</div>
<!-- 导航详情2 -->
<div class="nav-detail">
<!--左侧图标与描述-->
<div class="pic">
<span class="iconfont icon-renwujincheng"></span>
<div>
<span>爱好</span>
<span>姐妹</span>
</div>
</div>
<!--右侧导航链接-->
<div class="links">
<a href="">有品</a>
<a href="">图片</a>
<a href="">喝水</a>
<a href="">飞机</a>
<a href="">坦克</a>
<a href="">气球</a>
<a href="">毛线</a>
<a href="">其它</a>
</div>
</div>
<!-- 导航详情3 -->
<div class="nav-detail">
<!--左侧图标与描述-->
<div class="pic">
<span class="iconfont icon-gongdan"></span>
<div>
<span>软件</span>
<span>技能</span>
</div>
</div>
<!--右侧导航链接-->
<div class="links">
<a href="">学习</a>
<a href="">爱国</a>
<a href="">敬业</a>
<a href="">友善</a>
<a href="">富强</a>
<a href="">互助</a>
<a href="">仁义</a>
<a href="">其它</a>
</div>
</div>
<!-- 导航详情4 -->
<div class="nav-detail">
<!-- 左侧图标与描述 -->
<div class="pic">
<span class="iconfont icon-DOC"></span>
<div>
<span>编程</span>
<span>美女</span>
</div>
<!-- 右侧导航链接 -->
</div>
<div class="links">
<a href="">吃饭</a>
<a href="">周易</a>
<a href="">黄山</a>
<a href="">合肥</a>
<a href="">上海</a>
<a href="">杭州</a>
<a href="">北京</a>
<a href="">其他</a>
</div>
</div>
</div>
<!-- 轮播图 -->
<div class="slider">
<a href=""><img src="./static/images/2.jpg" alt=""/></a>
<a href=""><img src="./static/images/banner-right.jpg" alt=""/></a>
</div>
</div>
</div>
</body>
</html>
/*首页导航+轮播图*/
.index-header {
background-color: #fff;
padding: 30px 0 40px;
display: flex;
flex-direction: column;
}
.index-header > .content {
width: 1200px;
margin: auto;
}
/********** 1. 顶部logo,搜索框与快速入口 **********/
.index-header > .content > .log-search {
display: flex;
/*两端对齐*/
justify-content: space-between;
}
.index-header > .content > .log-search {
display: flex;
}
/*头部搜索框样式*/
.index-header > .content > .log-search > .search {
width: 430px;
/*转为flex,可以更精准的控制搜索框与放大镜图标的样式*/
display: flex;
/*居中对齐,实际上会看到并到对正,因为那个label相对定位走了*/
justify-content: flex-end;
/*可以看出,搜索框应该更靠右会更好看一些,使用相对定精确移动*/
position: relative;
left: 140px;
}
.index-header > .content > .log-search > .search > input {
width: 333px;
height: 36px;
border: 1px solid #cccccc;
border-radius: 10px;
/*去掉轮廓线,获取焦点时不会出现蓝色边框*/
outline: none;
padding: 6px;
/*垂直居中*/
align-self: center;
}
.index-header > .content > .log-search > .search > input:hover {
box-shadow: 0 0 5px #888888;
}
.index-header > .content > .log-search > .search > label {
font-size: 28px;
position: relative;
top: 2px;
left: -38px;
/*垂直居中*/
align-self: center;
}
/*快速入口*/
.index-header > .content > .log-search > .quick-entry {
/*必须设置宽度,否则无法产生剩余空间可供分配*/
width: 300px;
display: flex;
/*所有图标二端对齐*/
justify-content: space-between;
}
/*快速入口的图标设置*/
.index-header > .content > .log-search > .quick-entry a {
font-size: 33px;
/*图标垂直居中*/
align-self: center;
}
/*用户鼠标划过字体图标时提供一个变色的效果反馈,提升体验*/
.index-header > .content > .log-search > .quick-entry a:hover {
color: red;
}
/********** 2. 中部的主导航区 **********/
.index-header > .content > .main-nav {
margin: 20px auto;
/*导航非常规范,网格更加快速*/
display: grid;
grid-template-columns: repeat(4, 300px);
}
/*每组导航区转为flex,水平排列*/
.index-header > .content > .main-nav .nav-detail {
display: flex;
}
/*最左边的图标与标签比较特殊*/
.index-header > .content > .main-nav .nav-detail .pic {
/*添加右边竖线*/
padding-right: 10px;
border-right: 1px solid #cccccc;
/*转为flex*/
display: flex;
}
/*设置图标样式,大小与前景色*/
.index-header > .content > .main-nav .nav-detail .pic > span {
font-size: 40px;
color: red;
}
/*设置图标右边上下排列的描述文本样式*/
.index-header > .content > .main-nav .nav-detail .pic > div {
padding-left: 5px;
/*转为flex,且为垂直排列*/
display: flex;
flex-direction: column;
/*分散对齐*/
justify-content: space-around;
}
/*设置主导航的链接样式*/
.index-header > .content > .main-nav .nav-detail .links {
padding-left: 10px;
/*链接非常规范,且默认为二行显示,非常适合网格快速实现*/
display: grid;
/*minmax(最小值,最大值)*/
grid-template-columns: repeat(4, minmax(30px, auto));
/*设置表格单元之间的列间隙*/
grid-column-gap: 10px;
}
/********** 3. 轮播图 **********/
.index-header > .content > .slider {
/*用网格布局快速实现*/
display: grid;
grid-template-columns: 900px 295px;
/*列间距*/
grid-column-gap: 5px;
}
.index-header > .content > .slider img:last-of-type:hover {
box-shadow: 0 0 8px #888888;
}
效果图