【学习笔记】HTML5 示例

html 专栏收录该内容
9 篇文章 0 订阅

示例1

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<link rel="stylesheet" href="./css/common.css" type="text/css">
		<title>博文尚美</title>
		<script src="js/startMove.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			window.onload = function() {
				var oDiv = document.getElementById('banner_list');
				var oUl = oDiv.getElementsByTagName('ul')[0];
				var oOl = oDiv.getElementsByTagName('ol')[0];
				var aLi = oOl.getElementsByTagName('li');
				var index = 1;
				
				for (let i = 0; i < aLi.length; i++) {
					aLi[i].onclick = function() {
						startMove(oUl, {left: -1440 * i});
						for (let j = 0; j < 4; j++) {
							aLi[j].className = "";
						}
						index = i;
						aLi[index].className = "active";
					}
				}
				
				setInterval(function() {
					startMove(oUl, {left: -1440 * index}, function() {
						if (oUl.offsetLeft <= -1440 * 4) {
							oUl.style.left = '0px';
						}
					});
					
					for (let j = 0; j < 4; j++) {
						aLi[j].className = "";
					}
					aLi[index].className = "active";
					index = (index + 1) % 4;
				}, 2000);
			}
		</script>
	</head>
	<body>
		<div id="header" class="container-fluid">
			<div id="head" class="container">
				<div id="logo" class="l">
					<img src="img/logo.png" title="厦门博文尚美文化传媒有限公司"/>
				</div>
				<div id="head_menu" class="r">
					<ul>
						<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>
			</div>
		</div>
		<div id="banner" class="container-fluid ohidd">
			<div id="banner_list">
				<ul>
					<li><img src="img/20141118105240603.jpg" title="手机网站制作"/></li>
					<li><img src="img/20141118105318954.jpg" title="企业vi识别设计"/></li>
					<li><img src="img/20141118105423471.jpg" title="专业地产网站设计"/></li>
					<li><img src="img/20141118105500969.jpg" title="企业网站建设"/></li>
					<li><img src="img/20141118105240603.jpg" title="手机网站制作"/></li>
				</ul>
				<ol class="flex-control">
					<li class="active"></li>
					<li></li>
					<li></li>
					<li></li>
				</ol>
			</div>
		</div>	
		<div id="services" class="container-fluid">
			<div id="service" class="container">
				<h2>服务范围</h2>
				<p>OUR SERVICES</p>
				<ul id="service_list">
					<li>
						<div class="img" style="background-image: url(img/web1.png);"></div>
						<div class="top">
							<h3>1.WEB DESIGN</h3>
							<p>企业品牌网站设计 / 手机网站制作 <br/>
							   动画网站创意设计 </p>
						</div>
					</li>
					<li>
						<div class="img" style="background-image: url(img/graphic1.png);"></div>
						<div class="top">
							<h3>2.GRAPHIC DESIGN</h3>
							<p>标志LOGO设计 / 产品宣传册设计 <br/>
							   企业广告 / 海报设计 </p>
						</div>
					</li>
					<li>
						<div class="img" style="background-image: url(img/e-bussiness1.png);"></div>
						<div class="top">
							<h3>3.E-BUSINESS PLAN</h3>
							<p>淘宝 / 天猫装修设计及运营推广 <br/>
							   企业微博 / 微信营销 </p>
						</div>
					</li>
					<li>
						<div class="img" style="background-image: url(img/mail1.png);"></div>
						<div class="top">
							<h3>4.MAILBOX AGENTS</h3>
							<p>腾讯 / 网易企业邮箱品牌代理 <br/>
							   个性化邮箱定制开发 </p>
						</div>
					</li>
				</ul>
			</div>
		</div>
		<div id="cases" class="container-fluid ohidd">
			<h2>[ 客户案例 ]</h2>
			<p>With the best professional technology, to design the best innovative web site</p>
			<ul id="case_list" class="container">
				<li>
					<a href="" title="凯雷澳眼镜">
						<img src="img/20141121095528549.jpg" width="339">
						<div class="vlock">
							<p>项目名称:凯雷澳眼镜</p>
						</div>
					</a>
				</li>
				<li>
					<a href="" title="日月谷温泉乡村俱乐部">
						<img src="img/20141121095216750.jpg" width="339">
						<div class="vlock">
							<p>项目名称:日月谷温泉乡村俱乐部</p>
						</div>
					</a>
				</li>
				<li>
					<a href="" title="厦门倍特雷贸易">
						<img src="img/20141121105856226.jpg" width="339">
						<div class="vlock">
							<p>项目名称:厦门倍特雷贸易</p>
						</div>
					</a>
				</li>
			</ul>
			<a  id="case_more" href="">VIEW MORE</a>
		</div>
		<div id="news" class="container-fluid">
			<div id="news_list" class="container">
				<h2>最新资讯</h2>
				<p >TEH LATEST NEWS</p>
				<table class="news_table">
					<tr>
						<td rowspan="2"><img class="img l" src="img/xs1.jpg" /></td>
						<td>
							<div class="news_date l">
								<p>18</p>
								<em>Aug</em>
							</div>
						</td>
						<td>
							<div class="news_text l">
								<h3><a href="#">漳州西恩视觉婚纱摄影网站建设</a></h3>
								<p>漳州西恩视觉婚纱摄影隶属西恩视觉文化传播有限公司旗下婚纱摄影品牌,由国内著名摄影师冬晖CHAN...</p>
							</div>
						</td>
						<td>
							<div class="news_date l">
								<p>16</p>
								<em>Aug</em>
							</div>
						</td>
						<td>
							<div class="news_text l">
								<h3><a href="#">网站数据统计用哪种比较好?</a></h3>
								<p>网站数据统计代码是平常网站建设过程中最受用户青睐的数据统计工具,几乎每个用户的网站程序都会...</p>
							</div>
						</td>
					</tr>
					<tr>
						<td>
							<div class="news_date l">
								<p>14</p>
								<em>Aug</em>
							</div>
						</td>
						<td>
							<div class="news_text l">
								<h3><a href="#">厦门网站建设服务的内容主要有哪些?</a></h3>
								<p>大多数用户建网站由于都是头一次接触,对于网站建设并不了解,往往会误认为找网站建设公司建网站...</p>
							</div>
						</td>
						<td>
							<div class="news_date l">
								<p>12</p>
								<em>Aug</em>
							</div>
						</td>
						<td>
							<div class="news_text l">
								<h3><a href="#">海石景观股份有限公司网站设计案例解析</a></h3>
								<p>此次网站整体设计采用扁平化的的风格、简约式排版,网站主视觉区采用大面积的视觉效果图,以动画...</p>
							</div>
						</td>
					</tr>
				</table>
			</div>
		</div>
		<div id="bottom" class="container-fluid">
			<div class="container">
				<p class="l">Copyright 2006- 2014 Bowenshangmei Culture All Rights Reserved</p>
				<span class="r">
					<a href="">Home</a>  |  <a href="">About</a>  |  
					<a href="">Portfolio</a>  |   <a href="">Contact</a>
				</span>
			</div>
		</div>
	</body>
</html>

CSS

* {margin: 0; padding: 0;}
ul, ol {list-style: none;}
img {display: block;}
a {text-decoration: none; color: #646464}
body {font-family: Verdana; text-align: center;}
.l {float: left;}
.r {float: right;}
.ohidd{ overflow: hidden; *zoom:1;}
.clear::after{content:""; display:block; clear: both;}
.container {width: 1080px; margin: 0 auto; position: relative;}
.container-fluid {width: 100%;}

#header {position: fixed; width: 100%; background: rgba(255,255,255,.8); top: 0; border-bottom: 1px solid #f2f2f2; z-index: 1000;}
#head {height: 81px;}
#logo {width: 162px; height: 44px; line-height: 81px;}
#head_menu li {float: left; margin-left: 40px;}
#head_menu li a {font-size: 16px; line-height: 81px; font-family: "microsoft yahei"; font-weight: 500;}
#head_menu li:hover a {color: #66C5B4;}

#banner {position: relative; margin-top: 80px;}
#banner_list {width: 1440px; height: 469px; margin: auto;}
#banner_list ul {width: 7200px; height: 469px; position: absolute;}
#banner_list ul li {width: 1440px; height: 469px; float: left;}
#banner_list img {width: 100%; height: 100%;}
#banner .flex-control {position: absolute; bottom: 22px; width: 100%; height: 11px; text-align: center; z-index: 9999;}
#banner .flex-control li {width: 11px; height: 11px; margin: 0px 5px; display: inline-block; 
	background-image: url(../img/dot.png); background-position: 11px 0; cursor: pointer;}
#banner .flex-control .active {background-position: 0 0;}

#services {height: 357px; margin: 0 auto;}
#service h2 {margin-top: 52px; background: url(../img/titbg.jpg) no-repeat center 0;
	    color: #6d6d6d; font-size: 18px; line-height: 30px; height: 30px; font-weight: normal;}
#service p {color: #9d9d9d; margin-right: 3px; line-height: 25px; font-size: 12px;}
#service_list li {width: 250px; margin: 20px 10px; float: left; border-bottom: 4px solid #fff; padding-top: 15px;}
#service_list li:hover {box-shadow: 0 10px 5px #66C5B4;}
#service_list .img {width: 102px; height: 102px; margin: auto; background-repeat: no-repeat; background-position: center 0;}
#service_list h3 {color: #747474; font-family: Calibri; font-size: 20px; margin: 25px 0 12px;}
#service_list p {height: 45px; line-height: 22px; color: #999999; font-size: 14px;}

#cases {margin: auto; padding-top: 52px; height: 408px; background: #f8f8f8;}
#cases h2 {color: #66c5b4; font-size: 18px;}
#cases p {font-size: 12px; color: #9d9d9d; margin-right: 3px; line-height: 25px;}
#case_list {margin-top: 37px; height: 181px;}
#case_list .vlock {width: 339px; height: 181px; z-index: 10; position: absolute; top: 0; left: 0; display: none;
	 background:url(../img/caselock.png) no-repeat 0 0;}
#case_list .vlock p {color: #fff; font-size: 14px; margin-top: 120px; height: 30px;}
#case_list li:hover .vlock {display: block;}
#case_list li {width: 339px; float: left; margin: 0 10px; position: relative;}
#case_list img {height: 181px;}
#case_more {width: 165px;  line-height: 35px; color: #fff; font-size: 14px; height: 35px; margin-top: 40px;
	position: absolute; left: 44%; background: url(../img/casecur.png) no-repeat 0 0;}
#case_more:hover {text-decoration: underline; background: url(../img/casehover.png) no-repeat 0 0;}

#news_list h2 {margin-top: 52px; background: url(../img/titbg.jpg) no-repeat center 0;
	    color: #6d6d6d; font-size: 18px; line-height: 30px; height: 30px}
#news_list p {color: #9d9d9d; margin-right: 3px; line-height: 25px; font-size: 12px;}
#news_list .news_table {margin: 50px 0 60px;}
#news_list .img{width: 234px; margin-right: 2px;}
#news_list .news_date {width: 74px; height: 74px; border-right: 1px solid #e3e3e3; margin-right: 16px;}
#news_list .news_date p {font-size: 36px; color: #66c5b4; font-weight: bold;
    display: block; width: 100%; height: 50px; line-height: 50px;}
#news_list .news_date em {font-size: 18px; color: #999; display: block; font-style: normal;}
#news_list .news_text {width: 330px; height: 74px; text-align: left}
#news_list .news_text a {font-size: 14px; color: #666;}
#news_list .news_text p {font-size: 12px; color: #a9a9a9; margin-top: 10px; line-height: 22px;}

#bottom {background-color: #66c5b4;}
#bottom .container {height: 54px; line-height: 54px; font-size: 12px; color: white;}
#bottom a {color: #fff; font-family: Arial; margin: 0 10px;}

JS

function startMove(node, cssObj, complete) {
	clearInterval(node.timer);
	node.timer = setInterval(function() {
		var isEnd = true;
		for (var attr in cssObj) {
			var iTarget = cssObj[attr];
			var iCur = parseInt(getStyle(node, attr));
			var speed = (iTarget - iCur) / 8;
			speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
			
			node.style[attr] = iCur + speed + 'px';
			if (iCur != iTarget) {
				isEnd = false;
			}
		}
		if (isEnd) {
			clearInterval(node.timer);
			if (complete) {
				complete.call(node);
			}
		}
	}, 30)
}

function getStyle(node, attr) {
	return node.currentStyle ? node.currentStyle[attr] : getComputedStyle(node)[attr];
}


效果

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

示例2

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>QQ飞车官网</title>
		<link rel="stylesheet" href="./css/common.css" type="text/css">
		<script src="js/startMove.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			window.onload = function() {
				var top = document.getElementById('touch');
				var phb = document.getElementById('phb');
				phb.onmouseover = function() {
					top.style.display = 'block';
				}
				phb.onmouseout = function() {
					top.style.display = 'none';
				}
				
				var oUl = document.getElementById('banner_list');
				var oControl = document.getElementById('control');
				var aArrow = oControl.getElementsByTagName('div');
				var aLi = oControl.getElementsByTagName('li');
				var index = 0;
				var timer = setInterval(function() {
					index++;
					document.title = index;
					setActive(oUl, aLi, 8, index % 8, function() {
						if (oUl.offsetLeft <= -497 * 8) {
							oUl.style.left = '0px';
						}
					});
				}, 5000);
				
				for (let i = 0; i < 8; i++) {
					aLi[i].onclick = function() {
						index = i;
						setActive(oUl, aLi, 8, index);
					}
				}
				
				aArrow[0].onclick = function() {
					index += 7;
					setActive(oUl, aLi, 8, index % 8);
				}
				aArrow[1].onclick = function() {
					index++;
					setActive(oUl, aLi, 8, index % 8);
				}
			}
			
			function setActive(node0, node, len, index, complete) {
				startMove(node0, {left: -497 * index}, complete);
				for (let j = 0; j < len; j++) {
					node[j].className = "";
				}
				node[index].className = "active";
			}
			
		</script>
	</head>
	<body>
		<header class="container-fluid">
			<div class="container" style="z-index: 10;">
				<ul>
					<li class="logo l">
						<a href="" title="腾讯游戏logo"><img src="img/logo.png" /></a>
					</li>
					<li class="logo_ad l">
						<img src="img/ab8a2cc25c11723da9e814e589cad603.jpg" />
					</li>
					<li class="ost r"  style="position: relative;">
						<div class="circle l"></div>
						<h3 class="czsh l"><a href="" style="color: #333;">成长守护平台</a></h3>
						<h3 id="phb" class="phb l">腾讯游戏排行榜</h3>
						<div class="arrow l"></div>
					</li>
				</ul>
			</div>
			<div id="touch" class="container" style="z-index: 1; height: 50px; display: none;">
				<div class="white">
					<ul class="top">
						<li>
							<h2>新品端游排行榜</h2>
							<p><b>1. </b>FIFI Online 4</p>
							<p><b>2. </b>NBA2K Online2</p>
							<p><b>3. </b>天涯明月刀</p>
							<p><b>4. </b>剑灵</p>
							<p><b>5. </b>穿越火线</p>
							<p><b>6. </b>逆战</p>
							<p><b>7. </b>QQ炫舞</p>
							<p><b>8. </b>使命召唤Online</p>
						</li>
						<li>
							<h2>热门端游排行榜</h2>
							<p><b>1. </b>英雄联盟</p>
							<p><b>2. </b>穿越火线</p>
							<p><b>3. </b>地下城与勇士</p>
							<p><b>4. </b>天涯明月刀</p>
							<p><b>5. </b>QQ炫舞</p>
							<p><b>6. </b>剑灵</p>
							<p><b>7. </b>FIFI Online 4</p>
							<p><b>8. </b>逆战</p>
							<p><b>9. </b>NBA2K Online2</p>
						</li>
						<li>
							<h2>新品手游排行榜</h2>
							<p><b>1. </b>雪鹰领主手游</p>
							<p><b>2. </b>火影忍者</p>
							<p><b>3. </b>欢乐斗地主</p>
							<p><b>4. </b>天天爱消除</p>
							<p><b>5. </b>QQ飞车</p>
							<h2>热门手游排行榜</h2>
							<p><b>1. </b>王者荣耀</p>
							<p><b>2. </b>和平精英</p>
							<p><b>3. </b>穿越火线:枪战王者</p>
							<p><b>4. </b>火影忍者</p>
							<p><b>5. </b>天天爱消除</p>
						</li>
					</ul>
				</div>
			</div>
		</header>
		<div id="banner" class="container-fluid">
			<nav class="container-fluid">
				<div class="mask container-fluid"></div>
				<div class="in_logo"></div>
				<div id="nav_menu" class="container">
					<a href="" title="QQ飞车官网首页"><div class="sy l"></div></a>
					<ul class="navi yx l">
						<li><a href="" >新手指引</a></li>
						<li class="hot"><a href="" >官方漫画</a></li>
						<li class="new"><a href="" >飞车手游</a></li>
						<li><a href="" >精美壁纸</a></li>
						<li><a href="" >游戏下载</a></li>
					</ul>
					<ul class="navi ss l">
						<li><a href="" >谁是车王</a></li>
						<li><a href="" >SSC</a></li>
						<li><a href="" >全国公开赛</a></li>
					</ul>
					<ul class="navi hd l">
						<li class="hot"><a href="" >版本专区</a></li>
						<li><a href="" >合作专区</a></li>
						<li><a href="" >CDK兑换</a></li>
					</ul>
					<ul class="navi sc l">
						<li><a href="" >紫钻专区</a></li>
						<li><a href="" >道聚城</a></li>
						<li><a href="" >点券充值</a></li>
					</ul>
					<ul class="navi sp l">
						<li><a href="" >教学视频</a></li>
						<li><a href="" >视频中心</a></li>
					</ul>
					<ul class="navi wj l">
						<li><a href="" >官方论坛</a></li>
						<li class="hot"><a href="" >掌上飞车</a></li>
						<li><a href="" >兴趣部落</a></li>
						<li><a href="" >官方微信</a></li>
						<li><a href="" >官方微博</a></li>
					</ul>
					<ul class="navi kf l">
						<li><a href="" >客服中心</a></li>
						<li class="new"><a href="" >安全信用体系</a></li>
						<li><a href="" >封号查询</a></li>
						<li><a href="" >游戏安全查询</a></li>
					</ul>
				</div>
				<a class="lin" href=""></a>
			</nav>
			<div class="container-fluid">
				<div class="main_top container">
					<div class="left_area l">
						<div class="download">
							<div class="f"></div>
							<div class="en_f"></div>
						</div>
						<div class="login">
							<div class="login_box">
								<div class="usr_img">
									<div class="mask"></div>
								</div>
								<p>欢迎<a href="">登录</a>,进入飞车世界</p>
							</div>
						</div>
					</div>
					<div class="middle_area l">
						<div class="source"></div>
						<ul id="banner_list">
							<li><a href=""><img src="img/1c543250b26d1e28ed65a258adc99876.jpeg"></a></li>
							<li><a href=""><img src="img/22a1b025c5cb0ce9c0fc298413ef0f92.jpeg"></a></li>
							<li><a href=""><img src="img/da96da4bfc07ebec24535dda1921ccd6.jpeg"></a></li>
							<li><a href=""><img src="img/19b9388dceb2ea5384f6990aa10e598a.jpeg"></a></li>
							<li><a href=""><img src="img/7b333985b6e38e89053b6229881cb938.jpeg"></a></li>
							<li><a href=""><img src="img/e80522edceb4bb443b6c80f428cfa2d0.jpeg"></a></li>
							<li><a href=""><img src="img/50cc86fb6fd967c73b0e837c4e28469d.jpeg"></a></li>
							<li><a href=""><img src="img/b7813fb4bb05c7412799398aff78d9d7.jpeg"></a></li>
							<li><a href=""><img src="img/1c543250b26d1e28ed65a258adc99876.jpeg"></a></li>
						</ul>
						<div id="control">
							<div class="arrow_left l"></div>
							<ol class="l">
								<li class="active"></li>
								<li></li>
								<li></li>
								<li></li>
								<li></li>
								<li></li>
								<li></li>
								<li></li>
							</ol>
							<div class="arrow_right r"></div>
						</div>
					</div>
					<div class="right_area l"></div>
				</div>
			</div>
		</div>
		<div id="adv">
			<img src="img/470531061863484.jpg">
			<img src="img/232741208554.png">
		</div>
		<footer></footer>
	</body>
</html>

CSS

* {margin: 0; padding: 0;}
ul, ol {list-style: none;}
img {display: block;}
a {text-decoration: none; color: #FFFFFF}
body {font-family: "microsoft yahei";}
.l {float: left;}
.r {float: right;}
.clear::after{content:""; display:block; clear: both;}
.container {width: 980px; margin: 0 auto; position: relative;}
.container-fluid {width: 100%; min-width: 980px;}

header {background-color: #FFFFFF; border-bottom: 1px solid #f5f5f5;
	left: 0; top: 0 !important; height: 41px;}
header .ost {text-align: right;}
header .circle {background: url(../img/title_sprite.png) no-repeat; background-position: -30px 0;
    width: 30px; height: 30px; margin-top: 5px;}
header .czsh, .phb {font-size: 14px; font-weight: 400; line-height: 41px; cursor: pointer; 
	position: relative; color: #333}
header .czsh {margin-right: 20px;}
header .phb {margin-right: -5px;}
header .arrow {background: url(../img/title_sprite.png) no-repeat; background-position: 0 0;
    width: 30px; height: 30px; opacity: .1; transform: rotate(90deg); margin: 5px 7px 0 0;}
header .white {width: 707px; height: 380px; font-size: 12px; background-color: #FFFFFF; position: absolute;
	right: 0; top: 42px;}
header #touch .top li {float: left; display: block; width: 200px; margin-left: 30px;}
header #touch .top h2 {line-height: 45px;}
header #touch .top p {line-height: 29px;}

nav li {height: 27px; width: auto; text-align: center; font-size: 12px;}
.navi li {position: relative;}
.navi a:hover {text-decoration: underline; color: red;}
.navi .hot::after {content: ""; display: inline-block; width: 12px; height: 12px; position: absolute; right: -7px; top: 0;
	background: url(../img/nav_tips.png) no-repeat 0 -12px;}
.navi .new::after {content: ""; display: inline-block; width: 12px; height: 12px; position: absolute; right: -7px; top: 0;
	background: url(../img/nav_tips.png) no-repeat 0 0;}
nav .con_wp ul {width: 980px; position: relative}
nav .con_wp li {display: block; float: left;}
nav .yx, .ss, .hd, .sc, .sp, .wj, .kf {height: 66px; width: 70px; margin-top: 75px;}
nav .sy {height: 66px; width: 70px; margin-left: -10px;}
nav .yx {margin-left: 35px;}
nav .ss {margin-left: 40px;}
nav .hd {margin-left: 50px;}
nav .sc {margin-left: 170px;}
nav .sp {margin-left: 50px;}
nav .wj {margin-left: 45px;}
nav .kf {margin-left: 30px; width: 80px;}
nav .in_logo {background:url(../img/inside_logo.png) no-repeat; width:138px; height:112px; position: absolute; top:14px; left: 45%;}
#banner nav {background: url(../img/nav.png) no-repeat center top;}
#banner nav .mask {background: url(../img/nav_down_re.png) repeat-x; height: 100%; position: absolute;}
nav .lin {height: 220px; width: 500px; margin: 200px 35%; position: absolute; display: block;}

#banner .main_top, #banner .middle_area .source, #control div, #control li {background: url(../img/top.png) no-repeat}
#banner {background: url(../img/guanwang.jpg) no-repeat center top; min-height: 780px;}
#banner nav {height: 433px; position: relative;}
#banner .main_top {height: 276px;}
#banner .left_area {width:240px; height:314px; margin: -20px 0 0 7px; background: url(../img/down_user_spr.png) no-repeat;}
#banner .left_area .download {height: 129px; cursor: pointer;}
#banner .left_area .f, #banner .left_area .en_f {background: url(../img/down_user_spr.png) no-repeat; 
	width: 89px; height: 23px; margin: auto;}
#banner .left_area .f {background-position: -254px 0; margin-top: 43px;}
#banner .left_area .en_f {background-position: -254px -31px; margin-top: 3px;}
#banner .left_area .download:hover .f {animation: .5s upMove}
#banner .left_area .download:hover .en_f {animation: .5s downMove}
@keyframes upMove {
	0% {transform: translateY(-40px); opacity: 0;} 100% {transform: translateY(0); opacity: 1;}}
@keyframes downMove {
	0% {transform: translateY(40px); opacity: 0;} 100% {transform: translateY(0); opacity: 1;}}
#banner .left_area .login {height: 185px; position: relative; text-align: center;}
#banner .left_area .mask {background: url(../img/down_user_spr.png); background-position: -263px -84px; height: 56px; width: 56px;}
#banner .left_area .usr_img {background: url(../img/56x56.jpg); height: 56px; width: 56px; 
	position: absolute; top: -10px; left: 97px;}
#banner .left_area .login p {position: absolute; top: 70px; width:100%; line-height: 20px; color:#E0E4FF; text-align:center; font-size: 12px;}
#banner .left_area .login a {color:#4DFFDB;}
#banner .left_area .login a:hover {text-decoration: underline;}
#banner .middle_area, #banner .right_area {height: 255px; margin-top: 14px;}
#banner .middle_area {width: 497px; margin-left: 5px; position: relative; overflow: hidden;}
#banner .middle_area ul {width: 4473px; height: 255px; position: absolute;}
#banner .middle_area ul li {position: relative; float: left;}
#banner .middle_area .source {width: 84px; height: 19px; margin-left: 379px; 
	position: absolute; background-position: -723px -297px; z-index: 10;}
#control {width: 497px; height: 37px; position: absolute; bottom: 0px; background: rgba(19,20,23,0.8);}
#control div {width: 10px; height: 20px; z-index: 999; margin: 9px 10px;}
#control .arrow_left {background-position: -542px -297px; cursor: pointer;}
#control .arrow_right {background-position: -555px -297px; cursor: pointer;}
#control .arrow_left:hover {background-position: -542px -327px;}
#control .arrow_right:hover {background-position: -555px -327px;}
#control ol{text-align: center; margin-left: 142px;}
#control li {background-position: -603px -299px; width: 15px; height: 15px; 
	z-index: 100; cursor: pointer; margin-top: 12px; display: inline-block;}
#control .active {background-position: -581px -299px;}
#banner .right_area {width: 209px; margin-left: 10px; background: url(../img/33347ac0a4b1071fe7e2d8ec33467902.jpeg) no-repeat;}

#adv {position: fixed; right: 20px; bottom: 270px; z-index: 100;}
#adv img {float: left;}
#adv img:first-child {margin-top: 220px;}

效果

在这里插入图片描述
在这里插入图片描述

示例3

HTML

<!DOCTYPE html>
<html style="height: 100%;">
	<head>
		<meta charset="utf-8" />
		<title>正达内部管理平台</title>
		<link rel="stylesheet" href="./css/common.css" type="text/css" />
		<link rel="stylesheet" href="./iconfont/iconfont.css" type="text/css" />
	</head>
	<body>
		<header id="header" class="g-head">
			<div class="m-logo f-fl"></div>
			<div class="m-menu f-fr">
				<ul>
					<li><i class="iconfont icon-wode-F"></i><a href="">欢迎您,武剑 管理员</a></li>
					<li><i class="iconfont icon-key"></i><a href="">修改密码</a></li>
					<li><i class="iconfont icon-iconfonthome0"></i><a href="">公司官网</a></li>
					<li><i class="iconfont icon-V"></i><a href="">退出</a></li>
				</ul>
			</div>
		</header>
		<aside id="sider" class="g-side f-fl">
			<ul>
				<li class="m-xm z-active">
					<a href="">
						<i class="iconfont icon-loukongguanli"></i>
						<p>项目管理</p>
					</a>
				</li>
				<li class="m-yh">
					<a href="">
						<i class="iconfont icon-yonghuxinxi"></i>
						<p>用户管理</p>
					</a>
				</li>
				<li class="m-xt">
					<a href="">
						<i class="iconfont icon-shezhi"></i>
						<p>系统设置</p>
					</a>
				</li>
			</ul>
		</aside>
		<main id="main" class="g-main f-fl">
			<section class="container">
				<section class="m-info f-cb">
					<div class="m-text f-fl">
						<h2>青田高湾绿园一期、二期工程 <i class="iconfont icon-bianji"></i> </h2>
						<p>项目编号:<em>CN0000507</em></p>
						<p>项目类型:<em>在建工程</em></p>
						<p>项目负责人:<em>梅海丽</em></p>
						<p>手机号码:<em>15869168967</em></p>
					</div>
					<div class="m-img f-fr">
						<img src="img/building_img.png" />
					</div>
				</section>
				<section class="m-project-list">
					<div class="m-title f-fl">
						<ul class="f-cb">
							<li>视频监控<input type="button" name="视频监控" /></li>
							<li>考勤管理<input type="button" name="考勤管理" /></li>
							<li>安全巡查<input type="button" name="安全巡查" /></li>
							<li class="z-active">资料管理<input type="button" name="资料管理" /></li>
						</ul>
					</div>
					<div class="m-content">
						<div class="z-close">视频监控内容</div>
						<div class="z-close">考勤管理内容</div>
						<div class="z-close">安全巡查内容</div>
						<div class="z-active">
							<div class="m-upload f-cb">
								<div class="u-s-btn f-fl">
									<label>
										<input type="file" name="single" />
									</label>
								</div>
								<div class="u-b-btn f-fl">
									<label>
										<input type="file" name="batch" multiple />
									</label>
								</div>
								<div class="m-search f-fr">
									<input class="u-text f-fl" type="search" name="search" value="请输入关键字" />
									<input class="u-submit f-fl" type="button" name="submit" value="" />
								</div>
							</div>
							<div class="m-list">
								<table>
									<tr class="s-first-line">
										<td width="52px"><input type="checkbox" name="all" /></td>
										<th width="45%">文档名称</th>
										<th width="168px">文档大小</th>
										<th width="150px">上传者</th>
										<th width="170px">上传时间</th>
										<th width="82px">操作</th>
									</tr>
									<tr>
										<td><input type="checkbox" /></td>
										<td><i class="iconfont icon-f-doc"></i>安全专项方案.doc</td>
										<td>21.3 Kb</td>
										<td>陈文耀</td>
										<td>2016-03-14</td>
										<td><i class="iconfont icon-xiazai"></i><i class="iconfont icon-shanchu"></i></td>
									</tr>
									<tr>
										<td><input type="checkbox" /></td>
										<td><i class="iconfont icon-f-ppt"></i>工期变更、费用索赔报审资料.ppt</td>
										<td>1.5 Mb</td>
										<td>詹平</td>
										<td>2016-03-13</td>
										<td><i class="iconfont icon-xiazai"></i><i class="iconfont icon-shanchu"></i></td>
									</tr>
									<tr>
										<td><input type="checkbox" /></td>
										<td><i class="iconfont icon-f-xls"></i>工程开工报审表.xls</td>
										<td>18.5 Kb</td>
										<td>陈文耀</td>
										<td>2016-03-13</td>
										<td><i class="iconfont icon-xiazai"></i><i class="iconfont icon-shanchu"></i></td>
									</tr>
									<tr>
										<td><input type="checkbox" /></td>
										<td><i class="iconfont icon-f-xls"></i>施工组织设计(方案)、各类专项方案报审表.xls</td>
										<td>1.1 Mb</td>
										<td>郑成柳</td>
										<td>2016-03-13</td>
										<td><i class="iconfont icon-xiazai"></i><i class="iconfont icon-shanchu"></i></td>
									</tr>
									<tr>
										<td><input type="checkbox" /></td>
										<td><i class="iconfont icon-f-doc"></i>安全生产责任制.doc</td>
										<td>37.6 Kb</td>
										<td>梅海丽</td>
										<td>2016-03-09</td>
										<td><i class="iconfont icon-xiazai"></i><i class="iconfont icon-shanchu"></i></td>
									</tr>
									<tr>
										<td><input type="checkbox" /></td>
										<td><i class="iconfont icon-f-doc"></i>工程资料评估报告.doc</td>
										<td>11.2 Kb</td>
										<td>陈文耀</td>
										<td>2016-03-08</td>
										<td><i class="iconfont icon-xiazai"></i><i class="iconfont icon-shanchu"></i></td>
									</tr>
								</table>
							</div>
							<div class="m-btn">
								<form action="" method="">
									<div class="u-del-btn f-fl">
										<input type="button" name="delete" />
									</div>
									<div class="u-down-btn f-fl">
										<input type="button" name="download" />
									</div>
									<div class="u-list f-fr">
										<a href="">共12页</a>
										<a href="">首页</a>
										<a href="">上一页</a>
										<a class="z-active" href="">1</a>
										<a href="">2</a>
										<a href="">3</a>
										<a href="">下一页</a>
										<a href="">尾页</a>
									</div>
								</form>
							</div>
						</div>
					</div>
				</section>
			</section>
		</main>
		<footer id="footer" class="g-foot f-fl">
			<p class="f-fr">Copyright © 2009 -2016 丽水市正达建筑工程有限公司  All rights reserved.  技术支持:红点智能</p>
		</footer>
	</body>
</html>

CSS

* {margin: 0; padding: 0;}
ul {list-style: none;}
img {display: block;}
a {text-decoration: none; color: #333}
body {height: 100%; font-family: Arial; text-align: center;}
.f-fl {float: left;}
.f-fr {float: right;}
.f-cb::after {content: ""; display: block; clear: both;}

.g-head {width: 100%; height: 85px; border-top: 5px #424147 solid;
	background-color: #018ffb;}
.g-head .m-logo {width: 303px; height: 36px; margin: 19px 0 0 20px; background: url(../img/logo.png) no-repeat;}
.g-head .m-menu ul {margin-top: 33px; font-size: 14px;}
.g-head .m-menu li {float: left; margin-right: 25px;}
.g-head .m-menu a {color: white;}
.g-head .m-menu i {position: relative; top: 4px; margin-right: 8px; color: white; font-size: 24px;}

.g-side {width: 200px; height: calc(100% - 90px); background-color: #424147;}
.g-side ul {height: auto;}
.g-side li {border-bottom: 1px #49484e solid; color: #9a999e; text-align: center; background-color: #424147;}
.g-side .z-active {color: white; background-color: #4e4d53;}
.g-side .m-xm, .m-yh, .m-xt {width: 100%; height: 140px;}
.g-side i {display: inline-block; margin-bottom: 10px; font-size: 40px;}
.g-side a {display: block; padding-top: 35px; color: inherit;}
	
.g-main {width: calc(100% - 200px); height: calc(100% - 140px); background-color: #fff; overflow: hidden;}
.g-main .container {height: 100%; overflow: auto;}
.m-info .m-text {margin: 21px 0 0 22px; text-align: left; color: #333;}
.m-info .m-text h2 {margin-bottom: 10px; line-height: 25px; font-size: 24px; font-weight: normal;}
.m-info .m-text i {margin-left: 15px; font-size: 22px; color: #ccc;}
.m-info .m-text p {line-height: 30px; font-size: 14px;}
.m-info .m-text em {font-style: normal; color: #999;}
.m-info .m-img {width: 200px; height: 149px; margin: 25px 20px 0 0;}

.m-title {position: relative; width: 100%; height: 55px; margin: 20px 0 10px 0; border: 1px #dbe7ed solid; background-color: #f1f9fC;}
.m-title ul {position: absolute; bottom: 0; width: 100%; height: 39px; margin-left: 8px;}
.m-title li {position: relative; float: left; width: 108px; height: 39px; margin-right: 12px; 
	border: 1px #dbe7ed solid; border-bottom: none; border-radius: 5px 5px 0 0;
	color: #666; line-height: 39px; background-color: #fbfeff;}
.m-title li.z-active {color: white; background-color: #018ffb;}
.m-title input {position: absolute; top: 0; left: 0; width: 108px; height: 39px; opacity: 0; cursor: pointer;}

.m-content .z-close {display: none;}
	
.m-upload .u-s-btn, .m-upload .u-b-btn {width: 110px; height: 32px; position: relative; margin: 10px;}
.m-upload .u-s-btn input, .m-upload .u-b-btn input {position: absolute; top: 0; left: 0; height: 100%; width: 110px; 
	opacity: 0; cursor: pointer;}
.m-upload .u-s-btn {background: url(../img/single_upload.png);}
.m-upload .u-b-btn {background: url(../img/batch_upload.png);}
.m-upload .u-text {width: 180px; height: 100%; border: none; font-size: 14px; text-indent: 9px; background-color: #fff;}
.m-upload .u-submit {width: 34px; height: 32px; border: none; cursor: pointer; background: url(../img/search.png)}
.m-upload .m-search {width: 214px; height: 32px; margin-right: 20px; border: 1px #dbe7ed solid; border-radius: 5px;}

.m-list table {margin: auto; border: 1px #dbe7ed solid; border-collapse: collapse; font-size: 12px; text-align: left;}
.m-list tr {height: 33px; text-indent: 12px;}
.m-list .s-first-line {background-color: #f1f9fc;}
.m-list .s-first-line th {border-left: 1px #dbe7ed solid; color: #666; font-weight: normal;}
.m-list td:first-child {text-align: center; text-indent: 0px;}
.m-list .iconfont {margin-right: 13px; font-size: 20px;}
.m-list .icon-f-doc {color: #52bcf7;}
.m-list .icon-f-xls {color: #65ce65;}
.m-list .icon-f-ppt {color: #f49d47;}
.m-list .icon-xiazai {color: #3da2f0;}
.m-list .icon-shanchu {color: #d94141;}

.m-btn .u-del-btn, .m-btn .u-down-btn {width: 86px; height: 32px; position: relative; margin: 10px 15px; }
.m-btn .u-del-btn input, .m-btn .u-down-btn input {position: absolute; top: 0; left: 0; height: 100%; width: 110px; 
	opacity: 0; cursor: pointer;}
.m-btn .u-del-btn {background: url(../img/delete.png);}
.m-btn .u-down-btn {background: url(../img/download.png);}
.m-btn .u-list {margin: 10px;}
.m-btn .u-list a {border: 1px #e6e6e6 solid; padding: 6px 9px; margin-right: 10px; background-color: #fafafa;}
.m-btn .u-list a.z-active {border: 1px #3797e0 solid; color: white; background-color: #42adff;}
.m-btn .u-list a:hover {border: 1px #3797e0 solid; color: white; background-color: #42adff;}

.m-upload .u-s-btn:hover, .m-upload .u-b-btn:hover, .m-upload .u-submit:hover,
	.m-btn .u-del-btn:hover, .m-btn .u-down-btn:hover {box-shadow: 2px 2px 10px #018FFB;}

.g-foot {width: calc(100% - 200px); height: 50px; color: #888; background-color: #f1f9fc;}
.g-foot p {margin: 20px; font-size: 12px;}

效果

在这里插入图片描述
在这里插入图片描述

示例4——使用bootstrap

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>个人博客</title>
		<link rel="stylesheet" href="./css/bootstrap.css" type="text/css" />
		<link rel="stylesheet" href="./iconfont/iconfont.css" type="text/css" />
		<style>
			* {margin: 0; text-decoration: none;}
			a:hover {text-decoration: underline;}
			.icon-search {font-size: 20px;}
			nav a {color: #6c757d; padding: 8px;}
			h1, h2, h3 {font-family: georgia;}
			.buttons a {border-radius: 32px; margin: 5px;}
		</style>
	</head>
	<body>
		<div class="container">
			<header class="row border-bottom justify-content-between align-items-center py-2">
				<a class="col-auto text-muted" href="">Subscribe</a>
				<h2 class="col-auto"><b>Large</b></h2>
				<div class="col-auto d-flex align-items-center">
					<a href="" class="text-decoration-none pr-1"><i class="iconfont icon-search text-muted"></i></a>
					<a class="btn btn-sm btn-outline-secondary text-muted m-1" href="">Sign up</a>
				</div>
			</header>
			<nav class="text-muted py-2 overflow-hidden">
				<ul class="row list-unstyled d-flex flex-nowrap justify-content-between align-items-center">
					<li><a href="">World</a></li>
					<li><a href="">U.S.</a></li>
					<li><a href="">Technology</a></li>
					<li><a href="">Design</a></li>
					<li><a href="">Culture</a></li>
					<li><a href="">Business</a></li>
					<li><a href="">Politics</a></li>
					<li><a href="">Opinion</a></li>
					<li><a href="">Science</a></li>
					<li><a href="">Health</a></li>
					<li><a href="">Style</a></li>
					<li><a href="">Travel</a></li>
				</ul>
			</nav>
			<div class="jumbotron bg-dark text-white p-5">
				<h1 class="display-4 font-italic">Title of a longer <br/>featured blog post</h1>
				<p class="lead">Multiple lines of text that form the lede, informing new <br/>readers quickly and efficiently about what’s most interesting <br/>in this post’s contents.</p>
				<a class="lead font-weight-bold text-white" href="">Continue reading...</a>
			</div>
			<div class="row">
				<div class="col">
					<div class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250">
						<div class="col d-flex flex-column p-4">
							<strong class="text-primary">World</strong>
							<h2 class="mb-0"><b>Feature Post</b></h2>
							<p class="text-muted mb-1">Nov 12</p>
							<p>This is a wider card with supporting text below as a natural lead-in to additional content.</p>
							<a style="color: #007bff;" href="">Continue reading</a>
						</div>
						<div class="col-auto d-none d-lg-flex bg-dark text-white align-items-center justify-content-center" 
						style="width: 200px; font-size: 20px;">Thumbnail</div>
					</div>
				</div>
				<div class="col">
					<div class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250">
						<div class="col d-flex flex-column p-4">
							<strong class="text-success">Design</strong>
							<h2 class="mb-0"><b>Post Title</b></h2>
							<p class="text-muted mb-1">Nov 11</p>
							<p>This is a wider card with supporting text below as a natural lead-in to additional content.</p>
							<a style="color: #007bff;" href="">Continue reading</a>
						</div>
						<div class="col-auto d-none d-lg-flex bg-dark text-white align-items-center justify-content-center" 
						style="width: 200px; font-size: 20px;">Thumbnail</div>
					</div>
				</div>
			</div>
			<main class="row">
				<div class="col-8">
					<h2 class="pb-4 mb-4 font-italic border-bottom">From the Firehose</h2>
					<h2 class="font-weight-bold mb-0" style="font-size: 40px;">Sample blog post</h2>
					<p class="text-muted">January 1, 2014 by <a href="">Mark</a></p>
					<p class="border-bottom pb-3">This blog post shows a few different types of content that’s supported and styled with Bootstrap. Basic typography, images, and code are all supported.</p>
					<p class="pb-1">Cum sociis natoque penatibus et magnis <a href="">dis parturient montes</a>, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.</p>
					<p class="pb-1">Curabitur blandit tempus porttitor. <b>Nullam quis risus eget urna mollis</b> ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
					<p class="pb-1">Etiam porta <i>sem malesuada magna</i> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
					<h2 class="font-weight-bold">Heading</h2>
					<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
					<h3 class="font-weight-bold">Sub-heading</h3>
					<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
					<pre style="overflow: visible;" class="d-flex justify-content-start">
						<code>Example code block</code>
					</pre>
					<p>Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.</p>
					<h3 class="font-weight-bold">Sub-heading</h3>
					<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
					<ul>
						<li>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</li>
						<li>Donec id elit non mi porta gravida at eget metus.</li>
						<li>Nulla vitae elit libero, a pharetra augue.</li>
					</ul>
					<p>Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.</p>
					<ol>
						<li>Vestibulum id ligula porta felis euismod semper.</li>
						<li>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</li>
						<li>Maecenas sed diam eget risus varius blandit sit amet non magna.</li>
					</ol>
					<p>Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis.</p>
					
					<h2 class="font-weight-bold mb-0" style="font-size: 40px;">Another blog post</h2>
					<p class="text-muted">December 23, 2013 by <a href="">Jacob</a></p>
					<p class="pb-1">Cum sociis natoque penatibus et magnis <a href="">dis parturient montes</a>, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.</p>
					<p class="pb-1">Curabitur blandit tempus porttitor. <b>Nullam quis risus eget urna mollis</b> ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
					<p class="pb-1">Etiam porta <i>sem malesuada magna</i> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
					
					<h1 class="font-weight-bold">New feature</h1>
					<p class="text-muted">December 14, 2013 by <a href="">Chris</a></p>
					<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
					<ul>
						<li>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</li>
						<li>Donec id elit non mi porta gravida at eget metus.</li>
						<li>Nulla vitae elit libero, a pharetra augue.</li>
					</ul>
					<p>Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
					<p>Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.</p>
					<div class="row my-5 buttons">
						<a class="btn btn-outline-primary" href="">Older</a>
						<a class="btn btn-outline-secondary disabled">Newer</a>
					</div>
				</div>
				<div class="col-4">
					<div class="p-4 bg-light">
						<h3 class="font-italic">About</h3>
						<p>Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
					</div>
					<ul class="list-unstyled p-4">
						<li><h3 class="font-italic">Archives</h3></li>
						<li><a href="">March 2014</a></li>
						<li><a href="">February 2014</a></li>
						<li><a href="">January 2014</a></li>
						<li><a href="">December 2013</a></li>
						<li><a href="">November 2013</a></li>
						<li><a href="">October 2013</a></li>
						<li><a href="">September 2013</a></li>
						<li><a href="">August 2013</a></li>
						<li><a href="">July 2013</a></li>
						<li><a href="">June 2013</a></li>
						<li><a href="">May 2013</a></li>
						<li><a href="">April 2013</a></li>
					</ul>
					<ul class="list-unstyled p-4">
						<li><h3 class="font-italic">Elsewhere</h3></li>
						<li><a href="">GitHub</a></li>
						<li><a href="">Twitter</a></li>
						<li><a href="">Facebook</a></li>
					</ul>
				</div>
			</main>
		</div>
		<footer class="text-center bg-light py-5">
		  <p class="text-muted">Blog template built for <a href="">Bootstrap</a> by <a href="">@mdo</a>.</p>
		  <a href="#">Back to top</a>
		</footer>
	</body>
</html>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

  • 1
    点赞
  • 0
    评论
  • 2
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

参与评论 您还未登录,请先 登录 后发表或查看评论
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页

打赏作者

Hung武

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值