HTML/CSS大作业--仿联想官网

最新推荐文章于 2023-01-04 09:21:24 发布
慕月九离
最新推荐文章于 2023-01-04 09:21:24 发布
阅读量2.4k
点赞数 5
文章标签： html css css3
本文链接：https://blog.csdn.net/qq_52659550/article/details/121701012
版权
用到了一些图片跟轮播插件
效果图如下唔~~有亿点点粗糙
代码如下：忘记哪是哪了，就不分开了
<!DOCTYPE html>
<html>
<head>
	<title>联想</title>

	<link rel="stylesheet" href="dist1\swiper-bundle.min.css">
	<meta charset="utf-8">
	<style type="text/css">
		
			body {
			background: #f5f5f5;
		}
/*轮播*/

		.swiper-container {
			width:100%;
			height: 460px;
		}
		.swiper-slide {
			text-align: center;
			font-size: 18px;
			background: #fff;
			/* Center slide text vertically */
			display: -webkit-box;
			display: -ms-flexbox;
			display: -webkit-flex;
			display: flex;
			-webkit-box-pack: center;
			-ms-flex-pack: center;
			-webkit-justify-content: center;
			justify-content: center;
			-webkit-box-align: center;
			-ms-flex-align: center;
			-webkit-align-items: center;
			align-items: center;
		}

		.container {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
		}
		.w-1200-1 {
			width: 100%;
			margin: 0 auto;
		}
		.w-1200-2 {
			width: 40%;
			margin: 0 auto;
			position: relative;
			right: 200px;
		}
		.link-1 {
			height: 50px;
			background: white;
		}
		.w-link-1 {
			width: 100%;
			color: #8D8D8D;
			font-size: 15px;
			font-family: 微软雅黑；
		}
		.w-link-2 {
			width: 6%;
			position: relative;
			right: 200px;
			color: #000;
			font-size: 12px;
			font-family: 微软雅黑；
		}
		.link-2 {
			
			width: 100%;
			height: 70px;
			display: flex;
			justify-content: center;
			background: #E0E0E0;

		}
		.link-2-1 {
			width:80%;
			height: 70px;
			background: #E0E0E0;
			font-size: 17px;
			color:#3a3a3a;
			font-family: 微软雅黑；

			
		}
		.search-box {
			width: 237px;
			height: 36px;
			background: transparent;
			z-index: 1;
			border-top-left-radius: 18px;
			border-bottom-left-radius: 18px;
			border-bottom:1px solid lightgrey;
			border-left: 1px solid lightgrey;
			border-top:1px solid lightgrey;
			border-right: 0;

		}
		.search-box:focus{
			background: #f9f9f9;
			outline: dashed;
			border: none;
		}
		.seach-button {
			width: 36px;
			height: 36px;
			background: url("放大镜1.png") no-repeat;
			background-position: 2px;
			color: white;
			border-right: 1px solid lightgrey;
			border-top: 1px solid lightgrey;
			border-bottom: 1px solid lightgrey;
			border-left: 0;
			border-top-right-radius: 18px;
			border-bottom-right-radius: 18px;
			position: relative;
			right: 5px;
		}

		.banner {
			height: 406px;
			position: absolute;
			width: 230px;
			background: rgba(255,251,240,.6);
			z-index: 999;
			left: 200px;
		}
		.banner .text {
			line-height: 58px;
			color: #494949;
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 200px;
			justify-content: space-around;
		}


		.menu-right {
			position: fixed;
			top: 10%;
			right: 0;
			z-index: 999;
		}
		.menu-right .item {
			width: 84px;
			height: 92px;
			background: white;
			border-bottom: 1px solid #f5f5f5;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}
		.menu-right img {
			width: 60px;
			height: 60px;
			-webkit-filter: grayscale(100%);
            -moz-filter: grayscale(100%);
            -o-filter: grayscale(100%);
            filter: grayscale(100%);
		}
		.menu-right .text {
			color: #757575;
			margin-top: 10px;
		}

		.goods {
			height: 95px;
			width: 100%
			margin-top: 10px;
			display: flex;
			justify-content: center;
			background: white;
		}
		.goods img {
			width: 316px;
			height: 170px;
		}
		.dao {
			display: flex;
			flex-direction: row;
			justify-content: center;
			width: 90%;
			height: 95px;
			background: white;
		
		}
		.dao .hang {
			display: flex;
			flex-direction: column;
			justify-content: center;
			width: 9%;
			height: 95px;
		}
		.hang:hover {
			box-shadow:0 0 15px #aaa;
		}
		.dao .hang img {
			width: 30px;
			height: 30px;
			-webkit-filter: grayscale(100%);
            -moz-filter: grayscale(100%);
            -o-filter: grayscale(100%);
            filter: grayscale(100%);
		}
		.text-a {
			text-align: center;
			color: #000;
		}


		.title {
			font-size: 14px;
			color: #333;
		}
		.desc {
			color: #b0b0b0;
			font-size: 12px;
		}
		.price {
			color: #ff6700;
		}
		.mobile-item {
			text-align: center;
		}
		.mobile-item:hover {
			box-shadow:0 0 15px #aaa;
		}
		.div-1 {
			display: flex;
			flex-direction: column;
			flex-wrap: wrap;
			justify-content: space-between;
			width: 1226px;
			height: 614px;


		}
		.div-2 {
			display: flex;
			flex-direction: column;
			flex-wrap: wrap;
			justify-content: space-between;
			align-items: baseline;
			width: 992px;
			height: 614px;
			position: relative;
			left: 160px;

		}
		.div-3 {
			display: flex;
			flex-direction: column;
			justify-content: center;
			width: 234px;
			height: 300px;
			background: #fff;
		}

		.div-3 img {
			width: 160px;
			height: 160px;
		}
		.w-1200 {
			width: 1226px;
			margin: 0 auto;
		}
		.w-1 {
			width: 234px;
			height: 300px;
			position: relative;
			left: 143px;
		}
		.w-1 img {
			width: 234px;
			height: 614px;
		}
		.title-1 {
			height: 80px;
		}
		.title-1 .div-1-1 {
			font-size: 40px;
			font-family: 微软雅黑;
			color: #1f1f1f;
			font-weight: 80px;

		}
		.title-1 .div-1-2 {
			font-size: 14px;
			width: 400px;
			justify-content: space-between;

		}
		.div-1-2 div:hover {
			color: red;
			text-decoration: underline;
		}
		.yejiao-1 {
			width: 100%;
			height: 199px;
			background: white;
			justify-content: center;
			position: relative;
			top: 20px;
		}
		.yejiao-1 img {
			width: 80%;
			height: 199px;
		}

		.yejiao-2 {
			display: flex;
			flex-direction: column;
			width: 10%;
			height: 200px;
			line-height: 20px;
			position: relative;
			left: 200px;

		}
		.yejiao-c {
			display: flex;
			flex-direction: column;
			width: 20%;
			height: 200px;
			line-height: 20px;
			position: relative;
			left: 200px;
		}
		h3 {
			color: #e1140a;
			font-size: 20px;
			font-family: 微软雅黑;
		}
		.kong {
			width: 10%;
			height: 10px;
		}
		.te-1{
			font-size: 16px;
			font-family: 微软雅黑;
			color: #1f1f1f;
			font-weight: 600;


		}
		.te-2 {
			font-size: 13px;
			font-family: 微软雅黑;
			color: #757575;
		}
		.ye {
			width: 70%;
			height: 298px;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
		
		}
		.tet {
			text-align: center;
			font-size: 17px;
			font-family: 微软雅黑;
			color: #757575;
			font-weight: 800;

		}

		.yejiao-bg {
			background: black;
			width: 100%;
			height: 46px;
			display: flex;
			justify-content: center;
		}
		.yejiao-word {
			font-size: 12px;
			font-family: 微软雅黑;
			color: #757575;
			height: 46px;
			display: flex;
			justify-content: space-between;
			width: 80%;

		}
		.po {
			cursor: default;
		}
		.po:hover {
			cursor: pointer;
		}


	</style>


</head>
<body>
<!-- 顶部导航1 -->
	<div>
		<div class="bg-1">
	<div class="container w-1200-1 link-1">
		<div class="container w-link-1" >
			<div><img src="https://p3.lefile.cn/product/adminweb/2019/01/14/4879b596-0b39-4534-bcc8-a50693fe825e.jpg"></div>
			<div class="container w-1200-2 po">
			<div>联想首页</div>
			<div>商城</div>
			<div>企业购</div>
			<div>服务</div>
			<div>会员</div>
			<div>社区</div>
			<div>门店</div>
			<div>品牌</div>
		    </div>
			<div color="red">下载APP</div>
		</div>
		<div class="container w-link-2 po" >
			<div>注册</div>
			<div>登录</div>
			<div><img src="https://p1.lefile.cn/product/adminweb/2019/01/18/c8f87ce8-1e14-4bb3-854e-f86af0f07072.png"></div>
		</div>
	</div>
  </div>
	</div>
<!-- 顶部导航2 -->
 <div class="link-2 container">
	<div class="container link-2-1 po">
		<div>新品</div>
		<div>定制</div>
		<div>合伙人</div>
		<div>以旧换新</div>
		<div>0元试用</div>
		<div>乐豆购</div>
		<div>学生</div>
		<div>直播</div>
		<div>企业购</div>
		<div>0元购</div>
		<div class="input">
			<input type="text" name="" class="search-box">
			<input type="" name="" class="seach-button">
		</div>
	</div>
</div>
<!-- 轮播菜单 -->
    <div class="container  w-1200-1 ">
		<div class="banner">
		<div class="text po">
            <div>Lenovo电脑  ></div>
			<div>ThinkPad电脑   ></div>
			<div>手机/通信   ></div>
			<div>智能产品  ></div>
			<div>配件/办公    ></div>
			<div>平板电脑   ></div>
			<div>增值服务     ></div>
		</div></div>
 <!-- 轮播-->
	<div class="swiper-container">
		<div class="swiper-wrapper">
			<div class="swiper-slide">
				<img src="https://p1.lefile.cn/fes/cms/2021/05/25/jrvcrbkel32m9zxqablttspjzm1rk4300433.jpg">
			</div>
			<div class="swiper-slide">
				<img src="https://p1.lefile.cn/fes/cms/2021/06/02/0hr8pvhiu42ncpyv9loeaupatzwrmn490849.jpg">
			</div>
			<div class="swiper-slide">
				<img src="https://p4.lefile.cn/fes/cms/2021/05/24/txpvn1w58cqpyyggzoji5salfxyf4i214349.jpg">
			</div>
			<div class="swiper-slide">
				<img src="https://p4.lefile.cn/fes/cms/2021/06/03/nx45foaoikmuq56vfclf50tlxf65dw015858.jpg">
			</div>
			<div class="swiper-slide">
				<img src="https://p4.lefile.cn/fes/cms/2021/05/31/h4zx3ml662ue2yyv37c5l3hvyrdju1374889.jpg">
			</div>
			<div class="swiper-slide">
				<img src="https://p4.lefile.cn/fes/cms/2021/05/31/2zkbqu3r0yxmj0ba9e9haj3tqis3lf979424.jpg">
			</div>
			<div class="swiper-slide">
				<img src="https://p3.lefile.cn/fes/cms/2021/06/15/kmifsdpym3rcsb0ue1z3w3xn5zd8so434004.jpg">
			</div>
			<div class="swiper-slide">
				<img src="https://p4.lefile.cn/fes/cms/2021/06/01/ilozm1p02dy0ovjuyx85sc1sv6amhm430208.jpg">
			</div>
			<div class="swiper-slide">
				<img src="https://p1.lefile.cn/fes/cms/2021/05/31/8gg4zfu632senf3wosrryazugpady1725160.jpg">
			</div>
			<div class="swiper-slide">
				<img src="https://p1.lefile.cn/fes/cms/2021/05/31/nwhht9ab6r7ygbbvkzizdexb56yeyl072142.jpg">
			</div>
		</div>
		<!-- Add Pagination -->
		<div class="swiper-pagination"></div>
		<!-- Add Arrows -->
		<div class="swiper-button-next"></div>
		<div class="swiper-button-prev"></div>
	</div>
	<!-- Swiper JS -->
	<script src="dist1/swiper-bundle.min.js"></script>
	<!-- Initialize Swiper -->
	<script type="text/javascript">
		var swiper = new Swiper('.swiper-container', {
			spaceBetween: 30,
			centeredSlides: true,
			autoplay: {
				delay: 2500,
				disableOnInteraction: false,
			},
			pagination: {
				el: '.swiper-pagination',
				clickable: true,
			},
			navigation: {
				nextEl: '.swiper-button-next',
				prevEl: '.swiper-button-prev',
			},
		});
	</script>


	</div>
<!-- 右侧菜单 -->
	<div class="menu-right po">
	<div class="item">
		<div>
			<img src="https://p4.lefile.cn/fes/cms/2020/02/21/xj5385rvoe8faxspi7o411x9jsxlob188755.png">
		</div>

	</div>
	<div class="item">
		<div>
			<img src="https://p2.lefile.cn/fes/cms/2020/02/21/t4empwrv6dtg02fw2yoky5t0uwqts7415366.png">
		</div>
		
	</div>
	<div class="item">
		<div>
			<img src="https://p4.lefile.cn/fes/cms/2020/02/21/auivk5c3kmxy9c78p4qaxonhkaelx3624822.png">
		</div>
	
	</div>
	<div class="item">
		<div>
			<img src="https://p4.lefile.cn/fes/cms/2020/02/21/lmdpfpd9veva84nrx17tt2iinykye9347318.png">
		</div>
	
	</div>
	<div class="item">
		<div>
			<img src="https://p3.lefile.cn/fes/cms/2020/02/21/r5ct09nrprhlsgvct3uuefcretjfua116929.png">
		</div>
	
	</div>
	<div class="item">
		<div>
			<img src="https://p4.lefile.cn/fes/cms/2021/03/26/lucq7d8wcbtswa9wauxuguuezin67k235446.jpg">
		</div>

	</div>
</div>

<!-- 轮播下方菜单 -->
 <div class="container goods w-1200-1 bg-2 po">
		<div class="dao">
			<div class="hang text-a">
				<div><img src="https://p3.lefile.cn/fes/cms/2020/04/08/mg88kk7f6mjxrzw5e2slv3hvgrrucn725301.png"></div>
				<div>会员福利</div>
			</div>
			<div class="hang text-a">
				<div><img src="https://p2.lefile.cn/fes/cms/2020/04/08/iqb2n44mq680744alpo58x6s8jrv1m594659.png"></div>
				<div>驱动下载</div>
			</div>
			<div class="hang text-a">
				<div><img src="https://p4.lefile.cn/fes/cms/2020/04/08/68mxw30qwh03x2h6ognqvqspktke6p347692.png"></div>
				<div>小新铺子</div>
			</div>
			<div class="hang text-a">
				<div><img src="https://p1.lefile.cn/fes/cms/2020/04/08/7szfzfc1m2c6mjqrhvfl3zdyl0zyuc153830.png"></div>
				<div>拯救者联盟</div>
			</div>
			<div class="hang text-a">
				<div><img src="https://p2.lefile.cn/fes/cms/2020/04/10/6c0zreef6prv59vq1s5dmiz7ke58s5243926.png"></div>
				<div>Think家族</div>
			</div>
			<div class="hang text-a">
				<div><img src="https://p4.lefile.cn/fes/cms/2020/04/13/1e9tba8qn6t689pyit0qg9f9wpe53e942495.png"></div>
				<div>手机新品</div>
		    </div>
			<div class="hang text-a">
				<div><img src="https://p2.lefile.cn/fes/cms/2020/04/08/k65b8hv8dmcuu3cevigwanal9hfbsv952288.png"></div>
				<div>刃天堂</div>
			</div>
			<div class="hang text-a">
				<div><img src="https://p1.lefile.cn/fes/cms/2021/06/09/yglmln5hq1jc4n7ae7o3fxs8xy073c902620.png"></div>
				<div>平板电脑</div>
			</div>
			<div class="hang text-a">
				<div><img src="https://p2.lefile.cn/fes/cms/2021/06/09/hy8te9iuz789qjoubc54gff03yzyoc740963.png"></div>
				<div>选件</div>
			</div>
			<div class="hang text-a">
				<div><img src="https://p2.lefile.cn/fes/cms/2021/06/09/pn0irn3j6p6echvy1tbrs3gwgb082a411698.png"></div>
				<div>智能</div>
			</div>
			<div class="hang text-a">
				<div><img src="https://p2.lefile.cn/fes/cms/2021/06/09/thntd1ifepnpph559j5286dz2ipsmm440412.png"></div>
				<div>服务</div>
			</div>
			
		</div>
	</div>

<!-- 商品1 -->
   <div>
	<div class="container w-1200 title-1 po">
		<div class="div-1-1">Lenovo电脑及周边</div>
		<div class="container div-1-2">
			<div>拯救者</div>
			<div>小新</div>
			<div>轻薄本</div>
			<div>笔记本周边选件</div>
		</div>
	</div>
	<div class="div-1">
		<div class="mobile-list w-1 mobile-item" cellspacing="14"><a href="https://activity.lenovo.com.cn/xiaofei/ZongHe/zonghe.index.html?pmf_group=in-push&pmf_medium=scdh-banner&pmf_source=Z00019889T000" ><img src="https://p2.lefile.cn/fes/cms/2021/05/24/al88mb3vvgm2mbk3h2pegawjmo3av7820558.jpg"></a></div>
		<div class="div-2 ">
			<div class="mobile-item div-3 ">
				<div>
						<a href="https://item.lenovo.com.cn/product/1014835.html"><img src="https://p1.lefile.cn/product/adminweb/2021/05/28/7jzRO2senoMQUJIZD14QbssWe-4392.jpg"></a>
					</div>
					<div class="title">
						【联想618福袋】98元随机枪
					</div>
					<div class="desc">
						
					</div>
					<div class="price">
						￥ 98
					</div>
			</div>
			<div class="mobile-item div-3 ">
				<div>
						<a href="https://item.lenovo.com.cn/product/1015425.html"><img src="https://p1.lefile.cn/product/adminweb/2021/06/06/bnJtHuIjfuJ44LDSOhxQXWkvF-2140.jpg"></a>
					</div>
					<div class="title">
						拯救者Y7000 2021英特尔
					</div>
					<div class="desc">
					 第十一代英特尔酷睿i5
					</div>
					<div class="price">
						￥ 6198
					</div>
			</div>
			<div class="mobile-item div-3 ">
				<div>
						<a href="https://item.lenovo.com.cn/product/1015433.html"><img src="https://p1.lefile.cn/product/adminweb/2021/06/06/ZvAj1RZ2t8JpItzcLATjcGzS7-2768.jpg"></a>
					</div>
					<div class="title">
						拯救者Y7000 2021英特尔
					</div>
					<div class="desc">
						第十一代英特尔酷睿i7
					</div>
					<div class="price">
						￥ 6798
					</div>
			</div>
			<div class="mobile-item div-3">
				<div >
						<a href="https://item.lenovo.com.cn/product/1014558.html"><img src="https://p4.lefile.cn/product/adminweb/2021/05/24/eS2CvPTcEdZA3189yfihnbOQE-7204.jpg"></a>
					</div>
					<div class="title">
						小新 Air 15 2021款
					</div>
					<div class="desc">
						第十一代英特尔酷睿i5
					</div>
					<div class="price">
						￥ 4799
					</div>
			</div>
			<div class="mobile-item div-3">
				<div>
						<a href="https://item.lenovo.com.cn/product/1014559.html"><img src="https://p3.lefile.cn/product/adminweb/2021/06/04/wcFibBWIMyjNNL7yQQ1DCnLTs-4159.jpg"></a>
					</div>
					<div class="title">
						2021款 小新Air 14
					</div>
					<div class="desc">
					第十一代英特尔酷睿i5
					</div>
					<div class="price">
					   ￥ 4699
					</div>
			</div>
			<div class="mobile-item div-3">
				<div>
						<a href="https://item.lenovo.com.cn/product/1014609.html"><img src="https://p1.lefile.cn/product/adminweb/2021/05/27/ILaLToCIQVylAZRBYnnDGl3vj-4062.jpg"></a>
					</div>
					<div class="title">
						YOGA 14s 2021款
					</div>
					<div class="desc">
					第十一代英特尔酷睿i5
					</div>
					<div class="price">
						￥ 6499
					</div>
			</div>
			<div class="mobile-item div-3">
				   <div>
					<a href="https://item.lenovo.com.cn/product/1014613.html"><img src="https://p2.lefile.cn/product/adminweb/2021/05/28/Luez5LxIEcUd10tqCR59aNQcG-8566.jpg"></a>
					</div>
					<div class="title">
						YOGA 13s 2021款 锐龙版
					</div>
					<div class="desc">
						AMD Ryzen5 
					</div>
					<div class="price">
						￥ 4799
					</div>
				</div>
			<div class="mobile-item div-3">
				<div>
						<a href="https://item.lenovo.com.cn/product/1013231.html"><img src="https://p2.lefile.cn/product/adminweb/2021/03/29/NcoQ8eE4C5McUPtM8V2hBFGpx-9638.jpg"></a>
					</div>
					<div class="title">
						拯救者散热支架Z3
					</div>
					<div class="desc">
						
					</div>
					<div class="price">
						￥ 109
					</div>
			</div>
		</div>
	</div>
</div>
<div>

<!-- 商品2 -->
		 <div>
	<div class="container w-1200 title-1 po">
		<div class="div-1-1">Lenovo台式机</div>
		<div class="container div-1-2">
			<div>AIO系列 </div>
			<div> BOX系列   </div>
			<div>GeekPro系列</div>
			<div>刃系列</div>
			<div>异能者DIY</div>
			<div>更多 ></div>
		</div>
	</div>
	<div class="div-1 po">
		<div class="mobile-list w-1 mobile-item" cellspacing="14"><a href="https://activity.lenovo.com.cn/xiaofei/tsj/2021DT618.index.html" ><img src="https://p4.lefile.cn/fes/cms/2021/06/08/74k08e3dykhot8t9x1cgc3e2iz0jr9767853.jpg"></a></div>
		<div class="div-2 ">
			<div class="mobile-item div-3 ">
				<div>
						<a href="https://item.lenovo.com.cn/product/1010257.html"><img src="https://p3.lefile.cn/product/adminweb/2020/10/13/K3euPTYrFqj2Rb9SrelfWntVB-9916.jpg"></a>
					</div>
					<div class="title">
						天逸510S-07IMB 分体式台
					</div>
					<div class="desc">
						双硬盘大储存
					</div>
					<div class="price">
						3799元
					</div>
			</div>
			<div class="mobile-item div-3 ">
				<div>
						<a href="https://item.lenovo.com.cn/product/1009330.html"><img src="https://p4.lefile.cn/product/adminweb/2021/03/09/sVvrLv6MYJljEmq8nT2PqaW8T-6741.jpg"></a>
					</div>
					<div class="title">
						天逸510S-07IMB 分体式台
					</div>
					<div class="desc">
					  家用性价比优选
					</div>
					<div class="price">
						3399元
					</div>
			</div>
			<div class="mobile-item div-3 ">
				<div>
						<a href="https://item.lenovo.com.cn/product/1014761.html"><img src="https://p2.lefile.cn/product/adminweb/2021/05/26/thb2B6mZn10GP3oc1LyMUCWkq-7644.jpg"></a>
					</div>
					<div class="title">
						AIO 520-24ITL 十一代英特尔
					</div>
					<div class="desc">
						MX450 独立显卡
					</div>
					<div class="price">
						5799元
					</div>
			</div>
			<div class="mobile-item div-3">
				<div >
						<a href="https://item.lenovo.com.cn/product/1013204.html"><img src="https://p1.lefile.cn/product/adminweb/2021/03/26/CvPvbpmliq98DOcBdjUpPmBDk-9254.jpg"></a>
					</div>
					<div class="title">
						AIO 520C-22IIL 十代英特尔
					</div>
					<div class="desc">
						影音性价比优选
					</div>
					<div class="price">
						3499元
					</div>
			</div>
			<div class="mobile-item div-3">
				<div>
						<a href="https://item.lenovo.com.cn/product/1014769.html"><img src="https://p3.lefile.cn/product/adminweb/2021/05/26/9h4xC5fxNYb2STArnhLPqMQny-9290.jpg"></a>
					</div>
					<div class="title">
						AIO 520-27ITL 十代英特尔
					</div>
					<div class="desc">
						27英寸大屏
					</div>
					<div class="price">
					    5299元
					</div>
			</div>
			<div class="mobile-item div-3">
				<div>
						<a href="https://item.lenovo.com.cn/product/1012574.html"><img src="https://p1.lefile.cn/product/adminweb/2021/03/25/of6Lem3KnqcLV5HPNmFbRIW8K-2064.jpg"></a>
					</div>
					<div class="title">
						AIO 520C-24ARE 23.8英寸
					</div>
					<div class="desc">
					高内存 大储存
					</div>
					<div class="price">
						4356元
					</div>
			</div>
			<div class="mobile-item div-3">
				   <div>
					<a href="https://item.lenovo.com.cn/product/1011594.html"><img src="https://p4.lefile.cn/product/adminweb/2021/03/25/9u7l0HXIFgq5ueHsyjL1fS55O-3886.jpg"></a>
					</div>
					<div class="title">
						AIO 520C-24ARE 23.8英寸
					</div>
					<div class="desc">
						家用优选
					</div>
					<div class="price">
						4499元
					</div>
				</div>
			<div class="mobile-item div-3">
				<div>
						<a href="https://item.lenovo.com.cn/product/1015111.html"><img src="https://p2.lefile.cn/product/adminweb/2021/06/08/oEMXXVpv8sJJEV9GOwy6bRAyR-9354.jpg"></a>
					</div>
					<div class="title">
						异能者游戏主机CO-48
					</div>
					<div class="desc">
						家用游戏性价比优选
					</div>
					<div class="price">
						6999元
					</div>
			</div>
		</div>
	</div>
</div>

<!-- 商品3 -->
	<div>


		   <div>
	<div class="container w-1200 title-1 po">
		<div class="div-1-1">ThinkPad 电脑</div>
		<div class="container div-1-2">
			<div>X1 系列 </div>
			<div>X系列</div>
			<div>T系列</div>
			<div>E系列</div>
			<div>S系列</div>
			<div>更多 ></div>
		</div>
	</div>
	<div class="div-1 po">
		<div class="mobile-list w-1 mobile-item" cellspacing="14"><a href="https://activity.lenovo.com.cn/smb/2021-618.html?pmf_group=in-push&pmf_medium=shop-banner&pmf_source=Z00019785T001" ><img src="https://p1.lefile.cn/fes/cms/2021/05/24/ci6r6le4s5o3l95ixk349dkwz1yn2z042918.jpg"></a></div>
		<div class="div-2 ">
			<div class="mobile-item div-3 ">
				<div>
						<a href="https://tk.lenovo.com.cn/product/1011355.html"><img src="https://p2.lefile.cn/product/adminweb/2021/03/09/CFj8Wu1lU9sJ2qYSsu7VqNcD3-7672.jpg"></a>
					</div>
					<div class="title">
						ThinkPad X1 Nano 
					</div>
					<div class="desc">
						至轻之作，引领时代
					</div>
					<div class="price">
						￥ 9999
					</div>
			</div>
			<div class="mobile-item div-3 ">
				<div>
						<a href="https://tk.lenovo.com.cn/product/1013331.html"><img src="https://p2.lefile.cn/product/adminweb/2021/04/23/5UWZPyROVirX2YEIYLbTZf1Cq-3752.jpg"></a>
					</div>
					<div class="title">
						ThinkPad X1 Carbon 2021
					</div>
					<div class="desc">
					 16：10曲边屏
					</div>
					<div class="price">
						￥ 10499
					</div>
			</div>
			<div class="mobile-item div-3 ">
				<div>
						<a href="https://tk.lenovo.com.cn/product/1008628.html"><img src="https://p3.lefile.cn/product/adminweb/2021/03/10/cqRbHjNH82KmOhZiTZZhyM4Tw-2640.jpg"></a>
					</div>
					<div class="title">
						ThinkPad X13 锐龙版
					</div>
					<div class="desc">
						轻巧便携，高效随行
					</div>
					<div class="price">
						￥ 5399
					</div>
			</div>
			<div class="mobile-item div-3">
				<div >
						<a href="https://tk.lenovo.com.cn/product/1013007.html"><img src="https://p4.lefile.cn/product/adminweb/2021/03/16/aDG2zzKA8Anz0JogXvfm08dvl-5176.jpg"></a>
					</div>
					<div class="title">
						ThinkPad E14 锐龙版
					</div>
					<div class="desc">
						六核十二线程，高性价比
					</div>
					<div class="price">
						￥ 4699
					</div>
			</div>
			<div class="mobile-item div-3">
				<div>
						<a href="https://tk.lenovo.com.cn/product/1009181.html"><img src="https://p2.lefile.cn/product/adminweb/2021/03/09/CFj8Wu1lU9sJ2qYSsu7VqNcD3-7672.jpg"></a>
					</div>
					<div class="title">
						ThinkPad P15v 英特尔酷睿i7
					</div>
					<div class="desc">
						十代英特尔酷睿i7
					</div>
					<div class="price">
					   ￥ 8299
					</div>
			</div>
			<div class="mobile-item div-3">
				<div>
						<a href="https://tk.lenovo.com.cn/product/1010910.html"><img src="https://p2.lefile.cn/product/adminweb/2021/05/17/5aC53fFvPHcG7EEkatZwxJkSy-5816.jpg"></a>
					</div>
					<div class="title">
						ThinkPad E14 2021 酷睿版
					</div>
					<div class="desc">
					全新11代酷睿i5
					</div>
					<div class="price">
						￥ 5299
					</div>
			</div>
			<div class="mobile-item div-3">
				   <div>
					<a href="https://tk.lenovo.com.cn/product/1014287.html"><img src="https://p2.lefile.cn/product/adminweb/2021/05/23/f4ILxaFygxV3tbUiz1JNCO9Mr-9539.jpg"></a>
					</div>
					<div class="title">
						全新ThinkBook 14 锐龙版
					</div>
					<div class="desc">
						AMD锐龙5 5600U移动处理器
					</div>
					<div class="price">
						￥ 4899
					</div>
				</div>
			<div class="mobile-item div-3 po">
				<div>
						<a href="https://tk.lenovo.com.cn/product/1014421.html"><img src="https://p4.lefile.cn/product/adminweb/2021/06/03/an2RPmZ9NkDppG9DchMob9G1L-7886.jpg"></a>
					</div>
					<div class="title">
						全新ThinkBook 14p 锐龙版
					</div>
					<div class="desc">
						AMD锐龙5 5600H移动处理器
					</div>
					<div class="price">
						￥ 5399
					</div>
			</div>
		</div>
	</div>
</div>
<div>

<!-- 	页底1 -->
<div class="container yejiao-1 ">
	<img src="https://p2.lefile.cn/product/adminweb/2019/08/19/8359a28f-9cce-463d-aaf5-b3c7148872f7.png">
</div>

<!-- 页底2 -->
<div class="container po">
	<div class="container ye">
	<div class="yejiao-2">
	<div class="te-1">购物指南</div>
	<div class="kong"></div>
	<div class="te-2">服务商信息</div>
	<div class="te-2">购买流程</div>
	<div class="te-2">注册登录</div>
	<div class="te-2">商品评价</div>
	</div>

	<div class="yejiao-2">
	<div class="te-1">配送方式</div>
	<div class="kong"></div>
	<div class="te-2">配送方式</div>
	<div class="te-2">配送方式信息</div>
	<div class="te-2">签收原则</div>
	<div class="te-2">物流查询</div>
	</div>

	<div class="yejiao-2">
	<div class="te-1">支付方式</div>
	<div class="kong"></div>
	<div class="te-2">分期支付</div>
	<div class="te-2">支付方式</div>
	<div class="te-2">支付问题</div>
	</div>

	<div class="yejiao-2">
	<div class="te-1">订单信息</div>
	<div class="kong"></div>
	<div class="te-2">订单信息</div>
	<div class="te-2">发票信息</div>
	<div class="te-2">手机激活查询</div>
	</div>

	<div class="yejiao-2">
	<div class="te-1">售后服务</div>
	<div class="kong"></div>
	<div class="te-2">售后服务总则</div>
	<div class="te-2">24小时在线客服</div>
	<div class="te-2">联想服务入口</div>
	<div class="te-2">热门解决方案</div>
     <div class="te-2">Lenovo Quick Fix工具</div>
	</div>

	
	<div class="yejiao-2">
	<div class="te-1">其他说明</div>
	<div class="kong"></div>
	<div class="te-2">服务承诺</div>
	<div class="te-2">账户安全</div>
	<div class="te-2">手机产品购买须知</div>
	<div class="te-2">环境信息</div>
	</div>

	<div class="yejiao-c">
	<div><h3>400-990-8888转4</h3></div>
	<div class="te-2">周一到周日 9:00-21:00</div>
	<div><input type="" name="" value="在线咨询" class="tet"></div>
</div>
</div>
</div>

<!-- 页脚 -->
<div class="yejiao-bg">
	<div class="container yejiao-word">
	<div>版权所有：1998-2021 联想集团 |法律公告 |隐私权政策 |产品安全</div>
	<div>京ICP备11035381-2 |京公网安备110108007970号 |营业执照:91110108700000458B</div>
</div>
</div>


</body>
</html>
慕月九离
关注
5
点赞
踩
21

收藏

觉得还不错? 一键收藏
4
评论
HTML/CSS大作业--仿联想官网

用到了一些图片跟轮播插件效果图如下唔~~有亿点点粗糙代码如下：忘记哪是哪了，就不分开了<!DOCTYPE html><html><head> <title>联想</title> <link rel="stylesheet" href="dist1\swiper-bundle.min.css"> <meta charset="utf-8"> <style type="te...
复制链接

扫一扫