HTML_hao123
2024-04-10 05:42:49
版权声明：本文为博主原创文章，转载请注明出处。 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相关推荐
- HTML_hao123 1
版权声明:本文为博主原创文章,转载请注明出处. https://blog.csdn.net/twilight_karl/article/details/53991140 模仿hao123首页,一些组件 ...
- Vue实现类似于word插入表格时选中行列的效果
首先看一下效果: 实现的思路: 先设置一个容器的,容器中放上10×10的小格子,同时监听容器的进入和离开方法. 每个小格子上设置鼠标进入的方法,同时传入当前的序号,计算出当前的行和列,改变背景颜色. ...
最新文章
- 有没有搞错？Java 对象不使用时，要赋值为 null？
- mnist 0与mnist x 相互衰变半衰期汇总
- 推荐Datawhale整理的秋招求职攻略
- mule 基于wsdl调用cxf web service
- 理解矩阵，矩阵背后的现实意义
- ACM算法--spfa算法--最短路算法
- 阿里AI界的新伙伴，1秒钟自动生成20000条文案
- Java中子类覆盖父类方法所必须满足的条件
- spark sql常用方法
- 简述使jdbc连接mysql数据库_java中简述使用JDBC完成数据库操作的基本步骤。
- TestBench 基本写法与框架
- 南京大学2019计算机学院复试名单,南京大学计算机科学与技术系2019考研复试名单...
- MTK6577+Android环境变量
- android 发短信 oppo,OPPO R11短信发送失败怎么办？OPPO手机短信发送失败的解决方法...
- 数字信号处理之数字混频
- 借力函数计算 FC，HEROZ 打造专业级 AI 日本将棋服务
- 微信小程序-全局数据共享
- hive正则表达式匹配中文或者字符
- 完整的连接器设计手册_CPCI高速背板设计与仿真
- 搜索引擎核心技术与算法 —— 倒排索引