Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 1220作业
Blogger Information
Blog 7
fans 0
comment 0
visits 5118
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
1220作业
孤心泪的博客
Original
764 people have browsed it


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. }
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：完成的不错, class类名多单词之间建议用连接线: -
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post