博客列表 >css基础html基础-Php第十期线上培训班

css基础html基础-Php第十期线上培训班

迫
原创
2019年12月25日 12:32:08716浏览

由于工作原因,故12.20与12.23两次作业只能在12.25上交。
页面元素居中的布局margin:0 auto,html引入css的方法,<link rel="stylesheet" href="../static/font/iconfont.css">
调用图标的方法有两种<span class="iconfont icon-huiyuan1"></span>和<span class="iconfont"></span>

一段完整调用css布局构建一个首页的代码如下

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <!-- 引入图标css-->
  6. <link rel="stylesheet" href="../static/font/iconfont.css">
  7. <title>12.20作业</title>
  8. <style>
  9. *{
  10. margin: 0;
  11. padding: 0;
  12. font-size: 13px;
  13. /*添加轮廓线*/
  14. /*outline: 1px dashed red;*/
  15. }
  16. a{
  17. color: #555;
  18. font-size: 14px;
  19. /*去掉下划线*/
  20. text-decoration: none;
  21. }
  22. /*容器*/
  23. .index-header{
  24. width: 1200px;
  25. min-height: 400px;
  26. margin: 30px auto;
  27. }
  28. .index-header > .top{
  29. height: 70px;
  30. /*定位为父级*/
  31. position: relative;
  32. }
  33. .index-header > .top *{
  34. height: inherit;
  35. line-height: 70px;
  36. }
  37. .index-header > .top>.logo{
  38. width: 176px;
  39. position: absolute;
  40. top: 0;
  41. left: 0;
  42. }
  43. .index-header > .top>.search{
  44. width: 330px;
  45. position: absolute;
  46. right: 350px;
  47. top: 0;
  48. }
  49. .index-header > .top>.quick-start{
  50. width: 300px;
  51. position: absolute;
  52. right: 0;
  53. top: 0;
  54. }
  55. .index-header > .top>.logo img{
  56. height: 100%;
  57. display: block;
  58. }
  59. .index-header > .top>.search >input[type="search"]{
  60. box-shadow: 0 0 5px red;
  61. width: 330px;
  62. height: 36px;
  63. border-radius: 10pxs;
  64. }
  65. .index-header > .top>.search >input[type="search"]+label{
  66. font-size: 23px;
  67. color: green;
  68. margin-left: -30px;
  69. position: relative;
  70. top: 5px;
  71. }
  72. /*快速入口*/
  73. .index-header > .top>.quick-start>span{
  74. font-size: 30px;
  75. margin-right: 6px;
  76. }
  77. .index-header > .top>.quick-start>span:hover{
  78. color: red;
  79. cursor: pointer;
  80. }
  81. .index-header > .nav{
  82. height: 50px;
  83. }
  84. .index-header > .nav >.nav-item{
  85. width: 300px;
  86. height: inherit;
  87. position: relative;
  88. float: left;
  89. }
  90. .index-header > .nav >.nav-item>.iconfont{
  91. font-size: 40px;
  92. color: red;
  93. position: absolute;
  94. float: left;
  95. }
  96. .index-header > .nav >.nav-item>.tag{
  97. width: 40px;
  98. position: absolute;
  99. left: 45px;
  100. border-right: 1px solid #cccccc;
  101. float: left;
  102. }
  103. .index-header > .nav >.nav-item>.links{
  104. width: 160px;
  105. position: absolute;
  106. left: 95px;
  107. float: left;
  108. }
  109. .index-header > .nav >.nav-item>.links>a:hover{
  110. color: red;
  111. }
  112. /*slider+ads*/
  113. .index-header>.slider-ads{
  114. position: relative;
  115. height: 320px;
  116. }
  117. .index-header>.slider-ads>.slider{
  118. width: 900px;
  119. position: absolute;
  120. }
  121. .index-header>.slider-ads>.ads{
  122. width: 295px;
  123. position: absolute;
  124. right: 0;
  125. }
  126. .index-header>.slider-ads img{
  127. display: block;
  128. }
  129. .index-header>*{
  130. margin: 0;
  131. }
  132. </style>
  133. </head>
  134. <body>
  135. <div class="index-header">
  136. <!-- 上:logo+搜索框+图标-->
  137. <div class="top">
  138. <div class="logo">
  139. <a href=""><img src="../static/images/logo.png" alt=""></a>
  140. </div>
  141. <div class="search">
  142. <input type="search" id="search"><label for="search" class="iconfont icon-jinduchaxun"></label>
  143. </div>
  144. <div class="quick-start">
  145. <span class="iconfont icon-huiyuan1"></span>
  146. <span class="iconfont"></span>
  147. <span class="iconfont icon-huiyuan1"></span>
  148. <span class="iconfont icon-huiyuan1"></span>
  149. <span class="iconfont icon-huiyuan1"></span>
  150. </div>
  151. </div>
  152. <!-- 中:导航区-->
  153. <div class="nav">
  154. <div class="nav-item">
  155. <span class="iconfont"></span>
  156. <div class="tag">
  157. <span>咨询</span>
  158. <span>学习</span>
  159. </div>
  160. <div class="links">
  161. <a href="">器材</a>
  162. <a href="">器材</a>
  163. <a href="">器材</a>
  164. <a href="">器材</a>
  165. <a href="">器材</a>
  166. <a href="">器材</a>
  167. <a href="">器材</a>
  168. <a href="">器材</a>
  169. </div>
  170. </div>
  171. <div class="nav-item">
  172. <span class="iconfont"></span>
  173. <div class="tag">
  174. <span>咨询</span>
  175. <span>学习</span>
  176. </div>
  177. <div class="links">
  178. <a href="">器材</a>
  179. <a href="">器材</a>
  180. <a href="">器材</a>
  181. <a href="">器材</a>
  182. <a href="">器材</a>
  183. <a href="">器材</a>
  184. <a href="">器材</a>
  185. <a href="">器材</a>
  186. </div>
  187. </div>
  188. <div class="nav-item">
  189. <span class="iconfont"></span>
  190. <div class="tag">
  191. <span>咨询</span>
  192. <span>学习</span>
  193. </div>
  194. <div class="links">
  195. <a href="">器材</a>
  196. <a href="">器材</a>
  197. <a href="">器材</a>
  198. <a href="">器材</a>
  199. <a href="">器材</a>
  200. <a href="">器材</a>
  201. <a href="">器材</a>
  202. <a href="">器材</a>
  203. </div>
  204. </div>
  205. <div class="nav-item">
  206. <span class="iconfont"></span>
  207. <div class="tag">
  208. <span>咨询</span>
  209. <span>学习</span>
  210. </div>
  211. <div class="links">
  212. <a href="">器材</a>
  213. <a href="">器材</a>
  214. <a href="">器材</a>
  215. <a href="">器材</a>
  216. <a href="">器材</a>
  217. <a href="">器材</a>
  218. <a href="">器材</a>
  219. <a href="">器材</a>
  220. </div>
  221. </div>
  222. </div>
  223. <!-- 下:图片轮播+广告-->
  224. <div class="slider-ads">
  225. <div class="slider">
  226. <a href=""><img src="../static/images/1.jpg" alt=""></a>
  227. </div>
  228. <div class="ads">
  229. <a href=""><img src="../static/images/banner-right.jpg" alt=""></a>
  230. </div>
  231. </div>
  232. </div>
  233. </body>
  234. </html>


上图为效果图,上述代码知识点总结

  1. 定位,position,relative将块地位为父级,absolute将行内元素定位为子级;
  2. css的调用,<link rel="stylesheet" href="">@import url(),一般使用前者link的方法
  3. emmet语法:id(#),class(.)子节点(>),兄弟节点(+),上级节点(^)重复(*)分组(())需要在实战中多运用
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议