使用div为网页布局

来源:互联网 发布:mac怎么显示包内容 编辑:程序博客网 时间:2024/05/01 23:14

今天使用css的div为网页做一个大致的布局,之后可以在块内填充内容,如果有内容的话,css中的height可以省略


<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <link rel="stylesheet" type="text/css" href="stle.css"></head><body><div class="head"></div><div class="body">    <div class="content1"></div>    <div class="content2"></div></div><div class="foot"></div></body></html>

stle.css


body{    margin: 0px;}.head{    width: 100%;    height: 100px;    background-color: blueviolet;}.body{    width: 75%;    height: 1000px;    background-color: coral;    /*使body居中显示,并且与上下都有外边距*/    margin: 10px auto;}.content1{    width: 100%;    height: 50%;    background-color: darkkhaki;}.content2{    width: 100%;    height: 50%;    background-color: gold;}.foot{    width: 100%;    height: 150px;    background-color: cornflowerblue;}


1 0
原创粉丝点击