Community Learn Tools Library Leisure
search
English
Home > List of blog posts > position的简单布局（12.20作业）--PHP培训十期线上班
Blogger Information
Blog 9
fans 0
comment 0
visits 6200
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
position的简单布局（12.20作业）--PHP培训十期线上班
弃
Original
781 people have browsed it

html代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  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.     <link rel="stylesheet" href="./static/font/iconfont.css">
  8.     <link rel="stylesheet" href="./work.css">
  9.     <title>12月20作业</title>
  10. </head>
  11. <body>
  13.     <div class="body">
  15.         <div class="top">
  16.             <!-- logo -->
  17.             <div class="log">
  18.                 <a href=""><img src="./static/images/logo.png" alt=""></a>
  19.             </div>
  20.             <!-- input-search -->
  21.             <div class="search">
  22.                 <input type="search" id="search">
  23.                 <label for="search" class="iconfont icon-jinduchaxun"></label>
  24.             </div>
  25.             <!-- 快捷导航 -->
  26.             <div class="quit-nav">
  27.                 <em class="iconfont icon-huiyuan1"></em>
  28.                 <em class="iconfont icon-huiyuan1"></em>
  29.                 <em class="iconfont icon-huiyuan1"></em>
  30.                 <em class="iconfont icon-huiyuan1"></em>
  31.                 <em class="iconfont icon-huiyuan1"></em>
  32.                 <em class="iconfont icon-huiyuan1"></em>
  33.             </div>
  34.         </div>
  36.         <div class="nav">
  37.             <div class="nav-item">
  38.                 <em class="iconfont icon-DOC"></em>
  39.                 <div class="nav-item-child1">
  40.                     <a href=""><span>好好</span></a>
  41.                     <a href=""><span>学习</span></a>
  42.                 </div>
  43.                 <div class="nav-item-child2">
  44.                     <a href=""><span>好好</span></a>
  45.                     <a href=""><span>学习</span></a>
  46.                     <a href=""><span>好好</span></a>
  47.                     <a href=""><span>学习</span></a>
  48.                     <a href=""><span>好好</span></a>
  49.                     <a href=""><span>学习</span></a>
  50.                     <a href=""><span>好好</span></a>
  51.                     <a href=""><span>学习</span></a>
  52.                 </div>
  53.             </div>
  54.             <div class="nav-item">
  55.                 <em class="iconfont icon-DOC"></em>
  56.                 <div class="nav-item-child1">
  57.                     <a href=""><span>好好</span></a>
  58.                     <a href=""><span>学习</span></a>
  59.                 </div>
  60.                 <div class="nav-item-child2">
  61.                     <a href=""><span>好好</span></a>
  62.                     <a href=""><span>学习</span></a>
  63.                     <a href=""><span>好好</span></a>
  64.                     <a href=""><span>学习</span></a>
  65.                     <a href=""><span>好好</span></a>
  66.                     <a href=""><span>学习</span></a>
  67.                     <a href=""><span>好好</span></a>
  68.                     <a href=""><span>学习</span></a>
  69.                 </div>
  70.             </div>
  71.             <div class="nav-item">
  72.                 <em class="iconfont icon-DOC"></em>
  73.                 <div class="nav-item-child1">
  74.                     <a href=""><span>好好</span></a>
  75.                     <a href=""><span>学习</span></a>
  76.                 </div>
  77.                 <div class="nav-item-child2">
  78.                     <a href=""><span>好好</span></a>
  79.                     <a href=""><span>学习</span></a>
  80.                     <a href=""><span>好好</span></a>
  81.                     <a href=""><span>学习</span></a>
  82.                     <a href=""><span>好好</span></a>
  83.                     <a href=""><span>学习</span></a>
  84.                     <a href=""><span>好好</span></a>
  85.                     <a href=""><span>学习</span></a>
  86.                 </div>
  87.             </div>
  88.             <div class="nav-item">
  89.                 <em class="iconfont icon-DOC"></em>
  90.                 <div class="nav-item-child1">
  91.                     <a href=""><span>好好</span></a>
  92.                     <a href=""><span>学习</span></a>
  93.                 </div>
  94.                 <div class="nav-item-child2">
  95.                     <a href=""><span>好好</span></a>
  96.                     <a href=""><span>学习</span></a>
  97.                     <a href=""><span>好好</span></a>
  98.                     <a href=""><span>学习</span></a>
  99.                     <a href=""><span>好好</span></a>
  100.                     <a href=""><span>学习</span></a>
  101.                     <a href=""><span>好好</span></a>
  102.                     <a href=""><span>学习</span></a>
  103.                 </div>
  104.             </div>
  105.         </div>
  107.         <div class="bottom">
  108.             <div class="bottom-1">
  109.                 <img src="./static/images/1.jpg" alt="">
  110.             </div>
  111.             <div class="bottom-right">
  112.                 <img src="./static/images/banner-right.jpg" alt="">
  113.             </div>
  114.         </div>
  115.     </div>
  116. </body>
  117. </html>

css代码

  1. /* 初始化 */
  2. *{
  3.     margin: 0;
  4.     padding: 0;
  5.     /* outline: 1px dashed lightcoral; */
  6. }
  8. a{
  9.     color: lightgreen;
  10.     font-size: 13px;
  11.     /* 去掉下划线 */
  12.     text-decoration: none;
  13. }
  14. .body{
  15.     width: 1200px;
  16.     min-height: 300px;
  17.     margin: 30px auto;
  18. }
  19. .body > *{
  20.     margin-bottom: 20px;
  21. }
  22. /* 最上面的div top */
  23. .body > .top{
  24.     height: 70px;
  25.     position: relative;
  26. }
  27. .body > .top *{
  28.     height: inherit;
  29.     line-height: 70px;
  30. }
  31. /* log 图片 */
  32. .body > .top > .log{
  33.     width: 176px;
  34.     position: absolute;
  35.     left:0;
  36.     top: 0;
  37. }
  38. /* 搜索框 */
  39. .body > .top > .search{
  40.     width: 330px;
  41.     position: absolute;
  42.     top: 0;
  43.     right:350px;
  44. }
  45. .body > .top > .quit-nav{
  46.     width: 300px;
  47.     position: absolute;
  48.     top: 0;
  49.     right: 0;
  50. }
  51. .body > .top > .log img{
  52.     height: 100%;
  53.     display: block;
  54. }
  56. /* 搜索框 */
  57. .body > .top > .search input[type='search']{
  58.     width: 330px;
  59.     height: 36px;
  60.     border-radius: 10px;
  61.     padding: 10px;
  62. }
  64. .body > .top > .search input[type='search']:hover{
  65.     box-shadow: 0  0 5px rosybrown;
  66. }
  68. .body > .top > .search input[type='search'] + label{
  69.     font-size: 24px;
  70.     margin-left: -30px;
  71.     position: relative;
  72.     top: 5px;
  73.     right: 10px;
  74. }
  76. .body > .top > .quit-nav > em{
  77.     font-size: 35px;
  78.     margin-right: 10px;
  79. }
  80. .body > .top > .quit-nav > em:hover{
  81.     color:red;
  82.     cursor: pointer;
  83. }
  85. /* 中间导航区 */
  86. .body > .nav{
  87.     height: 45px;
  88. }
  90. .body > .nav > .nav-item{
  91.     width: 300px;
  92.     height: inherit;
  93.     position: relative;
  94.     float: left;
  95. }
  97. .body > .nav > .nav-item em{
  98.     color: red;
  99.     font-size: 40px;
  100.     position: absolute;
  101. }
  103. .body > .nav > .nav-item > .nav-item-child1{
  104.     width: 40px;
  105.     position: absolute;
  106.     left: 46px;
  107.     border-right: 1px solid #cccccc;
  108. }
  110. .body > .nav > .nav-item > .nav-item-child2{
  111.     width: 160px;
  112.     position: absolute;
  113.     right:30px;
  114. }
  116. .body > .nav > .nav-item > .nav-item-child2 a{
  117.     margin-left: 5px;
  118. }
  120. .body > .nav > .nav-item > .nav-item-child2 a:hover{
  121.     color: red;
  122.     text-decoration: rosybrown;
  123. }
  124. .body > .bottom {
  125.     height: 320px;
  126.     position: relative;
  127. }
  128. .body > .bottom > .bottom-1{
  129.     width: 895px;
  130.     position: absolute;
  131.     display: block;
  132. }
  133. .body > .bottom > .bottom-right{
  134.     width: 300px;
  135.     position: absolute;
  136.     display: block;
  137.     right:0;
  138. }

效果展示

总结心得

  1. 在老师没有讲布局之前，自己对布局大概就是一塌糊涂，只知道一点零零散散的知识点，老师讲完之后，心里大概有一个布局的大致思路， 1、先将页面总体的大架子搭出来； 2、在把架子中的小架子搭建出来 3、在对小架子里面的东西进行样式调整。 
  2. 感觉对前端的反感，渐渐没有了。

谢谢老师。

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