Html5+Css3小试牛刀
前因：
我开始做个收款系统，突然客户跑来要插进一个任务，据说他们老板挺在意的，一个小商场，一个首页，一个详情页，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小试牛刀的更多相关文章
- 8个前沿的 HTML5 & CSS3 效果【附源码下载】
作为一个前沿的 Web 开发者,对于 HTML5 和 CSS3 技术或多或少都有掌握.前几年这些新技术刚萌芽的时候,开发者们已经使用它们来小试牛刀了,如今这些先进技术已经遍地开发,特别是在移动端大显身 ...
- Web大前端时代之：HTML5+CSS3入门系列
准备来一波新技术,待续.... Old: 联系源码:https://github.com/dunitian/LoTHTML5 文档下载:https://github.com/dunitian/LoTD ...
- 07. Web大前端时代之：HTML5+CSS3入门系列~H5 地理位置
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...
- 01.Web大前端时代之：HTML5+CSS3入门系列~初识HTML5
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 文档申明 <!--文档类型申明,html代表是ht ...
- 02.Web大前端时代之：HTML5+CSS3入门系列~H5结构元素
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 1.结构元素 可以理解为语义话标记,比如:以前这么写&l ...
- 03.Web大前端时代之：HTML5+CSS3入门系列~H5功能元素
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 2.功能元素 1.hgroup 对网页或区段(secti ...
- 04. Web大前端时代之：HTML5+CSS3入门系列~HTML5 表单
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 一.input新增类型: 1.tel:输入类型用于应该包 ...
- 05. Web大前端时代之：HTML5+CSS3入门系列~H5 多媒体系
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 1.引入 概述 音频文件或视频文件都可以看做是一个容器文 ...
- 06. Web大前端时代之：HTML5+CSS3入门系列~HTML5 画布
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 我们先看看画布的魅力: 初始画布 canvas默认是宽3 ...
随机推荐
- Java中非静态成员变量、静态成员变量的初始化时机
转: Java中非静态成员变量.静态成员变量的初始化时机. 2018年05月22日 11:48:11 SilenceCarrot 阅读数 421 版权声明:技术就要分享才有意思,欢迎大家分享(注明 ...
- 小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_2-6.Mysql逆向工程效率神器之使用IDE自动生成Java实体类
笔记 6.Mysql逆向工程效率神器之使用IDE自动生成Java实体类 简介:实战使用IDE根据Mysql自动生成java pojo实体类 1.IDEA连接数 ...
- golang 中国代理
vim /etc/profile export GO11MODULE=onexport GO111MODULE=onexport GOPROXY=https://goproxy.io source / ...
- OSI 的七层模型
一.概念 概念:开放系统互联参考模型,是由 ISO(国际标准化组织)定义的.目的:规范不同系统的互联标准,使两个不同的系统能够较容易的通讯. 网络刚面世时,通常只有同一家厂商的计算机才能彼此通讯.OS ...
- 【Zookeeper】利用zookeeper搭建Hdoop HA高可用
HA概述 所谓HA(high available),即高可用(7*24小时不中断服务). 实现高可用最关键的策略是消除单点故障.HA严格来说应该分成各个组件的HA机制:HDFS的HA和YARN的HA. ...
- Day04:异常处理(二) / 多线程基础
多线程 线程是什么? 一个线程是线程一个顺序执行流. 同类的多个线程共享一块内存空间和一组系统资源,线程本身有一个供程序执行时的栈堆.线程在切换时负荷小,因此,线程也被称为轻负荷进程.一个进程中可以包 ...
- discriminator 鉴别器
在特定的情况下使用不同的pojo进行关联, 鉴别器元素就是被设计来处理这个情况的.鉴别器非常容易理解,因为它的表现很像 Java 语言中的 switch 语句:discriminator 标签常用的两 ...
- C学习笔记-字符串处理函数
字符串函数是最问常用的库函数之一,本文整理了常用的字符串函数,其来源为互联网 函数名: stpcpy 功 能: 拷贝一个字符串到另一个 用 法: char *stpcpy(char *destin, ...
- 用maven建立一个工程
建立java工程 mvn archetype:generate -DgroupId=cn.maxhou.demo -DartifactId=myapp -DarchetypeArtifactId=ma ...
- SpringCloud学习（八）消息总线(Spring Cloud Bus)(Finchley版本)
Spring Cloud Bus 将分布式的节点用轻量的消息代理连接起来.它可以用于广播配置文件的更改或者服务之间的通讯,也可以用于监控.本文要讲述的是用Spring Cloud Bus实现通知微服务 ...