Blogger Information
Blog 3
fans 0
comment 0
visits 2567
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
前端简单基础页面
Amiable崔洪刚
Original
686 people have browsed it

前端简单基础页面

1.页面效果:

2.代码如下:(自己暂时写不出来,照着老师代码写了两遍,又重看了教程,总算

入了点门。)

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <link rel="stylesheet" href="../../../static/font/iconfont.css">
  6. <link rel="stylesheet" href="index_header.css">
  7. <title>全站首页导航与轮播图</title>
  8. </head>
  9. <body>
  10. <div class="index-header">
  11. <div class="content">
  12. <!--logo与搜索框,快速入口-->
  13. <div class="log-search">
  14. <a href="" class="logo"><img src="../../../static/images/logo.png" alt=""></a>
  15. <div class="search">
  16. <input type="search" name="search" id="search">
  17. <label for="search" class="iconfont icon-jinduchaxun"></label>
  18. </div>
  19. <div class="quick-entry">
  20. <a href="" class="iconfont icon-huiyuan1"></a>
  21. <a href="" class="iconfont icon-danmu1"></a>
  22. <a href="" class="iconfont icon-fabu"></a>
  23. <a href="" class="iconfont icon-fangda"></a>
  24. <a href="" class="iconfont icon-huiyuan2"></a>
  25. <a href="" class="iconfont icon-dianzan"></a>
  26. </div>
  27. </div>
  28. <!--主导航-->
  29. <div class="main-nav">
  30. <!--导航详情1-->
  31. <div class="nav-detail">
  32. <!--左侧图标与描述-->
  33. <div class="pic">
  34. <span class="iconfont icon-gongdan"></span>
  35. <div>
  36. <span>资讯</span>
  37. <span>学习</span>
  38. </div>
  39. </div>
  40. <!--右侧导航链接-->
  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. <!--导航详情2-->
  53. <div class="nav-detail">
  54. <!--左侧图标与描述-->
  55. <div class="pic">
  56. <span class="iconfont icon-renwujincheng"></span>
  57. <div>
  58. <span>爱好</span>
  59. <span>姐妹</span>
  60. </div>
  61. </div>
  62. <!--右侧导航链接-->
  63. <div class="links">
  64. <a href="">有品</a>
  65. <a href="">图片</a>
  66. <a href="">喝水</a>
  67. <a href="">飞机</a>
  68. <a href="">坦克</a>
  69. <a href="">气球</a>
  70. <a href="">毛线</a>
  71. <a href="">其它</a>
  72. </div>
  73. </div>
  74. <!--导航详情3-->
  75. <div class="nav-detail">
  76. <!--左侧图标与描述-->
  77. <div class="pic">
  78. <span class="iconfont icon-gongdan"></span>
  79. <div>
  80. <span>软件</span>
  81. <span>技能</span>
  82. </div>
  83. </div>
  84. <!--右侧导航链接-->
  85. <div class="links">
  86. <a href="">学习</a>
  87. <a href="">爱国</a>
  88. <a href="">敬业</a>
  89. <a href="">友善</a>
  90. <a href="">富强</a>
  91. <a href="">互助</a>
  92. <a href="">仁义</a>
  93. <a href="">其它</a>
  94. </div>
  95. </div>
  96. <!--导航详情4-->
  97. <div class="nav-detail">
  98. <!--左侧图标与描述-->
  99. <div class="pic">
  100. <span class="iconfont icon-DOC"></span>
  101. <div>
  102. <span>编程</span>
  103. <span>美女</span>
  104. </div>
  105. </div>
  106. <!--右侧导航链接-->
  107. <div class="links">
  108. <a href="">吃饭</a>
  109. <a href="">周易</a>
  110. <a href="">黄山</a>
  111. <a href="">合肥</a>
  112. <a href="">上海</a>
  113. <a href="">杭州</a>
  114. <a href="">北京</a>
  115. <a href="">其它</a>
  116. </div>
  117. </div>
  118. </div>
  119. <!--轮播图-->
  120. <div class="slider">
  121. <a href=""><img src="../../../static/images/2.jpg" alt=""></a>
  122. <a href=""><img src="../../../static/images/banner-right.jpg" alt=""></a>
  123. </div>
  124. </div>
  125. </div>
  126. </body>
  127. </html>
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