前端大作业之淘宝页面设计

最新推荐文章于 2024-06-03 15:24:55 发布

「已注销」

最新推荐文章于 2024-06-03 15:24:55 发布

阅读量5.7k

点赞数 12

文章标签： html 前端 css javascript vue.js

本文链接：https://blog.csdn.net/m0_50319610/article/details/121778191

版权

文章目录

前言

1.静态动态实现淘宝首页的展示。

2.本项目使用HBuilder X编译器是实现。

效果图片

一、代码目录块

二、使用步骤

1.引入库

引入js库:

<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/less.js/4.1.1/less.min.js"></script>

引入图片库:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
			integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw=="
			crossorigin="anonymous" referrerpolicy="no-referrer" />

图片库网站 :

引入less文件:

<link rel="stylesheet/less" href="css/main.less" />

2.完整项目代码

html代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet/less" href="css/main.less" />
		<script src="https://cdn.bootcdn.net/ajax/libs/less.js/4.1.1/less.min.js"></script>
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
			integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw=="
			crossorigin="anonymous" referrerpolicy="no-referrer" />
		<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
		<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
		

	</head>
	<body>
		<!-- 顶部条 -->
		<div id="header">
			<div class="container clearfix">
				<div class="header-left">
					<a href="#">中国大陆 <i class="fa fa-angle-down" aria-hidden="true"></i></a>

					<a href="#" class="orange">亲，请登录</a>

					<a href="#">免费注册</a>
					<a href="#">手机逛淘宝</a>


				</div>
				<div class="header-right">
					<a href="#">我的淘宝 <i class="fa fa-angle-down" aria-hidden="true"></i></a>

					<a href="#"><i class="fa fa-shopping-cart orange" aria-hidden="true"></i> 购物车 <span
							class="shopnum">0</span> <i class="fa fa-angle-down orange" aria-hidden="true"></i></a>

					<a href="#"><i class="fa fa-star-o " aria-hidden="true"></i>收藏夹 <i class="fa fa-angle-down"
							aria-hidden="true"></i></a>

					<a href="#">商品分类</a>
					<a href="#">免费开店</a>
					<span class="split">|</span>
					<a href="#">千牛卖家中心 <i class="fa fa-angle-down" aria-hidden="true"></i></a>

					<a href="#">联系客服</a>

					<a href="#"> <i class="fa fa-list-ul" aria-hidden="true" style="color: orangered;"></i> 网站导航 <i
							class="fa fa-angle-down" aria-hidden="true"></i></a>
				</div>
			</div>
		</div>
		<!-- 主体 -->
		<div id="main">
			<div class="container">
				<div class="searchbar">
					<div class="logo">
						<img src="https://gw.alicdn.com/imgextra/i3/O1CN01uRz3de23mzWofmPYX_!!6000000007299-2-tps-143-59.png"
							alt="">
					</div>

					<form action="https://s.taobao.com/search" method="get">
						<div class="searchbar-main" >
							<div class="search-category">
								宝贝 <i class="fa fa-chevron-down" aria-hidden="true"></i&