简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >1220作业

1220作业

安
安原创
2019年12月23日 17:00:00551浏览

<!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搜索框-->
<header 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>
</header>

  1.     <!--列表-->
  2.     <main>
  3.         <div class="nav_wk">
  4.             <div class="nav_left">
  5.                 <div class="nav_ico">
  6.                     <i class="fa fa-file-text-o"></i>
  7.                 </div>
  8.                 <div class="nav_text">
  9.                     <li><a href="#">咨询</a></li>
  10.                     <li><a href="#">学习</a></li>
  11.                 </div>
  12.             </div>
  13.             <div class="nav_right">
  14.                 <li class="nav_top">
  15.                     <a href="#"> <span>器材</span></a>
  16.                     <a href="#"><span>学员</span></a>
  17.                     <a href="#"><span>大师</span></a>
  18.                     <a href="#"> <span>实战</span></a>
  19.                 </li>
  20.                 <li class="nav_top">
  21.                     <a href="#"> <span>大赛</span></a>
  22.                     <a href="#"><span>影视</span></a>
  23.                     <a href="#"><span>裤子</span></a>
  24.                     <a href="#"><span>其他</span></a>
  25.                 </li>
  26.             </div>
  27.         </div>
  28.         <div class="nav_wk">
  29.             <div class="nav_left">
  30.                 <div class="nav_ico"><i class="fa fa-file-text-o"></i></div>
  31.                 <div class="nav_text">
  32.                     <li><a href="#">爱好</a></li>
  33.                     <li><a href="#">姐妹</a></li>
  34.                 </div>
  35.             </div>
  36.             <div class="nav_right">
  37.                 <li class="nav_top">
  38.                     <a href="#"> <span>优品</span></a>
  39.                     <a href="#"><span>图片</span></a>
  40.                     <a href="#"><span>喝水</span></a>
  41.                     <a href="#"> <span>飞机</span></a>
  42.                 </li>
  43.                 <li class="nav_top">
  44.                     <a href="#"> <span>坦克</span></a>
  45.                     <a href="#"><span>气球</span></a>
  46.                     <a href="#"><span>毛线</span></a>
  47.                     <a href="#"><span>其他</span></a>
  48.                 </li>
  49.             </div>
  50.         </div>
  51.         <div class="nav_wk">
  52.             <div class="nav_left">
  53.                 <div class="nav_ico"><i class="fa fa-file-text-o"></i></div>
  54.                 <div class="nav_text">
  55.                     <li><a href="#">软件</a></li>
  56.                     <li><a href="#">技能</a></li>
  57.                 </div>
  58.             </div>
  59.             <div class="nav_right">
  60.                 <li class="nav_top">
  61.                     <a href="#"> <span>学习</span></a>
  62.                     <a href="#"><span>爱国</span></a>
  63.                     <a href="#"><span>敬业</span></a>
  64.                     <a href="#"> <span>友善</span></a>
  65.                 </li>
  66.                 <li class="nav_top">
  67.                     <a href="#"> <span>富强</span></a>
  68.                     <a href="#"><span>互助</span></a>
  69.                     <a href="#"><span>仁义</span></a>
  70.                     <a href="#"><span>其他</span></a>
  71.                 </li>
  72.             </div>
  73.         </div>
  74.         <div class="nav_wk">
  75.             <div class="nav_left">
  76.                 <div class="nav_ico"><i class="fa fa-file-text-o"></i></div>
  77.                 <div class="nav_text">
  78.                     <li><a href="#">编程</a></li>
  79.                     <li><a href="#">美女</a></li>
  80.                 </div>
  81.             </div>
  82.             <div class="nav_right">
  83.                 <li class="nav_top">
  84.                     <a href="#"> <span>吃饭</span></a>
  85.                     <a href="#"><span>周易</span></a>
  86.                     <a href="#"><span>黄山</span></a>
  87.                     <a href="#"> <span>合肥</span></a>
  88.                 </li>
  89.                 <li class="nav_top">
  90.                     <a href="#"> <span>上海</span></a>
  91.                     <a href="#"><span>杭州</span></a>
  92.                     <a href="#"><span>北京</span></a>
  93.                     <a href="#"><span>其他</span></a>
  94.                 </li>
  95.             </div>
  96.         </div>
  97.     </main>
  98.     <!--图片-->
  99.     <footer>
  100.         <a href=""><img src="images/a.jpg" alt=""></a>
  101.         <a href=""><img src="images/banner-right.jpg" alt=""></a>
  102.     </footer>
  103. </div>

</div>
</body>
</html>
</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;
}
/图标设置/
.top .content .logos .quick a {
font-size: 33px;
align-self: center;
}
.top .content .logos .quick a:hover {
color: red;
}

/列表/
.nav{
width: 120px;
margin: 0 auto;
font-size: 15px;
}
.nav_wk{
float: left;
width:300px;
height:40px;
}
.nav_wk a{
color: #666666;
}
.nav_left,.nav_right{
float: left;
height: 40px;
width: 80px;
}
.nav_ico {
width: 40px;
height: 40px;
color: #ff0000;
font-size: 30px;
float: left;
}
.nav_text{
width: 38px;
height: 40px;
float: left;
border-right: 2px solid #d3d3d3;
}
.nav_text li{
list-style: none;
text-decoration:none;
}
.nav_text li a{
list-style: none;
text-decoration:none;
}
.nav_right{
width: 160px;
height: 40px;
}
.nav_top{
width: 160px;
height: 20px;
text-align: center;
}
.nav_top span{
display: block;
float: left;
width: 40px;
height: 20px;
}
li{
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;
}

上一条：前端布局小案例（采用float+position布局等传统布局）-PHP培训十期线上班下一条：jquery表单对象属性选择器--php培训九期线上班
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多