html和css扁平化
来源：互联网 发布：淘宝账号注册官网 编辑：程序博客网 时间：2024/05/24 15:43
html部分：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="fontawesome-4.2.0/css/font-awesome.min.css"> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/main.css"></head><body><div class="main-wrapper"> <header><!--页头开始--> <nav> <div class="logo"><a href="">王小窝</a></li></div> <ul> <li><a href="" class="active">首页</a></li> <li><a href="">链接3</a></li> <li><a href="">链接4</a></li> </ul> </nav> <div id="banner"> <div class="inner"> <h1>王小窝</h1> <p class="sub-heading">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam numquam in, qui. Ex, tempora velit dolor molestias rerum, ipsum praesentium. Excepturi, commodi. Accusantium praesentium provident, assumenda commodi odit, delectus facilis! </p> <button>了解我</button> <div class="more"> 更多 </div> </div> </div> </header><!--页头结束--> <div class="content"><!--内容开始--> <section class="green-section"> <div class="wrapper"> <div> <h2>标题</h2> <div class="hr"></div> <p class="sub-heading">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda dolorum culpa rerum doloremque beatae, molestiae totam, ea atque rem corporis sed fuga nesciunt, impedit ab et, fugiat ipsa! Id, autem?</p> </div> <div class="icon-grop"> <span class="icon">items2</span> <span class="icon">items2</span> <span class="icon">items3</span> </div> </div> </section> <section class="gray-section"> <div class="article-preview clearfix"> <div class="text-section"> <h2>又一个标题</h2> <div class="sub-heading">我是副标题</div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat sunt praesentium, magni, architecto numquam nam id quis eaque quidem, adipisci porro hic beatae reprehenderit! Ab eum natus, similique in ut.</p> </div> <div class="img-section"> <img src="img/pic01.jpg" alt=""> </div> </div> <div class="article-preview clearfix"> <div class="img-section"> <img src="img/pic02.jpg" alt=""> </div> <div class="text-section"> <h2>又一个标题</h2> <div class="sub-heading">我是副标题</div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio nam, rem sed fugiat quia impedit reprehenderit dolorem voluptate aperiam alias harum saepe! Molestiae, repellendus! Magni mollitia neque, dicta similique amet.</p> </div> </div> <div class="article-preview clearfix"> <div class="text-section"> <h2>又一个标题</h2> <div class="sub-heading">我是副标题</div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis illum blanditiis possimus unde aperiam at praesentium sapiente, nemo iste? Placeat quidem libero similique architecto cupiditate dolorum expedita temporibus harum asperiores.</p> </div> <div class="img-section"> <img src="img/pic03.jpg" alt=""> </div> </div> </section> <section class="purple-section"> <div class="wrapper"> <div class="heading-wrapper"> <h2>又一个标题</h2> <div class="hr"></div> <div class="sub-heading">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam tenetur corporis iste sit nesciunt reprehenderit sed neque recusandae ducimus, laudantium, assumenda totam architecto, blanditiis est veritatis aspernatur perferendis nulla qui.</div> </div> <div class="card-group clearfix"> <div class="card"> <h3>标题</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim fugiat repellendus, harum aliquam provident aut commodi. Nam, cumque veritatis magni sapiente earum! Excepturi necessitatibus soluta modi. Ut rerum eveniet veniam.</p> </div> <div class="card"> <h3>标题</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro ratione atque, dolores odio, eligendi totam eveniet quo minus fugiat obcaecati, labore delectus? Officiis vitae aliquid sequi culpa, sunt rem odio.</p> </div> <div class="card"> <h3>标题</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic at, vitae veniam labore, quis fugit, sequi enim error tempora, nulla ipsam quae harum praesentium fuga tenetur tempore. Dolore, molestiae, repellat?</p> </div> <div class="card"> <h3>标题</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi deleniti nobis perferendis nostrum. Natus molestiae magnam eligendi totam, aperiam fugiat earum quisquam ratione, tempore expedita aliquam sequi culpa delectus doloremque.</p> </div> <div class="card"> <h3>标题</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores ad consectetur voluptatem explicabo rerum perferendis quae alias, dicta tenetur. Quis, eius, voluptates. Incidunt molestiae saepe voluptates odio alias et quam.</p> </div> <div class="card"> <h3>标题</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore harum dolorum at molestiae iure, quisquam officiis suscipit laudantium voluptatum inventore similique, consectetur nobis totam, dicta veritatis tenetur quasi expedita ad.</p> </div> </div> </div> </section> </div><!--内容结束--> <footer><!--页脚开始--> <ul class="share-group"> <li>item1</li> <li>item2</li> <li>item3</li> <li>item4</li> <li>item5</li> </ul> <div class="copy"> © 王小窝 - 2017 </div> </footer><!--页脚结束--></div></body></html>
css部分：
.clearfix:after { content: ''; display: block; clear: both; }ul { margin: 0;}nav { background-color: transparent; height: 50px;}a { text-decoration: none;}header { background-color: rgba(0,0,0,0.4);}#banner { background-color: rgba(0,0,0,0.2); height: 700px;}nav ul { list-style: none; margin:0; float: right;}nav ul li,nav .logo { display: inline-block; line-height: 50px; margin-right: 20px;}nav ul li a { line-height: inherit; text-decoration: none; display: inline-block; height: inherit; color: #fff;}nav ul li.logo { float: left; padding: 10px;}#banner .inner { max-width: 300px; text-align: center; margin: 0 auto; position: relative; top:160px;}#banner .inner h1{ margin: 0;}button { border: none; background-color: #333; color: #eee; padding: 10px; border-radius: 5px;}#banner button { padding: 14px 60px;}#banner .inner .more { margin-top: 280px; color: #fff; font-size: 12px;}.sub-heading{ line-height: 30px; margin: 30px 0; /*font-size: 18px;*/}.logo { font-size: 20px; font-weight: 700; letter-spacing: 1px;}.logo a{ color: #fff;}h1 { padding: 12px; border-top: 2px solid #fff; border-bottom: 2px solid #fff;}h2{ font-size: 30px;}h3 { font-size: 24px;}p { font-size: 18px; letter-spacing: 1px;}.hr{ width: 100px; height: 2px; margin: 20px auto;}.green-section { background-color: #089DB0; text-align: center; color: #fff; padding: 100px 0;}.green-section .hr { background-color: #028e94; width: 60%;}.green-section .icon-grop .icon{ display: inline-block;width: 80px; height: 80px; border: 1px solid #0D6F74; transform: rotate(45deg); margin: 20px;}.icon-grop { margin-top: 60px;}.wrapper { max-width: 1080px; margin: 0 auto;}.gray-section { background-color: #252F34;}.gray-section .img-section{ width: 45%;}.img-section img { width: 100%}.gray-section .text-section{ width: 55%;}.article-preview > div { float: left; font-size: 0;}.article-preview:nth-child(odd){ background-color:rgba(255,25,255,0.05);}.text-section{ position: relative; top:68px; left:50px;}.text-section > * { max-width: 90%; color: #fff;}.text-section h2 { margin-bottom: 20px;}.text-section .sub-heading { font-size: 22px;}.text-section p { font-size: 18px; letter-spacing: 1px;}.purple-section { padding: 80px; background-color: #3F3965; color: #fff;}.purple-section .heading-wrapper { text-align: center;}.purple-section .hr { background: #373259; width: 60%;}.card{ float: left; width: 50%; min-height: 300px; padding: 50px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}.card:first-child{ background: rgba(0,0,0,0.04);}.card:nth-child(2){ background: rgba(0,0,0,0.08);}.card:nth-child(3){ background: rgba(0,0,0,0.12);}.card:nth-child(4){ background: rgba(0,0,0,0.16);}.card:nth-child(5){ background: rgba(0,0,0,0.20);}.card:nth-child(6){ background: rgba(0,0,0,0.24);}footer{ background: #333; color: #fff; min-height: 200px; text-align: center;}ul.share-group { display: block; width: 1080px; margin: 0 auto; padding: 50px;}.share-group li { display: inline-block; padding: 10px;}.copy{ padding: 20px;}.main-wrapper { background: #444 url(../img/banner.jpg); background-attachment: fixed; background-repeat: no-repeat; background-size: cover; background-position: center;｝浏览器默认设置reset.css，一开始我用的是它，但使用后h1的标题大小失效，有点暴力。用normalize.css还是比较温和的，如果前端了解很深的可以，自己写默认设置。
选择器：nth-child（）和nth-of-type（）选择器匹配属于其父元素的第n个元素，n可以是数字和关键字或公式。odd和even是比较常见的。
本人初学者，如有错误请勿怪。
阅读全文
1 0
- html和css扁平化
- 【WEB】实战之html与css扁平化风格博客
- html+css+js实现扁平风格网页计算器
- HTML扁平化设计 屏幕自适应问题
- 【CSS】扁平化都是纸老虎，看怎么抛弃前端框架在IE6扁平化
- 扁平化组织和层级化组织
- 扁平化
- 链表Flattening(扁平化)和Unflattening(还原)
- html5和css3扁平化风格博客
- 数组扁平化和去重
- 扁平和简约来袭
- 【扁平和简约来袭】
- html和css
- css和html区别
- HTML和CSS
- HTML和CSS基础
- html和css
- HTML 和 CSS
- “金融科技价值——数据驱动金融商业裂变”主论坛精彩纷呈，看企业大佬们眼中的Fintech2.0新时代
- “2017金融科技·数据驱动金融商业裂变价值峰会”圆满落幕，数据猿携手金融产业精英探索行业新方向
- python应用系列教程——python中ftp操作：连接、登录、获取目录，重定向、上传下载，删除更改
- 窗口、CListCtrl控件、Edit控件设置背景图片
- 工作总结
- html和css扁平化
- 线程介绍，线程几个方法，状态，Runnable接口，同步，死锁
- 10/21 Redhat rpm包管理软件 以及DHCP 自动获取ip
- 怎样在js中判断一个数字是否是整数！
- MapReduce UI
- Android左边控制台字体样式设置
- sublime text3 如何配置运行Java程序
- 如何理解云计算IAAS、SAAS、PAAS 的区别？很简单，就像吃货想吃披萨了
- 安卓中运行报错Error:Execution failed for task ':app:transformClassesWithDexForDebug'解决
