老师你好,关于代码问题

老师你好,关于代码问题

老师你好,我想问下about区域的底部应该怎么做?

我按照我自己的方法做,发现这样做图片块还有文字块是无法向左浮动的,请问这是为什么呢?

<div class="about-footer">

<div class="about-footer-cont">

<div><img src="./images/b1.jpg"></div>

<div></div>

<div><img src="./images/b2.jpg"></div>

<div></div>

<div></div>

<div><img src="./images/b3.jpg"></div>

<div></div>

<div><img src="./images/b4.jpg"></div>

</div>    

</div>

html部分↑

.main .about .about-footer{

widows: 100%;

height: 1000px;

}

.main .about .about-footer .about-footer-cont{

width: 25%;

height: 100px;

float: left;


}

.main .about .about-footer img{

width: 300px;

height: 200px;

}

css部分↑



正在回答

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

3回答

同学你好, .about-footer .about-footer-cont>div >div表示选择about-footer下的about-footer-cont 下的子元素div下的子元素div. 

老师这里给同学举了一个简单的示例: 

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

效果图:之后对应的子元素div添加了边框,里面的一段英文字符没有选中就没有设置样式哦

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

同学可以自己下去测试一下,帮助自己更好的理解

如果帮助到了你, 欢迎采纳!

祝学习愉快~~~

好帮手慕慕子 2019-08-18 10:18:58

同学你好, 可以参考如下思路

  1. 八个div设置都设置浮动, 然后设置百分比宽度, 实现两排四列的布局效果:

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

  2. 可以添加一个空的div通过border属性设置三角形,然后结合定位设置三角形的位置。

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

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

  3. 效果图:

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

同学可以结合示例示例代码自己下去测试一下, 空白区域的问题, 同学可以尝试自己下去实现哦

如果还有疑惑, 可以再次提问,我们会继续为你解答的

如果帮助到了你, 欢迎采纳!

祝学习愉快~~~

  • 提问者 Liu1997 #1
    老师,能讲解下 .about-footer .about-footer-cont>div >div这个的用法吗?
    2019-08-19 15:25:24
提问者 Liu1997 2019-08-17 20:47:47

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

老师,就是这一块是怎么做的?思路是怎么样的

问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
请稍等 ...
微信客服

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

帮助反馈 APP下载

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

公众号

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

在线咨询

领取优惠

免费试听

领取大纲

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