购物网站（内容页面）

编程语言 2023-07-12 01:34:18 阅读次数: 0

第一张 HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="../CSS/hwzq.css" rel="stylesheet" type="text/css">
<link href="../CSS/whole.css" rel="stylesheet" type="text/css">
<title>华为专区</title>
</head>
<body>
<!--header begin-->
<div class="header">
	<div class="header_logo"> <img src="../images/huawei_logo.png" /></div>
	<div class="header_text"> <a href="登录.html">登录</a>|<a href="登录.html">注册</a></div>
</div>
<!--header end-->

<!--nav begin-->
<div class="nav">
	<ul class="nav_in">
		<li><a href="../首页.html">首页</a></li>
        <li><a href="华为专区.html">华为专区</a></li>
		<li><a href="鸿蒙智选.html">鸿蒙智联</a></li>
		<li><a href="华为智选.html">华为智选</a></li>
		<li><a href="HarmonyOS.html">HarmonyOS</a></li>
		<li><a href= "购物车.html">我的购物车</a></li>
	</ul>
</div>
<!--nav end-->
<!--banner degin-->
<div class="banner"> <img src="../images/nav2.jpg"></div>
<!--banner end-->
	
<!--content begin-->
<h1 class="content_text">产品分类</h1>
<div class="content">
	<div class="content_box1">
	  <div class="conntent_box_text"><p><a href="#">手机</a></p></div>
	</div>
    <div class="content_box2">
		<div class="conntent_box_text"><p><a href="#">笔记本</a></p></div>
	</div>
	<div class="content_box3">
		<div class="conntent_box_text"><p><a href="#">平板</a></p></div>
	</div>
	<div class="content_box4">
		<div class="conntent_box_text"><p><a href="#">智慧屏</a></p></div>
	</div>
	<div class="content_box5">
		<div class="conntent_box_text"><p><a href="#">智能手表</a></p></div>
	</div>
	<div class="content_box6">
		<div class="conntent_box_text"> <p><a href="#">耳机</a></p></div>
	</div>
</div>
<!--content end-->
	
<!--footer begin-->
<div class="footer">
   <p>关于我们  |联系我们  |意见建议  |帮助中心  |使用条款</p>
   <p>免责声明:本网站部分内容由用户自行上传，如权利人发现误传其作品情形，请及时与本站联系。</p>
</div>
<!--footer end-->
</body>
</html>

因为有一些板块的样式是一样的，为了减少重复的编写，建一个css用来编写相同的样式

@charset "utf-8";
/* CSS Document */
*{margin:0;padding:0;border:0;list-style:none;}
body{font-family:"微软雅黑";font-size:16px;color:#404042;}/** CSS Document */
a{text-decoration:none;color:#fff;}
.header{
    width:1000px;
	margin:0 auto;
	padding-top:20px;
	overflow:hidden;
}
.header_logo{
	float:left;
}
.header_text{
	float:right;
	}
.header a{ color:#404042;}
.header a:hover{color:#da5454;}
.nav{width:100%;
    height:40px;
    background:#999;
	margin-top: 15px
}
.nav_in{
	width:980px;
	margin:0 auto;
}
.nav_in li{
	float:left;
}
.nav_in li a{
	display:block;
	line-height: 40px;
	padding:0 36px;
	
}
.nav_in li .current{
	background: #da5454;
}
.nav_in a:hover{background: #da5454;}
.banner{
	width:100%; 
	height:580px; 
	position:relative; 
	overflow:hidden;
}
.gouwuche{
	position: absolute;
	float:right;
}
.footer{
width:100%;
height:80px;
background:#8E8E8E;
text-align: center;
padding-top:25px;
color:#ccc;
	margin-top: 15px;
}
.footer p{
line-height: 30px;
font-size: 14px;
 }

再根据不同的点编写一个专门的css样式

@charset "utf-8";
/* CSS Document */
.banner{
	width:100%; 
	height:580px; 
	position:relative; 
	overflow:hidden;
}
.content{
	width:80%;
	height:800px;
	margin: 0 auto;
}
.content_text{
	text-align: center;
	margin-top: 20px;
	
}

.content_box1{
	float:left;
	width:20%;
	height:250px;
	background:url( "../images/content1.jpg");
	background-size:cover;
	margin-left:125px;
	margin-top: 25px;
}

.conntent_box_text {
	text-align:center;
	float:left;
	width:100%;
	height:15px;
	margin-top:220px;

}

.conntent_box_text a{
	font-size: 20px;
	
	color: #000000;
}
.content_box2{
	
	float:left;
	width:20%;
	height:250px;
	background:url("  ../images/content2.jpg");
	background-size:cover;
	margin-left:125px;
	margin-top: 25px;
}

.content_box3{
	float:left;
	width:20%;
	height:250px;
	background:url( "../images/content3.jpg");
	background-size:cover;
	margin-left:125px;
	margin-top: 25px;
}

.content_box4{
	
	float:left;
	width:20%;
	height:250px;
	background:url( "../images/content4.jpg");
	background-size:cover;
	margin-left:125px;
	margin-top: 100px;
	
}

.content_box5{
	
	float:left;
	width:20%;
	height:250px;
	background:url(  "../images/content5.jpg");
	background-size:cover;
	margin-left:125px;
	margin-top: 100px;
	
}

.content_box6{
	
	float:left;
	width:20%;
	height:250px;
	background:url(  "../images/content6.jpg");
	background-size:cover;
	margin-left:125px;
	margin-top: 100px;
	
}
.content_box1:hover,.content_box2:hover,.content_box3:hover,.content_box4:hover,.content_box5:hover,.content_box6:hover{
	transform:scale(1.15);
}

第二张HTML

HTML部分

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>鸿蒙智联</title>
<link href="../CSS/hmzx.css" rel="stylesheet" type="text/css">
<link href="../CSS/whole.css" rel="stylesheet" type="text/css">
</head>
<!--header begin-->
<div class="header">
<div class="header_logo"> <img src="../images/huawei_logo.png" /></div>
<div class="header_text"> <a href="登录.html">登录</a>|<a href="登录.html">注册</a> </div>
</div>
<!--header end-->

<!--nav begin-->
<div class="nav">
	<ul class="nav_in">
		<li><a href="../首页.html">首页</a></li>
        <li><a href="华为专区.html">华为专区</a></li>
		<li><a href="鸿蒙智选.html">鸿蒙智联</a></li>
		<li><a href="华为智选.html">华为智选</a></li>
		<li><a href="HarmonyOS.html">HarmonyOS</a></li>
		<li><a href= "购物车.html">我的购物车</a></li>
	</ul>
	</div>
<!--nav end-->
<!--banner degin-->
<div class="banner"> <img src="../images/2.webp"></div>
<!--banner end-->
<!--banner end-->
<!--content BEGIN-->
<h1 class="content_text">热门推荐</h1>
<div class="content">
	<a href="#"><div class="content_box1"></div></a>
	<a href="#"><div class="content_box2"></div></a>
	<a href="#"><div class="content_box3"></div></a>
	<a href="#"><div class="content_box4"></div></a>
	<a href="#"><div class="content_box5"></div></a>
	<a href="#"><div class="content_box6"></div></a>
	
</div>
<!--content end-->
	
<!--footer begin-->
<div class="footer">
   <p>关于我们  |联系我们  |意见建议  |帮助中心  |使用条款</p>
   <p>免责声明:本网站部分内容由用户自行上传，如权利人发现误传其作品情形，请及时与本站联系。</p>
</div>
<!--footer end-->
<body>
</body>
</html>

css部分

@charset "utf-8";
/* CSS Document */
.content{
	width:80%;
	height:800px;
	margin: 0 auto;
}
.content_text{
	text-align: center;
	margin-top: 20px;
}
.content_box1{
	float:left;
	width:20%;
	height:330px;
	background:url(  "../images/2.1.jpg");
	background-size:cover;
	margin-left:125px;
	margin-top: 25px;
}
.content_box2{
	float:left;
	width:20%;
	height:330px;
	background:url( "../images/2.2.jpg");
	background-size:cover;
	margin-left:125px;
	margin-top: 25px;
}
.content_box3{
	float:left;
	width:20%;
	height:330px;
	background:url(  "../images/2.3.jpg");
	background-size:cover;
	margin-left:125px;
	margin-top: 25px;
}
.content_box4{
	float:left;
	width:20%;
	height:330px;
	background:url(  "../images/2.4.jpg");
	background-size:cover;
	margin-left:125px;
	margin-top: 25px;
}
.content_box5{
	float:left;
	width:20%;
	height:330px;
	background:url(  "../images/2.5.jpg");
	background-size:cover;
	margin-left:125px;
	margin-top: 25px;
}
.content_box6{
	float:left;
	width:20%;
	height:330px;
	background:url(  "../images/2.6.jpg");
	background-size:cover;
	margin-left:125px;
	margin-top: 25px;
}

.content_box1:hover,.content_box2:hover,.content_box3:hover,.content_box4:hover,.content_box5:hover,.content_box6:hover{
	transform:scale(1.15);
}

第三张

猜你喜欢

转载自blog.csdn.net/m0_56078449/article/details/122881619
今日推荐
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
周排行
计算机组成与设计（七）—— 除法器
Integer Approximation(分治+枚举)
大话数据库索引
windows10系统JDK的配置及下载地址
mysql实现秒值转换中原六仔平台搭建
Codeforces Round #556 (Div. 1)
百练1064 网线主管
Codeforces 995F Cowmpany Cowmpensation
子集生成之增量构造法，位向量法，二进制法
ERROR: cmd.exe failed with args /c "/APK\gradle\rungradle.bat...
每日归档
更多
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022