学习园地网页布局
学习园地网页布局
局部效果图
body清除默认样式
body,img,ul,li{
padding: 0px;
margin: 0px;
}
头部布局
<!-- 顶部标签 -->
<div id="header">
<div class="header">
<div class="header_left"></div>
<div class="header_right"></div>
</div>
</div>
<!-- 顶部标签结束 -->
头部CSS样式
#header{
width: 100％;
height: 40％;
border-bottom: 1px solid #ccc;
}
.header{
width: 1200px;
height: 40px;
border: 1px solid red;
margin: 0px auto;
}
.header_left{
width: 400px;
height: 40px;
border: 1px solid green;
float: left;
}
.header_right{
width: 400px;
height: 40px;
border: 1px solid #FF0000 ;
float: right;
}
主体结构布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<!-- 顶部标签 -->
<div id="header">
<div class="header">
<div class="header_left"></div>
<div class="header_right"></div>
</div>
</div>
<!-- 顶部标签结束 -->
<!-- logo标签开始 -->
<div id="logo">
<div class="logo_left"></div>
<div class="logo_right"></div>
</div>
<!-- logo结束 -->
<!-- nav标签开始 -->
<div id="nav">
<div class="nav_left"></div>
<div class="nav_center"></div>
<div class="nav_right"></div>
</div>
<!-- nav标签结束 -->
<!-- banner标签开始 -->
<div id="banner">
<!-- banner图 -->
<div class="banner"><img style="" alt="" /></div>
<!-- 定位元素 -->
<div id="p_content">
<div class="banner_nav">
</div>
<div class="banner_right">
<div class="banner_login"></div>
<div class="banner_bottom">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
</div>
</body>
</html>
主体CSS样式
body,img,ul,li{
padding: 0px;
margin: 0px;
}
#header{
width: 100％;
height: 40％;
border-bottom: 1px solid #ccc;
}
.header{
width: 1200px;
height: 40px;
border: 1px solid red;
margin: 0px auto;
}
.header_left{
width: 400px;
height: 40px;
border: 1px solid green;
float: left;
}
.header_right{
width: 400px;
height: 40px;
border: 1px solid #FF0000 ;
float: right;
}
/* header style */
#logo{
width:1200px ;
height: 120px;
border: 1px solid red ;
}
#logo{
margin: 10px auto;
/* 块元素居中 */
}
.logo_left{
width: 300px;
height: 120px;
border: 1px solid blue;
float: left;
}
.logo_right{
width: 400px;
height: 120px;
border: 1px solid purple;
float: right;
}
/* logo style end */
/* nav style start */
#nav{
width: 1200px;
height: 45px;
border: 1px solid rosybrown;
margin: 0px auto;
}
.nav_left{
width: 300px;
height: 45px;
border: 1px solid rosybrown;
float: left;
}
.nav_center{
width: 700px;
height: 45px;
border: 1px solid red;
float: left;
}
.nav_right{
width:150px;
height: 45px;
border: aquamarine 1px solid;
float: right;
}
/* nav style end */
/* banner style start */
#banner{
width: 100％;
height: 516px;
background: #7FFFD4;
position: relative;
}
.banner{
margin: 0px auto;
height: 216px;
//background-color: #008000;
background-size: 100% auto;
background-repeat: no-repeat;
background-image: url(../img/banner.png);
}
#p_content{
width: 1200px;
border: 1px solid red;
height: 516px;
position: absolute;
top:0px;
/*left:52px;*/
left:calc(50% - 1200px / 2);
/* css计算属性 */
}
.banner_nav{
width: 240px;
height: 516px;
border: 1px solid red;
float: left;
}
.banner_right{
width: 950px;
height: 516px;
border: 1px solid red;
float: right;
}
.banner_login{
width: 950px;
height: 390px;
border: 1px solid black;
}
.banner_bottom{
width: 950px;
height: 114px;
border: 1px solid blue;
}
.banner_bottom>div{
float: left;
width: 200px;
height: 114px;
border: 1px solid green;
margin-left: 15px;
}
