练习(三) 仿京东(中) html+css

最新推荐文章于 2021-06-03 14:48:51 发布
最新推荐文章于 2021-06-03 14:48:51 发布
阅读量480 收藏 4
点赞数 1
文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hyugyug/article/details/102616075
版权

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

		<!-- 中间区域 start -->
		<div class="w grid">
			<!-- 分类 -->
			<div class="grid-col1 fl">
				<ul>
					<li><a href="#">家用电器</a></li>
					<li><a href="#">手机</a>/<a href="#">运营商</a>/<a href="#">数码</a></li>
					<li><a href="#">电脑</a>/<a href="#">办公</a></li>
					<li><a href="#">家居</a>/<a href="#">家具</a>/<a href="#">家装</a>/<a href="#">厨具</a></li>
					<li><a href="#">男装</a>/<a href="#">女装</a>/<a href="#">童装</a>/<a href="#">内衣</a></li>
					<li><a href="#">美妆</a>/<a href="#">个护清理</a>/<a href="#">宠物</a></li>
					<li><a href="#">女鞋</a>/<a href="#">箱包</a>/<a href="#">钟表</a>/<a href="#">珠宝</a></li>
					<li><a href="#">男鞋</a>/<a href="#">运动</a>/<a href="#">户外</a></li>
					<li><a href="#">房产</a>/<a href="#">汽车</a>/<a href="#">汽车用品</a></li>
					<li><a href="#">母婴</a>/<a href="#">玩具乐器</a></li>
					<li><a href="#">食品</a>/<a href="#">酒类</a>/<a href="#">生鲜</a>/<a href="#">特产</a></li>
					<li><a href="#">艺术</a>/<a href="#">礼品鲜花</a>/<a href="#">农资绿植</a></li>
					<li><a href="#">医药保健</a>/<a href="#">计生情趣</a></li>
					<li><a href="#">图书</a>/<a href="#">文娱</a>/<a href="#">教育</a>/<a href="#">电子书</a></li>
					<li><a href="#">机票</a>/<a href="#">酒店</a>/<a href="#">旅游</a>/<a href="#">生活</a></li>
					<li><a href="#">理财</a>/<a href="#">众筹</a>/<a href="#">白条</a>/<a href="#">保险</a></li>
					<li><a href="#">安装</a>/<a href="#">维修</a>/<a href="#">清洗</a>/<a href="#">二手</a></li>
					<li><a href="#">工业品</a></li>
				</ul>
			</div>
			<!-- banner部分 -->
			<div class="grid-col2 fl">
				<div class="grid-col2-l">
				    <a href="#"><img src="../images/banner.png" height="470px" width="590px"></a>
				    <div class="arrow-l"><span class="icon-circle-left"></span></div>
				    <div class="arrow-r"><span class="icon-circle-right"></span></div>
				    <div class="circle">
					    <ul>
					    	<li></li>
					        <li></li>
					        <li></li>
					        <li></li>
					        <li></li>
					        <li></li>
					        <li></li>
					        <li></li>
					    </ul>
				    </div>
			    </div>
				<div class="grid-col2-r">
				    <div class="grid-col2-r1">
						<img src="../images/banner-r1.png" width="190px" height="150px" >
					</div>
				    <div class="grid-col2-r2">
						<img src="../images/banner-r2.png" width="190px" height="150px" >
					</div>
				    <div class="grid-col2-r3">
						<img src="../images/banner-r3.png" width="190px" height="150px" >
					</div>
			    </div>
		    </div>
			<div class="grid-col3 fr">
				<!-- 登录模块 -->
				<div class="login">
					<div class="login-t">
						<a href="#">Hi~欢迎逛京东！</a><br>
						<a href="#">登录</a> | <a href="#">注册</a>
						<a href="#" class="user-info">
							<img src="../images/user-info.png" width="40px" height="40px">
						</a>
					</div>
					<div class="login-b">
						<a href="#">新人福利</a>
						<a href="#">PLUS会员</a>
					</div>
				</div>
				<div class="news">
					<div class="news-t">
					    <h5>京东快报</h5>
				       	<a href="#">更多<span class="icon-circle-right"></span></a>
					</div>
					<div class="news-m">
					    <ul>
						    <li><a href="#"><span>推荐</span>华为P40曝光，麒麟990＋5000毫安，首款鸿蒙手机</a></li>
						    <li><a href="#"><span>HOT</span>iPhone Xs被下架！售价便宜近一半，网友却不买账</a></li>
						    <li><a href="#"><span>HOT</span>iPhone Xs Max便宜近半，256G性价比太高</a></li>
						    <li><a href="#"><span>HOT</span>iPhone SE2来了！5.5英寸+A13，售价感人</a></li>
					    </ul>
					</div>
				</div>
				<div class="expand">
					<ul>
						<li><a href="#"><span class="icon-mobile2 red blue"></span><span>话费</span></a></li>
						<li><a href="#"><span class="icon-airplane orange"></span><span>机票</span></a></li>
						<li><a href="#"><span class="icon-office green"></span><span>酒店</span></a></li>
						<li><a href="#"><span class="icon-pacman orange"></span><span>游戏</span></a></li>
						<li><a href="#"><span class="icon-droplet green"></span><span>加油卡</span></a></li>
						<li><a href="#"><span class="icon-road red-orange"></span><span>火车票</span></a></li>
						<li><a href="#"><span class="icon-users green"></span><span>众筹</span></a></li>
						<li><a href="#"><span class="icon-coin-yen blue"></span><span>理财</span></a></li>
						<li><a href="#"><span class="icon-file-empty red-orange"></span><span>白条</span></a></li>
						<li><a href="#"><span class="icon-video-camera red-orange"></span><span>电影票</span></a></li>
						<li><a href="#"><span class="icon-library blue"></span><span>企业购</span></a></li>
						<li><a href="#"><span class="icon-credit-card orange"></span><span>礼品卡</span></a></li>
					</ul>
				</div>
			</div>
		</div>
		<!-- 中间区域 end -->

css代码：

.blue {
	color: #439ee1;
}
.orange {
	color: #f2a132;
}
.green {
	color: #3ad5c5;
}
.red-orange {
	color: #e8554b;
}
/* 中间分类模块 */
.grid {
	height: 470px;
	margin-top: 10px;
}
.grid-col1 {
	width: 190px;
	height: 100%;
	margin-right: 10px;
	color: #52423b;
	font-size: 14px;
	line-height: 25px;
	background-color: #fefefe;
}
.grid-col1 ul {
	padding: 10px 0;
}
.grid-col1 a {
	color: #52423b;
	margin: 0 1px;
}
.grid-col1 a:hover {
	color: #f10216;
}
.grid-col1 ul li {
	padding-left: 17px;
}
.grid-col1 ul li:hover {
	background-color: #DEDEDE;
}
/* banner 部分 */
.grid-col2 {
	width: 790px;
	height: 100%;
	margin-right: 10px;	
    /* position: relative; */
}
/* 轮播图 */
.grid-col2-l {
	float: left;
	text-align: center;
	position: absolute;
	overflow: hidden;
}
.circle {
	position: absolute;
	left: 25px;
	bottom: 15px;
}
.circle li {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: rgba(255,255,255,.5);
    margin: 3px;
	float: left;
	background-clip: padding-box;
}
.circle li:first-child {
	background-color: #fff;
	margin: 1px;
	border: 2px solid rgba(255,255,255,.5);
}
.arrow-l,.arrow-r {
	height: 35px;
	width: 35px;
	color: rgba(255,255,255,.6);
	font-size: 20px;
	background-color: rgba(0,0,0,.2);
	line-height: 35px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}
.arrow-l {
	left: -10px;
	border-radius: 0 50% 50% 0;
}
.arrow-r {
	right: -10px;
	border-radius: 50% 0 0 50%;
	
}
.arrow-l:hover,.arrow-r:hover {
	background-color: rgba(0,0,0,.3);
}
/* banner 右部分 */
.grid-col2-r {
	float: right;
}
.grid-col2-r div {
	width: 190px;
	height: 150px;
	cursor: pointer;
	margin-bottom: 10px;
}
.grid-col2-r img {
	vertical-align: top;
}


/* 右边部分 */
.grid-col3 {
	width: 190px;
	height: 100%;
	font-size: 12px;
	background-color: #fff;
}
.grid-col3 a {
	color: #7b7b7b;
}
.grid-col3 a:hover {
	color: #E1251B;
}
/* 登录模块 */
.login {
	height: 86px;
	margin: 14px 20px 0px;
	border-bottom: 1px solid #f2f2f2;
	position: relative;
}
.login-t {
	height: 51px;
	line-height: 20px;
	padding-left: 55px;
}
.user-info {
	width: 40px;
	height: 40px;
	position: absolute;
	top: 0px;
	left: 0px;
	border-radius: 50%;
	border: 2px solid #fff;
	overflow: hidden;
	box-shadow: 2px 2px 2px #f9f9f9,-2px 2px 2px #f9f9f9;
}
.login-b a{
	display: inline-block;
	width: 70px;
	height: 26px;
	font-size: 12px;
	font-weight: 500;
	line-height: 26px;
	text-align: center;
	border-radius: 13px;
}
.login-b a:first-child {
	color: #fce5e4;
	background-color: #e1251b;
}
.login-b a:last-child {
	color: #dacd8a;
	background-color: #363634;
	float: right;
}
.login-b a:hover {
	color: #fce5e4;
	background-color: #c4241c;
}


/* 新闻模块 */
.news {
	height: 130px;
	margin: 0px 15px;
	border-bottom: 1px solid #f2f2f2;
}
.news-t {
	height: 36px;
	line-height: 36px;
}
.news-t h5 {
	color: #595959;
	font-size: 16px;
	display: inline-block;
}
.news-t a {
	float: right;
	color: #b1b1b1;
}
.news-m li {
	height: 18px;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	margin-bottom: 6px;
}
.news-m span {
	width: 35px;
	color: #E1251B;
	text-align: center;
	line-height: 17px;
	margin-right: 8px;
	background-color: #fdeeed;
	display: inline-block;
	
}
/* 扩展模块 */
.expand li {
	height: 59px;
	width: 63px;
	cursor: pointer;
	float: left;
	position: relative;
}
.expand span {
	display: block;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}
.expand span:first-child {
	font-weight: 700;
	font-size: 20px;
	top: 10px;
}
.expand li:hover span{
	color: #E1251B;
}
.expand span:last-child {
	white-space: nowrap;
	bottom: 10px;
}
sgjbcbhsbvrj
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML第6章上机练习3(制作京东快报页面)
拂欢
07-22 8271
代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>制作京东快报页面</title> <style> .title{ height: 186px; ...
练习3：仿京东快报.7z
06-04
上机练习3的仿京东快报的参考答案分享给大家！
小程序京东首页底部导航栏代码
weixin_42398640的博客
11-02 2030
“tabBar”: { “selectedColor”: “#eb6830”, “list”: [ { “pagePath”: “page/home/index”, “iconPath”: “image/home.png”, “selectedIconPath”: “image/home-hl.png”. “text”: “首页” }, { “pagePath”: “page/home/index...
仿京东快报
06-11
仿京东快报ViewFilper
仿极客学院demo
12-13
个人项目，用html和css仿极客学院静态首页，前端布局练习专用
html+css+js各种案例大全
06-20
CSS3中2D动画练习。 - 8.奔跑的大熊 速度曲线steps()步长练习。 - 9.两面翻转的盒子 3D旋转动画案例练习。 - 10.3D导航栏案例 3D旋转动画案例练习。 - 11.3D旋转木马案例 3D旋转动画案例练习。 - 12.移动端...
基于html+css实现的电脑端仿京东商城源代码（网页设计课设）.zip
最新发布
06-23
基于html+css实现的电脑端仿京东商城源代码（网页设计课设）.zip个人大三学期的课程设计、经导师指导并认可通过的高分大作业设计项目，评审分97分。主要针对计算机相关专业的正在做大作业的学生和需要项目实战练习的...
Html+Css简单仿京东商品分类导航
10-12
在这个"Html+Css简单仿京东商品分类导航"项目中，我们将深入探讨如何利用这两门技术构建一个类似京东商城的商品分类导航界面。 首先，HTML是构建网页内容的基础，它通过一系列标签来定义页面结构。在模仿京东商品...
html作业 仿京东商城登录界面
07-17
在本资源中，我们主要探讨的是如何使用HTML和CSS技术来构建一个仿京东商城的登录界面。这是一个适合HTML初学者的课堂作业，旨在帮助学习者掌握基础的网页布局和样式设计技能。 首先，HTML（HyperText Markup ...
仿京东购物车网页页面.html
03-25
简单的网页还原，自己练习自写代码。实现了购物车静态页面的布局，样式等操作步骤。
css 京东底部菜单按钮悬浮层
11-03
css 京东底部菜单按钮悬浮层 css 京东底部菜单按钮悬浮层
css盒子模型-京东快报
08-28
北大青鸟作业京东快报的代码
京东首页HTML+CSS源码
02-26
京东首页HTML+CSS源码实现 WEB前端开发初学者参考源码
HTML简单实现京东商城底部导航
ttxs62825的博客
08-04 6267
HTML实现京东商城底部导航 京东商城底部截图： 比如，“购物指南”栏，在鼠标未放到下面导航时为原色，当鼠标移动到上面时，会变颜色，点击会跳转新的页面。 可以看出采用的是表格样式，即是 ,外部再加个div标签。 实例代码如下： 京东(JD.COM)-综合网购首选-正品低价、品质保障、配送及时、轻松购物！ #nav{ text-decoration:none;
练习(四) 仿京东(下) html+css
hyugyug的博客
10-18 686
本次是仿京东底部 效果图： html代码： <!-- 底部部分 start --> <footer> <!-- 服务模块 --> <div class="service"> <div class="w"> <ul> <li> <h...
制作京东快报页面html,仿京东首页的京东快报，自动向上滚动的广告条
weixin_29373959的博客
06-03 487
最近项目中要做这样滚动的广告条，git上搜了搜，还真搜到个。效果图：原项目地址原理是用的一个只显示一条的listview,使用ListView的smoothScrollBy(int distance, int duration)方法,实现滚动。注意：通过smoothScrollBy方法滚动时，由于布局中的高度时dp，但这里面的第一个参数是sp，因此需要将dp转sp，转换完毕后的是float，但方法...
css+html模仿京东app底部导航栏
weixin_45631100的博客
12-26 2014
css+html模仿京东app底部导航栏 完成效果如下： 上下滑动页面，底部导航栏一直存在，位置不变 底部导航栏实现代码如下： 只需css写超简单代码 重点是footer标签，其余标签是为和京东导航栏一样而设置的样式 footer { width: 193rem; margin-top: 2rem; height: 25rem; background-color: white; padding-bottom: 1px; position: fixed; //定位 bottom: 0;
仿京东商城H5主页面源代码，html、css、js
热门推荐
wyx100的专栏
05-13 3万+
仿京东商城H5主页面源代码，html、css、js
京东界面之底部导航栏
Liba_ba的博客
01-05 2598
//Java哦 public class Jingdong extends AppCompatActivity { private BottomTabBar bottab; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceS
HTML+CSS学习指南：从入门到精通
学习HTML+CSS的过程中，不仅需要熟悉各种标签的用法，还要理解CSS选择器、盒模型、浮动和定位等概念。同时，实践操作是至关重要的，通过实际编写网页，可以更好地理解和掌握这些知识。随着对HTML和CSS的深入学习，你...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值