老师在书写代码是有几个问题
来源：3-3 Float案例演示（3）
慕工程6149111
2020-04-13 22:59:25
<!DOCTYPE html>
<html>
<head>
<title>float案列演示</title>
<meta http-equiv="Content-Type" content="text/css; charset=utf-8"/>
<style type="text/css">
*{margin: 0 ;
padding: 0 ;}
.container{width:1200px ;
margin: 0 auto;/*auto内容居中*/}
.header{width: 1200px;
background: #ccc;
overflow: hidden;/*给父级元素清除浮动*/
zoom: 1; }
.header .logo{ width: 200px;
height: 80px;
float: left; /*图片左浮动*/
margin:0 40px;}
.header .nav{float: right;
overflow: hidden;
padding-right: 20px; /*设置成margin和padding有什么区别*/}
.header .nav li{float: left;
margin-right:20px;}
.header .nav li a{padding: 0 20px;
height: 80px;
line-height: 80px;
display: block;
font-family: "微软雅黑", serif;
font-size: 16px;
color: #333;
}
.header .nav li a:hover{color: white;}
a{text-decoration: none;/*去掉下划线，只能给最近的属性设置才可以实现吗*/}
ul{list-style-type:none;/*list-style是不是只能用在列表中*/}
.main{width: 1200px;
overflow: hidden;
zoom: 1;
}
.main .con{width: 1000px;
height: 500px;
background: blue;
font-size: 25px;
color: white;
float: left; }
.main .sidebar{width: 200px;
height: 500px;
background: orange;
font-size: 25px;
color: white;
float:right; }
.footer{width: 1200px;
height: 80px;
background: red;
font-size: 25px;
color: white;}
</style>
</head>
<body>
<div class="container">
<div class="header">
<div class="logo">
<a href="#"><img src="logo.png"></a>
</div>
<ul class="nav">
<li><a href="#">免费课程</a></li>
<li><a href="#">职业路径</a></li>
<li><a href="#">实战</a></li>
<li><a href="#">猿问</a></li>
<li><a href="#">手记</a></li>
</ul>
</div>
<div class="main">
<div class="con">content</div>
<div class="sidebar">sidebar</div>
</div>
<div class="footer">footer</div>
</div>
</body>
</html>
1.老师请检查一下代码这样写对吗？
2..header .nav{float: right;
overflow: hidden;
padding-right: 20px;
设置成margin和padding有什么区别？是必须用哪一个还是都可以使用
3. a{text-decoration: none;/*去掉下划线，只能给最近的属性设置才可以实现吗*/}写回答
1回答
-
同学你好，问题回答如下：
1. 代码正确，很棒！
2. 导航项的右边距设置成marign和padding都可以，效果上没什么区别，用哪一个都可以。
3. a标签有默认的text-decoration属性，并且属性值是underline；当将text-decoration: none;属性设置在a标签的父元素上时，a标签会继承该属性，但是由于a标签的默认样式优先级大于继承样式，所以只能将text-decoration: none;属性设置在a标签上才会生效。
4. list-style-type属性用来设置列表项标志的类型，只能用在有序列表和无序列表中。
如果我的回答帮到了你，欢迎采纳，祝学习愉快！
0
相似问题