博客列表 >html+css实现的首页头部demo - PHP培训十期线上班

html+css实现的首页头部demo - PHP培训十期线上班

H.Ekko
H.Ekko原创
2019年12月23日 13:42:32500浏览

html+css实现的首页头部demo

本例代码中实现了一个页面头部的demo,初学前端,对布局掌握的还是不够好,目前喜欢使用 position: absolutely然后设置盒子top/left/margin等属性来布局,但这样布局下来,效率很低,而且感觉页面不够灵活,浏览器放大或缩小会使得页面错乱。还需要持续学习!

代码实现的效果如下:

代码实现的效果

示例代码:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>php_index</title>
  6. <link rel="stylesheet" href="iconfont/iconfont.css">
  7. <style>
  8. .index_header {
  9. width: 80%;
  10. height: 700px;
  11. margin: auto;
  12. /*background-color: lightgreen;*/
  13. position: relative;
  14. }
  15. .headBar {
  16. /*background-color: lightcoral;*/
  17. position: absolute;
  18. width: 100%;
  19. height: 60px;
  20. }
  21. .logoImg {
  22. width: 100px;
  23. /*background-color: green;*/
  24. position: absolute;
  25. top: 0;
  26. left: 0;
  27. bottom: 0;
  28. right: 0;
  29. margin: auto auto auto 0;
  30. }
  31. .searchField {
  32. border: 1px solid #cccccc;
  33. border-radius: 10px;
  34. padding: 6px;
  35. background-color: white;
  36. box-sizing: border-box;
  37. width: 333px;
  38. height: 36px;
  39. position: absolute;
  40. top: 0;
  41. left: 0;
  42. right: 0;
  43. bottom: 0;
  44. margin: auto;
  45. }
  46. .searchField input {
  47. border: 0;
  48. width: 280px;
  49. height: 30px;
  50. position: absolute;
  51. top: 0;
  52. left: 0;
  53. right: 0;
  54. bottom: 0;
  55. margin: auto 30px auto 10px;
  56. }
  57. .searchField label {
  58. font-size: 25px;
  59. width: 25px;
  60. height: 25px;
  61. position: absolute;
  62. top: 0;
  63. left: 0;
  64. bottom: 0;
  65. right: 0;
  66. margin: auto auto auto 300px;
  67. }
  68. .quick-entry {
  69. /*background-color: red;*/
  70. width: 275px;
  71. height: 33px;
  72. position: absolute;
  73. top: 0;
  74. right: 0;
  75. bottom: 0;
  76. left: 0;
  77. margin: auto 0 auto auto;
  78. }
  79. .quick-entry a {
  80. font-size: 33px;
  81. color: black;
  82. text-decoration: none;
  83. position: relative;
  84. }
  85. .icon-huiyuan1 {
  86. }
  87. .icon-danmu1 {
  88. left: 10px;
  89. }
  90. .icon-fabu {
  91. left: 20px;
  92. }
  93. .icon-fangda {
  94. left: 30px;
  95. }
  96. .icon-huiyuan2 {
  97. left: 40px;
  98. }
  99. .icon-dianzan {
  100. left: 50px;
  101. }
  102. .menuBar {
  103. /*background-color: red;*/
  104. width: 100%;
  105. height: 100px;
  106. position: relative;
  107. top: 100px;
  108. }
  109. .news {
  110. /*background-color: blue;*/
  111. width: 300px;
  112. height: 100px;
  113. position: relative;
  114. left: 60px;
  115. }
  116. .hobby {
  117. /*background-color: blue;*/
  118. width: 300px;
  119. height: 100px;
  120. position: absolute;
  121. left: 370px;
  122. top: 0;
  123. }
  124. .software {
  125. /*background-color: blue;*/
  126. width: 300px;
  127. height: 100px;
  128. position: absolute;
  129. left: 670px;
  130. top: 0;
  131. }
  132. .program {
  133. /*background-color: blue;*/
  134. width: 300px;
  135. height: 100px;
  136. position: absolute;
  137. left: 970px;
  138. top: 0;
  139. }
  140. .icon-shiyongwendang {
  141. font-size: 60px;
  142. width: 40px;
  143. height: 60px;
  144. color: red;
  145. position: absolute;
  146. top: 0;
  147. right: 0;
  148. bottom: 0;
  149. left: 0;
  150. margin: auto auto auto 0;
  151. }
  152. .menuBar a {
  153. font-size: 14px;
  154. font-family: "Andale Mono";
  155. color: black;
  156. text-decoration: none;
  157. position: relative;
  158. }
  159. a:hover {
  160. color: red;
  161. /*font-size: 16px;*/
  162. }
  163. .menuBar li {
  164. list-style: none;
  165. position: absolute;
  166. }
  167. .newsRecom {
  168. /*background-color: green;*/
  169. width: 30px;
  170. height: 45px;
  171. position: absolute;
  172. top: 0;
  173. right: 0;
  174. bottom: 0;
  175. left: 0;
  176. margin: auto auto auto 60px;
  177. }
  178. .zixun {
  179. top: 0;
  180. right: 0;
  181. bottom: 0;
  182. left: 0;
  183. margin: auto;
  184. }
  185. .xuexi {
  186. top: 25px;
  187. right: 0;
  188. bottom: 0;
  189. left: 0;
  190. margin: auto;
  191. }
  192. .seprateline {
  193. width: 1px;
  194. height: 40px;
  195. background-color: lightgray;
  196. position: absolute;
  197. top: 0;
  198. right: 0;
  199. bottom: 0;
  200. left: 0;
  201. margin: auto auto auto 95px;
  202. }
  203. .newsList {
  204. /*background-color: red;*/
  205. width: 140px;
  206. height: 45px;
  207. position: absolute;
  208. top: 0;
  209. right: 0;
  210. bottom: 0;
  211. left: 0;
  212. margin: auto auto auto 100px;
  213. }
  214. .newsList_sub1 {
  215. /*background-color: lightgray;*/
  216. width: 140px;
  217. height: 20px;
  218. position: absolute;
  219. top: 0;
  220. right: 0;
  221. bottom: 0;
  222. left: 0;
  223. margin: 0 auto auto 5px;
  224. }
  225. .newsList_sub2 {
  226. /*background-color: lightgray;*/
  227. width: 140px;
  228. height: 20px;
  229. position: absolute;
  230. top: 0;
  231. right: 0;
  232. bottom: 0;
  233. left: 0;
  234. margin: auto auto 0 5px;
  235. }
  236. .newsList_item1 {
  237. width: 40px;
  238. height: 20px;
  239. position: absolute;
  240. left: 0;
  241. }
  242. .newsList_item2 {
  243. width: 40px;
  244. height: 20px;
  245. position: absolute;
  246. left: 40px;
  247. }
  248. .newsList_item3 {
  249. width: 40px;
  250. height: 20px;
  251. position: absolute;
  252. left: 80px;
  253. }
  254. .newsList_item4 {
  255. width: 40px;
  256. height: 20px;
  257. position: absolute;
  258. left: 120px;
  259. }
  260. .picture {
  261. width: 100%;
  262. position: relative;
  263. top: 150px;
  264. }
  265. .focusImage {
  266. width: 898px;
  267. position: absolute;
  268. left: 50px;
  269. }
  270. .focusImageRight {
  271. width: 295px;
  272. position: absolute;
  273. left: 960px;
  274. }
  275. </style>
  276. </head>
  277. <body>
  278. <div class="index_header">
  279. <div class="headBar">
  280. <a href=""><img class="logoImg" src="images/logo.png" alt="php.cn"></a>
  281. <div class="searchField">
  282. <input type="search" name="search" id="search">
  283. <label for="search" class="iconfont icon-jinduchaxun"></label>
  284. </div>
  285. <div class="quick-entry">
  286. <a href="" class="iconfont icon-huiyuan1"></a>
  287. <a href="" class="iconfont icon-danmu1"></a>
  288. <a href="" class="iconfont icon-fabu"></a>
  289. <a href="" class="iconfont icon-fangda"></a>
  290. <a href="" class="iconfont icon-huiyuan2"></a>
  291. <a href="" class="iconfont icon-dianzan"></a>
  292. </div>
  293. </div>
  294. <div class="menuBar">
  295. <div class="news">
  296. <span class="iconfont icon-shiyongwendang"></span>
  297. <ul class="newsRecom">
  298. <li class="zixun"><a href="">资讯</a></li>
  299. <li class="xuexi"><a href="">学习</a></li>
  300. </ul>
  301. <div class="seprateline"></div>
  302. <div class="newsList">
  303. <ul class="newsList_sub1">
  304. <li class="newsList_item1"><a href="">器材</a></li>
  305. <li class="newsList_item2"><a href="">大师</a></li>
  306. <li class="newsList_item3"><a href="">学院</a></li>
  307. <li class="newsList_item4"><a href="">实战</a></li>
  308. </ul>
  309. <ul class="newsList_sub2">
  310. <li class="newsList_item1"><a href="">器材</a></li>
  311. <li class="newsList_item2"><a href="">大师</a></li>
  312. <li class="newsList_item3"><a href="">学院</a></li>
  313. <li class="newsList_item4"><a href="">实战</a></li>
  314. </ul>
  315. </div>
  316. </div>
  317. <div class="hobby">
  318. <span class="iconfont icon-shiyongwendang"></span>
  319. <ul class="newsRecom">
  320. <li class="zixun"><a href="">爱好</a></li>
  321. <li class="xuexi"><a href="">姐妹</a></li>
  322. </ul>
  323. <div class="seprateline"></div>
  324. <div class="newsList">
  325. <ul class="newsList_sub1">
  326. <li class="newsList_item1"><a href="">优品</a></li>
  327. <li class="newsList_item2"><a href="">图片</a></li>
  328. <li class="newsList_item3"><a href="">喝水</a></li>
  329. <li class="newsList_item4"><a href="">飞机</a></li>
  330. </ul>
  331. <ul class="newsList_sub2">
  332. <li class="newsList_item1"><a href="">坦克</a></li>
  333. <li class="newsList_item2"><a href="">气球</a></li>
  334. <li class="newsList_item3"><a href="">冒险</a></li>
  335. <li class="newsList_item4"><a href="">其他</a></li>
  336. </ul>
  337. </div>
  338. </div>
  339. <div class="software">
  340. <span class="iconfont icon-shiyongwendang"></span>
  341. <ul class="newsRecom">
  342. <li class="zixun"><a href="">软件</a></li>
  343. <li class="xuexi"><a href="">技能</a></li>
  344. </ul>
  345. <div class="seprateline"></div>
  346. <div class="newsList">
  347. <ul class="newsList_sub1">
  348. <li class="newsList_item1"><a href="">学习</a></li>
  349. <li class="newsList_item2"><a href="">爱国</a></li>
  350. <li class="newsList_item3"><a href="">敬业</a></li>
  351. <li class="newsList_item4"><a href="">友善</a></li>
  352. </ul>
  353. <ul class="newsList_sub2">
  354. <li class="newsList_item1"><a href="">富强</a></li>
  355. <li class="newsList_item2"><a href="">互助</a></li>
  356. <li class="newsList_item3"><a href="">民主</a></li>
  357. <li class="newsList_item4"><a href="">其他</a></li>
  358. </ul>
  359. </div>
  360. </div>
  361. <div class="program">
  362. <span class="iconfont icon-shiyongwendang"></span>
  363. <ul class="newsRecom">
  364. <li class="zixun"><a href="">编程</a></li>
  365. <li class="xuexi"><a href="">美女</a></li>
  366. </ul>
  367. <div class="seprateline"></div>
  368. <div class="newsList">
  369. <ul class="newsList_sub1">
  370. <li class="newsList_item1"><a href="">吃饭</a></li>
  371. <li class="newsList_item2"><a href="">周易</a></li>
  372. <li class="newsList_item3"><a href="">黄山</a></li>
  373. <li class="newsList_item4"><a href="">峨眉</a></li>
  374. </ul>
  375. <ul class="newsList_sub2">
  376. <li class="newsList_item1"><a href="">少林</a></li>
  377. <li class="newsList_item2"><a href="">武当</a></li>
  378. <li class="newsList_item3"><a href="">明教</a></li>
  379. <li class="newsList_item4"><a href="">丐帮</a></li>
  380. </ul>
  381. </div>
  382. </div>
  383. </div>
  384. <div class="picture">
  385. <div class="focusImage">
  386. <img src="images/2.jpg" alt="">
  387. </div>
  388. <div class="focusImageRight">
  389. <img src="images/banner-right.jpg" alt="">
  390. </div>
  391. </div>
  392. </div>
  393. </body>
  394. </html>
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议