Html5和Css3扁平化风格网页

前言

扁平化概念的核心意义

去除冗余、厚重和繁杂的装饰效果。而具体表现在去掉了多余的透视、纹理、渐变以及能做出3D效果的元素，这样可以让“信息”本身重新作为核心被凸显出来。同时在设计元素上，则强调了抽象、极简和符号化。

示例

视频效果：http://files.cnblogs.com/files/abao0/webPage.swf

截图效果：http://images.cnblogs.com/cnblogs_com/abao0/975461/o_webpage2.gif

正文

1.代码部分

html代码

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>HTML5和CSS3扁平化风格博客</title>

     <link rel="stylesheet" type="text/css" href="index.css"/>

     <link rel="stylesheet" type="text/css" href="normalize.css"/>

 </head>

 <body>

 <div id="main_wrapper">

 <header>

     <nav>

         <div class="logo"><a href="">张小窝</a></div>

         <ul>

             <li><a href="">链接1</a></li>

             <li><a href="">链接2</a></li>

             <li><a href="">链接3</a></li>

             <li><a href="">链接4</a></li>

         </ul>

     </nav>

     <div id="banner">

         <div class="inner">

             <div class="hr"></div>

             <h1>张小窝</h1>

             <div class="hr"></div>

             <p>welcome to my blog</p>

             <button>了解我</button>

             <div class="more">更多</div>

             <br/>

             <img src="data:images/arrow.png"/>

         </div>

     </div>

 </header>

 <div id="content" class="clearfix">

     <section class="green_section">

         <div class="wrapper">

             <div>

                 <h2>标题1</h2>

                 <h3>标题2</h3>

                 <div class="hr"></div>

                 <p>欢迎来到我的博客欢迎来到我的博客欢迎来到我的博客欢

                     迎来到我的博客欢迎来到我的博客欢迎来到我的博客</p>

             </div>

         </div>

         <div class="icon_group">

             <span class="icon">

             items

             </span>

             <span class="icon">item2</span>

             <span class="icon">item3</span>

         </div>

     </section>

     <section class="gray_section">

         <div class="article_preview">

             <div class="image_section">

                 <img src="data:images/pic01.jpg" alt="图片1">

             </div>

             <div class="text_section">

                 <h2>又一个标题</h2>

                 <p class="p">又一个子标题</p>

                 <p>这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容</p>

             </div>

         </div>

         <div class="article_preview">

             <div class="text_section">

                 <h2>又一个标题</h2>

                 <p class="p">又一个子标题</p>

                 <p>这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容</p>

             </div>

             <div class="image_section">

                 <img src="data:images/pic02.jpg" alt="图片2">

             </div>

         </div>

         <div class="article_preview">

             <div class="image_section">

                 <img src="data:images/pic03.jpg" alt="图片3">

             </div>

             <div class="text_section">

                 <h2>又一个标题</h2>

                 <p class="p">又一个子标题</p>

                 <p>这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容</p>

             </div>

         </div>

     </section>

     <section class="purple_section clearfix">

         <div class="wrapper">

             <div class="heading_wrapper">

                 <h2>又一个标题</h2>

                 <div class="hr"></div>

                 <div class="sub_heading">

                    <p>这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容

                        这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容

                    </p>

                 </div>

             </div>

             <div class="card_ground

             clearfix" >

                 <div class="card">

                     <h3>这是标题</h3>

                     <p>这是内容</p>

                 </div>

                 <div class="card">

                     <h3>这是标题</h3>

                     <p>这是内容</p></div>

                 <div class="card">

                     <h3>这是标题</h3>

                     <p>这是内容</p>

                 </div>

                 <div class="card">

                     <h3>这是标题</h3>

                     <p>这是内容</p></div>

                 <div class="card">

                     <h3>这是标题</h3>

                     <p>这是内容</p>

                 </div>

                 <div class="card">

                     <h3>这是标题</h3>

                     <p>这是内容</p></div>

             </div>

         </div>

     </section>

 </div>

 <footer>

         <div id="footer">

             <div class="line"><span></span>

                 <div class="author"></div>

             </div>

         <section class="info clearfix">

             <p >

                 吾生也有涯<br/>

                 而知也无涯

             </p>

         </section>

     <div class="icon_link">

         <a href="" target="_blank" title="github" class="icon_github"> <img src="data:images/github.png" /></a>

         <a href="" target="_blank" title="email" class="icon_email"> <img src="data:images/email.png" /></a>

     </div>

             <p class="copy">

                 张小窝  ©2017-2020

             </p>

         </div>

 </footer>

 </div>

 </body>

 </html>

html代码

css代码

 /*清除浮动*/

 .clearfix:after{

     content: "";

     display: block;

     clear: both;

 }

 body{

     margin: 0px;

 }

 ul{

     margin:;

 }

 nav{

     background:#303843;

     height: 50px;

 }

 p{  margin: 0px;

     font-size: 16px;

     letter-spacing: 1px;

 }

 button{

     border: none;

     background: #E03838;

     padding: 10px 20px;

     border-radius: 5px;

 }

 header{

     background: rgba(0,0,0,0.3);

 }

 #main_wrapper{

     magin:;padding:;

     background: url("images/banner.jpg");

     background-attachment: fixed ;

     background-repeat: no-repeat;

     background-size: cover;

     background-position: center center;

 }

 #banner .inner .hr

 {

     margin:0 auto;

     border-top:2px solid #fff;

     width:50%;

 }

 #banner{

     height: 600px;

 }

 nav ul{

     list-style: none;

     margin: 0px;

     float: right;

 }

 nav ul li,nav .logo{

     display: inline-block;

     line-height: 50px;

     margin-right: 20px;

 }

 nav ul li a{

     display: inline-block;

     line-height: 50px;

    text-decoration: none;

     display: inline-block;

     height: inherit;

     color: #fff;

 }

 nav .logo{

     float: left;

     margin-left: 20px;

 }

 nav .logo a{

     font-size: 18px;

     font-weight:;

     text-decoration: none;

     letter-spacing: 2px;

     color: #fff;

 }

 #banner .inner h1{

     margin: 15px;

     color: #fff;

 }

 #banner .inner p,#banner .inner button,#banner .inner .more{

     color: #fff;

 }

 #banner .inner{

     line-height: 30px;

      width: 400px;

     margin: 0 auto;

     text-align: center;

     position: relative;

     top:170px;

 }

 #banner .inner .more{

     margin-top: 170px;

 }

 /*绿色section的开始*/

 .green_section{

     text-align: center;

     background-color: #2EC2A5;

     padding: 80px;

     color: #fff;

 }

 .wrapper{

     width: 600px;

     height: 200px;

     margin: 0 auto;

 }

 .green_section .hr{

     background: #25AF95;

     width: 40%;

     margin: 0 auto;

 }

 .green_section p{

     line-height: 30px;

     letter-spacing: 2px;

 }

 .hr{

     height: 2px;

     width: 100%;

     margin: 0 auto;

     margin: 20px 0px;

 }

 .green_section .icon_group .icon{

     display: inline-block;

     width: 70px;

     height: 70px;

     border:2px solid #1FB194;

     transform: rotate(45deg);

     margin: 20px;

 }

 /*灰色section的开始*/

 .gray_section .image_section{

     width:45%;

 }

 .image_section img{

     width: 100%;

 }

 .article_preview > div{

     float: left;

     font-size: 0px;

 }

 .gray_section{

     background: #252A34;

     color: #fff;

 }

 .gray_section .text_section{

     width:55%;

 }

 .article_preview:after{

     content: "";

     display: block;

     clear: both;

 }

 .text_section{

     position: relative;

     top:150px;

     left: 100px;

 }

 .text_section >*{

     max-width: 90%;

 }

 .text_section h2{

     margin-top:;

     font-size: 24px;

     line-height: 10px;

 }

 .text_section  .p{

     font-size: 20px;

 }

 .text_section p{

     font-size: 16px;

     letter-spacing: 1px;

     line-height: 20px;

 }

 .article_preview:nth-child(odd){

     background: rgba(255,255,255,0.02);

 }

 /*紫色section的开始*/

 .purple_section{

     background: #524E92;

     color: #fff;

     padding: 80px;

 }

 .heading_wrapper >div{

     font-size: 0px ;

 }

 .purple_section h2{

     font-size: 22px;

     margin-top: 0px;

 }

 .purple_section .hr{

     background: #4C4889;

     width: 20%;

     margin: 0 auto;

 }

 .card_ground .card h3{

     font-size: 17px;

     line-height: 10px;

 }

 .heading_wrapper{

     text-align: center;

 }

 .card{

     float: left;

     width:50%;

     min-height: 250px;

     padding: 50px;

     -webkit-box-sizing: border-box;

     -moz-box-sizing: border-box;

     box-sizing: border-box;

     /*border: 1px solid black;*/

 }

 .card:first-child{

     background: rgba(0,0,0,0.02);

 }

 .card:nth-child(2){

     background: rgba(0,0,0,0.04);

 }

 .card:nth-child(3){

     background: rgba(0,0,0,0.06);

 }

 .card:nth-child(4){

     background: rgba(0,0,0,0.08);

 }

 .card:nth-child(5){

     background: rgba(0,0,0,0.10);

 }

 .card:last-child{

     background: rgba(0,0,0,0.11);

 }

 /*页脚*/

 footer {

     margin-top: 0em;

     background: #1F1F1F;

     padding: 0 2% .5em;

     padding-bottom: 0px;

 }

 #footer {

     width: 95%;

     margin: 0 auto;

     position: relative;

 }

 #footer .line {

     width: 10em;

     float: left;

     position: relative;

     height: 14em;

     margin: 0 auto;

 }

 #footer .line span {

     position: absolute;

     left: 3em;

     margin: 0 0 1.5em;

     display: block;

     width: .5em;

     height: 6.25em;

     border-right: .125em solid #fff;

     margin: 0 auto;

 }

 .author {

     position: absolute;

     top: 6em;

     margin: 0 0 1.5em;

     width: 6.875em;

     height: 6.875em;

     margin: 0 auto;

     background: url("images/momo.jpg") left top no-repeat;

     -webkit-background-size: 6.875em 6.875em;

     -moz-background-size: 6.875em 6.875em;

     background-size: 6.875em 6.875em;

     -webkit-border-radius: 3.4375em;

     border-radius: 3.4375em;

     -webkit-transition: -webkit-transform 0.2s ease-out;

     -moz-transition: -moz-transform 0.2s ease-out;

     -o-transition: -o-transform 0.2s ease-out;

     -ms-transition: -ms-transform 0.2s ease-out;

 }

 .author:hover{

     -webkit-transform: rotateZ(720deg);

     -moz-transform: rotateZ(720deg);

     -o-transform: rotateZ(720deg);

     -ms-transform: rotateZ(720deg);

     transform: rotateZ(720deg);

 }

 #footer .line{

     width: 10em;

     float: left;

     position: relative;

 }

 .info{

     width:900px;

     height: 200px;

     margin: 0 auto;

 }

 .info p{

     margin-top: 110px;

     color: #fff;

     display: inline-block;

     font-family: 华文行楷;

     font-size: 40px;

     letter-spacing: 2px;

 }

 .icon_link{

     width: 15em;

     position: absolute;

     right: -2em;

     top: 4em;

     letter-spacing: 25px;

 }

 .copy{

     width: inherit;

     text-align: center;

     color: #fff;

     display: inline-block;

     font-size: 16px;

     font-family: 方正舒体;

     letter-spacing: 2px;

     position: relative;

     padding-bottom: 10px;

 }

css代码

附加：1.我在项目里引入了一个正常化样式：http://necolas.github.io/normalize.css/。需要的可以去官网下载，或者直接创建一个CSS,复制下面代码进去。

normalize.css

/*! normalize.css v6.0.0 | MIT License | github.com/necolas/normalize.css */

/* Document

   ========================================================================== */

/**

 * 1. Correct the line height in all browsers.

 * 2. Prevent adjustments of font size after orientation changes in

 *    IE on Windows Phone and in iOS.

 */

html {

  line-height: 1.15; /* 1 */

  -ms-text-size-adjust: 100%; /* 2 */

  -webkit-text-size-adjust: 100%; /* 2 */

}

/* Sections

   ========================================================================== */

/**

 * Add the correct display in IE 9-.

 */

article,

aside,

footer,

header,

nav,

section {

  display: block;

}

/**

 * Correct the font size and margin on `h1` elements within `section` and

 * `article` contexts in Chrome, Firefox, and Safari.

 */

h1 {

  font-size: 2em;

  margin: 0.67em 0;

}

/* Grouping content

   ========================================================================== */

/**

 * Add the correct display in IE 9-.

 * 1. Add the correct display in IE.

 */

figcaption,

figure,

main { /* 1 */

  display: block;

}

/**

 * Add the correct margin in IE 8.

 */

figure {

  margin: 1em 40px;

}

/**

 * 1. Add the correct box sizing in Firefox.

 * 2. Show the overflow in Edge and IE.

 */

hr {

  box-sizing: content-box; /* 1 */

  height:; /* 1 */

  overflow: visible; /* 2 */

}

/**

 * 1. Correct the inheritance and scaling of font size in all browsers.

 * 2. Correct the odd `em` font sizing in all browsers.

 */

pre {

  font-family: monospace, monospace; /* 1 */

  font-size: 1em; /* 2 */

}

/* Text-level semantics

   ========================================================================== */

/**

 * 1. Remove the gray background on active links in IE 10.

 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.

 */

a {

  background-color: transparent; /* 1 */

  -webkit-text-decoration-skip: objects; /* 2 */

}

/**

 * 1. Remove the bottom border in Chrome 57- and Firefox 39-.

 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.

 */

abbr[title] {

  border-bottom: none; /* 1 */

  text-decoration: underline; /* 2 */

  text-decoration: underline dotted; /* 2 */

}

/**

 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.

 */

b,

strong {

  font-weight: inherit;

}

/**

 * Add the correct font weight in Chrome, Edge, and Safari.

 */

b,

strong {

  font-weight: bolder;

}

/**

 * 1. Correct the inheritance and scaling of font size in all browsers.

 * 2. Correct the odd `em` font sizing in all browsers.

 */

code,

kbd,

samp {

  font-family: monospace, monospace; /* 1 */

  font-size: 1em; /* 2 */

}

/**

 * Add the correct font style in Android 4.3-.

 */

dfn {

  font-style: italic;

}

/**

 * Add the correct background and color in IE 9-.

 */

mark {

  background-color: #ff0;

  color: #000;

}

/**

 * Add the correct font size in all browsers.

 */

small {

  font-size: 80%;

}

/**

 * Prevent `sub` and `sup` elements from affecting the line height in

 * all browsers.

 */

sub,

sup {

  font-size: 75%;

  line-height:;

  position: relative;

  vertical-align: baseline;

}

sub {

  bottom: -0.25em;

}

sup {

  top: -0.5em;

}

/* Embedded content

   ========================================================================== */

/**

 * Add the correct display in IE 9-.

 */

audio,

video {

  display: inline-block;

}

/**

 * Add the correct display in iOS 4-7.

 */

audio:not([controls]) {

  display: none;

  height:;

}

/**

 * Remove the border on images inside links in IE 10-.

 */

img {

  border-style: none;

}

/**

 * Hide the overflow in IE.

 */

svg:not(:root) {

  overflow: hidden;

}

/* Forms

   ========================================================================== */

/**

 * Remove the margin in Firefox and Safari.

 */

button,

input,

optgroup,

select,

textarea {

  margin:;

}

/**

 * Show the overflow in IE.

 * 1. Show the overflow in Edge.

 */

button,

input { /* 1 */

  overflow: visible;

}

/**

 * Remove the inheritance of text transform in Edge, Firefox, and IE.

 * 1. Remove the inheritance of text transform in Firefox.

 */

button,

select { /* 1 */

  text-transform: none;

}

/**

 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`

 *    controls in Android 4.

 * 2. Correct the inability to style clickable types in iOS and Safari.

 */

button,

html [type="button"], /* 1 */

[type="reset"],

[type="submit"] {

  -webkit-appearance: button; /* 2 */

}

/**

 * Remove the inner border and padding in Firefox.

 */

button::-moz-focus-inner,

[type="button"]::-moz-focus-inner,

[type="reset"]::-moz-focus-inner,

[type="submit"]::-moz-focus-inner {

  border-style: none;

  padding:;

}

/**

 * Restore the focus styles unset by the previous rule.

 */

button:-moz-focusring,

[type="button"]:-moz-focusring,

[type="reset"]:-moz-focusring,

[type="submit"]:-moz-focusring {

  outline: 1px dotted ButtonText;

}

/**

 * 1. Correct the text wrapping in Edge and IE.

 * 2. Correct the color inheritance from `fieldset` elements in IE.

 * 3. Remove the padding so developers are not caught out when they zero out

 *    `fieldset` elements in all browsers.

 */

legend {

  box-sizing: border-box; /* 1 */

  color: inherit; /* 2 */

  display: table; /* 1 */

  max-width: 100%; /* 1 */

  padding:; /* 3 */

  white-space: normal; /* 1 */

}

/**

 * 1. Add the correct display in IE 9-.

 * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.

 */

progress {

  display: inline-block; /* 1 */

  vertical-align: baseline; /* 2 */

}

/**

 * Remove the default vertical scrollbar in IE.

 */

textarea {

  overflow: auto;

}

/**

 * 1. Add the correct box sizing in IE 10-.

 * 2. Remove the padding in IE 10-.

 */

[type="checkbox"],

[type="radio"] {

  box-sizing: border-box; /* 1 */

  padding:; /* 2 */

}

/**

 * Correct the cursor style of increment and decrement buttons in Chrome.

 */

[type="number"]::-webkit-inner-spin-button,

[type="number"]::-webkit-outer-spin-button {

  height: auto;

}

/**

 * 1. Correct the odd appearance in Chrome and Safari.

 * 2. Correct the outline style in Safari.

 */

[type="search"] {

  -webkit-appearance: textfield; /* 1 */

  outline-offset: -2px; /* 2 */

}

/**

 * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.

 */

[type="search"]::-webkit-search-cancel-button,

[type="search"]::-webkit-search-decoration {

  -webkit-appearance: none;

}

/**

 * 1. Correct the inability to style clickable types in iOS and Safari.

 * 2. Change font properties to `inherit` in Safari.

 */

::-webkit-file-upload-button {

  -webkit-appearance: button; /* 1 */

  font: inherit; /* 2 */

}

/* Interactive

   ========================================================================== */

/*

 * Add the correct display in IE 9-.

 * 1. Add the correct display in Edge, IE, and Firefox.

 */

details, /* 1 */

menu {

  display: block;

}

/*

 * Add the correct display in all browsers.

 */

summary {

  display: list-item;

}

/* Scripting

   ========================================================================== */

/**

 * Add the correct display in IE 9-.

 */

canvas {

  display: inline-block;

}

/**

 * Add the correct display in IE.

 */

template {

  display: none;

}

/* Hidden

   ========================================================================== */

/**

 * Add the correct display in IE 10-.

 */

[hidden] {

  display: none;

}

normalize

2.项目中所有引用的图片有8张，地址为：图片1，图片2，图片3，图片4，图片5，图片6，图片7，图片8

Html5和Css3扁平化风格网页的更多相关文章

HTML5和CSS3扁平化风格博客(基础篇)
多学一点总是好的~ 自始至终都觉得的css和html效果比较美观,于是在看慕课网教程时,自己也跟着敲了深爱着的前端代码这部分分为两部分:①基础篇:http://www.imooc.com/learn ...
HTML5和CSS3扁平化风格博客(进阶篇)
趁热打铁,将剩下的部分完结~ 接上篇,增加了一些js特效:侧边栏,返回顶部. 至于效果,也不知道gif的图片怎么显示不上去了无奈只能直接上代码了,完整版请点击: https://files.cnbl ...
一款简易的CSS3扁平化风格联系表单
CSS3扁平化风格联系表单是一款CSS3简易联系表单非常清新,整体外观不是那么华丽,但是表单扁平化的风格让人看了非常舒服,同时利用了HTML5元素的特性,表单的验证功能变得也相当简单.经测试效果相当不 ...
PS绘制扁平化风格相机镜头UI图标
一.新建一个画布,绘制一个460*460图层,圆角半径40像素.填充渐变颜色,加一点点投影,这样就有质感了. 二.接下来我们要来绘制主体部分,绘制一个圆,大小400*400,用内阴影,渐变叠加,投影得 ...
CSS3扁平化Loading动画特效
效果预览:http://hovertree.com/texiao/css3/42/ 代码如下: <!doctype html> <html> <head> < ...
HTML5和CSS3 PC端静态网页琐碎知识点
1.PC端为了兼容IE9以及IE9以下,尽量要使用float进行布局,兼容性好,一般不要用flex进行布局. 2.问起CSS选择器的分类,先说id选择器,类选择器,属性选择器,伪类选择器,伪元素选择器 ...
PPT扁平化风格设计手册
钱文嘉:颜色选择,搭配 http://www.pptfans.cn/341917.html
jQuery扁平化风格手风琴菜单
在线演示本地下载
纯CSS实现扁平化风格开关按钮
开关样式预览图前言最近在基于bootstrap框架开发一个网站,在填写表单一项需要用户填写是否选择某一选项,本来想引用bootstrap框架自带的一个按钮插件,结果在引用js的时候总是出错,就找了 ...

随机推荐

源码中transient的用途
Java的serialization提供了一种持久化对象实例的机制.当持久化对象时,可能有一个特殊的对象数据成员,我们不想用serialization机制来保存它.为了在一个特定对象的一个域上关闭se ...
mongo转换副本集
本文介绍如何把独立的mongo实例转换成包含3个成员的副本集.开发和测试使用独立实例,生产使用副本集.如何安装独立的mongo实例本文不再赘述. 如果在部署副本集时还没有安装mongo实例,可以查看部 ...
hdu1286 找新朋友
找新朋友 http://acm.hdu.edu.cn/showproblem.php?pid=1286 Time Limit: 2000/1000 MS (Java/Others) Memory ...
搭建SVN+APACHE环境
项目需求根据开发需求,建立svn环境,同时建立source.bd分支,source分支所有人都能访问,bd分支管理员kazihuo可访问.同时,在此基础上构建apache,以便于相关人员能通过浏览器 ...
JavaScript 生成n位随机数
function RndNum(n){ var rnd=""; for(var i=0;i<n;i++) rnd+=Math.floor(Math.random()*10); ...
有用的Javascript，长期更新...
1,点击目标区域以外隐藏,运用场景:点击遮罩层,弹层关闭. // 点击目标区域以外隐藏 $(document).on("click", function (event) { var ...
zookeeper图形工具——zkui
虽然zookeeper安装包提供了客户端工具zkcli,但是命令特别少 ,每次想看看里面的节点信息特别费劲. 幸好有图形工具——zkui,https://github.com/echoma/zkui, ...
【总结】CSS透明度大汇总
近年来,CSS不透明算得上是一种相当流行的技术,但在跨浏览器支持上,对于开发者来说,可以说是一件令人头疼的事情.目前还没有一个通用方法,以确保透明度设置可以在目前使用的所有浏览器上有效. 这篇汇总主要 ...
TED_Topic5：How virtual reality can create the ultimate empathy machine
By Chris Milk # Background about our speaker Working at the frontiers of interactive technology, Chr ...
20155212 2016-2017-2《Java程序设计》课程总结
每周博客每周作业链接汇总预备作业一:专业理解.未来展望.期望的师生关系. 预备作业二:HOMEWORK-2 预备作业三:HOMEWORK-3 第一周作业:学习教材Chapter 1 Java平台概 ...

Html5和Css3扁平化风格网页

前言

示例

正文

1.代码部分

Html5和Css3扁平化风格网页的更多相关文章

随机推荐

热门专题