5-2作业
来源：5-2 作业题
soso_crazy
2019-02-12 13:05:08
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>5-2</title>
<link rel="stylesheet" type="text/css" href="5-2作业.css">
</head>
<body>
<!--顶部-->
<header>
<div class="container">
<a href=""><img src="./img/logo.jpg"></a>
<nav>
<a href="">HOME</a>
<a href="">PORTFOLIFE</a>
<a href="">TEAM</a>
<a href="">CONTACT US</a>
</nav>
</div>
</header>
<!--banner区-->
<section class="banner">
<dl>
<dt>Welcome to Website</dt>
<dd>Lorem ipsum dolor sit amet,weoirwietfhow sodifuoweifuoweuiftoweufoweof</dd>
</dl>
</section>
<!--portfolio区-->
<section class="portfolio">
<div class="word">
<dl>
<dt>portfolio</dt>
<dd>Lorem ipsum dolor sit amet,consectuer adipisking elit,eiuspium sieopt lsidfiowe at woeiht weoiroweiowifjowietfhow sodifuoweifuoweuiftoweufoweof</dd>
</dl>
<div class="English">
<span>ALL</span>
<span>WEB</span>
<span>SOFTWARE</span>
<span>WORKS</span>
<span>BRANDS</span>
</div>
</div>
<div class="pic"></div>
</section>
<!--star区-->
<section class="star">
<h1>Starts</h1>
<p>Lorem ipsum dolor sit amet,consectuer adipisking elit,eiuspium sieopt lsidfiowe at woeiht weoiroweiowifjowietfhow sodifuoweifuoweuiftoweufoweof</p>
<div class="starPic first">
<p class="img"><img src="img/stats1.jpg"></p>
<p class="Word">margins</p>
<p class="nums">12,000</p>
</div>
<div class="starPic">
<p class="img"><img src="img/stats2.jpg"></p>
<p class="Word">completes</p>
<p class="nums">5,681</p>
</div>
<div class="starPic">
<p class="img"><img src="img/stats3.jpg"></p>
<p class="Word">projects</p>
<p class="nums">432</p>
</div>
<div class="starPic">
<p class="img"><img src="img/stats4.jpg"></p>
<p class="Word">customs</p>
<p class="nums">86</p>
</div>
</section>
<!--team区-->
<section class="team">
<h1>Team</h1>
<p>Lorem ipsum dolor sit amet,consectuer adipisking elit,eiuspium sieopt lsidfiowe at woeiht weoiroweiowifjowietfhow sodifuoweifuoweuiftoweufoweof</p>
<dl class="One">
<dt class="teamPicOne"></dt>
<dd>Abigail</dd>
<dd>Lorem ipsum dolor sit amet, consectetuer usce posuere, magna sed pulvinar ultricies,</dd>
</dl>
<dl>
<dt class="teamPictwo"></dt>
<dd>Andy</dd>
<dd>Lorem ipsum dolor sit amet, consectetuerce posuere, magna sed pulvinar ultricies,</dd>
</dl>
<dl>
<dt class="teamPicthree"></dt>
<dd>Jacqueline</dd>
<dd>Lorem ipsum dolor sit amet, consectetuer Fusce posuere, magna sed pulvinar ultricies,</dd>
</dl>
</section>
<!--contact区-->
<section class="contact">
<h1>Contact Us</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies</p>
<form>
<input type="text" placeholder="Full Name" name="myName" class="text">
<input type="email" placeholder="email" name="email" class="text">
<input type="text" placeholder="message" name="message" class="message">
<br>
<input type="submit" value="Submit Message">
</form>
</section>
<!--页脚区-->
<footer>
<p>CopyRight©right; 2016.Company name</p>
</footer>
</body>
*{
margin: 0;
padding: 0;
}
a{text-decoration: none}
/*顶部区*/
header{width: 100%;
height: 93px;
background-color: #2e2e2e;}
header>.container>nav{
float: right;
padding-right: 150px;
}
header>.container>a>img{
padding-left: 170px;
padding-top: 27px;
}
header>.container>nav>a{
color: white;
line-height: 93px;
padding-right: 54px;
font-family: Microsoft YaHei UI;
}
/*banner区*/
.banner{
background: url("img/banner.jpg") no-repeat;
background-size: 100% auto;
width: 100%;
height: 675px;
position: relative;
}
.banner>dl{
position: absolute;
top: 269px;
left: 499px;
}
.banner>dl>dt{
text-align: center;
color: #ffffff;
font-family: Microsoft YaHei UI;
font-size: 48px;
letter-spacing: 10px;
}
.banner>dl>dd{
text-align: center;
font-family: Microsoft YaHei UI;
font-size: 14px;
color: white;
}
/*portfolio区*/
.portfolio{
width: 100%;
height: 975px;
}
.portfolio .word{
width: 100%;
height: 414px;
background-color: white;
}
/*鼠标移动 portfolio有变化*/
.portfolio .word:hover{
background-color: #f46208;
}
.portfolio .word dl dt:hover{
color: white;
}
.portfolio .word dl{
padding-top: 116px;
}
.portfolio .word dl dt{
color: #f46208;
font:48px Microsoft YaHei UI;
text-align: center;
}
.portfolio .word dl dd,
.star>p,
.contact p{
padding-top: 53px;
padding-left: 363px;
width: 781px;
color: #2e2e2e;
font-size: 14px;
line-height: 2em;
font-family: Microsoft YaHei UI;
text-align: center;
}
.portfolio .pic{
background: url("img/portfolio-nav-img.jpg");
background-size: 100% 561px;
width: 100%;
height: 561px;
}
.portfolio .English{
padding-top: 53px;
padding-left: 500px;
}
.portfolio .English span{
display: inline-block;
text-align: center;
color: #f46208;
height: 45px;
width: 70px;
border: 1px solid #f46208;
padding-right: 17px;
margin-left: 15px;
font-size: 15px;
font-family: Microsoft YaHei UI;
line-height: 45px;
}
/*star区*/
.star{
width: 100%;
height: 582px;
background-color: white;
}
.star h1,.team h1,.contact h1{
color: #f46208;
font-size: 48px;
text-align: center;
padding-top: 118px;
font-family: Microsoft YaHei UI;
letter-spacing: 14px;
font-weight: normal;
}
.first{
padding-left: 200px;
}
.star>.starPic{
float: left;
margin: 64px 0 0 135px;
line-height: 30px;
width: 141px;
}
.star>.starPic>p.img{
padding-left: 50px;
}
.star>.starPic>p.Word{
text-align: center;
font: 14px Microsoft YaHei UI;
}
.star>.starPic>p.nums{
color: #f46208;
font:25px Microsoft YaHei UI;
letter-spacing: 5px;
text-align: center;
}
/*team区*/
.team{
width: 100%;
height: 664px;
background-color: #2e2e2e;
}
.team p{
padding-top: 53px;
padding-left: 363px;
width: 781px;
color: #ffffff;
font-size: 14px;
line-height: 2em;
font-family: Microsoft YaHei UI;
text-align: center;
}
.team .teamPicOne{
width: 204px;
height: 205px;
background-image: url("img/team1.jpg");
}
.team .teamPictwo{
width: 204px;
height: 205px;
background-image: url("img/team2.jpg");
}
.team .teamPicthree{
width: 204px;
height: 205px;
background-image: url("img/team3.jpg");
}
.team dl{
float: left;
width: 240px;
margin: 73px 98px 0 0;
color: white;
text-align: center;
line-height: 15px;
}
.One{
padding-left: 306px;
}
.team dl dd:nth-child(3){
color: #ffffff;
font-size: 12px;
}
/*contact区*/
.contact{
width: 100%;
height: 844px;
background-color: white;
}
.contact form{
width: 960px;
height: 427px;
margin: 0 auto;
}
.contact .text{
width: 462px;
height: 54px;
margin: 30px 11px 19px 0;
}
.contact .message{
width: 943px;
height: 276px;
margin-bottom: 28px;
}
input[type="submit"]{
width: 200px;
height: 59px;
background-color: #f46208;
color: white;
border: none;
margin-left: 367px;
}
input[type="submit"]:hover{
cursor:pointer;
}
/*页脚区*/
footer{
width: 100%;
height: 110px;
background-color: #2e2e2e;
color: #ffffff;
line-height: 110px;
font-size: 14px;
text-align: center;
}当鼠标移动到portfolio区改变背景和字体颜色用hover如何实现？为什么不能鼠标移动到portfolio就改变，而需要鼠标移动到各个模块才改变，如何修改？
2.
如何使图片和文字实现居中？
写回答
1回答
-
好帮手慕星星
2019-02-12
你好，
1、同学是想要移动到portfolio区改变整个区域背景颜色和字体颜色吗，这样看起来不美观，作业中要求的是移入每个导航块才会改变背景颜色和字体颜色，按照作业要求完成就可以，给5个导航块添加:hover伪类，参考：
2、
（1）stats区域图片居中：
效果：
（2）portfolio区域导航块文字居中显示：
效果：
（3）Team区域图片大小的问题：
效果：
自己可以完善测试下，祝学习愉快！
0
相似问题