2017百度前端技术学院习题-06

最新推荐文章于 2022-08-07 22:34:52 发布

HungryPlayer

最新推荐文章于 2022-08-07 22:34:52 发布

阅读量265

点赞数

分类专栏：前端任务文章标签：习题

本文链接：https://blog.csdn.net/jiejiao509/article/details/79951090

版权

前端任务专栏收录该内容

6 篇文章 0 订阅

订阅专栏

习题任务-06

收获:

1:排版的问题

2.更加熟练样式的设置

代码如下(坚持下去)

main.css

body{
	background-color: #888;
}
.page{
	width: 980px;
	height: 1486px;
	background-color: #fff;
	margin: 30px auto;
	border: 1px solid #000;
}

/*顶部设计*/
nav{
	width: 892px;
	height: 61px;
	border-bottom: 2px solid #938e8c;
	margin: 0 auto;
}
.red-block{
	width: 110px;
	height: 61px;
	background-color: #ff8888;
}
.red-block span{
	position: relative;
	margin-left: 20px;
	font: 12px/106px "SimHei";
	color: #fff;
}
.date{
	float: right;
	position: relative;
	top: -17px;
	left: -3px;
	color: #d45d5c;
	font:14px/20px 'SimHei';
}

/*第一栏设置*/
.pic01{
	width: 641px;
	height: 301px;
	margin: 30px 20px 15px 44px;
}
.shadow-left,.shadow-right{
	width: 191px;
	height: 301px;
	position: relative;
	top: -305px;
	left: 0;
	z-index: 1;
}
.shadow-left{
	float: left;
	background-color: rgba(49,111,77,0.60);
}
.shadow-right{
	float: right;
	background-color: rgba(235,153,153,0.60);
}
.words{
	float: right;
	position: relative;
	top: -316px;
	left: 432px;
	width: 203px;
	height: 301px;
	border-top: 2px solid #cc8091;
}
.words #title01{
	float: left;
	border-bottom: 2px solid grey;
	margin-top: 15px;
}
.words #title02{
	position: absolute;
	top: 35px;
	left: 0;
	float: left;
	border-bottom: 2px solid grey;
	margin-top: 15px;
}
.words span{
	font-size: 22px;
}
.words p{
	position: absolute;
	top: 80px;
	left: 0;
	font:12px/20px 'SimHei';
	color: #676767;
	float: left;
}
.num{
	font:italic 116px/130px 'Microsoft Yahei';
	color: #75b86b;
	position: relative;
	top: 85px;
	left: -30px;
}
#num2{
	font: 55px 'Microsoft Yahei';
	color: #cc8091;
	position: relative;
	top: 62px;
	left: -10px;
}
#num3{
	font: 21px 'Microsoft Yahei';
	color: #cc8091;
	position: relative;
	top: 15px;
	left: 70px;
}
#num4{
	font: 12px 'Microsoft Yahei';
	color: #888;
	position: relative;
	top: 7px;
	left: 72px;
}

/*第二栏设置*/
.content{
	width: 641px;
	height: 270px;
	/* background-color: #666; */
	margin: 30px 0 20px 44px;
}
.what,.when,.how{
	float: left;
	width: 30%;
	padding-right: 20px;
	position: relative;
	left: 0;
}
.what{
	top: -220px;
}
.when{
	top: -235px;
}
.how{
	top: -237px;
}
#title03,#title04,#title05{
	float: left;
	position: absolute;
	top: -35px;
	left: 0;
	font: bold 16px/20px 'Microsoft Yahei';
	text-decoration: underline;
}
#title03{
	color: #418c59;
}
#title04{
	color: #d2994f;
}
#title05{
	color: #cc7680;
}
p{
	font:12px/20px 'Microsoft Yahei';
	color: rgba(35,24,21,0.7);
}

/*第三栏编辑*/
.words_p{
	position: relative;
	width: 458px;
	height: 200px;
	margin-left: 44px;
	border-bottom: 2px solid #11456b;
}
#words_the{
	font: bold italic 70px 'Microsoft Yahei';
	color: #f5e327;
	position: absolute;
	top: 0;
	left: 0;
}
.words_p p{
	color: #11456b;
}
#words_p_th{
	position: absolute;
	top: 32px;
	left: 170px;
	float: right;
	font: 40px 'Microsoft Yahei';
	color: #11456b;
}
#words_p_of{
	position: absolute;
	top: 80px;
	left: 10px;
	font: 40px 'Microsoft Yahei';
	color: #11456b;
}
#words_p_sm{
	font: bold 33px 'Microsoft Yahei';
	color: #11456b;
	position: absolute;
	top: 145px;
	left: 10px;
}

/*第四栏编辑*/
.left_bottom{
	width: 458px;
	height: 500px;
	/* background-color: #ddd; */
	margin: 25px 20px 20px 44px;
}
.words_firsr{
	float: left;
	font: 70px 'Microsoft Yahei';
	color: #f5e327;
}
#words_words{
	font: 12px/21px 'Microsoft Yahei';
	color: #767777;
	padding-top: 10px;
}
.pic02{
	width: 150px;
	height: 300px;
	float: right;
	clear: right;
	margin: 15px 0 15px 15px; 	
}
.empty{
	width: 1px;
	height: 120px;
	float: right;
}

/*第五栏编辑*/
.right_bottom{
	margin-right: 44px;
	float: right;
}
.pic_03{
	position: relative;
	top: -732px;
	left: 0;
	width: 400px;
	height: 275px;
	float: right;
}
.comment_bottom{
	float: right
	width: 400px;
	height: 400px;
	background-color: #DDD;
	position: relative;
	top: -430px;
	left: 0;
}

ul{
	height: 134px;
	float: left;
	position: relative;
	top: -275px;
	left: 0;
}
ul li{
	margin: 40px 0 0 50px;
	font: 16px/20px 'Microsoft Yahei';
	color: #5b5b5b;
}
.biao{
	position: relative;
	top: -170px;
	left: 0;
	float: left;
	width: 260px;
	height: 160px;
	background-color: #ff8888;
}
.biao h1{
	position: relative;
	top: 0;
	left: 0;
	float: left;
	width: 65px;
	height: 80px;
	font: 110px 'Microsoft Yahei';
	color: #fff;
	border-right: 2px solid #fff;  
}
.biao span{
	font: 21px 'Microsoft Yahei';
	color: #fff;
	position: relative;
	top: 0px;
	left: 0px;
}
.biao {}

reset.css

/* 将标签默认的间距设为0 */
body,ul,p,h1,h2,h3,h4,h5,h6,dl,dd,input,select,form{
	margin: 0;padding: 0;
}

/* 让h标签继承body内设置的字体大小 */
h1,h2,h3,h4,h5,h6{
	font-size: 100%;
}

/* 去掉默认的项目图标 */
ul{
	list-style: none;
}

em{
	font-style: normal;
}

/* 去掉a标签的下划线*/
a{
	text-decoration: none;
}

/* 去掉IE下图片做链接时产生的边框 */
img{
	border: none;
}

/* 清除margin塌陷和清除浮动 */
.clearfix:before,.clearfix:after{
	content: "";
	display: table;
}

.clearfix:after{
	clear: both;
}

.clearfix{
	zoom: 1;
}

.fl{
	float: left;
}

.fr{
	float: right;
}

main.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>06-模拟报纸排版</title>
	<link rel="stylesheet" href="06-main.css">
	<link rel="stylesheet" href="06-reset.css">
</head>
<body>
	<div class="page">
		<nav>
			<div class="red-block">
				<span>头号玩家.com</span>
			</div>
			<div class="date">2018.4.13</div>
		</nav>

		<article>

			<div class="pic01">
				<img src="001.jpg" width="641px" height="301px" alt="">
				<div class="shadow-left"></div>
				<div class="shadow-right"></div>
			</div>
			<div class="words">
				<h2 id="title01"><span>A</span>BOUT</h2>
				<h2 id="title02"><span>T</span>ECHNLOGO</h2>
				<p>About hungry player about player about player.</p>
				<div class="num">700</div>
				<div class="last-num">
					<div id="num2">3.2</div>
					<div id="num3">css</div>
					<p id="num4">csscssscsscscscsc</p>
				</div>
			</div>

			<div class="content">
				<div class="what">
					<div id="title03">What</div>
					<p>
						前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习
					</p>
				</div>
				<div class="when">
					<div id="title04">When</div>
					<p>
						前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习
					</p>
				</div>
				<div class="how">
					<div id="title05">How</div>
					<p>
						前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习
					</p>
				</div>
			</div>
			
			<div class="words_p">
				<span id="words_the">THE</span>
				<p> 
					<span id="words_p_th">TECHNOLOGE</span>
					<span id="words_p_of">OF FRONT</span>
					<span id="words_p_sm">前端技术领域</span>
				</p>
			</div>

			<div class="left_bottom">
				<p>
					<div class="words_firsr">前</div>
					<span>
						<div class="empty"></div>
						<div class="pic02">
							<img src="001.jpg" width="150px" height="300px" alt="">
						</div>
						<p id="words_words">
							前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习
							前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习.
						</p>
					</span>
				</p>
			</div>

			<div class="right_bottom">
				<div class="pic_03">
					<img src="001.jpg" width="400px" height="275px" alt="">
				</div>
				<div class="comment_bottom">
					<div class="list">
						<ul>
							<li>前端前端前端前端前端前端.......................<span>前端</span></li>
							<li>前端前端前端前端前前端前端.....................<span>前端</span></li>
							<li>前端前前端前端前端前端前端前端前端....<span>前端</span></li>
						</ul>
					</div>
					<div class="biao">
						<h1>0</h1>
						<p>
							<span>
								ONE TWO<br /> 
								THREE FORE FIVE
							</span>		
						</p>
					</div>
				</div>
			</div>
		</article>
	</div>
</body>
</html>