网页设计——5.table布局
今天做一个大的页面,主要是对table布局的理解:
代码:
<table cellspacing=0 border=1 style="bordercolor:#C0C0C0;" align="center" width="100%">
<tr align="center" style="background:#628FC3"><td colspan="5" height="100px" width="100%" >页首</td></tr>
<tr align="center" style="background:#CBDAEB"><td height="30px" width="20%">标题1</td><td width="20%">标题2</td><td width="20%">标题3</td><td width="20%">标题4</td><td width="20%">标题5</td></tr>
<tr align="center"><td height="300px" style="background:#92D050">侧导航栏</td><td colspan="4" style="background:#00B0F0">主页内容</td></tr>
<tr align="center"><td height="50px" colspan="5" style="background:#FFC000">页尾</td></tr>
</table>
效果:
这里需要用到一个取色工具FSCapture,还有对布局的美感掌控。
网页设计——5.table布局的更多相关文章
- 网页设计——HTML(3)布局基础
为什么要布局? 网页布局,也就是如何安排网页的内容. 一个好的网页布局能够使人眼前一亮,吸引流量. 本篇文章中我们不讨论相关的设计理论,我们只对布局所用到的HTML知识进行学习. 几种简单的布局方式 ...
- web网页设计五种布局
1.大框套小框布局 2.通栏布局 3.导航栏在主视觉下方的布局 4.左中右布局 5.环绕式布局
- PS网页设计教程XXX——在PS中创建一个漫画书主题网页布局
作为编码者,美工基础是偏弱的.我们可以参考一些成熟的网页PS教程,提高自身的设计能力.套用一句话,“熟读唐诗三百首,不会作诗也会吟”. 本系列的教程来源于网上的PS教程,都是国外的,全英文的.本人尝试 ...
- css+div网页设计(二)--布局与定位
在网页设计中,能否控制好各个模块中在页面中的位置是非常关键的,与传统的表格定位不同,css+div定位方式更加的灵活,本篇博客将为大家介绍css+div的布局与定位. 一.盒子模型 由图可以看出 盒子 ...
- <转载>网页设计中的F式布局
地址:http://www.uisdc.com/understanding-the-f-layout-in-web-design 网页设计中的F式布局 今天我们来重点介绍网页设计中的F式布局.传统的布 ...
- 网页布局——table布局
table 的特性决定了它非常适合用来做布局,并且表格中的内容可以自动居中,这是之前用的特别多的一种布局方式 而且也加入了 display:table;dispaly:table-cell 来支持 t ...
- 手机web——自适应网页设计(html/css控制) - 51CTO.COM
body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI ...
- 网页基础:网页设计(我所知道的所有的html和css代码(含H5和CSS3)),如有错误请批评指正
最基础的网页设计,就是给你一个图片你做成一个网页,当然,我的工作是C#,个人网页的功底不是很高首先先认识一下网页的一些相关知识: 一般的,现在一个html网页一般包含html文件,css文件,js文件 ...
- table布局与div布局
DIV与TABLE本身并不存在什么优缺点,所谓web标准只是推荐的是正确的使用标签,好比说:DIV用于布局,而TABLE则本来就是转二维数据的.让TABLE做该做的事,并不是说页面里不出现TABL ...
随机推荐
- 使用SQL Server2014作业定时执行无参的存储过程
一.存储过程 1.新建存储过程 按照下图找到存储过程,右键“新建”选择”存储过程” 此时在右侧会打开一个窗口,如下图. 2.填写创建存储过程语句 填写存储过程名称,因为是无参的存储过程,所以把参数部分 ...
- C++ 设计模式 开放封闭原则 简单示例
C++ 设计模式 开放封闭原则 简单示例 开放封闭原则(Open Closed Principle)描述 符合开放封闭原则的模块都有两个主要特性: 1. 它们 "面向扩展开放(Open Fo ...
- Connect the Cities(prim)用prim都可能超时,交了20几发卡时过的
Connect the Cities Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) ...
- HTML5 Geolocation API工作原理[转载]
大家都知道,HTML5 Geolocation 可以使用 IP 地址.基于 Web 的数据库.无线网络连接和三角测量或 GPS 技术来确定经度和纬度. 问题: 在一个基于地理位置服务的个人业余项目(小 ...
- 网页头部 lang的声明
1. 简体中文页面:html lang=zh-cmn-Hans2. 繁体中文页面:html lang=zh-cmn-Hant3. 英语页面:html lang=en 4. <回来>的音频, ...
- linux数据库备份脚本
数据库备份1.创建个备份存储目录mkdir /root/backup/2.以下内容写到dbbackup.sh(注意,使用VIM 或者VI命令新建文件,不要在WINDOWS下新建,否则可能提示 No s ...
- IT屌丝如何获取改变自己的真正内心动力
要想从现在的低薪(年薪10万以下)快读变成未来的高新(年薪30万以上)我们要做的就只有从自身改变开始! 人改变自己的勇气,朱啊哟取决于我们自己当前的痛苦程度!直到某一天真的回避不了了,才会被动的改变, ...
- details和summary可以对内容进行折叠
使用<details>和<summary>元素 它可以在body的任意地方使用下面有一个小例子 <!DOCTYPE html> <html lang=&quo ...
- java三大框架项目和Redis组合使用
已知一个已有的Struts+Spring+Hibernate项目,以前使用MySQL数据库,现在想把Redis也整合进去.1. 相关Jar文件 下载并导入以下3个Jar文件: commons-pool ...
- 微信支付——openid获取不到
1.写微信支付遇到状况,通过wx.login获取code,然后向微信服务器获取openid,获取失败:{"errcode":40029,"errmsg":&qu ...