为什么控制不了portfolio图片的宽度上面的banner图就没问题啊
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css.css">
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<!-- 顶部 -->
<header>
<!-- logo -->
<a href="html.html"><img src="img/logo.jpg"></a>
<!-- 导航栏 -->
<nav>
<div><a href="#">HOME</a></div>
<div><a href="#">PORTFOLIO</a></div>
<div><a href="#">TEAM</a></div>
<div><a href="#">CONTACT US</a></div>
</nav>
</header>
<!-- banner -->
<section class="banner">
<img src="img/banner.jpg">
</section>
<!-- portfolio -->
<section class="portfolio">
<h1>Portfolio</h1>
<p>Lorem ipsum dolor sit amet，consectuer adipisking elit，eiuspium sieopt lsidfiowe at woeiht weoiroweiowifjowietfhow sodifuoweifuoweuiftoweufoweof </p>
<div>
<div>ALL</div>
<div>WEB</div>
<div>SOFTWARE</div>
<div>WORKS</div>
<div>BRANDS</div>
</div>
<img src="img/portfolio-nav-img.jpg">
</section>
<!-- stats -->
<section class="stats">
<h1>stats</h1>
<p>Lorem ipsum dolor sit amet，consectuer adipisking elit，eiuspium sieopt lsidfiowe at woeiht weoiroweiowifjowietfhow sodifuoweifuoweuiftoweufoweof </p>
<div>
<div><img src="img/stats1.jpg"><span>Margins</span><p>12,000</p></div>
<div><img src="img/stats2.jpg"><span>Completed</span><p>5,681</p></div>
<div><img src="img/stats3.jpg"><span>Projects</span><p>432</p></div>
<div><img src="img/stats4.jpg"><span>Customers</span><p>86</p></div>
</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>
<div>
<div><img src="img/team1.jpg"><span>Abigail</span><p>Lorem ipsum dolor sit amet，consectuer Abigail</p></div>
<div><img src="img/team2.jpg"><span>Andy</span><p>Lorem ipsum dolor sit amet，consectuer Andy</p></div>
<div><img src="img/team3.jpg"><span>Jacqueline</span><p>Lorem ipsum dolor sit amet，consectuer Abigail</p></div>
</div>
</section>
<!-- contact us -->
<section class="contactus">
<h1>contactus</h1>
<p>Lorem ipsum dolor sit amet，consectuer adipisking elit，eiuspium sieopt lsidfiowe at woeiht weoiroweiowifjowietfhow sodifuoweifuoweuiftoweufoweof </p>
</section>
<!-- 页脚区 -->
<footer></footer>
<script src="" async defer></script>
</body>
</html>
正在回答
同学你好， 因为width单词拼写错误，造成设置的样式无效， 建议参考下图修改：
如果帮助到了你， 欢迎采纳！
祝学习愉快~~~
* {
margin: 0;
padding: 0;
border: none;
font-family: "Microsoft YaHei UI";
}
h1 {
text-align: center;
padding: 120px 0 55px 0;
color: #f46208;
font-size: 48px;
}
p {
text-align: center;
padding-bottom: 67px;
font-size: 14px;
}
/* 顶部 */
header {
height: 94px;
background: #2e2e2e;
}
header a {
text-decoration: none;
color: #fff;
}
/* logo */
header img {
float: left;
margin: 31.5px 0;
padding-left: 170px;
}
/* 导航栏 */
nav {
float: right;
}
nav div {
float: left;
line-height: 94px;
padding-left: 50px;
}
nav div:last-of-type {
padding-right: 150px;
}
/* banner图 */
.banner img {
height: 674px;
width: 100%;
}
/* portfolio */
.portfolio {
width: 100%;
margin: 0 auto;
}
.portfolio > div {
text-align: center;
}
.portfolio > div div {
display: inline-block;
border: 1px solid #f46208;
margin: 0 7.5px;
width: 107px;
height: 44px;
line-height: 44px;
color: #f46208;
}
.portfolio img {
height: 560px;
widows: 100%;
padding-top: 53px;
}
/* stats */
.stats {
width: 100%;
margin: 0 auto;
margin-bottom: 112px;
}
.stats > div {
text-align: center;
}
.stats > div div {
display: inline-block;
margin: 0 72.5px;
width: 48px;
height: 52px;
line-height: 26px;
}
.stats > div div p {
color: #f46208;
font-size: 20px;
}
/* team */
.team {
width: 100%;
margin: 0 auto;
background: #2e2e2e;
color: #fff;
padding-bottom: 100px;
}
.team > div {
text-align: center;
}
.team > div div {
display: inline-block;
margin: 0 49px;
width: 200px;
height: 200px;
}
/* contact us */
/* 页脚 */这是上面的css，忘发了
- 参与学习 人
- 提交作业 2198 份
- 解答问题 5012 个
如果你有web端基础，既想进阶，又想进军移动端开发，那就来吧，我们专题为你带来的课程有HTML5、CSS3、移动基础、响应式、bootstrap、less等，让你在前端道路上畅通无阻！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星