前端速成：双月Java之旅（week5）

本文链接：https://blog.csdn.net/weixin_53673193/article/details/126168111

本文介绍了作者在重构HTML页面时，从原本的table布局转向使用<div>标签来分隔内容，以提高页面层次感和CSS样式的应用效率。通过创建多个<div>元素，如div1到div9，分别用于不同的页面区域，如图像、链接、输入框等，使得HTML结构更加清晰，有利于后期的CSS美化工作。

摘要由CSDN通过智能技术生成

今天的任务本来是在昨天做的HTML的基础上添加CSS样式来美化界面，但是经操作发现HTML的布局使用table来操作十分杂乱，不利于使用行标签和块标签对样式进行美化。因此我今天的任务是重新开始做一个HTML，每一步都提前做好<div>标签分隔，使层次感鲜明，便于后期CSS来修饰。

以下是我今天重新敲出的HTML代码，相较于之前的table布局，使用<div>布局更清晰。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>千牛-登录页面</title>
		
	</head>
	<body>
		<div id="div1">
			<a href="https://qn.taobao.com/download.html?spm=a21dvs.23633998.0.0.3ede1359LXwfIP">
				<img src="img/left.png" width="960px">
			</a>
		</div>
		<div id="div2">
			<div id="div3">
				<a href="#"><font size="5" color="black">关于千牛</font></a>
			</div>
			<div id="div4">
				<font size="7">欢迎登录</font>
			</div>
			<div id="div5">
				<font size="6">做生意上千牛</font>
			</div>	
			<div id="div6">
				<div id="div7">
					<span class="login"><font size="6">密码登录</font></span>&nbsp;&nbsp;&nbsp;&nbsp;
					<span><font size="6">短信登录</font></span>
				</div>	
				<div class="input">
					<p><input type="text" value="账户名/邮箱/手机号"><br /></p>
					<p><input type="password" placeholder="请输入登录密码" /></p>
				</div>
				<div id="div8">
					<a href="#"><font size="5" color="black">忘记密码</font></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<a href="#"><font size="5"  color="black">忘记账号</font></a>
				</div><br /><br /><br />
				<div class="div9">
					<input type="button" value="登录" class="button" />
				</div><br /><br />
				<div class="div9">
					<a href="#"><font color="#1E90FF" size="6">0元开店</font></a>&nbsp;&nbsp;&nbsp;&nbsp;
					<a href="#"><font color="#1E90FF" size="6">入驻天猫</font></a>					
				</div>
				<div id="div9">
					<a href="#"><img src="img/code.png" width="150px"/></a>
				</div>
			</div>

		</div>
		
	</body>
</html>