为何设置portfolio部分的a的padding无效呢？

为何设置portfolio部分的a的padding无效呢？

http://img1.sycdn.imooc.com/climg//589600360001649d07180516.jpg

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>index</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<!-- header -->
<header>
<div>
<a href="index.html"><img src="img/logo.jpg"></a>
<nav>
<a href="index.html">HOME</a>
<a href="#">PORTFOLIO</a>
<a href="#">TEAM</a>
<a href="#">CONTANT US</a>
</nav>
</div>
</header>

<!-- banner -->
<section>
<img src="img/banner.jpg">
<div>
<h1>Welcome to Website</h1>
<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit</p>
</div>
</section>

<!-- portfolio -->
<section>
<div>
<h1>Portfolio</h1>
<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit</p>
<nav>
<a href="#">ALL</a>
<a href="#">WEB</a>
<a href="#">SOFTWARE</a>
<a href="#">WORKS</a>
<a href="#">BRANDS</a>
</nav>
<img src="img/portfolio-nav-img.jpg">
</div>
</section>

<!-- status -->
<section>
<h1>Status</h1>
<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit</p>
<div>
<dl>
<dt><img src="img/stats1.jpg"></dt>
<dd>Margins</dd>
<dd>12,000</dd>
</dl>
<dl>
<dt><img src="img/stats2.jpg"></dt>
<dd>Completed</dd>
<dd>5,222</dd>
</dl>
<dl>
<dt><img src="img/stats3.jpg"></dt>
<dd>Projects</dd>
<dd>233</dd>
</dl>
<dl>
<dt><img src="img/stats4.jpg"></dt>
<dd>Customers</dd>
<dd>666</dd>
</dl>
</div>
</section>

<!-- team -->
<section>
<div>
<h1>Team</h1>
<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit</p>
</div>
<div>
<dl>
<dt><img src="img/team1.jpg"></dt>
<dd>Daming</dd>
<dd>Nice boat</dd>
</dl>
<dl>
<dt><img src="img/team2.jpg"></dt>
<dd>Amy</dd>
<dd>A good teacher</dd>
</dl>
<dl>
<dt><img src="img/team3.jpg"></dt>
<dd>Jack</dd>
<dd>Holy milk</dd>
</dl>
</div>
</section>

<!-- contact_us -->
<section>
<div>
<h1>Contact Us</h1>
<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit</p>
</div>
<div>
<input type="text" name="full_name" placeholder="Full Name">
<input type="email" name="email" placeholder="Email"><br>
<textarea name="Message"cols="30" rows="10" placeholder="Message"></textarea><br>
<input type="submit" value="Submit Message">
</div>
</section>

<!-- footer -->
<footer>
<div>
<p>Copyright © 2016 imooc.com All Rights Reserved.</p>
</div>
</footer>
</body>
</html>
HotDeath 2017-02-05
源自：HTML5展望   3-2 作业题
62
收起

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论，去登陆吧

1回答
提问者 HotDeath 2017-02-05 02:17:08 
/*All tags*/
*{
	font-family: Microsoft YaHei UI;
	font-size: 14px;
	margin: 0;
	padding: 0;
	border: none;
}
a{
	text-decoration: none;
}

/*input{
	border:1px soild #2e2e2e;
}*/
/*header*/
header{
	position:relative;
	height: 80px;
	background: #2e2e2e;
}
header > .container {
	position: relative;
	width: 1200px;
	margin: 0 auto;
	overflow: hidden;
}
header > .container > a {
	display: block;
	float: left;
	margin: 5px 25px;
	line-height: 80px;
}
header > .container > nav {
	float: right;
}

/*header > nav*/
header > .container > nav > a {
	line-height: 80px;
	display: block;
	float: left;
	width: 110px;
	height: 80px;
	text-align: center;
	color: #fff;
}

header > .container > nav > a:hover{
	background-color: red;
	color: black;
	font-weight: bold;
}

/*banner*/
.banner {
	position: relative;	
	height: 670px;
	overflow: hidden;
}

.banner > img {
	position: absolute;
	z-index: -1;
	width: 100%;
}

.banner > .container {
	position: absolute;
	color: #fff;
	width: 1200px;
	text-align: center;
	top: 278px;
	left: 50%;
	margin-left: -600px;
}

.banner > .container > h1 {	
	font-size: 48px;	
}

/*portfolio*/
.portfolio {
	position: relative;
	height: 826px;
	overflow: hidden;
}

.portfolio > .container {
	position: absolute;
	height: 496px;
	color: #f46208;
	width: 1200px;
	text-align: center;
	top: 96px;
	left: 50%;
	margin-left: -600px;
	overflow: hidden;
}

.portfolio > .container > h1 {
	font-size: 48px;
	margin-bottom: 15px;
}

.portfolio > .container > p {
	font-size: 14px;
	color: #2e2e2e;
	margin-bottom: 30px;
}

/*portfolio > nav*/
.portfolio > .container > nav > a {
	border: 1px solid #f46208;
	color: #f46208;
	font-size: 24px;
	margin-left: 5px;
	padding: auto 5px;
}

.portfolio > .container > nav > a:hover {
	background-color: #666666;
}

.portfolio > img {
	position: absolute;
	top: 320px;
	width: 100%;
}


/*Stats*/
.stats {
	position: relative;
	height: 496px;
}

/*stats>hgroup*/
.stats > hgroup {
	position: absolute;
	color: #f46208;
	width: 1200px;
	text-align: center;
	top: 96px;
	left: 50%;
	margin-left: -600px;
}

.stats > hgroup > h1 {
	font-size: 48px;
	margin-bottom: 15px;
}

.stats > hgroup > p {
	font-size: 14px;
	color: #2e2e2e;
	margin-bottom: 30px;
}

/*stats > s_pic*/
.stats > .s_pic {	
	position: absolute;
	top: 212px;
	height: 160px;
	left: 50%;
	margin-left: -600px;
}

.stats > .s_pic > dl {
	width: 300px;
	height: 200px;
	float: left;
	text-align: center;
}

.stats > .s_pic > dl > dt,
.stats > .s_pic > dl > dd {
	margin-bottom: 20px;
}

.stats > .s_pic > dl > dd:last-of-type {
	color: #f46208;
	font-size: 48px;
}

/*team*/
.team {
	position: relative;
	height: 592px;
	background-color: #2e2e2e;
	overflow: hidden;
}

.team > .container {
	position: absolute;
	height: 110px;
	color: #f46208;
	width: 1200px;
	text-align: center;
	top: 96px;
	left: 50%;
	margin-left: -600px;
	overflow: hidden;
}

.team > .container > h1 {
	font-size: 48px;
	margin-bottom: 15px;
}

.team > .container > p {
	font-size: 14px;
	color: #fff;
	margin-bottom: 30px;
}

.team > .teacher {	
	height: 320px;
	left: 50%;
	margin-left: -600px;
	position: absolute;
	top: 212px;
}

.team > .teacher > dl {
	width: 400px;
	height: 200px;
	color: #fff;
	float: left;
	text-align: center;
}

/*contact_us*/
.contact_us {
	position: relative;
	height: 592px;
	overflow: hidden;
}

.contact_us > .container {
	position: absolute;
	height: 110px;
	color: #f46208;
	width: 1200px;
	text-align: center;
	top: 96px;
	left: 50%;
	margin-left: -600px;
	overflow: hidden;
}

.contact_us > .container > h1 {
	font-size: 48px;
	margin-bottom: 15px;
}

.contact_us > .container > p {
	font-size: 14px;
	color: #2e2e2e;
	margin-bottom: 30px;
}

.contact_us > .your {
	position: absolute;
	width: 1200px;
	top: 212px;
	height: 240px;
	left: 50%;
	margin-left: -600px;
	text-align: center;
}

.contact_us > .your > .first,
.contact_us > .your > .second{
	margin-bottom: 5px;
}

.contact_us > .your > .second > input {
	width: 342px;
	height: 200px;
}
.contact_us > .your > input {
	color: #fff;
	background-color: #f46208;
	padding: 10px 5px;
}

/*footer*/
footer {
	position: relative;
	height: 64px;
	background-color: #000;
	overflow: hidden;
}

footer > .container {
	position: absolute;
	height: 20px;
	color: #fff;
	width: 1200px;
	text-align: center;
	top: 22px;
	left: 50%;
	margin-left: -600px;
	overflow: hidden;
}


0
收起回答
问题已解决，确定采纳
还有疑问，暂不采纳

恭喜解决一个难题，获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

我的页头部分为什么会消失?
11 0 4
portfolio区的导航边框问题
63 0 5
为什么设置padding-top之后td具体类里面的显示还是没效果。。。但是只是在td上设置有效果。
1 0 3
作业点评里建议右侧导航a标签不设置宽高，使用padding实现它们之间相同距离，这样做的好处是什么
18 0 2
3-2为什么cellpadding和cellmargin设置无效，用margin也无效？
2 0 3

登录后可查看更多问答，登录/注册

HTML5与CSS3实现动态网页 2018
  • 参与学习       1887    人
  • 提交作业       4643    份
  • 解答问题       5760    个

有HTML和CSS基础，却不知道如何进阶？本路径带你通过系统学习，完成从“会做网页”到“做出好的动态网页”的蜕变，迈出成为前端工程师的第一步。

了解课程

本课精华内容

问答 作业

请忽略此问答

26 33

公式书写。。

31 19

3-8编程练习哪有问题

47 17

全局变量与函数内的全局变量

119 15

编程练习4-4的问题

111 15

查看更多本课问答
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

 帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

 公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码，添加
你的专属老师