HTML/CSS初寫仿csdn部落格頁面框架
阿新 • • 發佈：2019-01-26
初寫仿csdn部落格頁面步驟
一、觀察頁面構造，畫圖
頁面
根據頁面，畫框架
二、利用div，從上到下先寫出整體框架
HTML部分（先整體）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阿水的阿里</title>
<link href="csdncss.css" type="text/css" rel="stylesheet">
</head>
<body CSS部分
*{
margin: 0px;
padding:0px;
background-color: #e9e9e9;
}
.dingbu1{
width: 100%;
height: 40 實現
三、實現內部框架
HTML部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阿水的阿里</title>
<link href="csdncss.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="dingbu1">
<img src="img.jpg">
</div>
<div class="dingbu2"></div>
<div class="zong">
<div class="neirong0"></div>
<div class="neirong1"></div>
<div class="neirong2"></div>
<div class="neirong3"></div>
</div>
<div class="dibu"></div>
</body>
</html>
CSS部分
*{
margin: 0px;
padding:0px;
background-color: #e9e9e9;
}
.dingbu1{
width: 100%;
height: 40px;
background-color: #585858;
}
.dingbu2{
width:100%;
height: 60px;
margin:0px auto;
border-style: groove;
border-color: brown;
background-color: #fcfcfc ;
}
.zong{
padding: 0px;
height: 1000px;
width: 1200px;
margin: 0px auto;
border-style: groove;
background-color: #e9e9e9;
}
.neirong0{
width:100%;
height:20%;
border-style: groove;
border-color: aquamarine;
background-color: #fcfcfc;
margin-bottom: 10px;
}
.neirong1{
float: left;
width: 800px;
height:78%;
border-style: groove;
border-color: antiquewhite;
background-color: #fcfcfc;
}
.neirong2{
float: left;
width: 388px;
height: 300px;
border-style: groove;
border-color: aquamarine;
background-color: #fcfcfc;
}
.neirong3{
margin-top: 10px;
float:left;
width: 388px;
height: 200px;
border-style: groove;
border-color: brown;
background-color: #fcfcfc;
}
.dibu{
width:1200px;
height: 100px;
margin:10px auto;
border-style: groove;
border-color: brown;
background-color: #fcfcfc ;
}
.dingbu1 img{
margin: 0px auto;
position: absolute;
left:300px;
}
最終實現框架效果
