HTML_hao123

2017-01-03 11:45:59来源:CSDN作者:twilight_karl人点击

模仿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:
frame_above
测试rules:
rules_all

超简版的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>

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台