前因:

  我开始做个收款系统,突然客户跑来要插进一个任务,据说他们老板挺在意的,一个小商场,一个首页,一个详情页,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. 图片滚动js代码

          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

  2. Djang之ModelForm组件的简单使用

    ModelForm组件的简单使用 models.py from django.db import models class UserInfo(models.Model): username = mod ...

  3. 小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_6-1.常用的第三方支付和聚合支付介绍

    笔记 第六章 开发在线教育视频站点核心业务之从零基础接入 微信扫一扫网页支付 1.常用的第三方支付和聚合支付介绍     简介:介绍常用的第三方支付和聚合支付 1.什么是第三方支付         第 ...

  4. JAVA 基础编程练习题15 【程序 15 排序】

    15 [程序 15 排序] 题目:输入三个整数 x,y,z,请把这三个数由小到大输出. 程序分析:我们想办法把最小的数放到 x 上,先将 x 与 y 进行比较,如果 x>y 则将 x 与 y 的 ...

  5. GB、GBDT、XGboost理解

    GBDT和xgboost在竞赛和工业界使用都非常频繁,能有效的应用到分类.回归.排序问题,虽然使用起来不难,但是要能完整的理解还是有一点麻烦的.本文尝试一步一步梳理GB.GBDT.xgboost,它们 ...

  6. 【VS开发】EasySize使用设置CFormView空间自适应view窗口大小

    1.在stdafx.h中引用EasySize.h头文件(同时将EasySize.h放到你的程序目录中) 2.在类定义中添加DECLARE_EASYSIZE [cpp] view plain copy ...

  7. Nginx进程信号管理

    CHLD信号:work进程异常退出会给Master进程发送CHLD信号,这时Master进程就知道Worker进程退出了,然后重新起一个Worker进程: TERM信号:退出进程,不优雅: QUIT信 ...

  8. 数据库连接池的sqlhelper

    import pymysql import threading from DBUtils.PooledDB import PooledDB """ storage = { ...

  9. Elastic Search中Query String常见语法

    1 搜索所有数据timeout参数:是超时时长定义.代表每个节点上的每个shard执行搜索时最多耗时多久.不会影响响应的正常返回.只会影响返回响应中的数据数量.如:索引a中,有10亿数据.存储在5个s ...

  10. error: [Errno 13] Permission denied: '/usr/local/lib/处理方法

    在ubuntu系统下使用pip 命令安装包时,出现以下类似错误提示: error: [Errno 13] Permission denied: '/usr/local/lib/python2.7/di ...