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

原创 2018年04月14日 22:05:46

                                                习题任务-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>

MFC浅析(7) CWnd类虚函数的调用时机、缺省实现

CWnd类虚函数的调用时机、缺省实现
  • FMD
  • FMD
  • 2001-06-16 13:12:00
  • 3087

CSDN刷博 - 最简单有效的方法

首先声明刷博是不对的。ok,明确这一点后我们来探讨技术。 csdn是防爬虫功能的,如果直接简单的刷新并不会增加访客数量,如果简单的抓取是得不到也是打不开网页的。 经过测试发现-访客数量与ip...
  • ctsas
  • ctsas
  • 2017-01-22 13:41:02
  • 8359

一位学姐的保研历程分享

一直以来我都想将自己保研出现的问题和解决方案总结出来,弥补不足,学习优点。独享不如分享,分享会产生快乐~这些资料可能会帮助到一些人,可能一个也没有帮助到,但是万一有人受益呢?只要有一个,就是意外之喜(...
  • qq_30878661
  • qq_30878661
  • 2017-01-10 16:44:48
  • 9390

写给立志做码农的大学生

先简单介绍一下我自己,我是一所普通大学的本科生,大学录取时的专业是非计算机系的,在大一下学期意识到自己喜欢敲代码以后,就提交了转专业申请。大二起开始在计算机系学习。大三时(2015年4月)拿到了腾讯暑...
  • guodongxiaren
  • guodongxiaren
  • 2016-05-07 14:41:29
  • 8301

来自北邮人的大牛校招准备经验分享:17届大牛学长分享:如何集齐BAT三家offer

17届大牛学长分享:如何集齐BAT三家offer 我是西安交大计算机科学与技术学院2017届的硕士研究生刘阳。在16年的校招大潮中,幸运地集齐了腾讯、百度、阿里的offer,最终选择了阿里...
  • d12345678a
  • d12345678a
  • 2017-01-14 14:45:03
  • 2440

来自北邮人的大牛校招准备经验分享:17届大牛学长分享:如何集齐BAT三家offer

17届大牛学长分享:如何集齐BAT三家offer 我是西安交大计算机科学与技术学院2017届的硕士研究生刘阳。在16年的校招大潮中,幸运地集齐了腾讯、百度、阿里的offer,最终选择了阿里...
  • d12345678a
  • d12345678a
  • 2017-01-14 14:45:03
  • 2440

常见题集锦

java Java基础 switch能否用string做参数 object有哪些公用方法:equals和==,hashcode,clone,wait,notify等 String、String...
  • zq842589582
  • zq842589582
  • 2016-10-21 00:12:11
  • 1353

第1-2周前端学习心得

第一阶段前端学习心得 经过两周的龟速摸索。。。终于对前端的学习历程有了大致的了解 记录一下这两周的学习情况: 了解前端要学习哪些内容,明白学习顺序,对于完全小白的我来说,现在最重要的就是打好基础啦,...
  • zyllll_cc
  • zyllll_cc
  • 2017-05-28 11:55:35
  • 187

关于前端面试的总结

关于前端面试,关于http+TCP+性能的优化TCP要说http就绕不开tcp,TCP协议对应于传输层,而HTTP协议对应于应用层,从本质上来说,二者没有可比性。但是,http是基于tcp协议的。TC...
  • weixin_41646716
  • weixin_41646716
  • 2018-04-18 13:27:36
  • 33

2016腾讯面试经验

【实习面试】阿里&腾讯offer的点点滴滴(内附干货)2016前言: - 4月8号下午6点,突然接到腾讯hr的电话,本来已经不抱希望的我一脸懵逼,差点连自我介绍都不会说了。之所以不抱希...
  • TuZiFaDai
  • TuZiFaDai
  • 2017-05-24 16:36:30
  • 637
收藏助手
不良信息举报
您举报文章:2017百度前端技术学院习题-05
举报原因:
原因补充:

(最多只允许输入30个字)