So verwenden Sie div+css für das Webseitenlayout-HTML-Tutorial-php.cn

So verwenden Sie div+css für das Webseitenlayout

迷茫

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

Original

4593 Leute haben es durchsucht

Div-Tag, wir nennen es Ebene, div ist ein Blockelement, in Kombination mit CSS kann es die Webseite sehr gut gestalten

Schreiben wir zunächst einen div+css-Code, damit jeder sehen kann, was div ist So

<!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>

Nach dem Login kopieren

Den obigen Code, dann führen wir ihn aus, um ein Quadrat mit einer Breite und Höhe von 300 Pixeln und einem roten Rand anzuzeigen

und dann, wie die Homepage gestaltet wird Auf der Website sieht die Startseite so aus:

Der obere Teil ist ein Karussellbild.

Der untere Teil ist die Navigation, und dann ist der Inhaltsteil in zwei Blöcke unterteilt Auf der linken und rechten Seite und dann im unteren Block schauen wir uns an, wie man eine Webseite erstellt. Wir benötigen die Grundlagen von HTML und CSS, z. B. ID-Selektoren und Klassenselektoren

Wenn wir div+css für das Webseitenlayout verwenden, müssen wir float verwenden. Wenn es Freunde gibt, die dieses Wissen nicht kennen, können Sie sich das oben erwähnte CSS-Video-Tutorial oder Text-Tutorial auf der chinesischen PHP-Website ansehen , das Beispiel, das wir machen werden

<!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>

Nach dem Login kopieren

ist eigentlich der Code Es gibt nicht viel und es ist sehr einfach, aber es ist dennoch sehr wichtig, dass Sie auf den Unterschied zwischen Rand und Polsterung achten . Margin ist der Abstand zwischen dem Inhalt und dem Rand. Viele Freunde sagen, dass die Attribute in CSS aufgezeichnet werden. Ich kann nicht anders, als zu glauben, dass Sie sich an diesen Teil nicht erinnern können. Man kann es sich nur merken, wenn man mehr schreibt und mehr übt!