html+css简单应用
- 效果图
-
原图
- 我的效果图
-
代码
- html文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./hw3.css"> </head> <body> <table border="3" width="1000" class="black"> <tr> <td colspan="21" > <img src="./logo.gif" alt="" align="left"> <img src="./welcome.jpg" alt="" align="right"> </td> </tr> </table> <table width="1000"> <tr> <td><a href="">首页</a>-</td> <td><a href="">新闻</a>-</td> <td><a href="">军事</a>-</td> <td><a href="">文化</a>-</td> <td><a href="">历史</a>-</td> <td><a href="">体育</a>-</td> <td><a href="">NBA</a>-</td> <td><a href="">视频</a>-</td> <td><a href="">娱乐</a>-</td> <td><a href="">财经</a>-</td> <td><a href="">股票</a>-</td> <td><a href="">科技</a>-</td> <td><a href="">汽车</a>-</td> <td><a href="">房产</a>-</td> <td><a href="">时尚</a>-</td> <td><a href="">母婴</a>-</td> <td><a href="">教育</a>-</td> <td><a href="">健康</a>-</td> <td><a href="">旅游</a>-</td> <td><a href="">美食</a>-</td> <td><a href="">星座</a>-</td> </tr> </table> <img src="./banner.jpg" alt="" width="1000"> <table border="1"> <tr> <td width="700"> <h2>我坐着百度的自动驾驶汽车在北京五环上转了一圈</h2> <p>和普通汽车不同，这辆车的车顶上多了一个激光雷达，其实很多曝光过的研究中的自动驾驶汽车例如 Google car等都在用它，虽然昂贵，大概在6至7万美金，但它就像汽车一双明亮的眼晴.</p> <img src="./car.png" alt="" width="700"> </td> <td> <table border="1" width="280"> <tr> <td valign="top" colspan="2" class="xprp"> 新品测评 </td> </tr> <tr> <td><img src="./mobile2.jpg" alt="" width="120"></td> <td> <table> <tr> <td>iPhone6s</td> </tr> <tr> <td class="xz">配置升级/高端大气</td> </tr> <tr> <td><img src="./笑脸.jpg" width="18" alt=""> <span class="hc">70%</span>喜欢</td> </tr> </table> </td> </tr> <tr> <td><img src="./mobile3.jpg" alt="" width="120"></td> <td> <table> <tr> <td>iPhone6s</td> </tr> <tr> <td class="xz">配置升级/高端大气</td> </tr> <tr> <td><img src="./笑脸.jpg" width="18" alt=""> <span class="hc">70%</span>喜欢</td> </tr> </table> </td> </tr> <tr> <td><img src="./mobile4.jpg" alt="" width="120"></td> <td> <table> <tr> <td>iPhone6s</td> </tr> <tr> <td class="xz">配置升级/高端大气</td> </tr> <tr> <td><img src="./笑脸.jpg" width="18" alt=""> <span class="hc">70%</span>喜欢</td> </tr> </table> </td> </tr> <tr> <td><img src="./mobile5.jpg" alt="" width="120"></td> <td> <table> <tr> <td>iPhone6s</td> </tr> <tr> <td class="xz">配置升级/高端大气</td> </tr> <tr> <td><img src="./笑脸.jpg" width="18" alt=""> <span class="hc">70%</span>喜欢</td> </tr> </table> </td> </tr> <tr> <td><img src="./mobile1.jpg" alt="" width="120"></td> <td> <table> <tr> <td>iPhone6s</td> </tr> <tr> <td class="xz">配置升级/高端大气</td> </tr> <tr> <td><img src="./笑脸.jpg" width="18" alt=""> <span class="hc">70%</span>喜欢</td> </tr> </table> </td> </tr> </table> </td> </tr> </table> <br> <table width="700"> <tr> <td align="left" class="zc"> 今日推荐</td> <td align="right"> 近期热点：<span class="hc">快看过来！搜狐科技寻人启事</span> </td> </tr> </table> <table class="grey"> <tr> <td width="163"><img src="./sony.jpg" alt="" width="150"> </td> <td width="163" class="xc">索尼经典机型大盘点 <br> <p class="xz">索尼的工业设计可以说代表了日本现代的工业设计发展水平</p> </td> <td> </td> <td width="163"><img src="./ios.jpg" alt="" width="150"></td> <td width="163" class="xc">i0S9.2正式版24小时使用感受 <br> <p class="xz">苹果在这版本新增十分重要而且有用的功能</p> </td> </tr> </table> <br> <table width="900" border="0" class="grey" > <tr> <td align="left" colspan="11" class="zc" > 快速入口</td> </tr> <tr> <td > </td> <td valign="top" class="white" > <table width="160" > <tr> <td colspan="2" align="center" class="bolder" >子频道</td> </tr> <tr> <td align="center">手机频道</td> <td align="center">移动应用</td> </tr> <tr> <td align="center">平板电脑</td> <td align="center">笔记本</td> </tr> <tr> <td align="center">数码相机</td> <td align="center">家电</td> <td></td> <td></td> </tr> </table> </td> <td > </td> <td class="white"> <table width="163"> <tr> <td colspan="2" align="center" class="bolder" >产品库</td> </tr> <tr> <td align="center">笔记本</td> <td align="center">平板电脑</td> </tr> <tr> <td align="center">电脑整机</td> <td align="center">手机</td> </tr> <tr> <td align="center">数码相机</td> <td align="center">摄像机</td> </tr> <tr> <td align="center">液晶电视</td> <td align="center">空调</td> </tr> <tr> <td align="center">冰箱</td> <td align="center">热水器</td> </tr> </table> </td> <td> </td> <td class="white"> <table width="163"> <tr> <td colspan="2" align="center" class="bolder">数码公社</td> </tr> <tr> <td align="center">苹果公社</td> <td>安卓公社</td> </tr> <tr> <td align="center">微软公社</td> <td align="center">塞班公社</td> </tr> <tr> <td align="center">Win8专区</td> <td align="center">相机论坛</td> </tr> <tr> <td align="center">人像摄影</td> <td align="center">风光人文</td> </tr> <tr> <td align="center">俱乐部</td> <td align="center">活动专区</td> </tr> </table> </td> <td> </td> <td valign="top" align="center" class="white"> <table width="163"> <tr> <td colspan="2" align="center" class="bolder">热门标签</td> </tr> <tr> <td align="center">新iPad</td> <td align="center">HTC one</td> </tr> <tr> <td align="center">佳能</td> <td align="center">尼康</td> </tr> <tr> <td align="center">数码相机</td> <td align="center">家电</td> </tr> </table> </td> <td> </td> <td class="white"> <table width="163" > <tr> <td colspan="2" align="center" class="bolder">关注我们</td> </tr> <tr> <td><img src="./sohu.jpg" alt=""></td> <td>新浪微博</td> </tr> <tr> <td><img src="./APP.jpg" alt=""></td> <td>APP客户端</td> </tr> <tr> <td><img src="./RSS.jpg" alt=""></td> <td>RSS</td> </tr> </table> </td> <td > </td> </tr> <tr> <td align="left" colspan="9" class="zc"> 合作伙伴</td> </tr> <tr> <td colspan="11"> 极果 |智东西 |天极网 |驱动之家 |PConline 丨中关村在线 |威锋网 |泡泡网 丨IT168网 |电脑报在线 |hao123电天堂 |乐侠单机游戏 | 华强北电脑网</td> </tr> </table> <hr> <p > Copyright ©2015 Sohu.com Inc.A11 Rights Reserved. 搜狐公司 版权所有 全部新闻 全部博文 </p> </body> </html>- css文件
table.grey { background-color: #c0c0c0; border-top-style: solid ; border-color: black; border-top-width: 1px; } td.xprp{ border-top-width: 3px; border-left-width: 1px; border-right-width: 1px; border-bottom-width: 1px; background-color: yellow; border-style: solid; font-size: 20px; font-family: '宋体'; font-weight: bolder; } .white { background-color: white; } .xc { font-weight: bold; } .xz { font-size: small; color: grey } .hc { font-size: smaller; color: red; font-weight: bolder; } .topline { border-top: 2px black solid; } .bolder { font-weight: bolder; } .black { background-color: black; } -
注意事项
表格嵌套一定要在 td后加table，而不是tr后加table
以图片中的新品测评模块为例。这一模块由可以由两个表格的嵌套完成
首先，在外围建一个6*2的大表格
之后，在第一行合并列填写文字，调整css样式
在第二行左边（第一列）插入图片，设置css样式；
在第二行右边（第二列）新建一个3*1的table，在td中填写内容，并且设置css样式
-
基础知识
a. span 标签
<span class=xx>内容</span>语法说明：
- span标签是内联元素（不换行），不像块级元素（如：div标签、p标签等）那样有换行的效果；
- 如果不对span元素应用样式（使用css），使用span标签没有任何的显示效果；
- span标签可以设置id或class属性，这样不仅能增加语义，还能更方便的对span元素应用样式；
b. table标签
<table> <tr> <td> </td> </tr> </table>语法说明：table详细用法
