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

最新推荐文章于 2023-05-29 22:50:01 发布

HungryPlayer

最新推荐文章于 2023-05-29 22:50:01 发布

阅读量261

点赞数

分类专栏：前端任务文章标签：百度前度学院布局绝对定位 z-index

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

版权

前端任务专栏收录该内容

6 篇文章 0 订阅

订阅专栏

习题任务-05

收获:

1:加深了对rem布局的认识(width设置用的百分比)

2.z-index的作用

3.加深对绝对定位的认识(位置依据浏览器左上角进行定位)

4.代码如下

05-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;
}

05-main.css

body{
	margin: 0 30px;
	background-color: #eee;
	position: relative;
}
.part1,.part2,.part3,.part4{
	width: 65%;
	} 

/*nav标签设置:顶部标题栏设置*/
nav{
	position: fixed;
	width: 100%;
	height: 64px;
	background-color: #444;
	z-index: 1;
}
nav h1{
	font: 30px/64px 'Microsoft Yahei';
	color: #fff;
	margin-left: 15px;
	line-height: 64px;
	font-style: italic;
}
nav ul{
	position: absolute;
	top: 0;
	right: 20px;
	width: 400px;
}
nav ul li a{
	float: left;
	color: #fff;
	font: 15px/64px 'Microsoft Yahei';
	margin-right: 15px;
	font-style: italic;
}

/*第一部分设置*/
article,aside{
	margin: 84px 20px 20px;
	width: 93%;
	padding: 26px; 
	background-color: #fff;
}
article h2{
	font:bold 23px/40px 'Microsoft Yahei';
	margin: 15px 0 10px 0; 
}
article h3{
	font:bold 19px/40px 'Microsoft Yahei';
	color: #666;
	margin: 10px 0;
}
article h5{
	font:bold 14px/30px 'Microsoft Yahei';
	color: #666;
	margin: 10px 0;
}
article p{
	text-indent: 32px;
}

/*第二部分设置*/
.part2,.part3,.part4,.part5{
	margin-top: 20px
}

/*第三部分设置*/
.part3 figure{
	border: 1px solid #000;
	width: 550px;
	height: 250px;
	margin-bottom: 20px;
	text-align: center;
}

/*第四部分设置*/
.part4 p{
	text-indent: 0px;
	font:bold 14px/30px 'Microsoft Yahei';
}
.part4 table{
	width: 100%;
	border-collapse: collapse;
	border: 1px solid #ccc;
}
#excel{
	background-color: #333;
}
#excel td{
	color: #fff;
}
#sum{
	background-color: #ccc;
	width: 100%
}

/*第五部分设置*/
.part5{
	position: absolute;
	left: 70%;
	top: 64px;
	width: 23%;
	padding: 20px;
}
.part5 h2{
	border-left: 3px solid #ccc;
	font:bold 18px/40px 'Microsoft Yahei';
	margin: 15px 0 10px 0px;
	padding-left: 20px; 
}

aside .email,.play{
	float: left;
	margin-left: 0px;
	font:bold 15px/30px 'Microsoft Yahei';	
}
aside span{
	float: left;
	margin-bottom: 10px;
	text-align: right;
	width: 125px;
}
.email p{
	font:bold 14px/30px 'Microsoft Yahei';	
	color: #999;
	margin-bottom: 16px;
	margin-left: 113px;
}
 aside div{
    margin: 10px;
    width: 100%;
}
.submit{
	float: left;
	width: 95%;
	height: 40px;
	color: #fff;
	background-color: #0936b0;
	border: none;
    border-radius: 10px;
	font:16px/40px 'Microsoft Yahei';
	margin:10px auto;
}

/*页脚样式*/
.footer{
	width: 100%;
	height: 60px;
	background-color: #444;
}
.footer p{
	text-align: center;
	line-height: 60px;
	color: #fff;
}

05-main.html

<!DOCTYPE html>
	<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>任务五:零基础HTML编码及css编码(二)</title>
		<link rel="stylesheet" href="05-main.css">
		<link rel="stylesheet" href="05-reset.css">
	</head>
	<body>
		<nav>
			<h1>头号玩家</h1>
			<ul>
				<li><a href="#">导航链接一</a></li>
				<li><a href="#">导航链接二</a></li>
				<li><a href="#">导航链接三</a></li>
				<li><a href="#">导航链接四</a></li>
			</ul>
		</nav>
			
		<article class="part1 fl">
			<h2>头号玩家简介</h2>
			<h3>头号玩家导演</h3>
			<h5>HungryPlayer  2018/4/10</h5>
			<p>
				这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,换行了
				<br>这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,换行了<br>这是一个很长很长的段落,这是一个很长很长的段落,
				<a href="http://www.baidu.com">这里有一个链接连接到http://www.baidu.com</a>这是一个很长很长的段落,这是一个很长很长的段落,<strong>这里有个粗体字</strong>这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落.
			</p>
			<img src="001.jpg" width="500px" height="200px" alt="">
			<p>
				这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,换行了<br>这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,<strong>这里有个粗体字</strong>这是一个很长很长的段落,这是一个很长很长的段落,
				<a href="http://www.baidu.com">这里有一个新的链接点一下试试</a>这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落.
			</p>
		</article>

		<article class="part2 fl">
			<h2>头号玩家演员</h2>
			<h3>男主演</h3>
			<h5>HungryPlayer  2018/4/10</h5>
			<p>这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,<br>换行了
			<br>这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,换行了<br>这是一个很长很长的段落,这是一个很长很长的段落,
			<a href="http://www.baidu.com">这里有一个链接连接到http://www.baidu.com</a>这是一个很长很长的段落,这是一个很长很长的段落,<strong>这里有个粗体字</strong>这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落.</p>
			<img src="001.jpg" width="500px" height="200px" alt="">
			<ul>
				<li>列表项目一</li>
				<li>列表项目二</li>
				<li>列表项目三</li>
			</ul>
		</article>

		<article class="part3 fl">	
			<h2>头号玩家插图</h2>
			<figure>
				<figcaption>头号玩家</figcaption>
				<img src="001.jpg" width="500px" height="200px" alt="">
			</figure>	
			<figure>	
				<figcaption>头号玩家</figcaption>
				<img src="001.jpg" width="500px" height="200px" alt="">
			</figure>
			<figure>		
				<figcaption>头号玩家</figcaption>
				<img src="001.jpg" width="500px" height="200px" alt="">
			</figure>	
			<figure>		
				<figcaption>头号玩家</figcaption>
				<img src="001.jpg" width="500px" height="200px" alt="">
			</figure>
			<figure>		
				<figcaption>头号玩家</figcaption>
				<img src="001.jpg" width="500px" height="200px" alt="">
			</figure>
		</article>

		<article class="part4 fl">
			<h2>头号玩家观影统计</h2>
			<h3>豆瓣评分</h3>
			<h5>HungryPlayer  2018/4/10</h5>
			<ol>
				<li>排名1</li>
				<li>排名2</li>
				<li>排名3</li>
			</ol>
			<p>下面是一个表格,统计观影感受的表格</p>
			<table border="1px">
				<tr id="excel">
					<td>表头</td>
					<td>表头</td>
					<td>表头</td>
				</tr>
				<tr>
					<td>表内容单元格</td>
					<td>表内容单元格</td>
					<td><a href="#">操作</a></td>
				</tr>
				<tr>
					<td>表内容单元格</td>
					<td>表内容单元格</td>
					<td><a href="#">操作</a></td>
				</tr>
				<tr>
					<td>表内容单元格</td>
					<td>表内容单元格</td>
					<td><a href="#">操作</a></td>
				</tr>
				<tr>
					<td>表内容单元格</td>
					<td>表内容单元格</td>
					<td><a href="#">操作</a></td>
				</tr>
				<tr id="sum">
					<td>总计</td>
					<td colspan="2">1000</td>
				</tr>
			</table>
			</article>

			
			<aside class="part5 fl">
				<h2>我是侧栏标题</h2>
				<div class="email">
					<div>
						<label for="emile"><span>请输入邮箱地址  </span></label>
						<input type="text" name="email" placeholder="请输入邮箱地址">
						<p>
							请按格式输入邮箱地址
						</p>
					</div>
					<div>
						<label for="pwd"><span>请您输入密码  </span>
						<input type="password" name="密码" placeholder="请输入密码"><br></label>
					</div>

					<div>
						<label for="Repwd"><span>请再次输入密码  </span>				
						<input type="password" name="密码" placeholder="请再输入密码"></label>
					<p>
						密码为6-16位英文或数字
					</p>
					</div>
				</div>

				<div class="play">
					<div>
						<span>性别  </span>
						<input type="radio" value="男" name="sex" id="male" checked="true">
						<label for="male">男  </label>
						<input type="radio" value="女" name="sex" id="female">
						<label for="famale">女</label>
					</div>
					<div>	
						<label for="city"><span>城市  </span></label>
						<select  id="city" name="city">
						<option>北京</option>
						<option>上海</option>
						</select>
					</div>
					<div>	
						<span>爱好  </span>
						<input type="checkbox" value="运动" id="sport">
						<label for="sport">运动 </label>
						<input type="checkbox" value="艺术">
						<label for="sport">艺术 </label>
						<input type="checkbox" value="科学">
						<label for="sport">科学 </label>
					</div>
					<div>
						<span>个人描述  </span>
						<textarea name="desc" id="desc" cols="20" rows="8" placeholder="请输入自我描述"></textarea>
					</div>
					<div>
						<input class="submit" type="button" value="确认提交">
					</div>
				</div>
			</aside>

			<div class="footer fl">
				<p>@版权所有</p>
			</div>
		</body>
		</html>

HungryPlayer

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2017百度前端技术学院习题-05

习题任务-05收获: 1:加深了对rem布局的认识(width设置用的百分比) 2.z-index的作用 3.加深对绝对定位的认识(位置依据浏览器左上角进行定位) 4.代码如下 05-reset.css/* 将标签默认的间距设为0 *...
复制链接

扫一扫