已经给图片设置了浮动，display:inline-bloke也没有效果。给图片设置宽高也没有效果

已经给图片设置了浮动，display:inline-bloke也没有效果。给图片设置宽高也没有效果

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS网页布局案例</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<!-- 头部 -->
<div class="header">
<div class="logo">
<img src="image/logo.png" alt="logo">
</div>
<div class="nav">
<ul>  
<li>首页</li>
<li>图片</li>
<li>视频</li>
<li>手记</li>
</ul>
</div>
</div>
<!-- 主体 -->
<div class="main">
<!-- 中间上半部分 -->
<div class="top">
<img src="image/1.jpeg" alt="">
</div>
<!-- 遮罩层 -->
<div class="topLayer"></div>
<div class="topLayer-top">
<div class="word">MY BEAUTIGUL LIFE</div>
<button>LOOK MORE &gt;</button>
</div>

<!-- 中间的中半部分 -->
<div class="middle">

<div class="m-top">
<div class="commen weibo">
<img src="image/weibo.png" alt="">
<div class="comm">MICROBLOG</div>
</div>
<div class="commen weixin">
<img src="image/weixin.png" alt="">
<div class="comm">WECHAT</div>
</div>
<div class="commen qq">
<img src="image/QQ.png" alt="">
<div class="comm">QQ</div>
</div>
<div class="clear"></div>
</div>


<div class="m-middle">
<p>"I want to give good things to record down,<br>after the recall will be very beautiful."
</p>
</div>

<div class="m-bottom"></div>
<div class="m-com">
<img src="image/03-01.jpg" alt="">
<p>Cool Image</p>
<p>Record The Picture</p>
</div>
<div class="m-com">
<img src="image/03-02.jpg" alt="">
<p>Greet Picture</p>
<p>Record The Picture</p>
</div>
<div class="m-com">
<img src="image/03-03.jpg" alt="">
<p>Delicious Food</p>
<p>Record The Picture</p>
</div>
</div>
<!-- 中间的下半部分 -->
<div class="bottom">

</div>
</div>
<!-- 底部 -->
<div class="footer"></div>
</body>
</html>
*{
	margin: 0;
	padding: 0;
}

.header{
	width: 100%;
	height: 100px;
}

.header .logo{
	float: left;
}

.header .nav{
	float: right;
}

.header img{
	width:300px;
	height: 85px;
	padding-left: 100px;
	padding-top: 8px;
}

.header .nav ul{
	padding-right: 100px;
	line-height: 100px;
}

.header .nav ul li{
	float: left;
	list-style: none;
	width: 80px;
	height: 100px;
	font-size: 15px;
	font-weight: bold;
	color: #7d7d7d;
}

.main .top{
	width: 100%;
	height: 600px;
}

.main .top img{
	width: 100%;
	height: 600px;
}

.main .topLayer{
	width: 100%;
	height: 600px;
	/*绝对定位，参照有定位系统的第一级父元素，因为topLayer的父元素main没有定位系统，所以参照body定位*/
	position: absolute;
	top: 100px;
	left: 0px;
	background-color: #000;
	/*透明度*/
	opacity: 0.5;
}

.main .topLayer-top{
	width: 500px;
	height: 300px;
	/*参照的是body定位*/
	position: absolute;
	/*top的高度是600px，想要居中显示，减去一半就是300px，还要再加上header的高度100px，就是400px*/
	top: 400px;
	/*再减去自身高度的一半*/
	margin-top: -150px;
	/*居中显示*/
	right: 50%;
	/*再减去自身宽度的一半*/
	margin-right: -250px;
	/*当产生层叠效果时，z-index的值越大，就会浮动到越上面*/
	z-index: 2;
}

.main .topLayer-top .word{
	/*上下级用padding，同级之间用margin*/
	padding-top: 100px;
	color: white;
	font-size: 45px;
	font-weight: bold;
	text-align: center;
	font-family: 微软雅黑;
} 

.main .topLayer-top button{
	width: 200px;
	height: 60px;
	margin-top: 50px;
	color: #fff;
	background-color: #f5704f;
	font-family: 微软雅黑;
	font-size: 14px;
	font-weight: bold;
	text-align: center;
	border-radius: 8px;
	/*top的宽度是500px；button的宽度是200px，想要居中，向右移动250px,再向左移动100px，即减去自身宽度的一半*/
	margin-left: 150px;
}

.main .middle{
	width: 1000px;
	margin: 0 auto;
}

.main .middle .m-top .commen{
	float: left;
	/*因为middle的宽度是1000px，除以3*/
	width: 33.3%;
	padding-top: 50px;
	text-align: center;
}

.main .middle .m-top .commen img{
	width: 100px;
	height: 100px;
}

.main .middle .m-top .commen .comm{
	font-size: 20px;
	color: #7d7c7f;
	font-weight: bold;
	margin-top: 20px;
}

.clear{
	clear: both;
}

.main .middle .m-middle p{
	font-size: 22px;
	color: #e19796;
	font-weight: bold;
	padding-top: 50px;
	padding-bottom: 50px;
	font-style: italic;
	text-align: center;
}

.main .middle .m-bottom .m-com{
	float: left;
	display: inline-block;
}
慕仔3285102 2020-07-26
源自：项目：网页布局案例   2-5 主体部分的中间
9
收起

正在回答

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

2回答
好帮手慕小尤 回答被采纳获得+3积分 2020-07-27 10:52:48

同学你好，middle提前闭合，导致样式未生效，代码如下所示：

http://img1.sycdn.imooc.com//climg/5f1e4154099067c109040454.jpg

建议为middle设置宽度。如下所示：

http://img1.sycdn.imooc.com//climg/5f1e4160097f4c7902390069.jpg

祝学习愉快！

0
收起回答
  • 慕仔3285102 提问者 #1
    您好，谢谢你的回复，我回去检查了一遍，确实是漏写了一个</div>，我也设置了宽度，但是没有任何变化。
    2020-07-27 16:33:03
  • 慕仔3285102 提问者 #2
    给m-bottom里面的元素设置css没有任何效果，希望您可以一巴掌拍醒我！哈哈哈哈哈哈
    2020-07-27 16:40:03
  • 慕仔3285102 提问者 #3
    我知道自己错哪啦，自己挖坑自己跳啦，谢谢老师
    2020-07-27 18:34:59
提问者 慕仔3285102 2020-07-27 16:36:38

http://img1.sycdn.imooc.com//climg/5f1e91ba088fa0d901670406.jpghttp://img1.sycdn.imooc.com//climg/5f1e91c2085e080a03910432.jpg

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS网页布局案例</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<!-- 头部 -->
<div class="header">
<div class="logo">
<img src="image/logo.png" alt="logo">
</div>
<div class="nav">
<ul>  
<li>首页</li>
<li>图片</li>
<li>视频</li>
<li>手记</li>
</ul>
</div>
</div>
<!-- 主体 -->
<div class="main">
<!-- 中间上半部分 -->
<div class="top">
<img src="image/1.jpeg" alt="">
</div>
<!-- 遮罩层 -->
<div class="topLayer"></div>
<div class="topLayer-top">
<div class="word">MY BEAUTIGUL LIFE</div>
<button>LOOK MORE &gt;</button>
</div>

<!-- 中间的中半部分 -->
<div class="middle">

<div class="m-top">
<div class="commen weibo">
<img src="image/weibo.png" alt="">
<div class="comm">MICROBLOG</div>
</div>
<div class="commen weixin">
<img src="image/weixin.png" alt="">
<div class="comm">WECHAT</div>
</div>
<div class="commen qq">
<img src="image/QQ.png" alt="">
<div class="comm">QQ</div>
</div>
<div class="clear"></div>
</div>


<div class="m-middle">
<p>"I want to give good things to record down,<br>after the recall will be very beautiful."
</p>
</div>

<div class="m-bottom"></div>
<div class="m-com">
<img src="image/03-01.jpg" alt="">
<p class="des1">Cool Image</p>
<p class="des2">Record The Picture</p>
</div>
<div class="m-com">
<img src="image/03-02.jpg" alt="">
<p class="des1">Greet Picture</p>
<p class="des2">Record The Picture</p>
</div>
<div class="m-com">
<img src="image/03-03.jpg" alt="">
<p class="des1">Delicious Food</p>
<p class="des2">Record The Picture</p>
</div>
</div>
</div>
<!-- 中间的下半部分 -->
<div class="bottom">

</div>

</div>
<!-- 底部 -->
<div class="footer">

</div>
</body>
</html>

*{
	margin: 0;
	padding: 0;
}

.header{
	width: 100%;
	height: 100px;
}

.header .logo{
	float: left;
}

.header .nav{
	float: right;
}

.header img{
	width:300px;
	height: 85px;
	padding-left: 100px;
	padding-top: 8px;
}

.header .nav ul{
	padding-right: 100px;
	line-height: 100px;
}

.header .nav ul li{
	float: left;
	list-style: none;
	width: 80px;
	height: 100px;
	font-size: 15px;
	font-weight: bold;
	color: #7d7d7d;
}

.main .top{
	width: 100%;
	height: 600px;
}

.main .top img{
	width: 100%;
	height: 600px;
}

.main .topLayer{
	width: 100%;
	height: 600px;
	/*绝对定位，参照有定位系统的第一级父元素，因为topLayer的父元素main没有定位系统，所以参照body定位*/
	position: absolute;
	top: 100px;
	left: 0px;
	background-color: #000;
	/*透明度*/
	opacity: 0.5;
}

.main .topLayer-top{
	width: 500px;
	height: 300px;
	/*参照的是body定位*/
	position: absolute;
	/*top的高度是600px，想要居中显示，减去一半就是300px，还要再加上header的高度100px，就是400px*/
	top: 400px;
	/*再减去自身高度的一半*/
	margin-top: -150px;
	/*居中显示*/
	right: 50%;
	/*再减去自身宽度的一半*/
	margin-right: -250px;
	/*当产生层叠效果时，z-index的值越大，就会浮动到越上面*/
	z-index: 2;
}

.main .topLayer-top .word{
	/*上下级用padding，同级之间用margin*/
	padding-top: 100px;
	color: white;
	font-size: 45px;
	font-weight: bold;
	text-align: center;
	font-family: 微软雅黑;
} 

.main .topLayer-top button{
	width: 200px;
	height: 60px;
	margin-top: 50px;
	color: #fff;
	background-color: #f5704f;
	font-family: 微软雅黑;
	font-size: 14px;
	font-weight: bold;
	text-align: center;
	border-radius: 8px;
	/*top的宽度是500px；button的宽度是200px，想要居中，向右移动250px,再向左移动100px，即减去自身宽度的一半*/
	margin-left: 150px;
}

.main .middle{
	width: 1000px;
	margin: 0 auto;
}

.main .middle .m-top .commen{
	float: left;
	/*因为middle的宽度是1000px，除以3*/
	width: 33.3%;
	padding-top: 50px;
	text-align: center;
}

.main .middle .m-top .commen img{
	width: 100px;
	height: 100px;
}

.main .middle .m-top .commen .comm{
	font-size: 20px;
	color: #7d7c7f;
	font-weight: bold;
	margin-top: 20px;
}

.clear{
	clear: both;
}

.main .middle .m-middle p{
	font-size: 22px;
	color: #e19796;
	font-weight: bold;
	padding-top: 50px;
	padding-bottom: 50px;
	font-style: italic;
	text-align: center;
}

.main .middle .m-bottom .m-com{
	float: left;
	padding:10px;
	text-align: center;
	font-size: 20px;
	font-weight: bold;
}

.main .middle .m-bottom .m-com img{
	width: 310px;
	height: 260px;
}

.main .middle .m-bottom .m-com .des1{
	color: #7d7d7f;
	margin: 20px;
}

.main .middle .m-bottom .m-com .des2{
	color: #bdbdbc;
	margin: 10px;
}


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

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

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

0 星

相似问题

请问，处理设置图片向左浮动，为什么不能设置文字向右浮动？
6 0 5
为什么要给每个slider-item设置宽度？
22 0 3
关于图片宽高设定的问题
24 0 3
关于设置图片fixed的问题？
0 0 5
用背景图片设置的方法实现不了要求的效果
0 0 4

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

PHP小白零基础入门
  • 参与学习           人
  • 提交作业       626    份
  • 解答问题       4928    个

想要学好Web后端开发的中流砥柱语言，本阶段为你轻松铺就扎实的基础，从前端网页布局的搭建到后台PHP开发，助你从零基础到掌握主流开发语言。

了解课程

本课精华内容

问答 作业

max最大值,min最小值，请老师检查

18 1

不太理解，全局变量是什么意思？？

3 1

建表时默认值是中文时会报错

3 1

什么是API

8 1

单引号和双双引号

5 1

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

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

 帮助反馈 APP下载

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

 公众号

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

在线咨询

领取优惠

免费试听

领取大纲

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