Web前端作业笔记详细记录2

最新推荐文章于 2022-06-28 17:03:37 发布

长高

最新推荐文章于 2022-06-28 17:03:37 发布

阅读量400

点赞数 5

分类专栏：学习笔记文章标签： css html css3 html5

©长高

本文链接：https://blog.csdn.net/weixin_45677047/article/details/104565563

版权

学习笔记专栏收录该内容

11 篇文章 2 订阅

订阅专栏

这次Web作业有点难度，打了一天的代码才能完全正确符合老师的要求，考察的是关于表格和框架的结合用法，如果要查看表格和框架的用法，请百度。
在你浏览之前建议先对CSS有一定的了解与联系。
在这里插入图片描述
本次作业的解析写法
请勿抄袭该作业内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>作业3</title>
		<style type="text/css"><!--CSS内部声明-->
			p{
				text-align: left;
				font-family:"microsoft yahei";
				text-indent:1em;
			}
			.left{
				text-align: left;font-size: smaller;
			}
			.center{
				text-align:center;font-size:smaller;
			}
			a{
				font-size:large;
				font-family:"microsoft yahei";
				color:deepskyblue;
				font-weight: 900;
			}
			span{
				color:#808080;
			}
		</style>
	</head>
	<body>
		<div style="float: left;"><!--div布局从上至下变为从左至右-->
		<table cellspacing="0" cellpadding="0"><!--使用三个表格,这里是第一个表格-->
			<tr>
			<td>
					<img src="图片地址"/>
			</td>
			<td>
				<img src="图片地址"/>
			</td>
			</tr>
		</table>
		</div>
		<div style="float: left;">&nbsp;</div><!--这里是为了使用空格才使用&nbsp;-->
		<div class="center" style="float: left;">
			<table frame="box" cellpadding="0" cellspacing="0" height="400">
			<!--上面的frame是关键属性，如果你要如图所示的效果，建议使用frame属性,且这是第二个表格-->
			<tr>
			<td>
			<img src="图片地址"/>
			</td>
			</tr>
			<tr>
			<td>
			<a>店铺遭恶意改价和攻击，3分钟卖出100</a>
			<p><span>摘要：</span>[短短3分钟内，我的店铺竟以07折被卖掉了100瓶产品……]</p>
			<p><span>相关：</span>[10平米小黑屋里诞生的四皇冠][游戏玩家让人喷饭的游戏百态]</p>
			<p><span>更多：</span>[雷人买家评语和爆笑卖家解释][麻辣搜店更多话题]</p>
			</td>
			</tr>
			<tr>
			<td>
			<a>天啊！凤姐来袭，看小掌柜如何招架！</a>
			<p><span>摘要：</span>[无论压力有多大，不要让岁月把你磨成老头……]</p>
			<p><span>相关：</span>[拒绝辐射尾气 给妆容减负][美发 保养的秘诀在于折腾]</p>
			<p><span>更多：</span>[励志！学习大S的美白精神][关注淘宝达人]</p>
			</td>
			</tr>
			<tr>
			<td>
			<a>旁人靠边站！忙碌通勤族的护肤指南</a>
			<p><span>摘要：</span>[无论压力有多大，不要让岁月把你磨成老头……]</p>
			<p><span>相关：</span>[拒绝辐射尾气 给妆容减负][美发 保养的秘诀在于折腾]</p>
			<p><span>更多：</span>[励志！学习大S的美白精神][关注淘宝达人]</p>				
			</td>
			</tr>
			</table>
		</div>
		<div style="float: left;">&nbsp;</div>
		<div style="float: left;" class="center">
			<table frame="box" cellpadding="0" cellspacing="0"height="429"><!--第三个表格-->
			<tr>
			<td>
			<img src="图片地址"/>
			</td>
			</tr>
			<tr>
			<td style="text-align: left;font-family:'Microsoft YaHei'";>
			<ul><!--列表的使用-->
			<li>
				淘宝论坛婚嫁分区华丽上线
			</li>
			<li>
				淘宝论坛用户条款
			</li>
			<li>
				年度论坛百名优秀志愿者评选
			</li>
			<li>
				论坛用户负分自救途径说明
			</li>
			<li>
				论坛用户被拉黑后的自救途径
			</li>
			<li>
				淘宝论坛发帖回帖等级限制
			</li>
			</ul>
			</td>
			</tr>
			<tr>
			<td>
			<img src="图片地址"/>&nbsp;
			</td>
			</tr>
			<tr>
				<td>&nbsp;</td>
			</tr>
			<tr>
			<td>
			<img src="图片地址"/>&nbsp;
			</td>
			</tr>
			<tr>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<td>&nbsp;</td>
			</tr>
			</table>
		</div>
	</body>
</html>

代码效果图：
在这里插入图片描述
本次作业重点内容考察：

表格的进阶
CSS的使用(内部用法)
HTML 4.01 符号实体
DIV布局的规则以及相关属性变法

以上就是本次作业的解析，如果你对此感兴趣可以点赞并且关注，感谢你的观看！

（好歹敲了半天的代码，调整了一天的排版，几个赞也不多吧？）

长高

关注

5
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Web前端作业笔记详细记录2

这次Web作业有点难度，打了一天的代码才能完全正确符合老师的要求，考察的是关于表格和框架的结合用法，如果要查看表格和框架的用法，请百度。在你浏览之前建议先对CSS有一定的了解与联系。本次作业的解析写法请勿抄袭该作业内容<!DOCTYPE html><html> <head> <meta charset="utf-8"> <...
复制链接

扫一扫