版权声明:本文为博主原创文章,转载请注明出处。 https://blog.csdn.net/twilight_karl/article/details/53991140

模仿hao123首页,一些组件还不会做,用图片代替比如:输入框、按钮、动画、链接………….
只是试试简单的表格布局。

table下的边框设置:

frame:

控制外侧边框
void: 不显示表格最外面的4条边线
above: 显示4条边线的上面一条
below: 显示下面的一条线
lhs: 显示左边线
rhs: 显示右边线
hsides: 显示上下边线
vsides: 只显示左右边线
box: 显示所有边线
border: 显示所有边

rules:

控制内侧边框
rows: 只显示横线
cols: 只显示竖线
all: 全部显示
groups: 表示列组合水平部分
none: 不显示任何线

1.当<td>内没有内容时,默认不显示边框,如果想显示空单元格的边框可以在单元格中刚添加一个空格。
2.font中包括其他内部标签时,内部标签中的文字格式不会改变。
3.布局时可以通过标签的潜逃来实现复杂布局。
4.当不设置表格width时,表格的宽度只是确保能包含所有信息。
5.表格的宽度可以使用百分比来设定。
6.当一个属性出现两次时,只有第一次的有效。

测试frame:

测试rules:

超简版的hao123效果如下:

源代码如下:(代码较长..)


<html><head><title>网页标题</title><meta name="keywords" content=""/><meta name="description" content=""/><meta http-equiv="content-type" content="type/html;charset=htf-8"/></head><body><table width='100%' border='0' cellpadding='0'><tr><!--第一列--><td width='60%'><!--嵌套表格--><table><tr><td width='35%' align='right'><img src='https://gss1.bdstatic.com/5eN1dDebRNRTm2_p8IuM_a/res/img/richanglogo168_24.png' height='50'/></td><td><font color='pink' size='2'>设为首页 合肥晴 12 ~ 2℃ 1月02日 周一 十二月初五 星座运势</font></td></tr></table></td><!--第二列--><td align='middle'><font color='pink' size='2'>登录  网盘 邮箱 浏览器 换肤 首钢能否终结连败 </font></td></tr></table><hr/><!--搜索框一行--><table><tr><td width='25%' align='right'><img src='素材/百度标志2.png' width='130' height='70'></td><td width='50%'><!--嵌套表格--><table><tr height='60% '><td><img src='素材/百度搜索框.png'></td></tr><tr valign='bottom'><td><font size='2'>杀毒软件 网络安全 软件学习 c语言编程 怎么学习c语言 百度清理大师 电信公司宽带安装</font></td></tr></table></td><td align='middle'><font size='2'>收购玉米被判刑</font></td></tr></table><table align='center' width='100%' bgcolor='pink' cellsoacing='1'><tr  bgcolor='white'><td bgcolor='green'>首页</td><td>电视剧</td><td>最新电影</td><td>新闻头条</td><td>八卦娱乐</td><td>军事热点</td><td>热门游戏</td><td>小游戏</td><td>今日特价</td><td>特价旅游</td></tr></table><table width='100%' align='center' cellspacing='1'><tr><td>权威推荐</td><td>人民网</td><td>新华网</td><td>央视网</td><td>国际在线</td><td>中国日报网</td><td>中国网</td><td>中国经济网</td><td>光明网</td><td>央广网</td></tr></table><table border='1' width='100%' cellspacing='0' bordercolor='green'><tr><!--1--><td width='23%'><table width='100%' align='middle' cellpadding='2'><tr><td>电视剧|综艺</td><td>游戏|小游戏</td></tr><tr><td>电影|直播</td><td>动画|漫画</td></tr><tr><td>新闻|军事</td><td>旅游|音乐</td></tr><tr><td>彩票|竞猜</td><td>搞笑|小说</td></tr></table><ul align='left'><li>不知道亏大了!今起这些东西统统免费</li><li>中国10亿造的这座桥让网友炸开了锅 </li><li>中国10亿造的这座桥让网友炸开了锅 </li><li>航班穿越了!2017年起飞2016年到达 </li><li>中国10亿造的这座桥让网友炸开了锅 </li><li>外媒这条快讯把特朗普和台湾都撩了 </li></ul><br/><ul align='left'><li>不知道亏大了!今起这些东西统统免费</li><li>中国10亿造的这座桥让网友炸开了锅 </li><li>中国10亿造的这座桥让网友炸开了锅 </li><li>航班穿越了!2017年起飞2016年到达 </li><li>中国10亿造的这座桥让网友炸开了锅 </li><li>外媒这条快讯把特朗普和台湾都撩了 </li></ul><br/><ul align='left'><li>不知道亏大了!今起这些东西统统免费</li><li>中国10亿造的这座桥让网友炸开了锅 </li><li>中国10亿造的这座桥让网友炸开了锅 </li><li>航班穿越了!2017年起飞2016年到达 </li><li>中国10亿造的这座桥让网友炸开了锅 </li><li>外媒这条快讯把特朗普和台湾都撩了 </li></ul></td><!--2--><td width='1%' '></td><td valign='top'><!--3--><!--3.1--><table width='100%' align='top' cellpadding='2' cellspacing='0' border='1' bordercolor='green' rules='none'><colgroup span='6' valign='top' bgcolor='pink'></colgroup><tr valign='top'><td>百度 • 贴吧</td><td>新浪 • 微博</td><td>搜狐 • 热点</td><td>腾 讯</td><td>网 易</td><td>优 酷 网</td></tr><tr><td>百度 • 贴吧</td><td>新浪 • 微博</td><td>搜狐 • 热点</td><td>腾 讯</td><td>网 易</td><td>优 酷 网</td></tr><tr><td>百度 • 贴吧</td><td>新浪 • 微博</td><td>搜狐 • 热点</td><td>腾 讯</td><td>网 易</td><td>优 酷 网</td></tr><tr><td>百度 • 贴吧</td><td>新浪 • 微博</td><td>搜狐 • 热点</td><td>腾 讯</td><td>网 易</td><td>优 酷 网</td></tr><tr><td>百度 • 贴吧</td><td>新浪 • 微博</td><td>搜狐 • 热点</td><td>腾 讯</td><td>网 易</td><td>优 酷 网</td></tr><tr><td>百度 • 贴吧</td><td>新浪 • 微博</td><td>搜狐 • 热点</td><td>腾 讯</td><td>网 易</td><td>优 酷 网</td></tr></table><!--表格之间的内容--><table align='center' width='80%'><tr><td>聚划算</td><td>京东机票</td><td>春运抢票</td><td>9块9包邮</td><td>2017新传奇</td><td>蓝月传奇</td><td>创业商机网</td><td>高清剑客男</td></tr></table><!----><!--3.2--><table width='100%' align='top' cellpadding='2' cellspacing='0' border='1' bordercolor='green' rules='none'><tr><td>百度 • 贴吧</td><td>新浪 • 微博</td><td>搜狐 • 热点</td><td>腾 讯</td><td>网 易</td><td>优 酷 网</td></tr><tr><td>百度 • 贴吧</td><td>新浪 • 微博</td><td>搜狐 • 热点</td><td>腾 讯</td><td>网 易</td><td>优 酷 网</td></tr><tr><td>百度 • 贴吧</td><td>新浪 • 微博</td><td>搜狐 • 热点</td><td>腾 讯</td><td>网 易</td><td>优 酷 网</td></tr><tr><td>百度 • 贴吧</td><td>新浪 • 微博</td><td>搜狐 • 热点</td><td>腾 讯</td><td>网 易</td><td>优 酷 网</td></tr><tr><td>百度 • 贴吧</td><td>新浪 • 微博</td><td>搜狐 • 热点</td><td>腾 讯</td><td>网 易</td><td>优 酷 网</td></tr><tr><td>百度 • 贴吧</td><td>新浪 • 微博</td><td>搜狐 • 热点</td><td>腾 讯</td><td>网 易</td><td>优 酷 网</td></tr></table><!--表格之间的内容--><table align='center' width='80%'><tr><td>聚划算</td><td>京东机票</td><td>春运抢票</td><td>9块9包邮</td><td>2017新传奇</td><td>蓝月传奇</td><td>创业商机网</td><td>高清剑客男</td></tr></table><!----><!--3.3--><table width='100%' align='top' cellpadding='2' cellspacing='0' border='1' bordercolor='green' rules='none'><tr valign='top'><td>百度 • 贴吧</td><td>新浪 • 微博</td><td>搜狐 • 热点</td><td>腾 讯</td><td>网 易</td><td>优 酷 网</td></tr><tr><td>百度 • 贴吧</td><td>新浪 • 微博</td><td>搜狐 • 热点</td><td>腾 讯</td><td>网 易</td><td>优 酷 网</td></tr><tr><td>百度 • 贴吧</td><td>新浪 • 微博</td><td>搜狐 • 热点</td><td>腾 讯</td><td>网 易</td><td>优 酷 网</td></tr><tr><td>百度 • 贴吧</td><td>新浪 • 微博</td><td>搜狐 • 热点</td><td>腾 讯</td><td>网 易</td><td>优 酷 网</td></tr><tr><td>百度 • 贴吧</td><td>新浪 • 微博</td><td>搜狐 • 热点</td><td>腾 讯</td><td>网 易</td><td>优 酷 网</td></tr><tr><td>百度 • 贴吧</td><td>新浪 • 微博</td><td>搜狐 • 热点</td><td>腾 讯</td><td>网 易</td><td>优 酷 网</td></tr></table><!--表格之间的内容--><table align='center' width='80%'><tr><td>聚划算</td><td>京东机票</td><td>春运抢票</td><td>9块9包邮</td><td>2017新传奇</td><td>蓝月传奇</td><td>创业商机网</td><td>高清剑客男</td></tr></table><!----><!--3.4--><table width='100%' align='top' cellpadding='2' cellspacing='0' border='1' bordercolor='green' rules='none'><tr valign='top'><td>百度 • 贴吧</td><td>新浪 • 微博</td><td>搜狐 • 热点</td><td>腾 讯</td><td>网 易</td><td>优 酷 网</td></tr><tr><td>百度 • 贴吧</td><td>新浪 • 微博</td><td>搜狐 • 热点</td><td>腾 讯</td><td>网 易</td><td>优 酷 网</td></tr><tr><td>百度 • 贴吧</td><td>新浪 • 微博</td><td>搜狐 • 热点</td><td>腾 讯</td><td>网 易</td><td>优 酷 网</td></tr><tr><td>百度 • 贴吧</td><td>新浪 • 微博</td><td>搜狐 • 热点</td><td>腾 讯</td><td>网 易</td><td>优 酷 网</td></tr><tr><td>百度 • 贴吧</td><td>新浪 • 微博</td><td>搜狐 • 热点</td><td>腾 讯</td><td>网 易</td><td>优 酷 网</td></tr><tr><td>百度 • 贴吧</td><td>新浪 • 微博</td><td>搜狐 • 热点</td><td>腾 讯</td><td>网 易</td><td>优 酷 网</td></tr></table></td></tr></table></body>
</html>

HTML_hao123 1相关推荐

  1. HTML_hao123

    版权声明:本文为博主原创文章,转载请注明出处. https://blog.csdn.net/twilight_karl/article/details/53991140 模仿hao123首页,一些组件 ...

  2. Vue实现类似于word插入表格时选中行列的效果

    首先看一下效果: 实现的思路: 先设置一个容器的,容器中放上10×10的小格子,同时监听容器的进入和离开方法. 每个小格子上设置鼠标进入的方法,同时传入当前的序号,计算出当前的行和列,改变背景颜色. ...

最新文章

  1. VS如何新建一个基于对话框的MFC工程并添加按钮
  2. 【机器视觉】 throw算子
  3. 26.多线程join detach
  4. C++中的结构体函数
  5. Spring Validation校验
  6. libevent c++高并发网络编程_【多线程高并发编程】Callable源码分析
  7. 微课系列(5):Python程序中__name__变量的用法
  8. TcxLookupComboBox
  9. SFTP上传下载文件
  10. 测试人员必备-adb常用基础命令
  11. 【SVM分类】基于改进鲸鱼算法优化最小二乘支持向量机实现数据分类matlab代码
  12. 全面了解三极管——三极管基本参数2
  13. 多头平仓,白糖再度下跌
  14. 动画:二叉树有几种存储方式?(上)
  15. laravel异常前后端独立返回 阿星小栈
  16. printf的计算和输出顺序
  17. 如何设置SOCKS5代理?最全方法汇总!
  18. python怎样安装whl文件
  19. Matlab之读取shp文件函数shaperead
  20. Oralce swap 100%案例分析

热门文章

  1. weex的使用初体验
  2. linux常用基础命令整理
  3. C++11多线程第三篇:线程传参详解,detach()大坑,成员函数做线程参数
  4. 【Windows】Windows如何使用注册表设置/清除开机自启动软件?
  5. 【营销】史上最全4P、4C、4S、4R、4V、4I营销理论
  6. 归因分析计算因子贡献度常见的方法
  7. php interface 抽象类,解析PHP中的抽象类(abstract class)和 接口(interface)
  8. 职场切记:没有苦劳,只有功劳!
  9. 田野调查手记·浮山篇(七)
  10. HCNP学习笔记之IP地址、子网掩码、网关的关系