老师，2-3此处有几点疑惑还望解答？
来源：2-3 html5页面布局（表现层_banner）
weibo_执著的弧线_0
2019-04-14 11:04:13
我在banner部分隐藏溢出时在父元素banner上用了伪类的方法，但是图片照样溢出？
伪类代码如下：
.clearfloat:after{
content: "";
display: block;
height:0;
clear: both;
visibility: hidden;
}
.clearfloat{
zoom: 1;
}<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/common.css"> <link rel="stylesheet" href="css/index-practice.css"> </head> <body> <header> <div class="container"> <!--logo--> <a href="index-practice.html"><img src="images/logo.png" alt="logo"></a> <!--nav--> <nav> <a class="Home active" href="index-practice.html">Home</a> <a class="Course" href="">Course</a> <a class="Actual" href="">Actual</a> <a class="Plan" href="">Plan</a> <a class="FAQ" href="">FAQ</a> <a class="Notes" href="">Notes</a> </nav> </div> </header> <section class="banner clearfloat"> <!--banner--> <ul class="clearfloat"> <li class="banner1 "><img src="images/banner/banner1.jpg"/></li> <li class="banner2 "><img src="images/banner/banner2.jpg"/></li> <li class="banner3 "><img src="images/banner/banner3.jpg"/></li> </ul> </section> <section class="main"> <aside> <h1>Recent <samp>Course</samp></h1> <dl> <dt>Hyper Text Markup Language</dt> <dd><img src="images/Course/05_05.png"></dd> <dd>HTML is the standard markup language used to create web pages and its elements form the building blocks of all websites.</dd> </dl> <dl> <dt>Cascading Style Sheets</dt> <dd><img src="images/Course/06_04.png"></dd> <dd>Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents.</dd> </dl> <dl> <dt>JavaScript</dt> <dd><img src="images/Course/09_07.png"></dd> <dd>JavaScript is a high-level, dynamic, untyped, and interpreted programming language.</dd> </dl> <dl> <dt>AngularJS</dt> <dd><img src="images/Course/02_09.png"></dd> <dd>AngularJS is an open-source web application framework mainly maintained by Google and by a community of individuals and...</dd> </dl> </aside> <article> <h1>Welcome to <samp>Massive Open Online Course!</samp></h1> <p>We provide the latest knowledge to help you cope with the changing world!</p> <img src="images/article.jpg"/> <p>We hope that all the students who love the Internet can be more convenient access to learning resources, using the Internet thinking to change our learning.</p> <p>Focus on IT skills education MOOC, consistent with the development trend of the Internet down to earth's MOOC. We are free, we only teach useful, we concentrate on education.</p> </article> </section> <footer> <div class="container"> <p>Copyright © 2016 imooc.com All Rights Reserved.</p> <span> <img src="images/icon/weichat.png"> <img src="images/icon/sina.png"> <img src="images/icon/qq.png"> </span> </div> </footer> </body> </html>
*{margin:0;padding:0;border:none;font-family: Arial;font-size:14px;}
ul{list-style:none;}
a{text-decoration:none;}
.clearfloat:after{
content: "";
display: block;
height:0;
clear: both;
visibility: hidden;
}
.clearfloat{
zoom: 1;
}header{height:80px;background: #000;}
header > .container{width: 1200px;margin: 0 auto;}
header > .container > a{display: block;float: left;margin: 5px 25px;}
header > .container > nav{float: right;}
header > .container > nav > a{
font-size:24px;
width:110px;
height:73px;
display: block;
float: left;
line-height:73px;
text-align: center;
color: #fff;
}
header > .container > nav > a.Home{background: #433b90;}
header > .container > nav > a.Course{background: #017fcb;}
header > .container > nav > a.Actual{background: #78b917;}
header > .container > nav > a.Plan{background: #feb800;}
header > .container > nav > a.FAQ{background: #f27c01;}
header > .container > nav > a.Notes{background: #d40112;}
header > .container > nav > a:hover,
header > .container > nav > a.active{padding-bottom:7px;}
.banner{background: #eaeaea;}
.banner >ul{
position: relative;
width: 1490px;
height: 300px;
}
.banner >ul >li{
position: absolute;
width: 610px;
height: 300px;
}写回答
1回答
-
你好同学 ，是说的想使用如下代码中实现图片超出父元素的部分隐藏吗？这一块功能是用来清除浮动的，并不是设置超出隐藏。
超出隐藏应该是 overflow: hidden;在视频中是给li设置的 ，这样溢出父元素的图片就会隐藏了：如下：
如果没有解答疑惑，可以再详细描述一下，以便老师准确高效的为你解答。
祝学习愉快 ，望采纳。
0
相似问题