基于HTML和CSS完成京东页面的制作

最新推荐文章于 2024-01-12 09:36:39 发布

小希一夏

最新推荐文章于 2024-01-12 09:36:39 发布

阅读量1.1w

点赞数 21

文章标签： HTML CSS 京东页面制作

本文链接：https://blog.youkuaiyun.com/weixin_42454678/article/details/99480188

版权

首先打开京东页面分析页面元素
在这里插入图片描述
由图可把整个页面分为4个部分，分别为top顶部部分，tip提示部分，mid中间部分，foot底部部分
然后编写每一部分的代码，边写边测试结果，防止一步错步步错
代码如下：
HTML部分：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/jd-work.css"/>
	</head>
	<body>
		<div class="top">
			<img src="https://misc.360buyimg.com/lib/img/e/logo-201305-b.png" id="img_1"/>
			<span id="login">欢迎登录</span>
			<div class="top_1">
				<a href="" id="top_a">登录页面，调查问卷</a>
			</div>
		</div>
		<div class="tip">
			<span>依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！ 新版《京东隐私政策》已上线，将更有利于保护您的个人隐私。</span>
		</div>
		<div class="mid">
			<div class="mid_1">
			</div>
		</div>
		<div class="foot">
			<div class="foot_1">
				<ul id="ul_1">

最低0.47元/天解锁文章