1.案例一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 正常的样式 , 针对PC端的 */
*{ margin:0; padding:0;}
ul{ list-style: none;}
a{ text-decoration: none;}
img{ display: block;}
#header{ height:50px; width:100%; position: fixed; top:0; left:0; background:rgba(0,0,0,0.5); display: flex; justify-content: space-between; align-items: center;}
#header .logo{ width:140px; margin-left: 55px;}
#header .logo img{ width:100%;}
#header .nav{ display: flex; width:450px; justify-content: space-between;}
#header .nav a{ color:white;}
#header .login{ margin-right: 16px;}
#header .login a{ color:white;}
#header .menu{ margin-left:20px; display: none;}
#header .menu a{ color:white;}
#banner{ height:auto; overflow: hidden;}
#banner img{ width:100%;}
#ad{ height:auto; overflow: hidden; margin-top:10px; display: flex;}
#ad .ad-1{ width:50%; margin:0 10px;}
#ad .ad-1 img{ width:100%;}
#ad .ad-2{ width:50%; display: flex;}
#ad .ad-2 a{ width:50%; display: block; margin:0 10px;}
#ad .ad-2 img{ width:100%;}
#list{ display: flex; justify-content: space-around; flex-wrap: wrap;}
#list li{ width:24%; border:1px #ccc solid; margin-top:10px;}
#list img{ width:100%;}
#list h3{line-height: 30px; margin-left:10px;}
#list p{ display: flex; justify-content: space-between;}
#list p span{ margin:5px;}
/* 针对pad pro */
@media all and (max-width:1024px){
#list li{ width:32%;}
}
/* 针对pad mini 和 mobile 横屏 */
@media all and (max-width:768px){
#header .nav{ display: none; position: absolute; width:100%; top:50px;}
#header .nav li{ height:50px; text-align: center; line-height: 50px; background:rgba(0,0,0,.5); border-top: 1px #7c7469 solid;}
#header .menu{ display: block;}
#header .logo{ width:120px; margin-left: 0;}
#ad{ flex-wrap: wrap;}
#ad .ad-1 , #ad .ad-2{ width:100%;}
#ad .ad-2{ margin-top:10px;}
#list li{ width:49%;}
}
/* 针对 mobile 竖屏 */
@media all and (max-width:450px){
#list{ margin:10px;}
#list li{ width:98%;}
}
</style>
</head>
<body>
<div id="header">
<div class="menu">
<a href="#">menu</a>
</div>
<div class="logo">
<a href="#"><img src="./images/logo.png" alt=""></a>
</div>
<ul class="nav">
<li><a href="#">文章</a></li>
<li><a href="#">素材</a></li>
<li><a href="#">活动</a></li>
<li><a href="#">素材</a></li>
<li><a href="#">活动</a></li>
<li><a href="#">更多</a></li>
</ul>
<div class="login">
<a href="#">登录</a>
</div>
</div>
<div id="banner">
<a href="#"><img src="./images/top-bg.png" alt=""></a>
</div>
<div id="ad">
<div class="ad-1">
<a href="#"><img src="./images/swiper1.jpeg" alt=""></a>
</div>
<div class="ad-2">
<a href="#"><img src="./images/1.png" alt=""></a>
<a href="#"><img src="./images/2.png" alt=""></a>
</div>
</div>
<ul id="list">
<li>
<img src="./images/1.jpg" alt="">
<h3>迷你微型摄影展</h3>
<p>
<span>2016-12-12</span>
<span>作者:tom</span>
</p>
</li>
<li>
<img src="./images/1.jpg" alt="">
<h3>迷你微型摄影展</h3>
<p>
<span>2016-12-12</span>
<span>作者:tom</span>
</p>
</li>
<li>
<img src="./images/1.jpg" alt="">
<h3>迷你微型摄影展</h3>
<p>
<span>2016-12-12</span>
<span>作者:tom</span>
</p>
</li>
<li>
<img src="./images/1.jpg" alt="">
<h3>迷你微型摄影展</h3>
<p>
<span>2016-12-12</span>
<span>作者:tom</span>
</p>
</li>
<li>
<img src="./images/2.jpg" alt="">
<h3>迷你微型摄影展</h3>
<p>
<span>2016-12-12</span>
<span>作者:tom</span>
</p>
</li>
<li>
<img src="./images/2.jpg" alt="">
<h3>迷你微型摄影展</h3>
<p>
<span>2016-12-12</span>
<span>作者:tom</span>
</p>
</li>
<li>
<img src="./images/2.jpg" alt="">
<h3>迷你微型摄影展</h3>
<p>
<span>2016-12-12</span>
<span>作者:tom</span>
</p>
</li>
<li>
<img src="./images/2.jpg" alt="">
<h3>迷你微型摄影展</h3>
<p>
<span>2016-12-12</span>
<span>作者:tom</span>
</p>
</li>
<li>
<img src="./images/3.jpg" alt="">
<h3>迷你微型摄影展</h3>
<p>
<span>2016-12-12</span>
<span>作者:tom</span>
</p>
</li>
<li>
<img src="./images/3.jpg" alt="">
<h3>迷你微型摄影展</h3>
<p>
<span>2016-12-12</span>
<span>作者:tom</span>
</p>
</li>
<li>
<img src="./images/3.jpg" alt="">
<h3>迷你微型摄影展</h3>
<p>
<span>2016-12-12</span>
<span>作者:tom</span>
</p>
</li>
</ul>
<script>
/* var menu = document.querySelector('.menu');
var nav = document.querySelector('.nav');
menu.onclick = function(){
nav.style.display = 'block';
}; */
</script>
</body>
</html>
2.案例二
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./iconfont/iconfont.css">
<style>
/* css reset */
*{ margin:0; padding:0;}
ul,ol{ list-style: none;}
a{ text-decoration: none; color:#505050;}
img{ display: block;}
h1,h2,h3{ font-size:16px;}
body{ background:#ebebeb;}
/* css common */
.l{ float:left;}
.r{ float:right;}
.clear:after{ content:""; display: block; clear:both;}
.container{ width:1140px; margin:0 auto; position: relative;}
.container-fluid{ position: relative;}
/* css header */
#header{ height:190px; overflow: hidden; background:white; text-align: center; line-height: 190px;}
#header h1{ font-size: 48px;}
/* css nav */
#nav{ background:white; border-top:1px #ebebeb solid; border-bottom:2px #e1e1e1 solid;}
#nav .nav-menu{ display: none; height:56px; text-align: center; line-height: 56px;}
#nav .nav-menu i{ cursor: pointer; font-size:30px;}
#nav ul{ text-align: center; font-size:0; line-height: 56px;}
#nav ul li{ display:inline-block; font-size:16px; height: 56px; padding:0 21px; position: relative;}
/* #nav ul li.active{ border-bottom: 2px #e67e22 solid;} */
#nav ul li.active:after{ content:""; position: absolute; width:100%; height: 2px; background:#e67e22; bottom: -2px; left:0;}
/* css main */
#main{}
#main article{ width:750px;}
#main article section{ margin-top:35px; background:white;}
#main .article-title{ text-align: center; overflow: hidden;}
#main .article-title h2{ font-size:34px; line-height: 34px; margin:36px 0 21px;}
#main .article-title p{ font-size:12px; line-height: 12px;}
#main .article-text{ font-size:18px; line-height: 30px; margin:36px 34px 0 34px;}
#main .article-btn{ margin:30px 34px; width: 86px; height:36px; background:#e67e22; text-align: center; line-height: 36px;}
#main .article-btn a{ color:white;}
#main .article-tag{ margin:0 34px; border-top:1px #ccc solid; line-height: 66px;}
#main aside{ width:360px;}
#main aside section{ margin-top:35px; background: white; overflow: hidden;}
#main aside h3{ height: 37px; line-height: 37px; font-size:20px; border-bottom:1px #ccc solid; margin:14px 30px; font-weight:normal; position: relative;}
#main aside h3:after{ content:""; position: absolute; width:90px; height:1px; background:#e67e22; left:0; bottom: -1px;}
#main aside .aside-text{ margin:0 30px 20px 30px; font-size:14px;}
#main aside .aside-btn{ margin:0 30px 20px 30px; height:36px; text-align: center; line-height: 36px; background:#e67e22;}
#main aside .aside-btn a{ color:white;}
#main aside .aside-list{ margin:0 30px 20px 30px; font-size:14px;}
#main aside .aside-list a{ padding:5px 10px; border:1px #ccc solid; margin-right:10px; margin-bottom:10px; float:left;}
@media all and (max-width:1200px){
.container{ width:940px;}
#main article{ width:616px;}
#main aside{ width:294px;}
}
@media all and (max-width:990px){
.container{ width:720px;}
#main article{ float:none; width:100%;}
#main aside{ float:none; width:100%;}
}
@media all and (max-width:768px){
.container{ width:auto; margin:0 15px;}
#nav .nav-menu{ display: block;}
#nav ul{ text-align: left; display: none;}
#nav ul li{ display:block;}
#nav .nav-menu:hover + ul{ display: block;}
}
</style>
</head>
<body>
<header id="header" class="container-fluid">
<div class="container">
<h1>Ghost 开源博客平台</h1>
</div>
</header>
<nav id="nav" class="container-fluid">
<div class="container">
<div class="nav-menu">
<i class="iconfont iconcaidan"></i>
</div>
<ul>
<li class="active"><a href="#">首页</a></li>
<li><a href="#">论坛</a></li>
<li><a href="#">快捷手册</a></li>
<li><a href="#">中文文档</a></li>
<li><a href="#">关于</a></li>
</ul>
</div>
</nav>
<main id="main" class="container clear">
<article class="l">
<section>
<hgroup class="article-title">
<h2>全新的 Ghost 文档上线</h2>
<p>作者:<a href="#">王赛</a> • 2018年11月20日</p>
</hgroup>
<p class="article-text">
我们的整个 Ghost 文档 已经全新改版了!并且添加了一些新的补充,包括使用教程和功能集成。 新文档的目标是帮助更多人有效地安装并管理他们发布的内容,并且最大限度地发挥 Ghost 作为一个开源发布平台的灵活性。文档的设计和结构已经修订完毕,我们的改进包括 Ghost 安装和设
</p>
<div class="article-btn"><a href="#">阅读全文</a></div>
<div class="article-tag">
<i class="iconfont iconwenjianjia"></i> <a href="#">Android</a>, <a href="#">客户端</a>
</div>
</section>
<section>
<hgroup class="article-title">
<h2>全新的 Ghost 文档上线</h2>
<p>作者:<a href="#">王赛</a> • 2018年11月20日</p>
</hgroup>
<p class="article-text">
我们的整个 Ghost 文档 已经全新改版了!并且添加了一些新的补充,包括使用教程和功能集成。 新文档的目标是帮助更多人有效地安装并管理他们发布的内容,并且最大限度地发挥 Ghost 作为一个开源发布平台的灵活性。文档的设计和结构已经修订完毕,我们的改进包括 Ghost 安装和设
</p>
<div class="article-btn"><a href="#">阅读全文</a></div>
<div class="article-tag">
<i class="iconfont iconwenjianjia"></i> <a href="#">Android</a>, <a href="#">客户端</a>
</div>
</section>
<section>
<hgroup class="article-title">
<h2>全新的 Ghost 文档上线</h2>
<p>作者:<a href="#">王赛</a> • 2018年11月20日</p>
</hgroup>
<p class="article-text">
我们的整个 Ghost 文档 已经全新改版了!并且添加了一些新的补充,包括使用教程和功能集成。 新文档的目标是帮助更多人有效地安装并管理他们发布的内容,并且最大限度地发挥 Ghost 作为一个开源发布平台的灵活性。文档的设计和结构已经修订完毕,我们的改进包括 Ghost 安装和设
</p>
<div class="article-btn"><a href="#">阅读全文</a></div>
<div class="article-tag">
<i class="iconfont iconwenjianjia"></i> <a href="#">Android</a>, <a href="#">客户端</a>
</div>
</section>
</article>
<aside class="r">
<section>
<h3>声明</h3>
<p class="aside-text">Ghost 中文版不再继续维护,请去官方下载。</p>
</section>
<section>
<h3>下载 Ghost</h3>
<div class="aside-btn"><a href="#">Ghost最新版</a></div>
</section>
<section>
<h3>标签云</h3>
<div class="aside-list">
<a href="#">客户端</a>
<a href="#">Android</a>
<a href="#">jQuery</a>
<a href="#">Ghost 0.7 版本</a>
<a href="#">开源</a>
<a href="#">助手函数</a>
<a href="#">客户端</a>
<a href="#">客户端</a>
<a href="#">Android</a>
<a href="#">jQuery</a>
<a href="#">Ghost 0.7 版本</a>
<a href="#">开源</a>
<a href="#">助手函数</a>
<a href="#">客户端</a>
</div>
</section>
</aside>
</main>
<nav id="navmap" class="container-fluid">
<div class="container">
<section>第一块</section>
<section>第二块</section>
<section>第三块</section>
</div>
</nav>
<footer id="footer" class="container-fluid">
<div class="container">
<p>Copyright © Ghost中文网 | 京ICP备11008151号-11 | 京公网安备11010802014853</p>
</div>
</footer>
</body>
</html>