前端学习day02

来源：互联网发布：做淘宝运营对数据分析编辑：程序博客网时间：2024/06/02 05:37

继续上一次的标签学习，因为要等新同学来，今天没教那么多，老师就给了2个图片让我们做。如图所示：

1.这个要使用表格table，输入tr*4>td*3，再按Tab，做出个四行三列的表格，将相应的图片和文字排列好。

<div>排版内容<div>
排版中使用，相当于一个容器
确定逻辑部分：逻辑部分是页面上相互关联的一组元素，如栏目版块

<table>表格内容</table> 创建表格

<tr>表格一行</tr> 表格中的一行
<td>表格单元格</td> 表格中的一个单元格
<th>表格表头</th> 表格头部的一个单元

格，表格表头

<!DOCTYPE html><html><head><meta charset="utf-8" /><title>表格</title></head><style type="text/css">#da{width: 1018px;}#xiao{background: url(img/q6011.jpg);}</style><body><div id="da"><img src="img/q2.gif" align="center" width="100%" /><div id="xiao"><a><p>    富丽堂皇的中餐厅，环境优雅的西餐厅，精美特色菜肴，热情一流的服务，定会使您留连忘返。配备高级音响设备的多功能厅，KTV包房，设</p><p>计新颖的桑拿室、棋牌室，为您消除一切疲劳，彻底放松身心。会议室明朗宽敞是您洽谈业务和会谈的理想场所。</p></a><table width="300" height="200" align="center"><tr><td><img src="img/q1.jpg" /></td><td><img src="img/q2.jpg" /></td><td><img src="img/q3.jpg" /></td></tr><tr><td align="center">西餐厅</td><td align="center">中餐厅</td><td align="center">船吧</td></tr><tr><td><img src="img/q4.jpg" /></td><td><img src="img/q5.jpg" /></td><td><img src="img/q6.jpg" /></td></tr><tr><td align="center">夜总会</td><td align="center">KTV包房</td><td align="center">桌球室</td></tr></table></div></div></body></html>

2.这个就麻烦点，模仿百度搜索后的内容样式，比如超链接之类的，我直接把用内联样式写的，看起来比较乱。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>课堂练习</title></head><body><a href="#">最佳的自由行，<span><font color="red">自助游</font></span>分享社区</a><p style="font-size: 13px; height: 5px;">蚂蜂窝!靠谱的<span><font color="red">旅游攻略</font></span>，最佳的自由行，自助游分享社区，海量旅游景点图片、游记、交通、美食、购物等自由行旅游攻略信息，蚂蜂窝旅<p style="font-size: 13px;height: 2px;">游网获取自由行，自助游攻略信息更全面</p></p><p><span><font style="color: green;">http://www.baidu.com</font></span><span><font>2016-8-17</font></span><a href="#" style="font-size:8px;color:darkgray">推广</a></p><p> </p><a href="#">最佳的自由行，<span><font color="red">自助游</font></span>分享社区</a><p style="font-size: 13px;height: 5px;">蚂蜂窝!靠谱的<span><font color="red">旅游攻略</font></span>，最佳的自由行，自助游分享社区，海量旅游景点图片、游记、交通、美食、购物等自由行旅游攻略信息，蚂蜂窝旅<p style="font-size: 13px;height: 5px;">游网获取自由行，自助游攻略信息更全面</p></p><p><span><font style="color: green;">http://www.baidu.com</font></span><span><font>2016-8-17</font></span><a href="#" style="font-size:8px;color:darkgray">推广</a></p><p> </p><a href="#">最佳的自由行，<span><font color="red">自助游</font></span>分享社区</a><p style="font-size: 13px;height: 5px;">蚂蜂窝!靠谱的<span><font color="red">旅游攻略</font></span>，最佳的自由行，自助游分享社区，海量旅游景点图片、游记、交通、美食、购物等自由行旅游攻略信息，蚂蜂窝旅<p style="font-size: 13px;height: 5px;">游网获取自由行，自助游攻略信息更全面</p></p><p><span><font style="color: green;">http://www.baidu.com</font></span><span><font>2016-8-17</font></span><a href="#" style="font-size:8px;color:darkgray">推广</a></p><p> </p><a href="#">最佳的自由行，<span><font color="red">自助游</font></span>分享社区</a><p style="font-size: 13px;height: 15px;">蚂蜂窝!靠谱的<span><font color="red">旅游攻略</font></span>，最佳的自由行，自助游分享社区，海量旅游景点图片、游记、交通、美食、购物等自由行旅游攻略信息，蚂蜂窝旅<br>游网获取自由行，自助游攻略信息更全面</br></p><p><span><font style="color: green;">http://www.baidu.com</font></span><span><font>2016-8-17</font></span><a href="#" style="font-size:8px;color:darkgray">推广</a></p></body></html>

还要一点很重要，关于使用的图片格式。一般都是jpg和png格式的图片，两者有差异

png可透明，缺陷是图片大,加载慢，有时会加载不出来
jpg不透明，但是图片小，推荐使用

0 0