简单的应用型网页布局
来源：互联网 发布：举世为知其书 编辑：程序博客网 时间：2024/05/08 05:10
我个人理解应用型网页，就是一些用户的个人操作页面，比如说邮箱，博客，后台系统等...
这一类的网页据我观察，貌似都是自适应宽度，在整个网页显示的,这一类网页验证方式（按住ctrl键，滚动鼠标滑轮，发现宽度和高度不是等比例缩放的。）
大概如同上图的布局，在不追求方便搜索引擎操的情况下，操作内容那一块也可以用一个分帧来存放页面，代码如下。
<!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=utf-8">
<title>blog</title>
<style type="text/css">
body, ul, li, h1, h2, h3, h4, h5, h6, p, form, dl, dt, dd { margin: 0px; padding: 0px; font-size: 12px; font-weight: normal; }
ul { list-style: none; }
img { border-style: none; }
body{background:#ccc; font-size:30px;}
#header{height:80px; background:#00f;margin:10px 30px ;}
#search{height:35px;background:gray;margin:0px 30px 10px 30px; text-align:right;}
#navigator{width:270px; float:left;margin-left:30px;height:350px;background:#0f0;}
#right{margin-left:310px;margin-right:30px;height:350px;background:#f00;}
#footer{margin:10px 30px 0 30px;height:80px;background:gray;}
</style>
</head>
<body>
<div id="header">标题</div>
<div id="search">查询栏目</div>
<div id="navigator">导航栏</div>
<div id="right">操作内容</div>
<div id="footer">页脚</div>
</body>
</html>
自己今天突然心血来潮，想把常见的网页布局都做出来，方便布局的时候直接去代码，也方便自己的布局结构思路更清晰，如果有什么不对的，或者不是很好的地方请您留言告诉我，我会尽力改正，谢谢！
- 简单的应用型网页布局
- div的简单应用---网页的简单布局
- 简单的网页布局
- 简单的CSS网页布局
- 实现CSS网页布局的简单原理
- 一个简单的网页布局HTML+CSS
- 一个网页的Table简单布局
- 使用CSS进行简单的网页布局
- html表格实战<<简单的网页布局>>
- 网页简单布局-混合布局
- HTML5第六课时，布局的简单应用
- dwr 网页推送的简单应用
- 交互式网页应用的网页开发技术Ajax简单介绍
- 网页布局中CSS的Class灵活应用
- 网上商城—网页布局和树标签的应用
- 简单的网页布局实战（表格与HTML框架）
- 《基础网页制作》一个超简单的div布局，制作静态网页很简单
- javascript的应用，简单设计切换网页主题的应用
- 十万个为什么-Oracle(0-100)
- Storm – Kafka – Cassandra for Big Data System
- spring aop注解配置web日志
- Java内部类详解（三）
- DirectX 操作.X格式文件总结
- 简单的应用型网页布局
- 某软件公司面试经历
- Boost中获取本地时间表示的秒钟值时的一点小问题
- java复制文件或文件夹
- python 异或两个文件
- Struts2——（1）Struts2入门
- ckeditor的详细配置
- makefile
- 数据字典简介
