search

博客列表 >1220作业

1220作业

孤心泪的博客
孤心泪的博客原创
2019年12月22日 03:21:23763浏览


html

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>1220作业</title>
  9.     <link rel="stylesheet" href="font/iconfont.css">
  10.     <link rel="stylesheet" href="1220.css">
  11. </head>
  13. <body>
  14.     <main>
  15.         <header class="clearfix">
  16.             <!-- logo -->
  17.             <div class=" f_l logo">
  18.                 <a href="">
  19.                     <img src="./image/logo.png" alt="" class="logo_img">
  20.                 </a>
  21.             </div>
  22.             <div class="f_r header_right">
  23.                 <!-- 搜索框 -->
  24.                 <div class="serach f_l">
  25.                     <input type="text" placeholder="请输入关键字">
  26.                     <i class="iconfont icon-jinduchaxun"></i>
  27.                 </div>
  28.                 <!-- icon -->
  29.                 <div class="icons f_l">
  30.                     <i class="iconfont icon-huiyuan1"></i>
  31.                     <i class="iconfont icon-danmu1"></i>
  32.                     <i class="iconfont icon-fabu"></i>
  33.                     <i class="iconfont icon-sousuofangda"></i>
  34.                     <i class="iconfont icon-huiyuan3"></i>
  35.                     <i class="iconfont icon-dianzan"></i>
  36.                 </div>
  37.             </div>
  39.         </header>
  40.         <!-- 快速导航栏 -->
  41.         <ul class="mg_t_10 clearfix">
  42.             <li class="fast_nav">
  43.                 <div class="fast_nav_left f_l">
  44.                     <i class="iconfont icon-gongdan red fontsize_32"></i>
  45.                     <div class="f_r">
  46.                         <a href="" class="nav_item block">资讯</a>
  47.                         <a href="" class="nav_item block">学习</a>
  48.                     </div>
  49.                 </div>
  50.                 <div class="fast_nav_right f_l">
  51.                     <ul class="son_ul">
  52.                         <li><a href="">富强</a></li>
  53.                         <li><a href="">民主</a></li>
  54.                         <li><a href="">文明</a></li>
  55.                         <li><a href="">和谐</a></li>
  56.                         <li><a href="">自由</a></li>
  57.                         <li><a href="">平等</a></li>
  58.                         <li><a href="">公正</a></li>
  59.                         <li><a href="">法治</a></li>
  60.                     </ul>
  61.                 </div>
  62.             </li>
  63.             <li class="fast_nav">
  64.                 <div class="fast_nav_left f_l">
  65.                     <i class="iconfont icon-gongdan red fontsize_32"></i>
  66.                     <div class="f_r">
  67.                         <a href="" class="nav_item block">资讯</a>
  68.                         <a href="" class="nav_item block">学习</a>
  69.                     </div>
  70.                 </div>
  71.                 <div class="fast_nav_right f_l">
  72.                     <ul class="son_ul">
  73.                         <li><a href="">富强</a></li>
  74.                         <li><a href="">民主</a></li>
  75.                         <li><a href="">文明</a></li>
  76.                         <li><a href="">和谐</a></li>
  77.                         <li><a href="">自由</a></li>
  78.                         <li><a href="">平等</a></li>
  79.                         <li><a href="">公正</a></li>
  80.                         <li><a href="">法治</a></li>
  81.                     </ul>
  82.                 </div>
  83.             </li>
  84.             <li class="fast_nav">
  85.                 <div class="fast_nav_left f_l">
  86.                     <i class="iconfont icon-gongdan red fontsize_32"></i>
  87.                     <div class="f_r">
  88.                         <a href="" class="nav_item block">资讯</a>
  89.                         <a href="" class="nav_item block">学习</a>
  90.                     </div>
  91.                 </div>
  92.                 <div class="fast_nav_right f_l">
  93.                     <ul class="son_ul">
  94.                         <li><a href="">富强</a></li>
  95.                         <li><a href="">民主</a></li>
  96.                         <li><a href="">文明</a></li>
  97.                         <li><a href="">和谐</a></li>
  98.                         <li><a href="">自由</a></li>
  99.                         <li><a href="">平等</a></li>
  100.                         <li><a href="">公正</a></li>
  101.                         <li><a href="">法治</a></li>
  102.                     </ul>
  103.                 </div>
  104.             </li>
  105.             <li class="fast_nav">
  106.                 <div class="fast_nav_left f_l">
  107.                     <i class="iconfont icon-gongdan red fontsize_32"></i>
  108.                     <div class="f_r">
  109.                         <a href="" class="nav_item block">资讯</a>
  110.                         <a href="" class="nav_item block">学习</a>
  111.                     </div>
  112.                 </div>
  113.                 <div class="fast_nav_right f_l">
  114.                     <ul class="son_ul">
  115.                         <li><a href="">富强</a></li>
  116.                         <li><a href="">民主</a></li>
  117.                         <li><a href="">文明</a></li>
  118.                         <li><a href="">和谐</a></li>
  119.                         <li><a href="">自由</a></li>
  120.                         <li><a href="">平等</a></li>
  121.                         <li><a href="">公正</a></li>
  122.                         <li><a href="">法治</a></li>
  123.                     </ul>
  124.                 </div>
  125.             </li>
  126.         </ul>
  127.         <!-- 图片区 -->
  128.         <div class="imgs clearfix">
  129.             <div class="img_l f_l mg_r_15">
  130.                 <img src="./image/2.jpg" alt="">
  131.             </div>
  132.             <div class="img_r f_l">
  133.                 <img src="./image/banner-right.jpg" alt="">
  134.             </div>
  135.         </div>
  136.     </main>
  137. </body>
  138. </html>

CSS

  1. * {
  2.     margin: 0;
  3.     padding: 0;
  4. }
  5. body {
  6.     padding-top: 50px;
  7. }
  8. main {
  9.     width: 1200px;
  10.     margin: 0 auto;
  11. }
  12. li{
  13.     list-style: none;
  14. }
  15. a {
  16.     text-decoration: none;
  17.     color: #333;
  18. }
  19. .f_r{
  20.     float: right;
  21. }
  22. .f_l {
  23.     float: left;
  24. }
  25. .mg_t_10{
  26.     margin-top: 10px;
  27. }
  28. .mg_r_15{
  29.     margin-right: 15px;
  30. }
  31. .block{
  32.     display: block;
  33. }
  34. .fontsize_32{
  35.     font-size: 40px;
  36. }
  38. .clearfix:after,.clearfix:before{
  39.     content: "";
  40.     display: table;
  41. }
  42. .clearfix:after{
  43.     clear: both;
  44. }
  45. .clearfix{
  46.     *zoom: 1;
  47. }
  48. .red {
  49.     color: red;
  50. }
  51. .logo{
  52.     height: 76px;
  53. }
  54. .logo>img{
  55.     display: block;
  56.     height: 100%;
  57. }
  58. .header_right{
  59.     margin-top: 28px;
  60. }
  61. .serach{
  62.     position: relative;
  63.     z-index: 1;
  64.     height: 30px;
  65.     width: 300px;
  66.     border: 1px solid #ccc;
  67.     border-radius: 10px;
  68.     overflow: hidden;
  69. }
  70. .serach:hover{
  71.     box-shadow: 0px 0px 5px #ccc;
  72. }
  73. .serach>input{
  74.     width: 100%;
  75.     height: 100%;
  76.     display: block;
  77.     border: none;
  78.     border-radius: 10px;
  79.     outline: none;
  80.     text-indent: 10px;
  81.     padding-right: 10px;
  82. }
  83. .icon-jinduchaxun{
  84.     position: absolute;
  85.     right: 5px;
  86.     top: calc(50% - 7.5px);
  87.     width: 15px;
  88.     height: 15px;
  89.     font-size: 15px;
  90. }
  91. .icons {
  92.     margin-left: 50px;
  93. }
  94. .icons>i{
  95.     width: 50px;
  96.     height: 50px;
  97.     margin-right: 15px;
  98.     font-size: 30px;
  99. }
  100. .icons>i:hover{
  101.     color: red;
  102. }
  103. .fast_nav{
  104.    margin-right: 0px; 
  105.    width: 300px;
  106.    float: left;
  107. }
  108. .fast_nav_left{
  109.     padding-right: 10px;
  110.     border-right: 1px solid #ccc;
  111.     box-sizing: border-box;
  112. }
  113. .son_ul{
  114.     width: 200px;
  115.     margin-left: 10px;
  116. }
  117. .son_ul>li{
  118.     float: left;
  119.     width: 35px;
  120.     margin-right: 10px;
  121. }
  122. .son_ul>li>a{
  123.     display: block;
  124.     text-align: center;
  125. }
  126. .imgs {
  127.     margin-top: 30px;
  128. }
  129. .imgs img{
  130. display: block;
  131. }
  133. .img_l{
  134.     width: 850px;
  135.     margin-right: 50px;
  136. }
  137. .img_l>img{
  138.     width: 100%;
  139. }
  140. .img_l:hover{
  141.     box-shadow: 0px 0px 50px #ccc;
  142. }
  143. .img_r>img{
  144.    height: 300px; 
  145.    display: block;
  146. }
  147. .img_r:hover{
  148.     box-shadow: 0px 0px 50px #ccc;
  149. }
上一条：HTML标签总结下一条：重命名文件
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多