HTML_hao123
来源:互联网 发布:诺依曼枕头 知乎 编辑:程序博客网 时间:2024/06/06 06:39
模仿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>
0 0