search

博客列表 >css中基础页面布局的学习总结 - PHP培训十期线上班

css中基础页面布局的学习总结 - PHP培训十期线上班

长河落日红
长河落日红原创
2019年12月30日 21:25:40440浏览

目标图片

目前没有学习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还是很强大的。
虽然现在大部分后台框架基本是响应式布局，但是在前台首页的定制展示中，又很大的考验美工设计布局。同样对前端工程师也是很大的考验。
无论前端还是后端，技术更迭很快，如果不持续学习新技术，终将被这个行业抛弃。

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

上一条：12.25 手写flex项目上的六个属性-页面组件开发思路和总结-导航代码-php10期线上班下一条：网络请求API及抖音小程序接口获取、页面实现（网络请求AIP 获取接口 接口数据与前端页面对接）2019年3月28日
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多