先預(yù)覽一下效果圖
先說(shuō)一下頁(yè)面的布局思路:
整張網(wǎng)頁(yè)有一個(gè)背景div,然后頁(yè)面布局整體劃分為左右兩個(gè)div,然后分別在各自的div上面進(jìn)行布局
思路提示:一定要進(jìn)行塊級(jí)化
下圖是大塊的劃分
下面是html以及css的實(shí)現(xiàn)的步驟:
<head>中需要做的工作:
1,支持中文需要設(shè)置:
<meta charset="utf-8">
2,將css文件導(dǎo)入到html文件中:
<link rel="stylesheet" type="text/css" href="./css/water.css">
<body>中需要做的工作:
1,先設(shè)置一個(gè)背景,方便改變整個(gè)網(wǎng)頁(yè)的背景色
<div id="backview"></div>
對(duì)應(yīng)css的實(shí)現(xiàn):
/*為了使backview中的百分比生效, 這里給body的寬高也設(shè)置為100%*/
html,body{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
/*這里設(shè)置將超出視圖范圍的內(nèi)容進(jìn)行隱藏*/
overflow: hidden;
}
#backview{
width: 100%;
height: 100%;
background-color: rgba(229,229,229,1);
}
2,設(shè)置左邊的div:
對(duì)應(yīng)的css:
#leftview{
float: left;
width: 270px;
margin-bottom: 0px;
background-color: rgba(255,255,255,1);
}
#lefttopview{
width: 100%;
height: 180px;
background-color: rgba(60,60,60,1);
}
#leftbottomview{
width: 100%;
height: 1250px;
background-color: rgba(255,255,255,1);
}
#portraitdivback{
position: absolute;
top: 110px;
left: 75px;
width: 120px;
height: 120px;
background-color: white;
border-radius: 60px;
}
#portraitdiv{
position: absolute;
top: 113px;
left: 78px;
width: 114px;
height: 114px;
background-color: red;
border-radius: 57px;
}
#namediv{
margin-top: 60px;
float: left;
width: 270px;
height: 30px;
}
#namep{
text-align: center;
}
#homediv{
margin-top: 50px;
float: left;
width: 270px;
}
#homep{
text-align: center;
font-size: 12px
}
#homep1{
text-align: center;
font-size: 10px;
}
#imagesdiv{
margin-left: 65px;
}
#imageid{
margin-left: 10px
width: 25px;
height: 25px;
float: center;
}
效果圖:
右邊的div
對(duì)應(yīng)的css
#rightview{
position: absolute;
left: 300px;
right: 30px;
overflow: hidden;
}
#righttopview{
margin-top: 30px;
background-color: rgba(255,255,255,1);
}
#rigthbottomview{
left: 0px;
margin-top: 30px;
height: 640px;
background-color: rgba(255,255,255,1);
}
#topline{
width: 4px;
float: left;
height: 60px;
background-color: rgba(60,60,60,1);
}
#linerighttop{
margin-left: 60px;
margin-right: 60px;
}
#titleonesup{
left: 30px;
float: left;
/*background-color: rgba(255,255,55,1);*/
}
#titleonetext{
color: rgb(80,80,80);
font-size: 20px
}
#imagetop{
width: 70%;
}
#descdiv{
margin-top: 20px;
background-color: rgba(83,104,112,1);
}
#descdivtextDiv{
margin-left: 4px;
background-color: rgba(244,244,244,1);
}
#descdivtext{
padding-top: 10px;
padding-bottom: 10px;
margin-left: 10px;
color: rgb(29,23,43);
font-size: 12px;
}
#descdiv2{
margin-top: 20px;
padding-top: 1px;
padding-bottom: 1px;
background-color: rgba(24,26,20,1);
}
#detailText{
margin-left: 15px;
color: white;
font-size: 11px;
}
#morediv{
width: 100%;
margin-top: 20px;
}
#more{
color: rgb(0,98,177);
font-size: 12px;
text-decoration: none;
}
#underline{
margin-top: 15px;
width: 100%;
height: 2px;
background-color: rgb(235,235,235);
}
#tagdiv{
left: 0px;
margin-top: 15px;
width: 70%;
}
#tagimage{
width: 126px;
height: 22px;
}
