前因：

　　我开始做个收款系统，突然客户跑来要插进一个任务，据说他们老板挺在意的，一个小商场，一个首页，一个详情页，UI无自由发挥，要求，尽量好看点。

一番交谈后，确认这是一个对外的网站，最好移动端也能正常显示（响应式）。

正文：

　　前端这一块我一直在想给自己提升一下，刚好有这个机会，于是就去看了一下Html 5和Css3 发现很多属性确实 比以前方便，其中比如 伸缩盒子flex;  里面的flex-direction，align-items，justify-content 属性 布局确实大大方便了。

html  因为html5 的新标签header,footer,article,section，nav等等 加入，布局 不再全部依赖div

  1.  <body>
  2.      <header>
  3.          <img src="Img/logo.png" class="logo" />
  4.          <div class="F_Search">
  5.              <input type="text" class="Search" id="Search" placeholder="Please enter what you want to find" />
  6.              <button class="SearchBtn" onclick="Search('');"></button>
  7.              <nav class="SearchText">
  8.                  <ul>
  9.                      <li><p onclick="Search('test');">test</p></li>
  10.                      <li><p onclick="Search('t');">t</p></li>
  11.                      <li><p onclick="Search('t');">t</p></li>
  12.                      <li><p onclick="Search('t');">t</p></li>
  13.                      <li><p onclick="Search('t');">t</p></li>
  14.                      <li><p onclick="Search('t');">t</p></li>
  15.                      <li><p onclick="Search('t');">t</p></li>
  16.                      <li><p onclick="Search('t');">t</p></li>
  17.                  </ul>
  18.              </nav>
  19.          </div>
  20.          <div class="link">
  21.              <img src="Img/link.png" />
  22.              <div>
  23.                  <h2>Call Us Now :</h2>
  24.                  <span>-------</span>
  25.              </div>
  26.          </div>
  27.      </header>
  28.      <article>
  29.      </article>
  30.      <footer>
  31.          <p><img src="Img/logo.png" style="width:40px;height:40px;padding:10px;vertical-align:middle;" /></p>
  32.      </footer>
  33.  </body>

CSS: 布局采用 flex弹性布局 这里就展示头部样式 ，其他部分 大同小异

  1.  * {
  2.      margin:;
  3.      padding:;
  4.      list-style: none;
  5.      text-decoration: none;
  6.  }
  7.  /*顶部*/
  8.  header {
  9.      width: 100%;
  10.      display: -webkit-flex;
  11.      display: flex; /*IE必要元素*/
  12.      flex-direction: row;/*排成一行*/
  13.      align-items: center; /*上下居中*/
  14.      padding: 30px;
  15.      box-sizing: border-box;
  16.      justify-content: space-between; /*分散内部元素 中间有空白*/
  17.      border-bottom: 1px solid #e6e6e6;
  18.  }
  19.  
  20.      header .logo {
  21.          margin-bottom: 10px;
  22.          margin-right: 40px;
  23.          border-radius: 5px 5px;
  24.      }
  25.  
  26.      header .F_Search {
  27.          padding-left: 20px;
  28.          flex:;
  29.          font-size: 0px;
  30.      }
  31.  
  32.          header .F_Search .SearchText ul {
  33.              font-size: 12px;
  34.              display: flex; /*IE必要元素*/
  35.              flex-direction: row;
  36.          }
  37.  
  38.              header .F_Search .SearchText ul li {
  39.                  padding: 10px;
  40.                  padding-top: 5px;
  41.                  box-sizing: border-box;
  42.                  cursor: pointer;
  43.                  color: #A599B0;
  44.              }
  45.  
  46.      header .Search {
  47.          width: 80%;
  48.          height: 35px;
  49.          border-radius: 10px 0 0 10px;
  50.          border: 1px solid #F9C801;
  51.          vertical-align: middle;
  52.      }
  53.  
  54.      header .SearchBtn {
  55.          width: 20%;
  56.          vertical-align: middle;
  57.          border: 0px;
  58.          height: 37px;
  59.          width: 60px;
  60.          border-radius: 0 10px 10px 0;
  61.          background: url('../Img/search2.png') no-repeat center center;
  62.          background-color: #F9C801;
  63.          cursor: pointer;
  64.      }
  65.  
  66.      header .link {
  67.          display: -webkit-flex;
  68.          display: flex; /*IE必要元素*/
  69.          flex-direction: row;
  70.          align-items: center;
  71.      }
  72.  
  73.          header .link img {
  74.              padding-left: 20px;
  75.              padding-right: 20px;
  76.          }
  77.  
  78.              header .link img:hover {
  79.                  transform: rotate(360deg);
  80.                  transition: transform 2s;
  81.              }
  82.  
  83.          header .link h2 {
  84.              color: #596794;
  85.          }
  86.  
  87.          header .link span {
  88.              padding-left: 20px;
  89.              color: #596794;
  90.          }

@media only screen and (min-width: 320px) and (max-width: 1000px) {
header {
top: 0;
position: fixed;
padding: 0px;
width: 100%;
}
header .F_Search {
width:100%;
font-size: 0px;
}
header .logo,header .link,header .SearchText{
display: none;
}
}

Html5+Css3小试牛刀的更多相关文章

  1. 8个前沿的 HTML5 & CSS3 效果【附源码下载】

    作为一个前沿的 Web 开发者,对于 HTML5 和 CSS3 技术或多或少都有掌握.前几年这些新技术刚萌芽的时候,开发者们已经使用它们来小试牛刀了,如今这些先进技术已经遍地开发,特别是在移动端大显身 ...

  2. Web大前端时代之：HTML5+CSS3入门系列

    准备来一波新技术,待续.... Old: 联系源码:https://github.com/dunitian/LoTHTML5 文档下载:https://github.com/dunitian/LoTD ...

  3. 07. Web大前端时代之：HTML5+CSS3入门系列~H5 地理位置

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...

  4. 01.Web大前端时代之：HTML5+CSS3入门系列~初识HTML5

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 文档申明 <!--文档类型申明,html代表是ht ...

  5. 02.Web大前端时代之：HTML5+CSS3入门系列~H5结构元素

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 1.结构元素 可以理解为语义话标记,比如:以前这么写&l ...

  6. 03.Web大前端时代之：HTML5+CSS3入门系列~H5功能元素

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 2.功能元素 1.hgroup 对网页或区段(secti ...

  7. 04. Web大前端时代之：HTML5+CSS3入门系列~HTML5 表单

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 一.input新增类型: 1.tel:输入类型用于应该包 ...

  8. 05. Web大前端时代之：HTML5+CSS3入门系列~H5 多媒体系

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 1.引入 概述 音频文件或视频文件都可以看做是一个容器文 ...

  9. 06. Web大前端时代之：HTML5+CSS3入门系列~HTML5 画布

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 我们先看看画布的魅力: 初始画布 canvas默认是宽3 ...

随机推荐

  1. ThreadLocal详解【使用场景】

    转: 么是ThreadLocal 根据JDK文档中的解释:ThreadLocal的作用是提供线程内的局部变量,这种变量在多线程环境下访问时能够保证各个线程里变量的独立性. 从这里可以看出,引入Thre ...

  2. Turbine Netflix

    Turbine是聚合服务器发送事件流数据的一个工具,用来监控集群下hystrix的metrics情况. 本实例是在consul做为服务发现时的配置. Turbine聚合器: 可以参照:https:// ...

  3. 一百零五：CMS系统之flask-mail使用和邮箱配置、发送邮件功能

    安装:pip install flask-mail 官方文档:https://pythonhosted.org/Flask-Mail/ 邮箱配置 MAIL_SERVER = 'smtp.qq.com' ...

  4. powerdesigner通过er图生成mysql执行文件

    PowerDesigner是一款功能非常强大的建模工具软件,足以与Rose比肩,同样是当今最著名的建模软件之一.Rose是专攻UML对象模型的建模工具,之后才向数据库建模发展,而PowerDesign ...

  5. requestLibrary API

    requestLibrary API Keyword Arguments Documentation Create Ntlm Session alias, url, auth, headers={}, ...

  6. tcp协议相关概念

    conv 会话IDmtu 最大传输单元mss 最大分片大小state 连接状态(0xFFFFFFFF表示断开连接)snd_una 第一个未确认的包snd_nxt 待发送包的序号rcv_nxt 待接收消 ...

  7. MySQL数据操作语句精解

    用于操作数据库的SQL一般分为两种,一种是查询语句,也就是我们所说的SELECT语句,另外一种就是更新语句,也叫做数据操作语句. 言外之意,就是对数据进行修改.在标准的SQL中有3个语句,它们是INS ...

  8. kNN进邻算法

    一.算法概述 (1)采用测量不同特征值之间的距离方法进行分类 优点: 精度高.对异常值不敏感.无数据输入假定. 缺点: 计算复杂度高.空间复杂度高. (2)KNN模型的三个要素 kNN算法模型实际上就 ...

  9. epoll 数据库安装以及相关概念

    epoll select 只能同时处理1024个客户端, 多线程会遇到资源瓶颈,什么才是解决高并发最有效的方式呢 linux中提供了epoll 这种多路复用的IO模型,注意其他平台没有相应的实现 所以 ...

  10. Top 5 Business Messaging Announcements at Facebook F8 2019

    Top 5 Business Messaging Announcements at Facebook F8 2019 By Iaroslav Kudritskiy May 2, 2019 With t ...