HTML_hao123

原创 2017年01月03日 08:39:50

模仿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>


版权声明:本文为博主原创文章,转载请注明出处。

相关文章推荐

html css应用高仿hao123网站

  • 2014年03月30日 22:21
  • 216KB
  • 下载

使用C#与正则表达式分析hao123.com的网址列表

最近需要一些对网址的分类,来检测本地用户上网的习惯,这样我们就需要一些域名的分类,首先我们就想到了www.hao123.com 通过这个分析,大家可以了解到C#获取网页源代码、调用正则表达式的一些简...

百度收购Hao123始末

百度收购Hao123始末 这个简陋得让精英们不屑一顾的Hao123.com却是全球流量最大的中文网站之一。 在百度诸多的频道中,有一个很特别,它不叫百度...

win10 被KMS 篡改主页 hao123

win10系统下,新安装了office 2016,激活的时候好死不死的使用了KMS 10的一个激活软件。结果使用了重启之后 发现edge 和chrome主页被篡改为 hao123(或者打开之后被重定...

网页抓取hao123的手机号码归属地查询

主要使用IE9自带的分析一下hao123的手机号码归属地查询的问题。            我们先来看看下面的图片吧    在hao123的这个界面里我们只要输入一个手机号不管是移动,联通,电...

浏览器主页被篡改为hao123解决办法

前几天,因为帮一个老师上传资料的网站,大部分文件都需要转成Flash上传,于是都网上找好用的Flash转换软件,结果……电脑中毒了!!!!!,而且还不止一种病毒,分别是“Html.Win32.Scri...

菜鸟吐槽一下hao123

hao123传说是由广东一位只读过初中的网吧管理员创办的(不得不说广东人就是有生意头脑),十年之前就感觉这个导航界面简单,清晰明了,快捷好用,更是在当初网速不怎么给力的情况下,把它作为了自己的浏览器首...

百度5000W收购hao123成功在那里?

hao3被百度收购的消息传出后,在业界引起一片喧哗与骚动,很多人为此困惑不解,为什么这样一个技术简单、仅仅把各类网址收集在一起的网站能够获得百度的青睐,竟然卖出了5000万外加股票期权的天价。不少人在...
  • jc2201
  • jc2201
  • 2015年03月10日 10:07
  • 147

解决chrome浏览器一打开就弹出hao123问题, 流氓花样翻新

今天我也遭遇了打开chrome浏览器就弹出hao123,的问题。几种两种常见的流氓方式都没找到蛛丝马迹,全局搜索一次“chrome“”才算找到所有被篡改的地方,解决问题。 1. 桌面快捷方式目标篡...

hao123.com上的邮箱登录

function G($){return document.getElementById($)} function trim($){$=$.replace(/(^\u3000+)|(\u3000...
  • xxyy888
  • xxyy888
  • 2012年11月24日 20:12
  • 20975
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML_hao123
举报原因:
原因补充:

(最多只允许输入30个字)