制作电商页面（Html）

小麦79

于 2023-10-05 21:14:56 发布

阅读量1.6k

点赞数 4

分类专栏：前端文章标签： html 前端

本文链接：https://blog.csdn.net/jjlkjjlk/article/details/133587636

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

任务

制作一个电商页面，要求所卖物品清晰，页面色调清晰，要有主页和详情页。

网站所买物品：书籍

色调：#FF2400 橙红色

代码

主页HTML代码：

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/1.css"/>
	</head>
	<body>
		<div class="a">
			
		<div class="c1 c2">
		<div class="b1">
			<p class="c6">
			<img src="img/文集logo.jpg" width=160px; height=80px; >
			</p>
		<div class="b10">
		<p class="b2"> 
			全部商品分类
		</p>
		<p >
			<ul class="b3" type="circle">
				<li>名家作品</li>
				<li>青春文学</li>
				<li>外国名著</li>
				<li>考公考编</li>
				<li>教辅资料</li>
			</ul>
		</p>
		</div>
		</div>
		
		
		<div class="b4">
			<p class="b5">
				<input type="text" placeholder="白夜行" class="b6">      <!--制作搜索框-->
				<button class="b7">搜素</button>
			</p>
			<p class="b8">
				<span class="b9">图书</span>
				<span class="b9">电子书</span>
				<span class="b9">教辅</span>
				<span class="b9">漫画</span>
				<span class="b9">周边</span>
				<img src="img/封面图.jpg" width=500px; height=280px;>
			</p>
		</div>
		
		<div class="e1">
			<div class="e2">
					<p class="e4">购物车</p>
					<p class="e5">登录/注册</p>
			</div>
			<div class="e3">
				<p class="e6">排行榜</p>
					<ol class="e7">
					<li>《生死疲劳》</li>
					<li>《晚熟的人》</li>
					<li>《我与地坛》</li>
					<li>《蛤蟆先生去看心理医生》</li>
				   </ol>
			</div>
		</div>	
		</div>
		
		<div class="c1 c3">
			<div class="d1">
				图书/电子书
			</div>
			<div class="d2">
				<div class="d3">
					<dt class="d4"><img src="img/图书1.jpeg"  width=150px; height=180px; ></dt>
					<dd class="d6" > <a href="specifics.html">《我的职业是小说家》</a></dd>
					<dd class="d5">¥25</dd>
				</div>
				<div class="d8">
					<p class="d7"><img src="img/图书2.jpg" width=100px; height=80; alt=""> 
					<span class="d9">余华《活着》</span></p>
					<p class="d7"><img src="img/图书3.jpeg" width=100px; height=80; alt="">
					<span class="d9">鲁迅《故事新编》</span></p>
					<p class="d7"><img src="img/图书4.jpeg" width=100px; height=80; alt="">
					<span class="d9">莫言《晚熟的人》</span></p>
					<p class="d7"><img src="img/图书5.jpg" width=100px; height=80; alt="">
					<span class="d9">当年明月《明朝那些事儿》</span></p>
					<p class="d7"><img src="img/图书6.jpeg" width=100px; height=80; alt="">
					<span class="d9">张嘉佳《从你的全世界路过》</span></p>
					<p class="d7"><img src="img/图书7.jpg" width=100px; height=80; alt="">
					<span class="d9">《读者》杂志</span></p>
				</div>
				<div class="d10">
					<div class="d11"></div>
					<p class="d12"><a href="">更多>>></a></p>
				</div>
			</div>
		</div>
		
		<div class="c1 c4">
			<div class="d1">
				教辅/考证
			</div>
			<div class="d2">
				<div class="d3">
					<dt class="d4"><img src="img/教辅5.jpeg"  width=150px; height=180px; ></dt>
					<dd class="d6" > <a href="specifics2.html">《二级office高级应用》</a></dd>
					<dd class="d5">¥30</dd>
				</div>
				<div class="d8">
					<p class="d7"><img src="img/教辅1.jpeg" width=100px; height=80; alt=""> 
					<span class="d9">事业编综合应用能力教材</span></p>
					<p class="d7"><img src="img/教辅2.jpeg" width=100px; height=80; alt="">
					<span class="d9">考研《数学基础过关660题》</span></p>
					<p class="d7"><img src="img/教辅3.jpeg" width=100px; height=80; alt="">
					<span class="d9">《英语六级翻译30天速成》</span></p>
					<p class="d7"><img src="img/教辅4.jpg" width=100px; height=80; alt="">
					<span class="d9">《教师职业能力测验》</span></p>
					<p class="d7"><img src="img/教辅6.jpeg" width=100px; height=80; alt="">
					<span class="d9">《英语四级阅读理解》</span></p>
					<p class="d7"><img src="img/教辅7.jpg" width=100px; height=80; alt="">
					<span class="d9">《驾考宝典》</span></p>
				</div>
				<div class="d10">
					<div class="d11"></div>
					<p class="d12"><a href="">更多>>></a></p>
				</div>
			</div>
		</div>
		
		<div class="c1 c5">
			<div class="d1">
				漫画/周边
			</div>
			<div class="d2">
				<div class="d3">
					<dt class="d4"><img src="img/漫画5.jpg"  width=150px; height=180px; ></dt>
					<dd class="d6" > <a href="specifics3.html">《撒野》小说</a></dd>
					<dd class="d5">¥35</dd>
				</div>
				<div class="d8">
					<p class="d7"><img src="img/漫画1.jpg" width=100px; height=80; alt=""> 
					<span class="d9">《撒野》相框</span></p>
					<p class="d7"><img src="img/漫画2.jpg" width=100px; height=80; alt="">
					<span class="d9">《偷偷藏不住》贴纸</span></p>
					<p class="d7"><img src="img/漫画3.jpeg" width=100px; height=80; alt="">
					<span class="d9">《狐妖小红娘》联名装饰品</span></p>
					<p class="d7"><img src="img/漫画4.jpeg" width=100px; height=80; alt="">
					<span class="d9">《难哄》明信册</span></p>
					<p class="d7"><img src="img/漫画6.jpg" width=100px; height=80; alt="">
					<span class="d9">《知音漫客》杂志</span></p>
					<p class="d7"><img src="img/漫画7.jpg" width=100px; height=80; alt="">
					<span class="d9">《魔道祖师》钥匙扣</span></p>
				</div>
				<div class="d10">
					<div class="d11"></div>
					<p class="d12"><a href="">更多>>></a></p>
				</div>
			</div>
		</div>
		</div>
	</body>
</html>

主页CSS代码

*{
	padding:0;
	margin:0;
}
.a{width:1000px; 
   height:1800px; 
   border:0px solid black;
   margin:0px auto;}
.c1{width:900px; 
    border:3px solid #E47833; 
    margin-left:20px; 
    margin-top:8px;}
.c2{height:450px;
    width:950px;
    margin-top:30px;}
.c3{height:380px;
    width:950px;
    margin-top:30px;}
.c4{height:400px;
    width:950px;
    margin-top:30px;}
.c5{height:400px;
    width:950px;
    margin-top:30px;}
.c6{
	border:0px solid black;
	width:160px; 
	height:80px;
	margin:5px;
}
.b1{
	width:200px;
	height:360px;
	margin-top:10px;
	margin-left:10px;
	border:0px solid black;
	float:left;
}
.b2{
	width:100px;
	margin-left: 5px;
	margin-top: 15px;
	padding:5px;
	border:0px solid gray;
}
.b3{
	width:150px;
	height: 200px;
	margin-left: 5px;
	margin-top: 5px;
	padding-left:10px;
	border:0px solid gray;
}
.b4{
	width:550px;
	height:430px;
	border:0px solid cadetblue;
	float:left;
	margin:5px;
}
.b5{
	width:500px;
	height:80px;
	border:0px solid gray;
	margin:10px;
}
.b6{
	width:350px; 
	height:30px;
	margin-top:20px;
	margin-left:15px;
	border:2px solid #FF2400;
	font-size: 15px;
}
.b7{
	width:40px;
	height:30px;
	margin-left:5px;
	background-color: #FF2400;
	position:absolute;
	margin-top:20px;
	margin-bottom:auto;
	text-align:center;
	border:0px;
	font-size:15px;
}
.b8{
	width:500px;
	height:300px;
	border:0px solid black;
	margin-left:5px;
	padding:5px;
}
.b9{
	width:30px;
	height:30px;
	border:0px solid gray;
	margin-top:5px;
}
.b9:hover{
	background-color: grey;
}
.b10{
	background-color: gray;
}
.d1{
	width:850px;
	height:35px;
	border:0px solid black;
	margin:10px;
	font-size:25px;
	text-align:left;
}
.d2{
	width:870px;
	height:300px;
	margin:10px;
	border:0px solid #856363;
}
.d3{
	width:200px;
	height:280px;
	margin:10px;
	border:2px solid #6B4266;
	float:left;
}
.d4{
	margin:5px;
	text-align: center;
}
.d5{
	color:#FF0000;
	text-align: center;
}
.d6{
	text-align:center;
	font-size:20px;
}
.d6:hover{
	background-color: #FF7F00;
}
.d7{
	float:left;
	margin-top:10px;
	margin-left:20px;
	width:150px; 
	height:120px;
	border:0px solid #3299CC;
	text-align:left;
	padding:5px;
}
.d8{
	width:550px;
	height:280px;
	margin:10px;
	border:2px solid #6B4266;
	float:left;
	padding:5px;
	text-align:center;
}
.d9{
	font-size:10px;
	padding:1px;
	float:left;
}
.d9:hover{
	background-color: #FF7F00;
}
.d10{
	width:60px;
	height:280px;
	border:0px solid black;
	font-size:10px;
	margin-bottom:5px;
	margin-top:10px;
	text-align:center;
	float:left;
	padding-bottom: 5px;
}
.d11{
	width:40px;
	height:250px;
	border:0px solid black;
	margin:2px;
}
.d12{
	color:cornflowerblue;
}
.d12:hover{
	background-color: #FF7F00;
}
.e1{
	width:150px;
	height:400px;
	border:0px solid black;
	float:left;
	margin:10px;
}
.e2{
	width:130px;
	height:50px;
	border:0px solid black;
	margin:5px;
}
.e3{
	width:130px;
	height:250px;
	border:0px solid black;
	margin-top:40px;
	margin-left:5px;
}
.e4{
	width:50px;
	height:30px;
	border:0px solid black;
	margin-top:5px;
	float:left;
	font-size: 10px;
	padding-top:2px;
}
.e5{
	width:70px;
	height:30px;
	border:0px solid black;
	margin-left:2px;
	margin-top:5px;
	float:left;
	font-size:10px;
	padding-top:2px;
}
.e6{
	width:70px;
	height:30px;
	border:0px solid black;
	font-size:15px;
	padding-top:10px;
	margin-bottom:5px;
	margin-left:0px;
}
.e7{
	width:100px;
	height:150px;
	border:0px solid black;
	font-size:10px;
	padding-top:10px;
	margin:5px;
}

商品详情页HTML代码

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/2.css"/>
	</head>
	<body>
		<div class="w">
			<div class="t1">
				<img src="img/图书1.jpeg" alt="" width=250px; height=350px;>
			</div>
			<div class="t2">
				<div class="t3">
				<dd class="t4">书名：《我的职业是小说家》</dd>
				<dd class="t5">作者：村上春树</dd>
				<dd class="t6">价格</dd>
				<dd class="t7">
					¥25
				</dd>
				</div>
				<div class="t8">
					<button class="t10">立即购买</button>
					<button class="t9">加入购物车</button>
				</div>
			</div>
		</div>
	</body>
</html>

商品详情页CSS代码

*{
	padding:0;
	margin:0;
}
.w{
	width:700px;
	height:500px;
	border:2px solid #FF2400;
	margin-left:0px;
}
.t1{
	width:300px;
	height:400px;
	border:0px solid black;
	margin-left:5px;
	margin-top:5px;
	float:left;
	padding-left:10px;
	padding-top:10px;
}
.t2{
	width:250px;
	height:400px;
	margin-top:10px;
	margin-left:10px;
	border:0px solid black;
	float:left;
}
.t3{
	width:220px;
	height:250px;
	margin-top:30px;
	margin-left:10px;
	border:0px solid black;
}
.t4{
	width:200px;
	height:50px;
	margin-top:10px;
	margin-left:5px;
	border:0px solid black;
}
.t5{
	width:200px;
	height:50px;
	margin-top:10px;
	margin-left:5px;
	border:0px solid black;
}
.t6{
	width:60px;
	height:50px;
	margin-top:10px;
	margin-left:5px;
	border:0px solid black;
	float:left;
}
.t7{
	width:60px;
	height:50px;
	margin-top:10px;
	margin-left:5px;
	border:0px solid black;
	float:left;
	color:red;
}
.t8{
	width:220px;
	height:50px;
	margin-top:10px;
	margin-left:10px;
	border:0px solid black;
}
.t9{
	width:80px;
	height:40px;
	margin:10px;
	border:2px solid deepskyblue;
	float:right;
	background-color: white;
}
.t10{
	width:60px;
	height:40px;
	margin:10px 5px;
	border:2px solid deepskyblue;
	float:right;
	background-color: white;
}