div+css
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>div+css</title>
<link rel="stylesheet" href="css/index.css" type="text/css" />
</head>
<body>
<div class="no1">asdfas</div>
<div class="no2">第二个div</div>
<img src="img/222BE81FD8FD238CA964A07CFE859419%20.jpg" />
<div class="no3">这是第三个div</div>
<div id="no4">这是第四个div</div>
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<h1 class="no1">aslkfjasjkdf;</h1>
</body>
</html>
@charset "utf-8";
*{
padding: 0px;
margin: 0px;
}
body{
background-color: #b2b2b2;
}
.no1{
width:400px;
height:300px;
background-color: pink;
}
.n-no1{
width: 100px;
height: 100px;
background-color:palegreen;
float: left;
}
.n-no2{
width: 100px;
height:100px;
background-color:plum;
float: left;
}
.no2{
width: 500px;
height: 400px;
background-color: gold;
}
.no3{
width: 300px;
height: 400px;
background-color:lavender;
}
#no4{
width: 500px;
height: 500px;
background-color: lightblue;
}
table{
width: 400px;
height: 400px;
background-color: yellow;
border:1px red solid;
}
h1{
width: 300px;
height: 200px;
background-color: peru;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/index.css" type="text/css"/>
</head>
<body>
<div class="no1">
<div class="n-no1">11111</div>
<div class="n-no2">33333</div>
</div>
<div class="no2">第二个</div>
<div class="no3">第三个</div>
</body>
</html>
龙湖地产界面:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>首页</title>
<link rel="stylesheet" href="css/longhu.css" type="text/css" />
</head>
<body>
<div class="main">
<div class="logo">
</div>
<div class="nav"></div>
<div class="banner"></div>
<div class="m-main">
<div class="left">
<div class="no1">
<div class="n-no1"></div>
<img src="img/u=1962986734,2519871017&fm=26&gp=0.jpg" width="100" height="100" />
<p></p>
</div>
<div class="no2">
<ul></ul>
<ul></ul>
</div>
</div>
<div class="right"></div>
</div>
<div class="bottom"></div>
</div>
</body>
</html>
@charset "utf-8";
*{
padding:0px;
margin: 0px;
}
body{
background-color: #00327c;
}
.main{
width:1421px;
height:867px;
background-color: lightblue;
margin-left: auto;
margin-right: auto;
}
.logo{
width: 900px;
height: 80px;
background-color: papayawhip;
margin-left: auto;
margin-right: auto;
}
.nav{
width: 900px;
height: 37px;
background-color: hotpink;
margin-left: auto;
margin-right: auto;
}
.banner{
width: 900px;
height: 238px;
background-color: burlywood;
margin-left: auto;
margin-right: auto;
}
.m-main{
width: 900px;
height: 422px;
background-color: gold;
margin-left: auto;
margin-right: auto;
}
.left{
width: 650px;
height: 422px;
background-color: yellowgreen;
float: left;
}
.no1{
width: 650px;
height: 200px;
background-color: plum;
}
.n-no1{
width: 650px;
height: 30px;
background-color: goldenrod;
}
img{
float: left;
}
p{
width: 500px;
height: 170px;
background-color: orange;
float: left;
}
.no2{
width: 650px;
height: 222px;
background-color: darkgray;
}
ul{
width:310px;
height: 222px;
background-color:orchid ;
float: left;
margin-left: 10px;
}
.right{
width: 243px;
height: 422px;
background-color: lightcoral;
float: left;
}
.bottom{
width: 900px;
height: 60px;
background-color: burlywood;
margin-left: auto;
margin-right: auto;
}