前因：

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

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

正文：

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

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

 <body>

     <header>

         <img src="Img/logo.png" class="logo" />

         <div class="F_Search">

             <input type="text" class="Search" id="Search" placeholder="Please enter what you want to find" />

             <button class="SearchBtn" onclick="Search('');"></button>

             <nav class="SearchText">

                 <ul>

                     <li><p onclick="Search('test');">test</p></li>

                     <li><p onclick="Search('t');">t</p></li>

                     <li><p onclick="Search('t');">t</p></li>

                     <li><p onclick="Search('t');">t</p></li>

                     <li><p onclick="Search('t');">t</p></li>

                     <li><p onclick="Search('t');">t</p></li>

                     <li><p onclick="Search('t');">t</p></li>

                     <li><p onclick="Search('t');">t</p></li>

                 </ul>

             </nav>

         </div>

         <div class="link">

             <img src="Img/link.png" />

             <div>

                 <h2>Call Us Now :</h2>

                 <span>-------</span>

             </div>

         </div>

     </header>

     <article>

     </article>

     <footer>

         <p><img src="Img/logo.png" style="width:40px;height:40px;padding:10px;vertical-align:middle;" /></p>

     </footer>

 </body>

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

 * {

     margin:;

     padding:;

     list-style: none;

     text-decoration: none;

 }

 /*顶部*/

 header {

     width: 100%;

     display: -webkit-flex;

     display: flex; /*IE必要元素*/

     flex-direction: row;/*排成一行*/

     align-items: center; /*上下居中*/

     padding: 30px;

     box-sizing: border-box;

     justify-content: space-between; /*分散内部元素 中间有空白*/

     border-bottom: 1px solid #e6e6e6;

 }

     header .logo {

         margin-bottom: 10px;

         margin-right: 40px;

         border-radius: 5px 5px;

     }

     header .F_Search {

         padding-left: 20px;

         flex:;

         font-size: 0px;

     }

         header .F_Search .SearchText ul {

             font-size: 12px;

             display: flex; /*IE必要元素*/

             flex-direction: row;

         }

             header .F_Search .SearchText ul li {

                 padding: 10px;

                 padding-top: 5px;

                 box-sizing: border-box;

                 cursor: pointer;

                 color: #A599B0;

             }

     header .Search {

         width: 80%;

         height: 35px;

         border-radius: 10px 0 0 10px;

         border: 1px solid #F9C801;

         vertical-align: middle;

     }

     header .SearchBtn {

         width: 20%;

         vertical-align: middle;

         border: 0px;

         height: 37px;

         width: 60px;

         border-radius: 0 10px 10px 0;

         background: url('../Img/search2.png') no-repeat center center;

         background-color: #F9C801;

         cursor: pointer;

     }

     header .link {

         display: -webkit-flex;

         display: flex; /*IE必要元素*/

         flex-direction: row;

         align-items: center;

     }

         header .link img {

             padding-left: 20px;

             padding-right: 20px;

         }

             header .link img:hover {

                 transform: rotate(360deg);

                 transition: transform 2s;

             }

         header .link h2 {

             color: #596794;

         }

         header .link span {

             padding-left: 20px;

             color: #596794;

         }

@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. Python数据分析中 DataFrame axis=0与axis=1的理解

    python中的axis究竟是如何定义的呢?他们究竟代表是DataFrame的行还是列? 直接上代码people=DataFrame(np.random.randn(5,5), columns=['a ...

  2. Svn CleanUp failed–previous operation has not finished

    Svn CleanUp遇到错误,解决办法: 下载sqlite3.exe 放至要CleanUp的目录中, 命令行进入sqlite3.exe所在目录, 连接数据库 删除工作队列,(此时再CleanUp提示 ...

  3. 小D课堂 - 新版本微服务springcloud+Docker教程_6-04 自定义Zuul过滤器实现登录

    笔记 4.自定义Zuul过滤器实现登录鉴权实战     简介:自定义Zuul过滤器实现登录鉴权实战 1.新建一个filter包 2.新建一个类,实现ZuulFilter,重写里面的方法 3.在类顶部加 ...

  4. 小D课堂 - 新版本微服务springcloud+Docker教程_5-07 断路器dashboard监控仪表

    笔记 7.断路器Dashboard监控仪表盘实战     简介:讲解断路器Dashboard基础使用和查看     1.加入依赖          <dependency>         ...

  5. C++ N叉树的实现

    引言 最近一个项目需要使用多叉树结构来存储数据,但是基于平时学习的都是二叉树的结构,以及网上都是二叉树为基础来进行学习,所以今天实现一个多叉树的数据结构. 理论基础 树和二叉树: 多叉树:多叉树,顾名 ...

  6. 一个提高照片质量的网站和一个改变照片DPI的方法

    相信很多童鞋都有遇到过,碰到一张很喜欢的图片,想用来做背景什么的,蛋似--因为画质太AV了怕引起误会,所以不敢使用!很气--!! 这时大神就会跳出来说,画质不好?PS是用来吃si的么! 我:我才不会用 ...

  7. USACO 1.2 Friday the Thirteenth

    注意闰月的部分细节很多. /* ID:Starry21 LANG:C++ TASK:friday */ #include<iostream> #include<string> ...

  8. smoothscroll

    smoothscroll是一款jQuery插件,可以平滑地滚动到指定的地方. 可以解决chrome锚点失效的问题. 官方网站 http://iamdustan.com/smoothscroll/ gi ...

  9. python之迭代器、可迭代对象、生成器、生成器对象、枚举类型

    迭代器 # 迭代器:循环反馈的容器(集合类型)# -- 不同于索引取值,但也可以循环的从容器对象中从前往后逐个返回内部的值​# 优点:不依赖索引,完成取值# 缺点:不能计算长度,不能指定位取值(只能从 ...

  10. ajax同源策略，jsonP跨域访问

    浏览器处于安全性的考虑,要求ajax请求,必须满足同源策略 规定:访问的协议://域名:端口号都相同时满足同源策略,浏览器可以正确解析数据,否则如果有一项不满足要求,则属于跨域访问,浏览器可以正常获取 ...