练习(四) 仿京东(下) html+css

最新推荐文章于 2023-12-31 16:44:35 发布
最新推荐文章于 2023-12-31 16:44:35 发布
阅读量683 收藏 6
点赞数
文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hyugyug/article/details/102630010
版权

本次是仿京东底部
效果图：
在这里插入图片描述
html代码：

<!-- 底部部分 start -->
		<footer>
			<!-- 服务模块 -->
			<div class="service">
				<div class="w">
			        <ul>
					    <li>
							<h5></h5>
							<p>品类齐全，轻松购物</p>
						</li>
						<li>
							<h5></h5>
							<p>多仓直发，极速配送</p>
						</li>
						<li>
							<h5></h5>
							<p>正品行货，精致服务</p>
						</li>
						<li>
							<h5></h5>
							<p>天天低价，畅选无忧</p>
						</li>
				    </ul>
				</div>
			</div>
			<!-- 帮助模块 -->
			<div class="help w">
				<div class="fl">
					<dl>
						<dt>购物指南</dt>
						<dd><a href="#">购物流程</a></dd>
						<dd><a href="#">会员介绍</a></dd>
						<dd><a href="#">生活旅行</a></dd>
						<dd><a href="#">常见问题</a></dd>
						<dd><a href="#">大家电</a></dd>
						<dd><a href="#">联系客服</a></dd>
					</dl>
					<dl>
						<dt>配送方式</dt>
						<dd><a href="#">购物流程</a></dd>
						<dd><a href="#">会员介绍</a></dd>
						<dd><a href="#">生活旅行</a></dd>
						<dd><a href="#">常见问题</a></dd>
						<dd><a href="#">大家电</a></dd>
						<dd><a href="#">联系客服</a></dd>
					</dl>
					<dl>
						<dt>支付方式</dt>
						<dd><a href="#">购物流程</a></dd>
						<dd><a href="#">会员介绍</a></dd>
						<dd><a href="#">生活旅行</a></dd>
						<dd><a href="#">常见问题</a></dd>
					</dl>
					<dl>
						<dt>售后服务</dt>
						<dd><a href="#">购物流程</a></dd>
						<dd><a href="#">会员介绍</a></dd>
						<dd><a href="#">生活旅行</a></dd>
						<dd><a href="#">常见问题</a></dd>
						<dd><a href="#">大家电</a></dd>
					</dl>
					<dl>
						<dt>特色服务</dt>
						<dd><a href="#">购物流程</a></dd>
						<dd><a href="#">会员介绍</a></dd>
						<dd><a href="#">生活旅行</a></dd>
						<dd><a href="#">常见问题</a></dd>
						<dd><a href="#">大家电</a></dd>
						<dd><a href="#">联系客服</a></dd>
					</dl>
				</div>
				<div class="coverage fr">
					<h5>京东自营覆盖区县</h5>
					<p>京东已向全国2661个区县提供自营配送服务，支持货到付款、POS机刷卡和售后上门服务。</p>
					<a href="#">查看详情 ></a>
				</div>
			</div>
			<!-- 版权部分 -->
			<div class="w copyright">
				<p>
					<a href="#">关于我们</a>
					<span>|</span>
					<a href="#">联系我们</a>
					<span>|</span>
					<a href="#">联系客服</a>
					<span>|</span>
					<a href="#">合作招商</a>
					<span>|</span>
					<a href="#">商家帮助</a>
					<span>|</span>
					<a href="#">营销中心</a>
					<span>|</span>
					<a href="#">手机京东</a>
					<span>|</span>
					<a href="#">友情链接</a>
					<span>|</span>
					<a href="#">销售联盟</a>
					<span>|</span>
					<a href="#">京东社区</a>
					<span>|</span>
					<a href="#">风险监测</a>
					<span>|</span>
					<a href="#">隐私政策</a>
					<span>|</span>
					<a href="#">京东公益</a>
					<span>|</span>
					<a href="#">English Site</a>
					<span>|</span>
					<a href="#">Media & IR</a>
				</p>
				<div class="copyright-cert">
				    <p>
					    <a href="#">京公网安备 11000002000088号</a>
						<span>|</span>
						京ICP证070359号
						<span>|</span>
						<a href="#">互联网药品信息服务资格证编号(京)-经营性-2014-0008</a>
						<span>|</span>
						新出发京零 字第大120007号
					</p>
					<p>
						互联网出版许可证编号新出网证(京)字150号
						<span>|</span>
						<a href="#">出版物经营许可证</a>
						<span>|</span>
						<a href="#">网络文化经营许可证网文[2014]2148-348号</a>
						<span>|</span>
						违法和不良信息举报电话：4006561155
					</p>
					<p>
						Copyright © 2004 - 2019  京东JD.com 版权所有
						<span>|</span>
						消费者维权热线：4006067733
						<a href="#">经营证照</a>
						<span>|</span>
						(京)网械平台备字(2018)第00003号
						<span>|</span>
						<a href="#">营业执照</a>
					</p>
			</div>
			<div class="copyright-inter">
				<p>
					<a href="#"><span></span>Global Site</a>
					<span>|</span>
					<a href="#"><span></span>Сайт России</a>
					<span>|</span>
					<a href="#"><span></span>Situs Indonesia</a>
					<span>|</span>
					<a href="#"><span></span>Sitio de España</a>
					<span>|</span>
					<a href="#"><span></span>เว็บไซต์ประเทศไทย</a>
				</p>
			</div>
			<div class="copyright-subsites">
				<p>
					京东旗下网站：
					<a href="#">京东钱包</a>
					<span>|</span>
					<a href="#">京东云</a>
				</p>
			</div>
			<div class="copyright-auth">
				<p>
					<a href="#"></a>
					<a href="#"></a>
					<a href="#"></a>
					<a href="#"></a>
					<a href="#"></a>
				</p>
			</div>
		</footer>
		<!-- 底部部分 end -->

css代码：

/* 底部部分 */
footer {
	height: 560px;
	background-color: #f4f4f4;
	margin-top: 10px;
}
/* 服务模块 */
.service {
	padding: 40px 0 30px;
	border-bottom: 1px solid #e4e4e4;
	overflow: hidden;
}
.service ul li {
	height: 42px;
	width: 207px;
	margin: 0 45px;
	line-height: 42px;
	float: left;
}
.service li h5 {
	width: 37px;
	height: 42px;
	background: url(../images/footer.png) no-repeat 0 -192px;
	float: left;
}
.service li:nth-child(2) h5{
	background-position: -41px -192px;
}
.service li:nth-child(3) h5{
	background-position: -82px -192px;
}
.service li:nth-child(4) h5{
	background-position: -123px -192px;
}
.service li p {
	font-size: 18px;
	font-weight: 700;
	margin-left: 45px;
}

/* 帮助模块 */
.help {
	height: 200px;
	border-bottom: 1px solid #e4e4e4;
	padding-top: 25px;
	box-sizing: border-box;
}
.help dl {
	width: 194px;
	display: inline-block;
	vertical-align: top;
}
.help dt {
	height: 30px;
	font-size: 14px;
	font-weight: 700;
	color: #636363;
}
.help dd {
	height: 22px;
	font-size: 12px;
}
.help a {
	color: #747474;
}
.help a:hover {
	color: #E1251B;
}
/* 范围 */
.coverage {
	height: 150px;
	width: 200px;
	padding: 0 13px;
	box-sizing: border-box;
	background: url(../images/footer.png) no-repeat;
}
.coverage h5 {
	height: 38px;
	font-size: 14px;
	color: #636363;
	padding-left: 30px;
}
.coverage p {
	/* width: 174px; */
	line-height: 18px;
	font-size: 12px;
	color: #747474;
}
.coverage a {
	font-size: 12px;
	margin-top: 6px;
	display: block;
	text-align: right;
}

/* 版权模块 */
.copyright {
	font-size: 12px;
	padding-top: 18px;
	text-align: center;
}
.copyright>p a {
	color: #747474;
}
.copyright p a:hover {
	color: #E1251B;
}
.copyright span {
	color: #9E9E9E;
	padding: 7px;
}
.copyright-cert {
	margin-top: 10px;
}
.copyright-cert p {
	color: #9e9e9e;
	line-height: 22px;
}
.copyright-inter p{
	line-height: 22px;
}
.copyright-inter a span {
	display: inline-block;
	width: 15px;
	height: 12px;
	padding: 0px;
	margin-right: 10px;
	vertical-align: -1px;
	background: url(../images/footer.png) no-repeat -108px -155px;
}
.copyright-inter a:nth-of-type(2) span {
	background-position: -168px -155px;
}
.copyright-inter a:nth-of-type(3) span {
	background-position: -148px -155px;
}
.copyright-inter a:nth-of-type(4) span {
	background-position: -128px -155px;
}
.copyright-inter a:nth-of-type(5) span {
	background-position: -108px -172px;
}
.copyright-subsites {
	color: #9e9e9e;
	line-height: 22px;
}

.copyright-auth a {
	display: inline-block;
	height: 32px;
	width: 103px;
	background: url(../images/footer.png) no-repeat -205px 0;
	margin: 40px 3px;
}
.copyright-auth a:nth-child(2) {
	background-position: -205px -37px;
}
.copyright-auth a:nth-child(3) {
	background-position: -205px -74px;
}
.copyright-auth a:nth-child(4) {
	background-position: -205px -111px;
}
.copyright-auth a:nth-child(5) {
	background-position: -205px -148px;
}
sgjbcbhsbvrj
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML+CSS+JavaScript仿京东购物商城网站 web前端制作服装购物商城 html电商购物网站
VX_WJ88950106的博客
08-06 2万+
⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web......
js中的input 显示与隐藏
llt299022的博客
02-06 3820
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do
仿京东的逛好店（HTML+CSS）
weixin_62944148的博客
12-31 944
【代码】仿京东的逛好店（HTML+CSS）
【HTML】HTML5网页作业----模仿京东，模仿站点
coding加油站
08-18 6939
html作业，html作业，html设计，模仿京东，期末作业
MUI手机购物网站HTML源码
03-11
MUI做的一个手机购物商城的THML，这个代码我也是网上找的，购物首页、购物车、注册页等页面都有，还不错，有个缺点就是很多图标都是用的图片，没有有字体图标。
京东登录界面
10-04
HTML+CSS仿京东登录页面布局 适合刚开始接触HTML+CSS学者
仿京东淘宝手机分类选择
10-30
仿京东淘宝手机分类选择，代码写得不好请见谅
html+css+js新手练习项目
10-08
html+css+js新手练习项目，里面包含例子源码，还有单独文件夹分类。适合新手练习用
网页设计期末大作业+html+css
05-25
9个网页布局，学校让做的网站作业，虽然是比较基础的网页静态页面，不过我也希望你能做的规范一些，我们专业制作学生...DIV+css+js学生网站如何做？ 不靠这个吃饭--你还用自己做网站吗？ 大学生静态网页成品作业代做
web期末大作业 基于HTML+CSS+JavaScript实现的仿京东商城首页登录页源码
12-10
web期末大作业 基于HTML+CSS+JavaScript实现的仿京东商城首页登录页源码 web期末大作业 基于HTML+CSS+JavaScript实现的仿京东商城首页登录页源码 web期末大作业 基于HTML+CSS+JavaScript实现的仿京东商城首页登录页...
京东web版完整代码
10-12
京东web版完整代码，含html5 css3 javascript zepto.js等以及图片素材
jQuery仿京东商城手机端商品分类滑动切换特效.zip
08-22
demo地址：http://demo.lanrenzhijia.com/demo/41/4133/demo/ 项目中用到的分类界面要的效果类似于京东移动端的分类页面：两侧都可滑动，且左侧选择后右侧自动定位
仿京东商城H5主页面源代码，html、css、js 下载
12-05
仿京东商城H5主页面源代码，html、css、js
仿京东商城登录页面.7z
06-04
仿京东商城登录页面上机练习4的项目答案，超级详细，绝对干货，没有水分！
模仿京东登录web源码（html+css）
10-12
京东登录界面，web入门，新手用。html+css3。
HTML+CSS网页练习.zip
12-14
基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于...
HTML+CSS学习中做的练习.zip
最新发布
01-01
HTML+CSS学习中做的练习HTML+CSS学习中做的练习HTML+CSS学习中做的练习 HTML+CSS学习中做的练习HTML+CSS学习中做的练习HTML+CSS学习中做的练习 HTML+CSS学习中做的练习HTML+CSS学习中做的练习HTML+CSS学习中做的练习...
仿京东商城H5主页面源代码，html、css、js
热门推荐
wyx100的专栏
05-13 3万+
仿京东商城H5主页面源代码，html、css、js
仿京东页面代码，有点小问题
03-26
仿京东页面代码，有点小问题。
html+css+javascript笔记
12-29
以下是一个简单的HTML+CSS+JavaScript笔记的示例： ```html <!DOCTYPE html> <html> <head> <title>HTML+CSS+JavaScript笔记</title> <link rel="stylesheet" href="demo.css"> <style> /* 在demo.css中定义的样式 */ div { color: red; } </style> </head> <body> <div> 这是一个HTML文档中的区域部分。 </div> <script> // JavaScript代码示例 var message = "这是一个JavaScript变量"; console.log(message); </script> </body> </html> ``` 在上面的示例中，我们创建了一个HTML文档，引入了名为demo.css的CSS文件，并在HTML中使用了一个div元素来定义一个区域部分。在demo.css中，我们为div元素设置了红色的文字颜色。此外，我们还在JavaScript代码块中定义了一个变量，并使用console.log()函数在浏览器的控制台中输出了该变量的值。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值