How to use div+css for web page layout-HTML Tutorial-php.cn

How to use div+css for web page layout

迷茫

Release： 2017-01-17 09:53:56

Original

4508 people have browsed it

Div tag, we call it layer, div is a block element, and combined with css, it can be used for web page layout

Let’s first write a div+css code to let everyone see what div is. Like this

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width:300px;
height:300px;
border:1px solid red
}
</style>
</head>
<body>
<div></div>
</body>
</html>

Copy after login

The above piece of code, and then we run it to display a square with a width and height of 300 pixels and a red border

Then we will lay out the homepage of the website. It looks like this

The top piece is used as a carousel image

The bottom piece is the navigation, and then the content part. The content part is divided into left and right blocks, and then the bottom block is Let’s see how it is made. To make a web page, we need to have the basics of html and css, such as id selectors and class selectors.

When using div+css for web page layout, we need to use float. If If you don’t know this knowledge, you can refer to the CSS video tutorial or text tutorial on the PHP Chinese website. As mentioned above, the example we are going to do

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{margin:0;padding:0;}
#div{
width:100%;
height:300px;
background:#f69;
}
#daohang{
width:100%;
height:50px;
background:#f60;
}
ul li{
list-style:none;
float:left;
line-height:50px;
margin-left:130px;
}
#bdy{
width:100%;
height:500px;
background:green;
}
#left{
width:30%;
height:500px;
background:red;
float:left;
}
#right{
width:70%;
height:500px;
background:#ccc;
float:left;
}
#but{
width:100%;
height:200px;
background:#f60;
}
</style>
</head>
<body>
<div id="div">
轮播图
</div>
<div id="daohang">
<ul>
<li>公司首页</li>
<li>公司新闻</li>
<li>产品介绍</li>
<li>加盟领航</li>
<li>联系我们</li>
<li>在线客服</li>
<li>驾车路线图</li>
</ul>
</div>
<div id="bdy">
<div id="left">公司公告</div>
<div id="right">公司新闻</div>
</div>
<div id="but">底部信息</div>
</body>
</html>

Copy after login

actually does not have much code. It is also very simple, but it is still very important for you to pay attention to the difference between margin and padding. Margin is the distance between the border and the padding. The distance between the content and the border. Many friends say that the attributes in CSS cannot be remembered. For I think you can’t remember this part because you haven’t practiced enough. You can only remember it if you write more and practice more!