Home >Web Front-end >CSS Tutorial >CSS layout page example code

CSS layout page example code

高洛峰Original: 2017-03-28 10:45:422812browse

Create the CSS file as follows:

@charset "utf-8";
/* CSS Document */
*{
    margin:0px;
    padding:0px;
    border:0px;
}
#box{
    width:1100px;
    height:760px;
    margin:auto;
}
#hen
{
    width:1100px;
    height:160px;
    background-color:#936;
}
#zuo{
    width:250px;
    height:500px;
    margin-top:10px;
    background-color:#03C;
    float:left;
    margin-bottom:10px;
}
#zhong-1{
    width:262px;
    height:300px;
    margin-top:10px;
    margin-left:10px;
    float:left;
    background-color:#000;
}
#zhong-2{
    width:262px;
    height:300px;
    margin-top:10px;
    margin-left:10px;
    float:left;
    background-color:#000;
}
#xia{
    width:544px;
    height:190px;
    background-color:#03C;
    margin-top:10px;
    float:left;
    margin-bottom:10px;
}
#you{
    width:295px;
    height:500px;
    margin-left:10px;
    margin-top:10px;
    background-color:#3F6;
    float:right;
    margin-bottom:10px;
}
#dibu
{
    width:1100px;
    height:50px;
    margin-top:10px;
    background-color:#CF3;
    clear:both;
}

html file as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS排版页面</title>
<link href="css/63301.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
<div id="box">
    <div id="hen"></div>
    <div id="zuo"></div>
    <div id="zhong-1"></div>
    <div id="zhong-2"></div>
    <div id="you"></div>
    <div id="xia"></div>
    <div id="dibu"></div>
    
</div>
</body>
</html>

The final effect is as shown in the figure:

CSS layout page example code

The above is the detailed content of CSS layout page example code. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Share the code for generating small dot patterns using CSSNext article：Share the code for generating small dot patterns using CSS

See more

CSS layout page example code

Related articles