扁平化设计，博客网站（八）代码源码

最新推荐文章于 2022-10-26 10:37:19 发布

敢跟头像对视三秒吗？

最新推荐文章于 2022-10-26 10:37:19 发布

阅读量316

点赞数

分类专栏： web开发练习

本文链接：https://blog.csdn.net/weixin_45769564/article/details/119542152

版权

web开发练习专栏收录该内容

16 篇文章 0 订阅

订阅专栏

在这里插入图片描述

html：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>香江小海涛</title>
		<link rel="stylesheet" type="text/css" href="css/common.css" />
		<link rel="stylesheet" type="text/css" href="css/mian.css" />
		<link rel="stylesheet" type="text/css" href="css/dbwui.css" />
		<script src="js/main.js" type="text/javascript" charset="utf-8"></script>
		<meta name="Description" content="香江小汉堡，老八，奥里给，美食，小阿giao，giao，讲述美食制作，分享美食" />

	</head>
	<body>
		<div id="wrapper">
			<div id="toper">


				<header>
					<img class="weblogo" src="img/ppsy.jpg">
					<h1>香江小汉堡<br><span class="logo">x i a n g j i a n g</span></h1>
				</header>
				<!-- <div style="height: 120px;">
				
			</div> -->

				<nav>
					<ul>
						<li class="item_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>
						<li><a href="#">关于老八</a></li>
						<button type="button"></button>

					</ul>

				</nav>
			</div>
			<div id="container">


				<div class="ad">
					<img src="img/guangbo.png">
					<marquee behavior="" direction="">欢迎来到香江小汉堡美食网站 今天起的有点早 / 闲着没事做个汉堡 / 汉堡味道好不好 / 配料你得要选好 / 面包片 老干妈 /
						放点生菜合上它 / 大白豆腐 韭菜花 / 今天早餐就吃它 / 灯红酒绿迷人醉 / 老八教你做美味 / 千军万马来相见 / 首先来碗大桶面 / 大声呐喊奥利给 / 所有东西都下胃 /
						不管是腥还是臭 / 到我嘴里是块肉 奥里给 干了兄弟们!!!!</marquee>
				</div>
				<div class="content">
					<section>
						<div id="pics" class="pics">
							<a
								href="https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E8%80%81%E5%85%AB&hs=0&pn=1&spn=0&di=151360&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&ie=utf-8&oe=utf-8&cl=2&lm=-1&cs=2516937770%2C245388711&os=1453583172%2C743231865&simid=0%2C0&adpicid=0&lpn=0&ln=30&fr=ala&fm=&sme=&cg=&bdtype=0&oriquery=%E8%80%81%E5%85%AB&objurl=https%3A%2F%2Fgimg2.baidu.com%2Fimage_search%2Fsrc%3Dhttp%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2F4c64d7a9ef8670086f0474493a3ab42aaf0dc9f6.jpg%26refer%3Dhttp%3A%2F%2Fi0.hdslb.com%26app%3D2002%26size%3Df9999%2C10000%26q%3Da80%26n%3D0%26g%3D0n%26fmt%3Djpeg%3Fsec%3D1627603955%26t%3Dd449c683195eb3cf63b840b1da2b2ec9&fromurl=ippr_z2C%24qAzdH3FAzdH3Fooo_z%26e3Bktstktst_z%26e3Bv54AzdH3F6jw1AzdH3Fve90989ma&gsm=2&islist=&querylist=">
								<img src="upload/pics/a1.jpeg" alt="Grapefruit slice atop a pile of other slices">
							</a>
						</div>
						<!-- 周排行 -->
						<div class="weekrank">
							<div class="title">
								本周热门美食
							</div>
							<div class="cont">
								<div class="art">
									<div class="left">
										<span>1</span>
										<a href="#">今天我们干奥里给✌ </a>
									</div>

									<div class="right">
										评论（5）
										<span>❤ 33 喜欢</span>
									</div>

								</div>
								<div class="art">
									<div class="left">
										<span>2</span>
										<a href="#">老八小汉堡如何制作？</a>
									</div>

									<div class="right">
										评论（4）
										<span>❤ 23 喜欢</span>
									</div>

								</div>
								<div class="art">
									<div class="left">
										<span>3</span>
										<a href="#">臭豆腐加柠檬什么味道？</a>
									</div>

									<div class="right">
										评论（1）
										<span>❤ 13 喜欢</span>
									</div>

								</div>
							</div>



						</div>
						<!-- 文章模块 -->
						<div class="myarticle">
							<article class="dbarticle">
								<header>
									<div class="st">
										<span>美食</span>
										<div></div>
									</div>

									<h3>奥里给加小汉堡，大口吃，真香</h3>
								</header>
								<section>
									<img src="./upload/pics/ppsy.jpg" alt="">

									描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述
								</section>
								<footer>
									<img src="img/time.png" />时间
									<img src="img/eye.png">浏览量
									<img src="img/comment.png"><span class="commentcount">评论量</span>
									<img src="img/afbulous.png"><span class="fabulous">点赞</span>
								</footer>
							</article>
							<article class="dbarticle2">
								<header>
									<div class="st">
										<span>美食</span>
										<div></div>
									</div>
									<h3>giao哥联动</h3>
								</header>
								<section>
									<img src="upload/pics/efd50c574bee80d65646b3ed3a15e96c.gif" alt="">

									描述描述
								</section>
								<footer>
									<img src="img/time.png" />时间
									<img src="img/eye.png">浏览量
									<img src="img/comment.png"><span class="commentcount">评论量</span>
									<img src="img/afbulous.png"><span class="fabulous">点赞</span>
								</footer>
							</article>
							<article class="dbarticle3">
								<header>
									<div class="st">
										<span>美食</span>
										<div></div>
									</div>

									<h3>一giao我里giao</h3>
								</header>
								<section>
									<img src="upload/pics/giao.jpg" alt="">

									描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述
									描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述
									描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述
									描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述
									描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述
									描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述
								</section>
								<footer>
									<img src="img/time.png" />时间
									<img src="img/eye.png">浏览量
									<img src="img/comment.png"><span class="commentcount">评论量</span>
									<img src="img/afbulous.png"><span class="fabulous">点赞</span>
								</footer>
							</article>

						</div>
						<div class="pager">
							<button type="button">
								更多....
							</button>
						</div>
					</section>
					<aside>
						<div class="share">
							<img alt="qq" src="img/QQ.png">
							<img alt="sina" src="img/sina.png">
							<img alt="wechat" src="img/wechat.png">

							<img alt="qzone" src="img/qqzone.png">
						</div>
						<div class="dbpanel">
							<div class="title titlegreen">
								免费下载
							</div>
							<div class="content  dbdownload">
								<ul>
									<li>
										<a href="upload/files/music.zip">music</a>


									</li>
									<li>
										<a href="upload/files/飞机大战素材.zip">飞机大战素材</a>
									</li>
								</ul>

							</div>
						</div>
						<div class="dbpanel">
							<div class="title">
								新主题即将上线
							</div>
							<div class="content">

							</div>
						</div>
						<div class="dbpanel dbcloud">
							<div class="title titlepink ">
								标签云
							</div>
							<div class="content">
								<table>
									<tr>
										<td>香江小海</td>
										<td>香江小海</td>
									</tr>
									<tr>
										<td>香江小海</td>
										<td>香江小海</td>
									</tr>
									<tr>
										<td>香江小海</td>
										<td>香江小海</td>
									</tr>
									<tr>
										<td>香江小海</td>
										<td>香江小海</td>
									</tr>
									<tr>
										<td>香江小海</td>
										<td>香江小海</td>
									</tr>
									<tr>
										<td>香江小海</td>
										<td>香江小海</td>
									</tr>
									<tr>
										<td>香江小海</td>
										<td>香江小海</td>
									</tr>
									<tr>
										<td>香江小海</td>
										<td>香江小海</td>
									</tr>
									<tr>
										<td>香江小海</td>
										<td>香江小海</td>
									</tr>
									<tr>
										<td>香江小海</td>
										<td>香江小海</td>
									</tr>
									<tr>
										<td>香江小海</td>
										<td>香江小海</td>
									</tr>

								</table>
							</div>
						</div>
						<div class="dbpanel">
							<div class="title">
								猜你喜欢
							</div>
							<div class="content">

							</div>
						</div>
						<div class="dbpanel">
							<div class="title">
								最新吐槽
							</div>
							<div class="content">

							</div>
						</div>
						<div class="dbpanel">
							<div class="title">
								友情链接
							</div>
							<div class="content">


								<a href="https://blog.csdn.net/weixin_45769564?spm=1000.2115.3001.5343">相关资料</a>

								<a href="https://www.bilibili.com/v/kichiku/">bilibili</a>




							</div>
						</div>




					</aside>
				</div>


			</div>
			<footer>
				<section>&copy;2021 | 香江小海涛</section>
			</footer>
		</div>
	</body>
</html>
<a href="#">

js:

window.onload = function() {
		// alert("sdfsdfsdf")   用来测试连接是否成功
		//解百纳的时钟控件，用来空中图片轮播
		var imgIndex = 1; //表示当前图片是第几张
		var imgCount = 3; //表示图片的个数
		setInterval(function() {

			imgIndex++; //imgIndex=imgIndex+1
			if (imgIndex > imgCount) imgIndex = 1;
			// console.log("ddd") 测试时钟控件是否有效
			//var imgs=document.getElementsByTagName("#wrapper>#container>.content>section>.pics img");
			//document.querySelectorAll("#wrapper>#container>.content>section>.pics img");
			// var pics = document.getElementsByClassName("#wrapper>#container>.content>section>.pics");
			// //console.log(imgs.src)
			// console.log(pics.src)
			//document.getElementById("pics");  普通方式
			var container = document.getElementById("container");
			// console.log(container)
			//document.getElementsByClassName("pics");
			var content = container.getElementsByClassName("content");
			var pics = content[0].getElementsByClassName("pics");
			var a = pics[0].getElementsByTagName("a");
			//console.log(a[0].href)
			//console.log(pics)
			if (imgIndex == 1) a[0].href = "http://baidu.com";
			else if (imgIndex == 3) {
				a[0].href = "http://aiqiyi.com";
			}
			var img = a[0].getElementsByTagName("img");
			// console.log(img[0].src);
			img[0].src = "upload/pics/a" + imgIndex + ".jpeg"




		}, 3000)


		// document.getElementsByClassName("pager")
		var btnmore = document.querySelector("#wrapper>#container>.content>section .pager>button");
		// console.log(btnmore);
		// 以下方法不科学
		// btnmore.click=function(){
		// 	alert("nn");

		// }

		btnmore.addEventListener("click", function() {
			// alert("nnn");
			var myarticle = document.querySelector("#wrapper>#container>.content>section>.myarticle")
			// console.log(myarticle);
			var artstr = '<article class="dbarticle">\
								<header>\
									<div class="st">\
										<span>美食</span>\
										<div></div>\
									</div>\
\
									<h3>奥里给加小汉堡，大口吃，真香</h3>\
								</header>\
								<section>\
									<img src="./upload/pics/ppsy.jpg" alt="">\
\
									描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述\
								</section>\
								<footer>\
									<img src="img/time.png" />时间\
									<img src="img/eye.png">浏览量\
									<img src="img/comment.png"><span class="commentcount">评论量</span>\
									<img src="img/afbulous.png"><span class="fabulous">点赞</span>\
								</footer>\
							</article>';
			// var art=document.createElement(artstr);

			// console.log(artstr)
			myarticle.insertAdjacentHTML("afterend", artstr);
			myarticle.insertAdjacentHTML("afterend", artstr);
			myarticle.insertAdjacentHTML("afterend", artstr);

		}, false);

		// function (aaa){
		// 	alert("nnn")
		// }

		//一键分享

		var imgs = document.querySelectorAll("#wrapper>#container>.content>aside>.share>img")
		// console.log(imgs);
		for(var i=0;i<4;i++){
			// console.log(imgs[i].alt);
			// continue;
			imgs[i].addEventListener("click", function() {
				// console.log(this.alt);
				goshare(this.alt);
		},false);
		}
		

		function goshare(s) {
			var title=document.querySelector("title").innerText;
			var pic=document.querySelector("#wrapper #toper>header>.weblogo")
			var picpath=pic.src;
			var desc=document.querySelector("meta[name=Description]").content;
			// console.log(desc.content)
			
			// console.log(pic);return;
			
			// console.log(picpath);return;
			// console.log(title.innerText);return;
			
			//  console.log(document.location.href);
			// return;
			
				//接口
			if (s == 'qq'){
				window.open('http://connect.qq.com/widget/shareqq/index.html? url=' + document.location
					.href + '?sharesource=qzone&title=' + title + '&pics=' + picpath + '&summary=' +'&desc');
			}
				//新浪微博 
			if (s=='sina'){
				window.open('http://service.weibo.com/share/share.php?url = '+document.location.href+'?sharesource=weibo&title=' + title + '&pic=' + picpath);
			}
				//qq好友 if(s =='qq!
				// windowopen('http://connect.qq.com/widget/shareqq/index.html?
				// url='+documentlocationhref+?sharesource=weibo&title='+标题+'&pic='+图片链接+'&appkey=2706825840');
			if (s=='wechat'){
				alert("秀芹，是你吗")
				
				
			}
			if (s=='qzone'){
				alert("秀芹，是你吗")
				
				
			}
		}



// 标签孕颜色自动生成
var dbcloudtds=document.querySelectorAll("#wrapper>#container>.content>aside .dbcloud .content table tr td");
//console.log(dbcloudtds);
	for(var i=0;i<dbcloudtds.length;i++){
		//console.log(dbcloudtds[i]);
		
		//var r=Math.random()*255;
		//dbcloudtds[i].setAttribute("style","background-color:rgba("+Math.random()*255+","+Math.random()*255+","+Math.random()*255+","+Math.random()*1+") ");
		var r=Math.random()*255;
		var g=Math.random()*255;
		var b=Math.random()*255;
		dbcloudtds[i].setAttribute("style","background-color:rgba("+r+","+g+","+b+",0.7) ");
	}


}

css

*{
	margin: 0;
	padding: 0;
	/* color: #696969; */
}

#wrapper {
	background-color: #CCCCCC;
}

#wrapper>#toper {
	position: fixed;
	z-index: 10;
	top: 0;
	left: 0;
	right: 0;
}

#wrapper>#toper>header {
	position: relative;
	background-color: #86c3db;
	/* background-color: #87c0ca; */
	/* background-color: hsl(215, 100%, 55%); */
	width: 100%;
	height: 120px;

	display: -webkit-box;
	display: -moz-box;
	/* -moz-box-pack: center;
	-webkit-box-pack: center; */
	/* position: relative; */

}
/* 品牌logo */
#wrapper>#toper>header img{
	width:70px ;
	height: 70px;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left: 10px;
	transform: translateY(-50%);
	opacity: 0.8;
}

#wrapper>#toper>header .logo {
	font-family: "db";
	color: white;
	font-size: 20px;
}

#wrapper>#toper>header>h1 {
	color: white;
	/* 
	 */
	margin: auto;
	display: -webkit-box;
	display: -moz-box;
	-moz-box-align: center;
	-webkit-box-align: center;
	transition-duration: 3s;
	cursor: pointer;

	text-shadow: purple 5px 3px 1px;

}

#wrapper>#toper>header>h1:hover {
	left: 10px;
	transform: translateX(50px);

	text-shadow: blueviolet 14px 7px 10px;



}

/* 导航栏 */
#wrapper>#toper>nav {

	/* background-color: dimgrey; */
	background-color: #1587ac;
	height: 50px;
	/*在手机情况下可以华东*/
	/* position: fixed;
	z-index: 10;
	top: 120px; */
	/* margin-top: 80px; */
	/* margin-bottom: 7px; */
}

@media (max-width:600px) {
	#wrapper>#toper>nav {

		overflow: scroll;
		/* top: 101px; */

	}

	/* #wrapper>#toper{
		position: fixed;
		z-index: 10;
	} */
}

#wrapper>#toper>nav ul {
	/* border: 1px solid forestgreen;
	max-width: 960px;
	margin: auto;
	/* display: inline-block; */

	/* height: 65px; */
	max-width: 960px;
	position: relative;
	min-width: 600px;

}

#wrapper>#toper>nav li {
	display: inline-block;
	height: 50px;
	line-height: 50px;
	padding-right: 10px;
	/* padding-top: 10px; */
	max-width: 80px;
	/* border: 1px solid forestgreen; */
	text-align: center;


}

#wrapper>#toper>nav li:hover,
.item_active {
	/* background-color: cadetblue; */
	background-color: #de8d41;
	text-shadow: black 2px 2px 5px;
}

#wrapper>#toper>nav>ul a {
	color: white;
	text-decoration: none;
	font-size: 20px;





}

/* 查找按钮 */
#wrapper>#toper>nav>ul button {

	border-width: 0;
	background-color: transparent;
	position: absolute;
	/* padding-top: 20px; */
	background-image: url(../img/lookup3.png);
	width: 32px;
	height: 32px;
	top: 10px;
	cursor: pointer;
}

#wrapper>#toper>nav>ul button:hover {
	/* background-color: #8A2BE2; */
	background-image: url(../img/lookup4.png);
	box-shadow: black 2px 2px 5px;
	cursor: pointer;
}


/* 开始正文模块 */

#wrapper>#container {
	max-width: 960px;
	/* height: 100%; */
	/* background-color: #ccc; */
	/* margin: auto; */
	/* border: 1px solid red; */
	position: relative;
	overflow: auto;
	display: -moz-box;
	display: -webkit-box;
	/* height: 100%; */
	-moz-box-flex: 1;
	-webkit-box-flex: 1;
	/* -moz-box-pack: center;
	-webkit-box-pack: center; */
	-moz-box-orient: vertical;
	-webkit-box-orient: vertical;
	margin: auto;
	height: 600px;
	/* scroll-behavior: auto; */
	margin-top: 170px;
}


/* 广告栏 */

#wrapper>#container>.ad {
	background-color: #FFFFFF;
	box-shadow: gray 3px 3px 10px;
	padding: 5px;
	position: relative;
	display: -moz-box;
	display: -webkit-box;

}

/* #wrapper>nav button>img{
	width: 30px;
	height: 30px;
	/* padding-top: 5px; */


#wrapper>#container>.ad img {
	margin-right: 10px;
	/* margin-top: 3px; */
	position: absolute;
	margin-top: 5px;

}

#wrapper>#container>.ad>marquee {
	max-width: 900px;
	margin-left: 20px;
	display: -moz-box;
	display: -webkit-box;
	-moz-box-flex: 1;
	-webkit-box-flex: 1;
}

/* 主要内容部分 */
#wrapper>#container>.content {
	display: -moz-box;
	display: -webkit-box;
	margin-top: 10px;

}

#wrapper>#container>.content::-webkit-scrollbar {
	display: none;



}

#wrapper>#container::-webkit-scrollbar {
	display: none;



}



#wrapper>#toper>nav::-webkit-scrollbar {
	display: none;



}

#wrapper>#container>.content>section {
	max-width: 655px;
	/* height: 400px; */
	/* border: 1px solid red; */
	/* float: left; */
	-moz-box-flex: 5;
	-webkit-box-flex: 5;

}
/* 按钮获取更多 */
#wrapper>#container>.content>section .pager{
	text-align: center;
	background-color: white;
	margin-top: 10px;
	padding: 10px;
	
}
#wrapper>#container>.content>section .pager>button{
	border: 0;
	padding: 5px,10px;
}





/* 图片轮播模块 */
#wrapper>#container>.content>section>.pics {
	/* height: 300px; */
	/* background-color: mintcream; */
	width: 100%;
	/* border: 1px solid #8A2BE2; */



}

#wrapper>#container>.content>section>.pics img {
	width: 100%;
}

#wrapper>#container>.content>section>.pics:hover {
	box-shadow: cadetblue 3px 3px 10px;
	transition-duration: 1s;
}

/* 周排行 */
#wrapper>#container>.content>section>.weekrank {
	/* height: 150px; */
	background-color: mintcream;
	/* width: 100%; */
	/* border: 1px solid gold; */
	margin-top: 10px;
	padding: 10px;

}
#wrapper>#container>.content>section>.weekrank .title{
	color: #86c3db;
	border-bottom: 1px solid #696969;
	padding-bottom: 5px;
	
	
	
}
#wrapper>#container>.content>section>.weekrank .cont .art{
	overflow: auto;
	
}
#wrapper>#container>.content>section>.weekrank .cont .art .left{
	float: left;
	margin-top: 6px;
	
	
	
}
#wrapper>#container>.content>section>.weekrank .art .left span{
	background-color: #86C3DB;
	padding-left: 4px;
	padding-right: 4px;
	color: white;
}
#wrapper>#container>.content>section>.weekrank .art:nth-child(2) .left span{
	background-color: gold;
	
	
}
#wrapper>#container>.content>section>.weekrank .art:nth-child(3) .left span{
	background-color: seagreen
	
}
#wrapper>#container>.content>section>.weekrank .art .right{
	
	float: right;
	
	
}
#wrapper>#container>.content>section>.weekrank .cont .art .right span{
	color: hotpink;
}
#wrapper>#container>.content>section>.weekrank .cont .art a{
	text-decoration: none;
	color:black ;
}
#wrapper>#container>.content>section>.weekrank .cont .art a:hover{
	color: #1587AC;
	text-decoration: overline;
	/* text-decoration: underline; */
	
	
}

#wrapper>#container>.content>section>.weekrank:hover {
	box-shadow: cadetblue 3px 3px 10px;
	transition-duration: 1s;
}
/* 侧边 */
#wrapper>#container>.content>aside {
	max-width: 300px;
	/* height: 400px; */
	/* border: 1px solid blue; */
	/* float: right; */
	-moz-box-flex: 2;
	-webkit-box-flex: 2;
	padding: 10px;
	margin-left: 5px;
}
/* 侧边栏 */
#wrapper>#container>.content>aside>.share{
	background-color: white;
	padding: 10px;
	/* margin: 0; */
}
#wrapper>#container>.content>aside>.share>img{
	margin-right: 10px;
	cursor: pointer;
}
#wrapper>#container>.content>aside>.share>img:hover{
	box-shadow: aliceblue 5px 5px 10px;
	transition-duration: 1s;
}
/* 下载 */
#wrapper>#container>.content>aside .dbdownload ul{
	/* border: 1px solid red; */
	max-width: 200px;
	margin-left: 13px;
}
#wrapper>#container>.content>aside .dbdownload ul li{
	/* border: 1px solid blue; */
}






/* 标签云 */
#wrapper>#container>.content>aside .dbcloud .content table{
	width: 100%;
	
	
}
#wrapper>#container>.content>aside .dbcloud .content table tr td{
	background-color: #00A1D6;
	margin-top: 5px;
	padding: 4px;
	color: white;
	
}


/* 移动端处理 */
@media (max-width:420px) {
	#wrapper>#container>.content>aside {
		display: none;
	}

	#wrapper>header {
		height: 100px;
	}
}

/* #wrapper>nav>a{
	text-decoration: none;
	color: white;
	font-size: 30px;
	margin: auto;
	text-align: center;
	padding: 10px;
	
}
#wrapper>nav>a:hover{
	text-shadow: brown 2px 2px 5px;
	background-color:hsl(225,100%,55%);
} */
/* 版权模块 */
#wrapper>footer {


	background-color: #595959;
	width: 100%;
	color: white;
	height: 50px;
	font-weight: bold;
margin-top: 10px;

}

#wrapper>footer>section {
	color: white;
	margin: auto;
	max-width: 960px;
	line-height: 50px;

}

#wrapper>#container>.content>section>article{
	
}

敢跟头像对视三秒吗？

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
12
评论
扁平化设计，博客网站（八）代码源码

html：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title>香江小海涛</title> .
复制链接

扫一扫