search

博客列表 >position的简单布局（12.20作业）--PHP培训十期线上班

position的简单布局（12.20作业）--PHP培训十期线上班

弃
弃原创
2019年12月25日 00:19:52775浏览

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. 感觉对前端的反感，渐渐没有了。

谢谢老师。

上一条：12月23日 学号：478291 弹性布局下一条：Flex(弹性布局)初体验
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多