今天做一个大的页面，主要是对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布局的更多相关文章

  1. 网页设计——HTML(3)布局基础

    为什么要布局? 网页布局,也就是如何安排网页的内容. 一个好的网页布局能够使人眼前一亮,吸引流量. 本篇文章中我们不讨论相关的设计理论,我们只对布局所用到的HTML知识进行学习. 几种简单的布局方式 ...

  2. web网页设计五种布局

    1.大框套小框布局   2.通栏布局   3.导航栏在主视觉下方的布局  4.左中右布局  5.环绕式布局

  3. PS网页设计教程XXX——在PS中创建一个漫画书主题网页布局

    作为编码者,美工基础是偏弱的.我们可以参考一些成熟的网页PS教程,提高自身的设计能力.套用一句话,“熟读唐诗三百首,不会作诗也会吟”. 本系列的教程来源于网上的PS教程,都是国外的,全英文的.本人尝试 ...

  4. css+div网页设计（二）--布局与定位

    在网页设计中,能否控制好各个模块中在页面中的位置是非常关键的,与传统的表格定位不同,css+div定位方式更加的灵活,本篇博客将为大家介绍css+div的布局与定位. 一.盒子模型 由图可以看出 盒子 ...

  5. <转载>网页设计中的F式布局

    地址:http://www.uisdc.com/understanding-the-f-layout-in-web-design 网页设计中的F式布局 今天我们来重点介绍网页设计中的F式布局.传统的布 ...

  6. 网页布局——table布局

    table 的特性决定了它非常适合用来做布局,并且表格中的内容可以自动居中,这是之前用的特别多的一种布局方式 而且也加入了 display:table;dispaly:table-cell 来支持 t ...

  7. 手机web——自适应网页设计（html/css控制） - 51CTO.COM

    body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI ...

  8. 网页基础:网页设计(我所知道的所有的html和css代码(含H5和CSS3)),如有错误请批评指正

    最基础的网页设计,就是给你一个图片你做成一个网页,当然,我的工作是C#,个人网页的功底不是很高首先先认识一下网页的一些相关知识: 一般的,现在一个html网页一般包含html文件,css文件,js文件 ...

  9. table布局与div布局

      DIV与TABLE本身并不存在什么优缺点,所谓web标准只是推荐的是正确的使用标签,好比说:DIV用于布局,而TABLE则本来就是转二维数据的.让TABLE做该做的事,并不是说页面里不出现TABL ...

随机推荐

  1. MFC属性表单修改“应用”键名并对其响应

    1.重载CPropertySheet的虚函数OnInitDialog(),添加如下代码 BOOL DialogInputData::OnInitDialog() { BOOL bResult = CP ...

  2. Java8 函数式编程详解

    Java8 函数式编程详解 Author:Dorae Date:2017年11月1日23:03:26 转载请注明出处 说起Java8,可能很多人都已经知道其最大的改进,就是引入了Lambda表达式与S ...

  3. 默认权限umask、文件系统权限、特殊权限

    第1章 权限相关错误 1.1 普通用户 ls /root/ /root  属于root 普通用户没有任何权限,所以无法查看 [oldboy@znix ~]$ ls /root/ ls: cannot ...

  4. java三级考试理论题

    Java试卷 一.单项选择题: 1. 试题: 在WINDOWS环境下,ODBC在__A____中设置 A. 控制面板 B. 注册表 C. 浏览器 D. 写字板 2. 阅读以下描述: C <jsp ...

  5. c++学习笔记---02---从一个小程序说起

    从一个小程序说起 这一讲的主要目的是帮助大家在C语言的背景知识上与C++建立联系. 问题探索 问题:对一个整型数组求和. 要求:定义一个存储着 n 个元素的数组,要求用C语言完成这个任务. 赶紧的:大 ...

  6. Node.js 回调函数

    Node.js 回调函数 Node.js 异步编程的直接体现就是回调. 异步编程依托于回调来实现,但不能说使用了回调后程序就异步化了. 回调函数在完成任务后就会被调用,Node 使用了大量的回调函数, ...

  7. DOM遍历-祖先

    遍历 - 祖先 向上遍历 DOM 树 这些 jQuery 方法很有用,它们用于向上遍历 DOM 树: parent() parents() parentsUntil() jQuery parent() ...

  8. AngularJS学习篇（十四）

    AngularJS 事件 ng-click 指令 ng-click 指令定义了 AngularJS 点击事件. <!DOCTYPE html> <html> <head& ...

  9. jsbin本地部署

    jsbin 本地运行 1.首先安装node.js,下载地址http://nodejs.org/ 安装完成后,使用node.js安装jsbin,如下:进入node环境,执行下面语句: $ npm ins ...

  10. css 3d

    Perspective  透视点,视角,CSS3D 的透视点在浏览器前方 默认值为none,是作用于子元素,指定观察者与z=0平面的距离,使具有三维位置变换的元素产生透视效果.z>0的三维元素比 ...