网页布局实例
2015-07-23 23:48
204 查看
摘自《网页开发手记》
1、效果图:
![](http://img.blog.csdn.net/20150723234725695?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
2、html代码:
1、效果图:
2、html代码:
<?xml version="1.0" encoding="UTF-8"?> <!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" xml:lang="en" lang="en"> <head> <title>网页布局实例</title> <style type="text/css"> *{ margin: 0px; padding: 0px; } #top, #nav, #mid, #footer{ width: 500px; margin: 0px auto } #top{ height: 80; background-color: #dddddd; } #nav{ height: 25px; background-color: #fc0; } #mid{ height: 300px; } #left{ width: 98px; height: 298px; border: 1px solid #999; float: left; background-color: #dddddd; } #right{ height: 300px; background-color: #ccc; } .content{ width: 98px; height: 148px; background-color: #c00; border: 1px solid #999; float: left; } #content2{ background-color: #f60; } #footer{ height: 80px; background-color: #fc0; } </style> </head> <body> <div id="top">顶部广告区</div> <div id="nav">导航区</div> <div id="mid"> <div id="left">纵向导航区</div> <div id="right"> <div class="content">内容</div> <div class="content" id="content2">内容</div> <div class="content">内容</div> <div class="content" id="content2">内容</div> <div class="content" id="content2">内容</div> <div class="content">内容</div> <div class="content" id="content2">内容</div> <div class="content">内容</div> </div> </div> <div id="footer">底部版权区</div> </body> </html>
相关文章推荐
- wpf 关于ContentControl一些记录
- Google Protocol Buffer
- Linux下Arduino IDE无法选择串口的问题
- java理论之java--GUI(图形用户管理)与 IO/流
- [笔记]numpy中的tile与kron的用法
- 回溯法经典案例----N皇后
- 心情
- Cocos2d js 3.2使用Scale9Sprite 九宫图
- 【精】Xcode 常用快捷键
- linux内核定时器
- uva 10069 Distinct Subsequences 不同的序列
- 身为java程序员你需要知道的网站(包含书籍,面试题,架构...)
- [leedcode 122] Best Time to Buy and Sell Stock II
- OOAD理论知识小结
- axure
- jquery-mobile 学习笔记之二(表单创建)
- 跟随大神的脚步学习之Fragment:Android Fragment完全解析,关于碎片你所需知道的一切
- Android相关控件
- 找对英语学习方法的第一本书之:外语环境
- 使用netns虚拟网络进行网络测试