前端学习day02

最新推荐文章于 2024-08-31 14:18:52 发布

linchuanyi510

最新推荐文章于 2024-08-31 14:18:52 发布

阅读量264

点赞数

本文链接：https://blog.csdn.net/devilincy/article/details/54428135

版权

继续上一次的标签学习，因为要等新同学来，今天没教那么多，老师就给了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不透明，但是图片小，推荐使用