第一次网站制作｜｜京东网站仿做｜｜简单易上手
使用工具
VScode
html网页
<!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" />
<!-- SEO：搜索引擎优化，网站优化三大标签：标题、关键字、描述 -->
<!-- 标题 -->
<title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title>
<!-- 关键字 -->
<meta
name="Keywords"
content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东"
/>
<!-- 描述 -->
<meta
name="description"
content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!"
/>
<!-- 引入重置样式表 -->
<link rel="stylesheet" href="reset.css" />
<!-- 引入公共样式表 -->
<link rel="stylesheet" href="base.css" />
<!-- 引入图标字体库 -->
<link rel="stylesheet" href="fontawesome/css/all.css" />
<!-- 引入当前页面的样式表 -->
<link rel="stylesheet" href="index.css" />
<!-- 引入网站图标 -->
<link rel="icon" href="img/吉祥物.webp" />
<!-- 引入js的tools工具 -->
<script type="text/javascript" src="js/tools.js"></script>
<!-- 引入外部js文件 -->
<script type="text/javascript" src="index.js"></script>
<!--使用swiper插件需要引入的库-->
<!-- 引入jQ库 -->
<script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>
<!-- 引入swiper库 -->
<script src="插件/dist/js/swiper.min.js"></script>
<link rel="stylesheet" href="插件/dist/css/swiper.css">
</head>
<body>
<!-- 顶部导航条 -->
<div class="topbar-wrapper">
<div class="topbar w clearfix">
<!-- 左侧位置菜单 -->
<div class="location">
<div class="city">
<i class="fas fa-map-marker-alt"></i>
<a href="#">山西</a>
</div>
<!-- 添加一个位置的弹出层 -->
<div class="city-location">
<ul>
<a href="https://www.jd.com/?cu=true&utm_source=baidu-pinzhuan&utm_medium=cpc&utm_campaign=t_288551095_baidupinzhuan&utm_term=0f3d30c8dba7459bb52f2eb5eba8ac7d_0_028f45b4dfbf4b37a13998326a62df09">北京</a>
<a href="javascript:;">上海</a>
<a href="javascript:;">天津</a>
<a href="javascript:;">重庆</a>
<a href="javascript:;">河北</a>
<a class="shanxi" href="javascript:;">山西</a>
<a href="javascript:;">河南</a>
<a href="javascript:;">辽宁</a>
<a href="javascript:;">吉林</a>
<a href="javascript:;">黑龙江</a>
<a href="javascript:;">内蒙古</a>
<a href="javascript:;">江苏</a>
<a href="javascript:;">山东</a>
<a href="javascript:;">安徽</a>
<a href="javascript:;">浙江</a>
<a href="javascript:;">福建</a>
<a href="javascript:;">湖北</a>
<a href="javascript:;">广东</a>
<a href="javascript:;">广西</a>
<a href="javascript:;">江西</a>
<a href="javascript:;">四川</a>
<a href="javascript:;">海南</a>
<a href="javascript:;">贵州</a>
<a href="javascript:;">云南</a>
<a href="javascript:;">西藏</a>
<a href="javascript:;">陕西</a>
<a href="javascript:;">青海</a>
<a href="javascript:;">宁夏</a>
<a href="javascript:;">新疆</a>
<a href="javascript:;">港澳</a>
<a href="javascript:;">钓鱼岛</a>
<a href="javascript:;">海外</a>
<a href="javascript:;">台湾</a>
<a href="javascript:;">台湾</a>
<a href="javascript:;">台湾</a>
</ul>
</div>
</div>
<!-- 右侧菜单 -->
<ul class="shortcut">
<li>
<a href="#">你好，请登录</a>
<a class="zi" href="https://www.jd.com/?cu=true&utm_source=baidu-pinzhuan&utm_medium=cpc&utm_campaign=t_288551095_baidupinzhuan&utm_term=0f3d30c8dba7459bb52f2eb5eba8ac7d_0_028f45b4dfbf4b37a13998326a62df09">免费注册</a>
</li>
<li class="line"></li>
<li>
<a href="#">我的订单</a>
</li>
<li class="line"></li>
<li class="my-jd">
<div class="my">
<a herf="#">我的京东</a>
<i class="fas fa-angle-down" aria-hidden="true"></i>
</div>
<!-- 添加一个我的京东的弹出层 -->
<div class="my-list">
<div class="item1">
<a href="">待处理订单</a>
</div>
<div class="item1">
<a href="">我的问答</a>
</div>
<div class="item1">
<a href="">返修退换货</a>
</div>
</div>
</li>
<li class="line"></li>
<li>
<a herf="#">京东会员</a>
</li>
<li class="line"></li>
<li class="firm-cg">
<div class="firm">
<a class="zi" herf="#">企业采购</a>
<i class="fas fa-angle-down"></i>
</div>
<!-- 添加一个企业采购的弹出层 -->
<div class="firm-list">
<div class="my-list2">
<div class="item1">
<a href="">企业购</a>
</div>
<div class="item1">
<a href="">工业品</a>
</div>
<div class="item1">
<a href="">礼品卡</a>
</div>
</div>
</div>
</li>
<li class="line"></li>
<li class="server-kh">
<div class="server">
<span>客户服务</span>
<i class="fas fa-angle-down"></i>
</div>
<!-- 添加一个客户服务的弹出层 -->
<div class="server-list">
<div class="my-list3">
<div class="item1">
<a href="">企业招商</a>
</div>
<div class="item1">
<a href="">学习中心</a>
</div>
<div class="item1">
<a href="">商家帮助</a>
</div>
</div>
</div>
</li>
<li class="line"></li>
<li class="web-dh">
<div class="web">
<span>网站导航</span>
<i class="fas fa-angle-down"></i>
</div>
<!-- 添加一个网站导航的弹出层
<div class="web-list"></div>
</li> -->
<li class="line"></li><!-- 该行使导航栏为同一行-->
<li>
<span>手机京东</span>
<i class="fas fa-angle-down"></i>
<!-- 添加一个二维码 -->
<div class="qrcode">
<img src="img/京东logo.jpg" />
</div>
</li>
</ul>
</div>
</div>
<!-- 头部外部容器 -->
<div class="header-wrapper">
<div class="header w clearfix">
<!-- 创建京东logo -->
<ul class="logo">
<li>
<a href="#"><img src="img/京东.gif" /></a>
</li>
</ul>
<!-- 创建搜索框 -->
<div class="search-wrapper">
<form class="search" action="#">
<input class="search-inp" type="text" />
<span><i class="fas fa-camera"></i></span>
<button class="search-btn" type="text">
<a href="https://search.jd.com/Search?keyword=惠普游戏本&enc=utf-8&spm=a.0.0&pvid=30c71e40a3a94108b69adf8b174f7ba4">搜索</a>
<i class="fas fa-search"></i>
</button>
</form>
</div>
<!-- 创建购物车 -->
<div class="shop-cart">
<div class="shop">
<i class="fas fa-shopping-cart"></i>
<a class="gouwu" href="https://passport.jd.com/new/login.aspx?ReturnUrl=http%3A%2F%2Fcart.jd.com%2Fcart.action%3Fnull">我的购物车</a>
</div>
</div>
<!-- 创建搜索框下热词 -->
<div class="hotwords">
<a class="id" href="#">拉杆箱背包</a>
<a href="#">沃尔玛</a>
<a href="#">食品饮料</a>
<a href="#">路由器</a>
<a href="#">格力空调</a>
<a href="#">中兴屏下</a>
<a href="#">安踏宠粉</a>
<a href="#">茶酒特惠</a>
<a href="#">家装节</a>
</div>
<!-- 创建总导航 -->
<div class="nav">
<a class="id" href="https://miaosha.jd.com/">秒杀</a>
<a class="id" href="#">优惠券</a>
<a href="#">PLUS会员</a>
<a href="#">品牌闪购</a>
<a href="#">拍卖</a>
<a href="#">京东家电</a>
<a href="#">京东超市</a>
<a href="#">京东生鲜</a>
<a href="#">京东国际</a>
<a href="#">京东云</a>
</div>
</div>
</div>
<!-- 创建banner容器 -->
<div class="banner-wrapper">
<div class="banner w clearfix">
<!-- 创建左侧导航条 -->
<nav class="left-nav">
<div class="item">
<a href="https://jiadian.jd.com/">家用电器</a>
</div>
<div class="item">
<a
href="index.html"
>手机</a
>
<span class="line">/</span>
<a href="#">运营商</a>
<span class="line">/</span>
<a href="#">数码</a>
</div>
<div class="item">
<a href="#">电脑</a>
<span class="line">/</span>
<a href="#">办公</a>
</div>
<div class="item">
<a href="#">家居</a>
<span class="line">/</span>
<a href="#">家具</a>
<span class="line">/</span>
<a href="#">家装</a>
<span class="line">/</span>
<a href="#">厨具</a>
</div>
<div class="item">
<a href="#">男装</a>
<span class="line">/</span>
<a href="#">女装</a>
<span class="line">/</span>
<a href="#">童装</a>
<span class="line">/</span>
<a href="#">内衣</a>
</div>
<div class="item">
<a href="#">美妆</a>
<span class="line">/</span>
<a href="#">个护清洁</a>
<span class="line">/</span>
<a href="#">宠物</a>
</div>
<div class="item">
<a href="#">女鞋</a>
<span class="line">/</span>
<a href="#">箱包</a>
<span class="line">/</span>
<a href="#">钟表</a>
<span class="line">/</span>
<a href="#">珠宝</a>
</div>
<div class="item">
<a href="#">男鞋</a>
<span class="line">/</span>
<a href="#">运动</a>
<span class="line">/</span>
<a href="#">户外</a>
</div>
<div class="item">
<a href="#">房产</a>
<span class="line">/</span>
<a href="#">汽车</a>
<span class="line">/</span>
<a href="#">汽车用品</a>
</div>
<div class="item">
<a href="#">母婴</a>
<span class="line">/</span>
<a href="#">玩具乐器</a>
</div>
<div class="item">
<a href="#">食品</a>
<span class="line">/</span>
<a href="#">酒类</a>
<span class="line">/</span>
<a href="#">生鲜</a>
<span class="line">/</span>
<a href="#">特产</a>
</div>
<div class="item">
<a href="#">艺术</a>
<span class="line">/</span>
<a href="#">礼品鲜花</a>
<span class="line">/</span>
<a href="#">农资绿植</a>
</div>
<div class="item">
<a href="#">医疗保健</a>
<span class="line">/</span>
<a href="#">计生情趣</a>
</div>
<div class="item">
<a href="#">图书</a>
<span class="line">/</span>
<a href="#">文娱</a>
<span class="line">/</span>
<a href="#">教育</a>
<span class="line">/</span>
<a href="#">电子书</a>
</div>
<div class="item">
<a href="#">机票</a>
<span class="line">/</span>
<a href="#">酒店</a>
<span class="line">/</span>
<a href="#">旅游</a>
<span class="line">/</span>
<a href="#">生活</a>
</div>
<div class="item">
<a href="#">理财</a>
<span class="line">/</span>
<a href="#">众筹</a>
<span class="line">/</span>
<a href="#">白条</a>
<span class="line">/</span>
<a href="#">保险</a>
</div>
<div class="item">
<a href="#">安装</a>
<span class="line">/</span>
<a href="#">维修</a>
<span class="line">/</span>
<a href="#">清洗</a>
<span class="line">/</span>
<a href="#">二手</a>
</div>
<div class="item">
<a href="#">工业品</a>
</div>
</nav>
<!-- 创建中间轮播图 -->
<!-- 视觉容器 -->
<div class="swiper-father">
<div class="swiper-container">
<!-- 图片列表容器 -->
<div class="swiper-wrapper"
>
<img class="swiper-slide" src="img/宣传01.jpeg" style="width: 490px;">
<img class="swiper-slide" src="img/宣传02.webp" style="width:500px;">
<img class="swiper-slide" src="img/宣传03.webp" style="width:500px;">
</div>
</div>
<div class="swiper-button-prev"></div>
<!--左箭头。如果放置在swiper-container外面，需要自定义样式。-->
<div class="swiper-button-next"></div>
<!--右箭头。如果放置在swiper-container外面，需要自定义样式。-->
</div>
<!--初始化swiper-->
<script>
var swiper = new Swiper('.swiper-container', {
autoplay: true,
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
}
});
</script>
<!--添加轮播图箭头-->
<div class="swiper-wrapper-">
<a class="prev" href="#"></a>
<a class="next" href="#"></a>
</div>
</div>
<!-- 创建最右侧菜单 -->
<div class="user-wrapper">
<!-- 最上边用户登录容器 -->
<div class="user">
<a href="#"><img src="img/吉祥物.webp" /></a>
<a class="hi" href="#">Hi~欢迎逛京东！</a>
<a class="use" href="#">登录</a>
<span class="line">|</span>
<a class="us" href="#">注册</a>
<a class="new" href="#">新人福利</a>
<a class="plus" href="#">PLUS会员</a>
</div>
<!-- 中间京东快报容器 -->
<div class="news">
<span>京东快报</span>
<a class="more" href="#"
>更多
<i class="fas fa-angle-right"></i>
</a>
<ul class="news-list">
<li>
<a class="title" href="#">热门</a>
<a class="new" href="#">大屏全能型办公本，...</a>
</li>
<li>
<a class="title" href="#">热门</a>
<a class="new" href="#">备上六神宝宝植物精...</a>
</li>
<li>
<a class="title" href="#">最新</a>
<a class="new" href="#">用途广泛的小苏打，...</a>
</li>
<li>
<a class="title" href="#">热评</a>
<a class="new" href="#">金河田魔术师机箱，...</a>
</li>
</ul>
</div>
<!-- 创建右下角图标容器 -->
<div class="menu">
<ul class="menu-list">
<li>
<a class="blue" href="#">
<i class="fas fa-mobile-alt"></i> 话费
</a>
</li>
<li>
<a class="orange" href="#">
<i class="fas fa-plane"></i> 机票
</a>
</li>
<li>
<a class="green" href="#">
<i class="fas fa-hotel"></i> 酒店
</a>
</li>
<li>
<a class="orange" href="#">
<i class="fas fa-gamepad"></i> 游戏
</a>
</li>
<li>
<a class="green" href="#">
<i class="fas fa-fire"></i> 加油卡
</a>
</li>
<li>
<a class="red" href="#">
<i class="fas fa-train"></i> 火车票
</a>
</li>
<li>
<a class="green" href="#">
<i class="fas fa-user-alt"></i> 众筹
</a>
</li>
<li>
<a class="blue" href="#">
<i class="fas fa-donate"></i> 理财
</a>
</li>
<li>
<a class="red" href="#"> <i class="fas fa-file"></i> 白条 </a>
</li>
<li>
<a class="red" href="#"> <i class="fas fa-film"></i> 电影票 </a>
</li>
<li>
<a class="blue" href="#">
<i class="fas fa-suitcase"></i> 企业购
</a>
</li>
<li>
<a class="orange" href="#">
<i class="fas fa-wallet"></i> 礼品卡
</a>
</li>
</ul>
</div>
</div>
<!-- 创建广告容器 -->
<div class="ad-wrapper">
<!-- 创建中间广告 -->
<ul class="ad">
<li>
<a href="javascript:;">
<img src="img/ad1.jpg" alt="" />
<span class="name"
>喜钻
白18K金钻戒女/结婚钻石女戒/订婚求婚钻石戒指/单钻经典6爪裸钻纪念日礼物
30分FG色SI-现货闪发</span
>
<span class="jg">¥3720.00</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="img/ad2.jpg" alt="" />
<span class="name"
>贝尔金（Belkin）type-c七合一扩展坞转换器iPadPro iPad mini
苹果Macbook7口华硕联想笔记本扩展器扩展坞</span
>
<span class="jg">¥359.10</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="img/ad3.jpg" alt="" />
<span class="name"
>蛇圣（Holy serpent）
F2蓝牙耳机入耳式双耳无线运动跑步挂脖式适用于苹果华为小米手机通用
炫酷黑2021纳米升级款</span
>
<span class="jg">¥68.90</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="img/ad4.jpg" alt="" />
<span class="name"
>Redmi Note 9 4G 6000mAh大电池 骁龙662处理器 18W快充 烟波蓝
8GB+128GB 智能手机 小米 红米</span
>
<span class="jg">¥1169.00</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="img/ad5.jpg" alt="" />
<span class="name">微软（Microsoft）日版 Xbox Series S</span>
<span class="jg">¥2399.00</span>
</a>
</li>
</ul>
</div>
<!-- 创建固定工具 -->
<div class="tool-wrapper">
<ul class="tool">
<li>
<a href="https://www.jd.com/?cu=true&utm_source=baidu-pinzhuan&utm_medium=cpc&utm_campaign=t_288551095_baidupinzhuan&utm_term=0f3d30c8dba7459bb52f2eb5eba8ac7d_0_233efb2a4ca84f2db77de6a4a11e2c78">京东秒杀</a>
</li>
<li>
<a href="javascript:;">特色优选</a>
</li>
<li>
<a href="javascript:;">频道广场</a>
</li>
<li>
<a href="javascript:;">为你推荐</a>
</li>
<li>
<a href="javascript:;">客服</a>
</li>
<li>
<a href="javascript:;">反馈</a>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
css代码
/* 设置顶部导航条外部容器 */
.topbar-wrapper {
width: 100%;
height: 30px;
line-height: 30px;
background-color: #e3e4e5;
border-bottom: 1px solid #ddd;
}
/* 设置顶部导航条内部容器 */
.topbar {
width: 1190px;
margin: 0 auto;
}
.topbar i,
.topbar a,
.topbar span {
color: #999;
}
.topbar a:hover,
.topbar a.zi {
color: #f10215;
}
.topbar i {
font-size: 12px;
color: #999;
}
.topbar .line {
width: 1px;
height: 25px;
background-color: #ccc;
margin: 0px 12px;
}
/* 设置左侧位置菜单 */
.location {
float: left;
}
.location i {
font-size: 14px;
color: #f10215;
margin-right: 4px;
}
/* 设置位置菜单下拉 */
.city-location {
/* display: none; */
width: 320px;
height: 436px;
position: absolute;
background-color: white;
top: 30px;
position: absolute;
border: 1px solid rgb(204, 204, 204);
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
border-top: none;
z-index: 9999;
display: none;
}
.city-location a {
display: block;
float: left;
width: 64px;
line-height: 20px;
font-size: 14px;
margin: 10px 0;
text-align: center;
padding: 4px 0;
}
.location:hover .city-location {
display: block;
}
.city-location .shanxi,
.city-location .shanxi:hover {
color: white;
background-color: red;
}
.city-location a:hover {
background-color: #e3e4e5;
}
.city {
padding: 0 7px;
border: 1px solid transparent;
position: relative;
border-bottom: none;
z-index: 9999;
}
.location:hover .city {
background-color: white;
border: 1px solid rgb(204, 204, 204);
border-bottom: none;
padding-bottom: 1px;
}
/* 设置右侧菜单 */
.shortcut {
float: right;
}
.shortcut li {
position:relative;
top:-10px;
float: left;
}
/* 设置右侧菜单的下拉框 */
.my-list,
.firm-list,
.server-list,
.web-list {
display: none;
background-color: white;
border: 1px solid rgb(204, 204, 204);
position: absolute;
top: 30px;
z-index: 9999;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
}
.my,
.firm,
.server,
.web {
position: relative;
padding: 0 7px;
border: 1px solid transparent;
border-bottom: none;
z-index: 9999;
}
/* 设置我的京东下拉 */
.my-list {
border-top: none;
width: 281px;
height: 161px;
}
/* 设置企业采购下拉 */
.firm-list {
border-top: none;
width: 155px;
height: 141px;
}
/* 设置客户服务下拉 */
.server-list {
border-top: none;
width: 170px;
height: 217px;
}
/* 设置网站导航下拉 */
.web-list {
border-top: none;
width: 1189px;
height: 179px;
left: 116px;
}
.my-jd:hover .my-list,
.firm-cg:hover .firm-list,
.server-kh:hover .server-list,
.web-dh:hover .web-list {
display: block;
}
.my-jd:hover .my,
.firm-cg:hover .firm,
.server-kh:hover .server,
.web-dh:hover .web {
background-color: white;
border: 1px solid rgb(204, 204, 204);
border-bottom: none;
}
/* 设置手机京东二维码 */
.qrcode {
position: absolute;
left: 1150px;
}
.qrcode img {
position: absolute;
top: 30px;
width: 100px;
height: 30px;
background-color: #fff;
z-index: 9998;
}
/* 设置头部外部容器 */
.header-wrapper {
width: 100%;
height: 140px;
background-color: #fff;
border-bottom: 1px solid #ddd;
}
/* 设置头部内部容器 */
.header {
position: relative;
height: 140px;
}
/* 设置logo样式 */
.header .logo img {
position: absolute;
width: 190;
height: 120px;
background-color: #fff;
margin: auto 0;
float: left;
top: 10px;
}
/* 设置搜索框样式 */
.search-wrapper {
position: absolute;
left: 260px;
width: 546px;
height: 32px;
float: left;
border: 1px solid #e2231a;
top: 25px;
}
.search-wrapper .search-inp {
float: left;
width: 425px;
height: 25px;
line-height: 25px;
padding: 2px 44px 2px 17px;
font-size: 12px;
border: 1px solid transparent;
outline: none;
}
.search-wrapper .search-btn {
position: absolute;
float: right;
width: 58px;
height: 33px;
line-height: 33px;
border: none;
color: #fff;
background-color: #e1251b;
font-size: 16px;
}
.search-wrapper span {
color: #d8d0d0;
font-size: 16px;
float: left;
margin-left: -30px;
margin-top: 5px;
}
.search-wrapper span:hover {
color: #e1251b;
}
.search-wrapper .search-btn:hover {
background-color: #c81623;
}
/* 设置购物车样式 */
.shop-cart {
position: absolute;
right: 230px;
top: 25px;
}
.shop:hover {
border-color: #e1251b;
}
.shop-cart i {
margin-right: 10px;
}
.shop {
width: 130px;
height: 34px;
line-height: 34px;
text-align: center;
background-color: #fff;
border: 1px solid #e3e4e5;
}
.shop a,
.shop i {
color: #e1251b;
}
/* 设置热词样式 */
.hotwords {
position: absolute;
left: 260px;
top: 65px;
width: 550px;
height: 20px;
line-height: 20px;
}
.hotwords a {
color: #999;
margin-right: 6px;
}
.hotwords .id {
color: #e1251b;
}
.hotwords a:hover {
color: #e1251b;
}
/* 设置总导航样式 */
.nav {
position: absolute;
left: 203px;
bottom: 0;
height: 40px;
line-height: 40px;
padding-top: 20px;
}
.nav a {
font-size: 15px;
margin: 0 10px;
}
.nav a:hover {
color: #e1251b;
}
.nav .id {
color: #e1251b;
font-weight: bold;
}
/* 设置中间外部容器 */
.banner-wrapper {
width: 100%;
height: 100%;
background-color: #f4f4f4;
box-sizing:border-box;
}
.swiper-father {
position: relative;
padding:0 37px;
text-align: center;
left:200px;
width: 60%;
box-sizing:border-box;
/* box-sizing:border-box;
border:1px solid red;*/ /*初学不知道弄的盒子在上面位置，可以弄个盒子就在外面套个边框，确认位置*/
}
.swiper-container {
width:calc(100% - 50px);
margin:auto;
}
.swiper-wrapper img{
position: relative;
left:0px;
height:500px;
object-fit:contain;/*--contain: 中文释义“包含”。保持原有尺寸比例。
保证替换内容尺寸一定可以在容器里面放得下。因此，此参数可能会在容器内留下空白。*/
}
/* 设置左侧导航条样式 */
.left-nav {
position: absolute;
width: 190px;
height: 450px;
left:50px;
padding: 10px 0;
margin-top: 10px;
background-color: #fefefe;
float: left;
}
.left-nav .item {
height: 25px;
line-height: 25px;
font-size: 13px;
padding: 0 0 0 18px;
}
.item:hover {
background-color: #d9d9d9;
}
.item a:hover {
color: #e1251b;
}
.left-nav .line {
margin: 0 -2px;
font-size: 12px;
}
/* 设置最右侧菜单外部容器 */
.user-wrapper {
float: right;
position: relative;
top: -480px;
width: 190px;
height: 470px;
right: 70px;
background-color: #fefefe;
float: right;
}
/* 设置最右侧菜单内部容器 */
.user {
position: relative;
width: 100%;
height: 102px;
}
.user::before {
content: "";
position: absolute;
width: 130px;
height: 1px;
right: 30px;
left: 30px;
bottom: 0;
background-color: rgba(114, 113, 113, 0.4);
}
/* 设置最上边用户登录样式 */
.user .use {
position: absolute;
left: 70px;
top: 34px;
float: left;
}
.user span {
position: absolute;
left: 98px;
top: 33px;
}
.user .us {
position: absolute;
left: 106px;
top: 34px;
}
.user .hi {
position: absolute;
left: 70px;
top: 16px;
}
.user a:hover {
color: #e1251b;
}
.user img {
position: absolute;
left: 20px;
top: 13px;
width: 40px;
height: 40px;
border-radius: 100px;
vertical-align: middle;
}
.user .new {
display: inline-block;
width: 70px;
height: 25px;
line-height: 25px;
background-color: #e1251b;
border-radius: 13px;
text-align: center;
color: #fff;
margin-left: 20px;
margin-right: 5px;
margin-top: 65px;
}
.user .new:hover {
color: #fff;
background-color: #c81623;
}
.user .plus {
display: inline-block;
width: 70px;
height: 25px;
line-height: 25px;
background-color: #363634;
color: #e5d790;
border-radius: 13px;
text-align: center;
margin-top: 65px;
}
.user .plus:hover {
color: #fff;
background-color: #c81623;
}
/* 设置中间京东快报样式 */
.news {
position: relative;
width: 100%;
height: 130px;
}
.news::before {
content: "";
position: absolute;
width: 130px;
height: 1px;
right: 30px;
left: 30px;
bottom: 0;
background-color: rgba(114, 113, 113, 0.4);
}
.news span {
position: absolute;
font-weight: bold;
font-size: 14px;
margin-left: 20px;
top: 10px;
}
.news .more {
position: absolute;
float: right;
top: 10px;
color: #999;
right: 15px;
}
.more i {
margin-left: 8px;
}
.news a:hover {
color: #c81623;
}
.news .title {
display: inline-block;
position: relative;
width: 35px;
height: 16px;
line-height: 16px;
top: 36px;
left: -15px;
text-align: center;
color: #e1251b;
background-color: rgba(225, 37, 27, 0.08);
margin-bottom: 5px;
}
.news .new {
position: absolute;
margin-top: 36px;
margin-left: -5px;
height: 16px;
line-height: 16px;
}
/* 设置右下角图标样式 */
.menu {
width: 100%;
height: 240px;
}
.menu-list i {
display: block;
margin-top: 10px;
margin-bottom: 6px;
font-size: 30px;
}
.menu-list li {
position: relative;
float: left;
}
.menu-list li a {
text-align: center;
display: block;
width: 45px;
height: 20px;
}
.blue i {
color: rgb(0, 153, 255);
}
.orange i {
color: rgb(252, 179, 43);
}
.green i {
color: rgb(37, 209, 186);
}
.red i {
color: #e1251b;
}
.menu-list a:hover i,
.menu-list a:hover,
.menu-list i:hover {
color: #c81623;
}
.ad-wrapper {
height: 260px;
position: relative;
top: 30px;
}
.ad-wrapper .jdms-wrapper {
position: absolute;
}
.ad-wrapper .jdms-wrapper .bac {
position: absolute;
}
.ad-wrapper .jdms-wrapper .content {
color: white;
position: absolute;
}
.ad-wrapper .jdms-wrapper .content .jdms {
width: 120px;
font-size: 28px;
font-weight: bold;
margin: 35px;
}
.ad-wrapper .jdms-wrapper .content .dc-wrapper {
width: 130px;
height: 30px;
margin: 86px 30px 0;
}
.ad-wrapper .jdms-wrapper .content .dc-wrapper .dct {
display: inline-block;
line-height: 28px;
font-size: 18px;
font-weight: bold;
text-align: center;
}
.ad-wrapper .jdms-wrapper .content .dc-wrapper .dc {
display: inline-block;
line-height: 30px;
font-size: 14px;
font-weight: normal;
vertical-align: bottom;
}
.ad-wrapper .jdms-wrapper .content .djs {
margin: 8px 30px;
}
.ad-wrapper .jdms-wrapper .content .djs li {
display: inline-block;
}
.ad-wrapper .jdms-wrapper .content .djs .black {
width: 30px;
height: 30px;
background-color: #2f3430;
font-size: 20px;
font-weight: bold;
text-align: center;
}
.ad-wrapper .jdms-wrapper .content .djs .mh {
font-size: 18px;
font-weight: bold;
margin: 0 3px;
}
.ad-wrapper .ad {
height: 260px;
position: absolute;
left: 190px;
}
.ad-wrapper .ad li {
width: 200px;
height: 260px;
background-color: white;
float: left;
}
.ad-wrapper .ad li img {
width: 140px;
height: 140px;
margin: 30px 0 0 30px;
}
.ad-wrapper .ad li .name {
width: 170px;
height: 17px;
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin: 8px 10px;
}
.ad-wrapper .ad li .jg {
width: 60px;
height: 17px;
margin: 0 auto;
display: block;
color: red;
font-size: 13px;
font-weight: bold;
}
.ad-wrapper .ad li:hover img {
opacity: 0.8;
transition: 0.3s;
}
ul{
list-style-type: none;
}
.ad-wrapper .ad li:hover span {
color: red;
transition: 0.3s;
}
.tool-wrapper {
position: relative;
}
.tool-wrapper .tool {
width: 58px;
height: 360px;
background-color: white;
position: absolute;
top: -230px;
right: 60px;
}
.tool-wrapper .tool li {
width: 32px;
height: 40px;
font-size: 16px;
line-height: 20px;
padding: 10px 14px;
}
.tool-wrapper .tool li i {
font-size: 17px;
margin: 0 8px;
}
.tool-wrapper .tool li:hover {
background-color: red;
}
.tool-wrapper .tool li:hover a {
color: white;
}
.tool-wrapper .tool li:hover i {
color: white;
}
技巧
初学可以在放“盒子”的时候，添加边框。可以显示具体“盒子”大小，方便操作。
box-sizing:border-box;/*把borders和padding全都包含在定义的宽高里面*/
border:1px solid red;
通过swiper插件实现轮播图
html中：
<!-- 创建中间轮播图 -->
<!-- 视觉容器 -->
<div class="swiper-father">
<div class="swiper-container">
<!-- 图片列表容器 -->
<div class="swiper-wrapper"
>
<img class="swiper-slide" src="img/宣传01.jpeg" style="width: 490px;">
<img class="swiper-slide" src="img/宣传02.webp" style="width:500px;">
<img class="swiper-slide" src="img/宣传03.webp" style="width:500px;">
</div>
</div>
<div class="swiper-button-prev"></div>
<!--左箭头。如果放置在swiper-container外面，需要自定义样式。-->
<div class="swiper-button-next"></div>
<!--右箭头。如果放置在swiper-container外面，需要自定义样式。-->
</div>
<!--初始化swiper-->
<script>
var swiper = new Swiper('.swiper-container', {
autoplay: true,
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
}
});
</script>
<!--添加轮播图箭头-->
<div class="swiper-wrapper-">
<a class="prev" href="#"></a>
<a class="next" href="#"></a>
</div>
</div>
css中：
.swiper-father {
position: relative;
padding:0 37px;
text-align: center;
left:200px;
width: 60%;
box-sizing:border-box;
/* box-sizing:border-box;
border:1px solid red;*/ /*初学不知道弄的盒子在上面位置，可以弄个盒子就在外面套个边框，确认位置*/
}
.swiper-container {
width:calc(100% - 50px);
margin:auto;
}
.swiper-wrapper img{
position: relative;
left:0px;
height:500px;
object-fit:contain;/*--contain: 中文释义“包含”。保持原有尺寸比例。
保证替换内容尺寸一定可以在容器里面放得下。因此，此参数可能会在容器内留下空白。*/
}
实现结果
第一次直接上手，代码中很多不足，望指正！
借鉴文章：https://blog.csdn.net/m0_54585610/article/details/120889863
2905
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
