为能够让python有一个很好的应用场景,我选择了web,要学习web就要简单认识html、css、js
代码
<html>
<head>
<title>test</title>
<style>
body{
background:gray;
margin: 0 ;
}
.nav_bar{
width: 100%;
height: 40px;
padding: 0px;
margin: 0 auto;
border: 1px solid red;
}
.div0{
width: 1024px;
background:lavender;
margin: auto;
}
.div1,.div2, .div3,.div4 {
width: 250px;
background: rgba(80, 13, 9, 0.51);
float: left;
text-align: center;
border: rgba(6, 80, 6, 0.51) 1px solid;
vertical-align: middle;
height: 40px; //这上下两句是div中内容上下居中的关键
line-height: 40px; //这上下两句是div中内容上下居中的关键
}
</style>
</head>
<body>
<div class="nav_bar">
<div class="div0">
<div class="div1">
123
</div>
<div class="div2">
456
</div>
<div class="div3">
789
</div>
<div class="div4">
000
</div>
</div>
</div>
</body>
</html>
效果图
就是有(ul li)导航之后导致下面的div内容不能居中
<html>
<head>
<title>test</title>
<style>
body{
background:gray;
margin: 0 ;
}
.nav_bar{
width: 100%;
height: 40px;
padding: 0px;
margin: 0 auto;
border: 0px solid red;
}
.div0{
width: 1024px;
background:lavender;
margin: 0 auto;
padding: 0px;
height: 40px;
}
.div1,.div2, .div3,.div4 {
width: 254px;
background: rgba(80, 13, 9, 0.51);
float: left;
height: 40px;
text-align: center;
border: rgba(6, 80, 6, 0.51) 1px solid;
vertical-align: middle;
line-height: 38px;
}
.div1 ul{
list-style: none;
padding: 0px;
margin: 0 auto;
}
ul li{
float: left;
text-align: center;
width: 25%;
background: azure;
}
.banner{
width: 100%;
height: 40px;
line-height: 40px;
background: rgba(14, 80, 67, 0.51);
text-align: center;
padding: 0px;
margin: 0 auto;
border:1px solid rosybrown;
}
</style>
</head>
<body>
<div class="nav_bar">
<div class="div0">
<div class="div1">
<ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
</ul>
</div>
<div class="div2">
456
</div>
<div class="div3">
789
</div>
<div class="div4" style="float: right;">
000
</div>
</div>
</div>
<div class="banner">456</div>
<div class="banner">456</div>
</body>
</html>