DIV+CSS通用性款式合理布局案例编码

日期:2021-01-20 类型:科技新闻 

关键词:网页设计,移动端网页设计,大一网页设计作业成品,网页编辑软件,网页在线编辑

1下是1个十分简易易懂的通用性款式合理布局,期待针对一开始触碰DIV+CSS的同学有协助。先看实际效果图:


大家能够看出一般的网页页面合理布局有下列几个一部分:头顶部、內容、底部,在其中內容有左边主显区和右边边栏。下面贴出编码:

拷贝编码
编码以下:

<!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=gbk" />
<title>DIV+CSS practice</title>
<link href="css/common.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<!-- 头顶部 -->
<div id="head">
</div>
<!--END 头顶部 -->
<!-- 主器皿 -->
<div id="container">
<!-- 左边主显区 -->
<div id="content">
</div>
<!-- END 左边主显区 -->
<!-- 右边边栏 -->
<div id="side">
</div>
<!-- END 右边边栏 -->
</div>
<!-- END 主器皿 -->
<div class="clear"></div>
<!-- 底部 -->
<div id="foot">
</div>
<!-- END 底部 -->
</body>
</html>
common.css款式文档:
*{
margin:0;
padding:0;
}
body{
background-color:gray;
}
.clear{
clear:both;
}
/*head*/
#head{
background-color:blue;
height:150px;
}
/*container*/
#container{
background-color:red;
width:960px;
height:800px;
margin:20px auto;
}
/*content*/
#content{
background-color:yellow;
float:left;
width:685px;
height:100%;
}
/*side*/
#side{
background-color:green;
float:right;
width:255px;
height:100%;
}
/*foot*/
#foot{
background-color:white;
height:150px;
width:960px;
margin:20px auto;
}

大概合理布局很简易了,最先要有这个全局观念,随后再健全在其中的细节,学习培训PHP或别的語言一样这般,最先要有1个观念,了解每步做甚么,如何做,这样才可以把专业知识灵便应用。