2-9变成练习

<!DOCTYPE html>

<html>

<head>

/*此处写代码*/

* {

margin: 0;

padding: 0;

}

div{margin:0;border:0;padding:0;}

li {

list-style-type: none;

}

.head {

color: white;

width: 100%;

height: 100px;

background-color: black;

overflow: hidden;

}

.logoImg {

}

.topNav {

float: right;

height: 100px;

line-height: 100px;

}

.topNavLi {

display: inline-block;

margin:0 20px;

}

.contentContainer {

background-color: rgb(174,216,229);

width: 100%;

border: 0;

height: 500px;

}

.leftPart {

float: left;

width: 50%;

height: auto;

}

.rightPart {

float: right;

width:50%;

height: auto;

}

.classIntroduce,.relativeClass{

margin: 100px auto auto auto;

width: 300px;

}

.classTitle{

padding: 10px 0 10px 0;

font-size: 25px;

font-weight: bold;

}

.classPath,.className{

padding: 10px 0 10px 0;

}

.pathField {

background-color: rgb(251,151,151);

}

.footer {

background-color: black;

width: 100%;

height: 100px;

}

.footerNav {

width: 80%;

height: 100px;

line-height: 100px;

margin: 0 auto;

display: flex;

justify-content: center;

}

.footerNavTitle {

display: inline-block;

color: white;

padding: 0 10px;

}

</style>

</head>

<body>

</div>

<li class="classPath"><span class="pathField">职业路径</span><span>��HTML5与CSS3实现动态网页</span></li>

<li class="classPath"><span class="pathField">职业路径</span><span>��零基础入门Android语法与界面</span></li>

<li class="classPath"><span class="pathField">职业路径</span><span>��iOS基础语法与常用控件</span></li>

<li class="classPath"><span class="pathField">职业路径</span><span>��PHP入门开发</span></li>

<li class="classPath"><span class="pathField">职业路径</span><span>��JAVA入门开发</span></li>

</ul>

</div>

<li class="className"><span>HTML��</span><span>CSS��</span><span>JavaScript</span></li>

<li class="className"><span>HTML5��</span><span>CSS3��</span><span>Jquery</span></li>

<li class="className"><span>移动端基础��</span><span>移动端APP开发</span></li>

</ul>

</div>

</div>

</body>

</html>

老师，您好，麻烦帮忙指正下这样做有没什么问题哦，另外，在class="head"的div的样式里我加入了overflow: hidden;hidden，原因是，浏览器我缩小以后，导航就从head挤下去了，请问有没其他办法解决这个问题呀，我目前只想到overflow: hidden;这个方法。

谢谢！

Horrace 2017-07-10

源自：CSS网页布局基础 2-11 经典的三列布局

收起

2回答

樱桃小胖子回答被采纳获得+3积分 2017-07-10 15:35:05

建议设置min-width会更好哦~其他的代码以及效果是没问题的，祝学习愉快！

收起回答

Horrace 提问者 #1

非常感谢！

2017-07-10 16:12:25
Horrace 提问者 #2

对了，老师，刚刚这题我在做的时候， *{} 这段样式我一开始是用 body{}，设置了padding和margin为0，这个时候，body里面的第一个div和第二个div之间有一条大约20px的间隙，显示的是body的内容，最后通过*{}方式解决，我想请问下这个间隙是什么原因形成的呢？谢谢！

2017-07-10 16:16:25
樱桃小胖子回复提问者 Horrace #3

在CSS文件中*是通配符选择器，它可以选择文档中所有的元素，也就是说是一个通杀选择器。body是一个普通的类型选择器，只能够选中body这么一个元素。而之所大家会感觉到*和body选择器有时候作用是相同的，主要是因为body是绝大多数布局元素的父元素。<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title><style>body{ padding:0;margin:0; } .box1{width:800px;height:400px; background-color: red; } .box2{width:800px; height:400px; background-color: blue; }</style></head><body><div class="box1"></div><div class="box2"></div></body></html>，关于body{padding:0; margin:0;}出现间隙的问题，我做了测试，结合上面*与body的差异，出现的原因可能是两个div元素自身的问题，跟body{padding:0;margin:0;}没有关系。希望对你有帮助。

2017-07-10 17:00:55