6-2的作业问题布局
上面导航的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/lunbotu.css">
</head>
<body>
<div class="main">
<!--导航-->
<div class="nav">
<div class="nav-row"><a href="#"><span>首页</span></a></div>
<div class="nav-row"><a href="#"><span>点击看看</span></a></div>
<div class="nav-row"><a href="#"><span>会自动的</span></a></div>
<div class="nav-row"><a href="#"><span>我的网站</span></a></div>
</div>
<!--图片轮播-->
<div class="banner">
<a href=""><div class="banner-slide slide1 slide-active"></div>
</a>
<a href=""><div class="banner-slide slide2 "></div>
</a>
<a href=""><div class="banner-slide slide3"></div>
</a>
<a href=""><div class="banner-slide slide4 "></div>
</a>
</div>
</div>
</body>
</html>
*{padding:0;
margin:0;}
body{font-family:Microsoft YaHei;
}
a:link,a:visited{text-decoration: none}
.main{width:1000px
height:500px;
overflow: hidden;
}
.nav{width: 1000px;
height: 50px;
background: #FFF;
border:dashed #666;
border-bottom: none;
}
.nav-row{
font-size: 22px;
padding:0 0
width: 250px;
height: 50px;
text-align: center;
float:left;
}
.banner{width: 1000px;
height: 450px;
overflow: hidden;
position: relative;
}
.banner-slide{width: 1000px;
height: 450px;
position: absolute;
background-repeat: no-repeat;
display:none
}
.slide-active{display: block;}
.slide1{
background-image:url("../img/1.jpg")
}
.slide2{
background-image:url("../img/3.jpg")
}
.slide3{
background-image:url("../img/4.jpg")
}
.slide4{
background-image:url("../img/5.jpg")
}
看完css之后始终不太搞懂padding,margin,float,display这些问题 ，麻烦老师讲讲
慕桂英32513181回答
-
Xiaofeng_246
padding内填充 ，margin外边距，float浮动，display可以设置元素以什么样的形式显示，如行内元素，块元素，建议去百度下盒模型和浮动的知识点，详细看下，这样的知识点很多，不再细述
随时随地看视频慕课网APP
Html/CSS
JavaScript