Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 1220首页
Blogger Information
Blog 13
fans 0
comment 0
visits 10315
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
652 people have browsed it
HTML部分
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <!-- 引入图标库 -->
  8.     <link rel="stylesheet" href="static/font/iconfont.css">
  9.     <link rel="stylesheet" href="index.css">
  10.     <title>1220作业</title>
  11. </head>
  12. <body>
  13. <div class="header">
  14.     <!--logo 搜索框 快速入口-->
  15.     <div class="top">
  16.         <div class="logo">
  17.             <a href=""><img src="static/images/logo.png" alt=""></a>
  18.         </div>
  19.         <div class="search">
  20.             <input id="search">
  21.             <label for="search" class="iconfont icon-jinduchaxun"></label>
  22.         </div>
  23.         <div class="shortcut">
  24.             <a href="" class="iconfont icon-huiyuan1"></a>
  25.             <a href="" class="iconfont icon-danmu1"></a>
  26.             <a href="" class="iconfont icon-fabu"></a>
  27.             <a href="" class="iconfont icon-fangda"></a>
  28.             <a href="" class="iconfont icon-huiyuan2"></a>
  29.             <a href="" class="iconfont icon-dianzan"></a>
  30.     </div>
  31.     </div>
  33.     <!--主导航-->
  34.     <div class="nav">
  35.         <div class="nav-class">
  36.             <span class="iconfont icon-DOC"></span>
  37.             <div class="title">
  38.                 <span>资讯</span>
  39.                 <span>学习</span>
  40.             </div>
  41.             <div class="links">
  42.                 <a href="">器材</a>
  43.                 <a href="">大师</a>
  44.                 <a href="">学院</a>
  45.                 <a href="">实战</a>
  46.                 <a href="">大赛</a>
  47.                 <a href="">裤子</a>
  48.                 <a href="">影视</a>
  49.                 <a href="">其它</a>
  50.             </div>
  51.         </div>
  52.         <div class="nav-class">
  53.             <span class="iconfont icon-DOC"></span>
  54.             <div class="title">
  55.                 <span>爱好</span>
  56.                 <span>姐妹</span>
  57.             </div>
  58.             <div class="links">
  59.                 <a href="">有品</a>
  60.                 <a href="">图片</a>
  61.                 <a href="">喝水</a>
  62.                 <a href="">飞机</a>
  63.                 <a href="">坦克</a>
  64.                 <a href="">气球</a>
  65.                 <a href="">毛线</a>
  66.                 <a href="">其它</a>
  67.             </div>
  68.         </div>
  69.         <div class="nav-class">
  70.             <span class="iconfont icon-DOC"></span>
  71.             <div class="title">
  72.                 <span>软件</span>
  73.                 <span>技能</span>
  74.             </div>
  75.             <div class="links">
  76.                 <a href="">学习</a>
  77.                 <a href="">爱国</a>
  78.                 <a href="">敬业</a>
  79.                 <a href="">友善</a>
  80.                 <a href="">富强</a>
  81.                 <a href="">互助</a>
  82.                 <a href="">仁义</a>
  83.                 <a href="">其它</a>
  84.             </div>
  85.         </div>
  86.         <div class="nav-class">
  87.             <span class="iconfont icon-DOC"></span>
  88.             <div class="title">
  89.                 <span>编程</span>
  90.                 <span>美女</span>
  91.             </div>
  92.             <div class="links">
  93.                 <a href="">吃饭</a>
  94.                 <a href="">周易</a>
  95.                 <a href="">黄山</a>
  96.                 <a href="">合肥</a>
  97.                 <a href="">上海</a>
  98.                 <a href="">杭州</a>
  99.                 <a href="">北京</a>
  100.                 <a href="">其它</a>
  101.             </div>
  102.         </div>
  103.     </div>
  105.     <!--轮播-->
  106.     <div class="slider-ads">
  107.             <a href=""><img src="static/images/2.jpg" alt=""></a>
  108.             <a href=""><img src="static/images/banner-right.jpg" alt=""></a>
  109.     </div>
  110. </div>
  111. </body>
  112. </html>
css部分
  1. a {
  2.     color: black;
  3. }
  4. /*顶部*/
  5. .header > .top {
  6.     height: 70px;
  8. }
  9. /*搜索框*/
  10. .header > .top > .search {
  11.     width: 430px;
  12.     position: absolute;
  13.     top: 0;
  14.     right: 350px;
  15. }
  16. /*按钮*/
  17. .header > .top > .shortcut {
  18.     width: 300px;
  19.     position: absolute;
  20.     top: 0;
  21.     right: 0;
  22. }
  23. .header > .top > .search > input {
  24.     width: 330px;
  25.     height: 40px;
  26. }
  27. /*放大镜*/
  28. .header > .top > .search > input + label {
  29.     font-size: 23px;
  30.     margin-left: -30px;
  31. }
  32. .header > .top > .shortcut > a {
  33.     font-size: 33px;
  34. }
  35. /*导航*/
  36. .header > .nav {
  37.     height: 44px;
  38. }
  39. .header > .nav  > .nav-class {
  40.     width: 300px;
  41.     height: inherit;
  42.     position: relative;
  43.     float: left;
  44. }
  45. .header > .nav  > .nav-class > .iconfont {
  46.     font-size: 40px;
  47.     color: red;
  48.     position: absolute;
  49. }
  50. .header > .nav  > .nav-class > .title {
  51.     width: 40px;
  52.     position: absolute;
  53.     left: 45px;
  54.     border-right: 1px solid #cdcdcd;
  55. }
  56. .header > .nav  > .nav-class > .links {
  57.     width: 200px;
  58.     position: absolute;
  59.     left: 100px;
  60. }

对CSS不熟，参考而来，很多不会调，还是要多练
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：做为初学者, 一定要敢写, 能写成这样, 很不错了, 毕竟才学了不到一周
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