Community Learn Tools Library Leisure
search
English
Home > List of blog posts > css中基础页面布局的学习总结 - PHP培训十期线上班
Blogger Information
Blog 2
fans 0
comment 0
visits 991
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
css中基础页面布局的学习总结 - PHP培训十期线上班
长河落日红
Original
441 people have browsed it

目标图片

目前没有学习flex与grid布局，只能使用block，inline-block，position，float实现

  1.     <style>
  2.         *{
  3.             box-sizing: border-box;
  4.         }
  5.         img {
  6.             display: block;
  7.         }
  9.         .wd1200 {
  10.             width: 1200px;
  11.             margin: 0 auto
  12.         }
  14.         header, nav, .banner {
  15.             font-size: 0;
  16.         }
  18.         header > div, nav > .nav-sub, .banner > div, .tools > .tool {
  19.             display: inline-block;
  20.             vertical-align: middle;
  21.         }
  23.         header .logo, header .search, header .tools, header .tools .tool {
  24.             height: 76px;
  25.             line-height: 76px;
  26.         }
  28.         header .logo {
  29.             width: 20%;
  30.             cursor: pointer;
  31.         }
  33.         header .search {
  34.             line-height: 96px;
  35.             width: 55%;
  36.             text-align: right;
  37.             position: relative;
  38.         }
  40.         header .search input {
  41.             font-size: 15px;
  42.             width: 300px;
  43.             border-radius: 10px;
  44.             border: 1px solid #ccc;
  45.             line-height: 2;
  46.         }
  48.         header .search input:hover, .banner img:hover {
  49.             box-shadow: 0 0 10px #aaa;
  50.         }
  52.         header .search i {
  53.             position: absolute;
  54.             top: -5px;
  55.             right: 5px;
  56.             font-size: 25px;
  57.         }
  59.         header .tools {
  60.             width: 25%;
  61.             text-align: right;
  62.         }
  64.         header .tools .tool {
  65.             margin: auto 10px;
  66.         }
  68.         header .tools .tool i {
  69.             font-size: 28px;
  70.             line-height: 86px;
  71.             color: #333;
  72.             cursor: pointer;
  73.         }
  75.         header .tools .tool i:hover {
  76.             color: red;
  77.         }
  79.         nav > .nav-sub {
  80.             padding: 20px 0;
  81.             width: 25%;
  82.         }
  84.         nav > .nav-sub > .left, nav > .nav-sub > .left > div, nav > .nav-sub > .right, nav > .nav-sub > .right > .nav-to {
  85.             display: inline-block;
  86.         }
  88.         nav > .nav-sub > .left {
  89.             border-right: 1px solid #eee;
  90.             width: 25%;
  91.         }
  92.         nav > .nav-sub > .left > div{
  93.             width: 50%;
  94.         }
  96.         nav > .nav-sub > .left > div > i {
  97.             font-size: 40px;
  98.             line-height: 30px;
  99.             color: red;
  100.         }
  102.         nav > .nav-sub > .left > div > p{
  103.             padding: 5px 0;
  104.             text-align: center;
  105.         }
  107.         nav > .nav-sub > .left p, nav > .nav-sub > .right > .nav-to {
  108.             font-size: 14px;
  109.         }
  111.         nav > .nav-sub > .right > .nav-to {
  112.             width: 25%;
  113.             cursor: pointer;
  114.             padding: 5px 0;
  115.             text-align: center;
  116.         }
  118.         .banner .left-banner {
  119.             margin-right: 7px
  120.         }
  121.     </style>
  1. <div class="wd1200">
  2.     <header>
  3.         <div class="logo"><img src="static/images/logo.png" alt=""></div>
  4.         <div class="search"><input type="search"/><i class="iconfont icon-sousuo2"></i></div>
  5.         <div class="tools">
  6.             <div class="tool"><i class="iconfont icon-huiyuan1"></i></div>
  7.             <div class="tool"><i class="iconfont icon-danmu1"></i></div>
  8.             <div class="tool"><i class="iconfont icon-fabu"></i></div>
  9.             <div class="tool"><i class="iconfont icon-fangda"></i></div>
  10.             <div class="tool"><i class="iconfont icon-huiyuan2"></i></div>
  11.             <div class="tool"><i class="iconfont icon-dianzan"></i></div>
  12.         </div>
  13.     </header>
  14.     <nav>
  15.         <div class="nav-sub">
  16.             <div class="left">
  17.                 <div>
  18.                     <i class="iconfont icon-html"></i>
  19.                 </div>
  20.                 <div>
  21.                     <p>摄影</p>
  22.                     <p>摄影</p>
  23.                 </div>
  24.             </div>
  25.             <div class="right">
  26.                 <div class="nav-to">摄影</div>
  27.                 <div class="nav-to">摄影</div>
  28.                 <div class="nav-to">摄影</div>
  29.                 <div class="nav-to">摄影</div>
  30.                 <div class="nav-to">摄影</div>
  31.                 <div class="nav-to">摄影</div>
  32.                 <div class="nav-to">摄影</div>
  33.                 <div class="nav-to">摄影</div>
  34.             </div>
  35.         </div>
  36.         <div class="nav-sub">
  37.             <div class="left">
  38.                 <div>
  39.                     <i class="iconfont icon-html"></i>
  40.                 </div>
  41.                 <div>
  42.                     <p>摄影</p>
  43.                     <p>摄影</p>
  44.                 </div>
  45.             </div>
  46.             <div class="right">
  47.                 <div class="nav-to">摄影</div>
  48.                 <div class="nav-to">摄影</div>
  49.                 <div class="nav-to">摄影</div>
  50.                 <div class="nav-to">摄影</div>
  51.                 <div class="nav-to">摄影</div>
  52.                 <div class="nav-to">摄影</div>
  53.                 <div class="nav-to">摄影</div>
  54.                 <div class="nav-to">摄影</div>
  55.             </div>
  56.         </div>
  57.         <div class="nav-sub">
  58.             <div class="left">
  59.                 <div>
  60.                     <i class="iconfont icon-html"></i>
  61.                 </div>
  62.                 <div>
  63.                     <p>摄影</p>
  64.                     <p>摄影</p>
  65.                 </div>
  66.             </div>
  67.             <div class="right">
  68.                 <div class="nav-to">摄影</div>
  69.                 <div class="nav-to">摄影</div>
  70.                 <div class="nav-to">摄影</div>
  71.                 <div class="nav-to">摄影</div>
  72.                 <div class="nav-to">摄影</div>
  73.                 <div class="nav-to">摄影</div>
  74.                 <div class="nav-to">摄影</div>
  75.                 <div class="nav-to">摄影</div>
  76.             </div>
  77.         </div>
  78.         <div class="nav-sub">
  79.             <div class="left">
  80.                 <div>
  81.                     <i class="iconfont icon-html"></i>
  82.                 </div>
  83.                 <div>
  84.                     <p>摄影</p>
  85.                     <p>摄影</p>
  86.                 </div>
  87.             </div>
  88.             <div class="right">
  89.                 <div class="nav-to">摄影</div>
  90.                 <div class="nav-to">摄影</div>
  91.                 <div class="nav-to">摄影</div>
  92.                 <div class="nav-to">摄影</div>
  93.                 <div class="nav-to">摄影</div>
  94.                 <div class="nav-to">摄影</div>
  95.                 <div class="nav-to">摄影</div>
  96.                 <div class="nav-to">摄影</div>
  97.             </div>
  98.         </div>
  99.     </nav>
  100.     <div class="banner">
  101.         <div class="left-banner">
  102.             <img src="static/images/2.jpg" alt="">
  103.         </div>
  104.         <div class="right-banner">
  105.             <img src="static/images/banner-right.jpg" alt="">
  106.         </div>
  107.     </div>
  108. </div>

最终效果图

个人体会

在没有flex和grid的情况下，用简单的block，inline-block，position，float可以实现单端的精准布局，但是同样的效果，flex或者grid可以使用很少的代码实现，所以现在前端只会这种过时的CSS布局已经不能满足工作需求了。现在还没有学习CSS布局动画，展示方式更炫，CSS3还是很强大的。
虽然现在大部分后台框架基本是响应式布局，但是在前台首页的定制展示中，又很大的考验美工设计布局。同样对前端工程师也是很大的考验。
无论前端还是后端，技术更迭很快，如果不持续学习新技术，终将被这个行业抛弃。

书山有路勤为径，学海无涯苦作舟

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