应用CSS文件格式化网页页面合理布局示例(附图

日期:2021-03-09 类型:科技新闻 

关键词:秀米制作h5,h5如何制作,h5小游戏制作,h5游戏开发,免费的h5制作网站

源码:

拷贝编码
编码以下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
<!--
body{background:#ffcc99;}
#header{margin:0px auto;width:1000px;height:100px;background:#FFFFCC;}
#menu{margin:5px auto;width:1000px;height:30px;line-height:30px;color:#99FF99;
font-weight:bold;font-size:14px;background:#6699FF;}
#content{margin:5px auto;width:1000px;height:400px;background-color:#cccccc;}
.content_left{float:left;width:200px;height:400px;background:#cc99ff;}
.content_center{float:left;width:590px;height:400px;margin-left:5px;background:#cc99ff;}
.content_right{float:left;width:200px;height:400px;margin-left:5px;background:#cc99cc}

#footer1{margin:5px auto;background-color:#5185E6;color:#FFFFFF;
border-top:0px solid #F7F7F6;height:30px;line-height:30px;
width:1000px;padding:5px 0;text-align:center;}

#footer2{margin:5px auto;background-color:#3333FF;color:#FFFFFF;
border-top:0px solid #F7F7F6;height:30px;line-height:30px;
width:1000px;padding:5px 0;text-align:center;}

a{
text-decoration:none;
}

-->
</style>
</head>

<body>
<div id="header">网页页面头顶部</div>
<div id="menu">
网页页面导航栏
<tr>
<td>
<a href="" target="_blank" >主页 <a href="" target="_blank" >系统日志 <a href="" target="_blank" >相册 <a href="" target="_blank" >留言板 <a href="" target="_blank" >情况
</td>
</tr>
</div>
<div id="content">
<div class="content_left">左边栏</div>
<div class="content_center">正中间內容</div>
<div class="content_right">右边栏</div>
</div>
<div id="footer1">翻转信息内容栏</div>
<div id="footer2">底部</div>
</body>
</html>

完成实际效果: