页面排版随堂案例20201119

最新推荐文章于 2024-06-13 09:45:33 发布

Jasonwx123

最新推荐文章于 2024-06-13 09:45:33 发布

阅读量181

点赞数 1

分类专栏： html 文章标签： css html

本文链接：https://blog.csdn.net/JsonWuxin/article/details/109819683

版权

html 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>名人名言</title>
		<link href="css/wisdom.css" rel="stylesheet" type="text/css" />
	</head>

	<body>
		<div id="wrap">
			<!--top-->
			<div id="head">
				<h1>名人名言</h1>
				<em>分享名人名言，开始一段触动心灵的智慧之旅跳到内容</em>
				<div id="nav">
					<ul>
						<li class="home">
							<a href="#">登录</a>
						</li>
						<li>
							<a href="#">名人名言</a>
						</li>
						<li>
							<a href="#">英文名言(English)</a>
						</li>
						<li>
							<a href="#">心理杂志</a>
						</li>
						<li>
							<a href="#">专题活动</a>
						</li>
						<li>
							<a href="#">发表</a>
						</li>
					</ul>
				</div>
			</div>
			<!--body-->
			<div id="mainbody">
				<div id="content">
					<div class="topic">
						<h2>心理学经典名言的智慧</h2>
						<p>洞察人性的美与丑，认识自我的强与弱。一句好的格言能够穿越时间，永不失色、历久弥香，它总是能给人们带来心灵的滋养。</p>
					</div>
					<strong>创造力(creativity)有两个词根:Crera拉丁语的意思是“去创造”。Krainir希腊语的意思是“去实现”。所以，创造力不仅仅是一种想象力、一种天赋，创造力更是一种将自己的想法付诸实现的能力。</strong>
					<p>2012 年 01月 06日</p>
					<p>发表在 未分类 | 标签： 《换个脑袋去思考》, 创造力 | 留下评论</p>
					<div class="topic">
						<h2>作者简介</h2>
					</div>
					<strong>如果你还没有注意到你有能力让对方作出你所希望得到的反应，那么你就还没有很好地掌握人生的真谛。这其实简单到不可思议。如果你希望他人对你感兴趣，那么你就要先对他人产生兴趣；如果你想让他人紧张，那么你自己首先要紧张起来。就是这么简单。人们会按照你对待他们的方式对待你。这其中没有什么秘诀。看看周围的人，你可以在与下一个人交流时证实这一点。</strong>
					<p>2012 年 01 月 06 日</p>
					<p>如果你还没有注意到你有能力让对方作出你所希望得到的反应，那么你就还没有很好地掌握人生的真谛。这其实简单到不可思议。如果你希望他人对你感兴趣，那么你就要先对他人产生兴趣；如果你想让他人紧张，那么你自己首先要紧张起来。就是这么简单。人们会按照你对待他们的方式对待你。这其中没有什么秘诀。看看周围的人，你可以在与下一个人交流时证实这一点。</p>
					<p>发表在 未分类 | 标签： 《怎样出售设计创意》, 温斯顿·丘吉尔 | 留下评论</p>
					<div class="topic">
						<h3>赞助广告</h3>
						<img src="img/ad_2.jpg" />
					</div>
				</div>
				<div id="siderbar">
					<h3>赞助广告</h3>
					<img src="img/ad.jpg" alt="心理催眠师免费培训计划" />
					<h3>搜索</h3>
					<input type="text" value="点击搜索" />
					<h3>标签</h3>
					<em><a href="#">60年语录</a> <a href="#">《犯罪心理》</a><a href="#"> 世间百态</a><a href="#"> 二十四史</a><a href="#">传统名人</a> <a href="#">体育人物</a> <a href="#">卡斯特罗</a> <a href="#">卡斯特罗名言</a> <a href="#">卡斯特罗语录</a><a href="#"> 历史</a> <a href="#">友谊爱情</a> <a href="#">古代格言</a> <a href="#">名人名言</a> <a href="#">名人随语</a> <a href="#">教子立人</a> <a href="#">新闻事件</a> <a href="#">李白</a> <a href="#">爱情语录</a> <a href="#">韩寒语录</a></em>
				</div>
			</div>
			<!--footer-->
			<div id="footer">
				<p>&copy;All Rights Reserved by Psytopic. 来自Psytopic.com的礼物</p>
			</div>
		</div>
	</body>
</html>


```css
*{
	margin:0px;
	padding:0px;
}
body {
	margin:0;
	font:12px Arial, Helvetica, sans-serif, "ו";
	color:#333;
}
li{
	list-style-type:none;
}
a{
	text-decoration:none;
	color:#666;
}
a:hover{
	text-decoration:underline;
}
h1{
	margin:0 0 10px 50px;
	font-size:30px;
	color:#000;
}
em {
	font-size:14px;
	color:#666;
}
strong{
	line-height:22px;
}
#wrap {
	width:950px;
	overflow:hidden;
	margin:0px auto;
}
#head {
	padding-top:50px;
}
#head {
	padding-top:50px;
}
#head em {
	margin-left:50px;
}
#nav {
	width:100%;
	border-bottom:1px solid #ccc;
	margin-top:30px;
	overflow:hidden;
}
#nav .home {
	border:1px solid #ccc;
	border-bottom:none;
	padding:10px;
	float:left;
	margin-left:50px;
}
#nav li {
	border:1px solid #ccc;
	border-left:none;
	border-bottom:none;
	padding:10px;
	float:left;

}
#mainbody{
	padding:10px 20px;
	margin-top:20px;
}
#content{
	
	width:60%;
	
	float:left;
}
.topic{
	border:1px solid #ccc;
	padding:5px 10px;
	margin-bottom:10px;
	
}
#siderbar{
	
	width:30%;
	border:1px solid #ccc;
	float:right;
	padding:20px;

}
#footer{
	clear:both;
	margin-top:500px;
	width: 100%;
	height:200px;
	border-top:1px solid #ccc;
	text-align:center;
	color:#999;
	padding:10px 0;
}

运行效果：
在这里插入图片描述

Jasonwx123

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
页面排版随堂案例20201119

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>名人名言</title> <link href="css/wisdom.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="wrap"> <!--top-.
复制链接

扫一扫