购物网站（内容页面）

第一张 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);
}

第三张

购物网站（内容页面）相关推荐

网站内容页面怎样优化？深度解析内容页面优化技巧
网站SEO优化,内容是基础.一个网站如果没有内容,谈再多的SEO优化技术都是空谈.网站内容可以是文字.图片或者是视频,但是我们知道,搜索引擎是比较喜欢图文结合的内容,所以,讯阅网xuuyue.com在 ...
网站内容页面如何优化才利于排名提升？
在网站的优化过程中,不仅要注重首页的优化,对于内容页也要非常重视.因为随着搜索引擎不断的更新和调整,各种算法也层出不穷,其目的就是打击有关网站优化的作弊手段,也给网站优化增加了不少的难度.那么对于网站 ...
搜索引擎蜘蛛抓取不到网站内容页面的原因总结
我们分析网站日志时会发现搜索引擎的蜘蛛有时候来访很频繁,但是就不抓取内容页面,如果没有经验的SEO人员会一头雾水,甚至会觉得是搜索引擎的问题. 其实有一大半还是网站自身存在问题,如果蜘蛛来访频率不低, ...
购物网站注册页面html,电商购物网站 - 实现注册
1.项目启动简单启动首先,新建一个项目工程目录,然后在目录下创建启动文件app.js. 这里会用到Express框架来实现相关功能,所以,需要先安装它. 在启动文件添加如下内容,来测试Expres ...
基于html+css的购物网站前端页面【折扣社】前端网站
2014年学生时代学前端的时候写的,现在回头来看,很多地方都没有考虑到,比如兼容性,分布式布局现在已做PHP开发,在回头来看代码,发现那个时候的代码稚嫩, 慢慢的有时间了,应该做代码重构,应该尝试 ...
购物网站前端页面的制作
课程设计作品
网站建设优质内容页面如何打造？
众所周知,网站建设离不开优质的内容页面设置,而优质的内容页面并不仅仅是围绕一个需求点去扩展内容的,还要针对网站的特色附加一些具有宣传性质的信息,可以在一定程度上解决用户的某些问题和信息需求,达成一定的 ...
SEO网站内容页优化，TDK关键词排名优化
SEO网站内容页优化该怎么进行优化?网站是以内容为导向的,所有的搜索引擎都是基于这一点来建立搜索规则,在任何时候内容都是排在首位的. SEO网站内容页优化首先离不开的就是TDK,TDK是我们网站和网站 ...
搜索引擎优化（seo）有哪些需要注意的细节？从图片、文章、网站内容这三方面来告诉你
大多数时候,当一些站长做优化忽视搜索引擎优化的细节,然后拍照的优化,一般网站图片优化的影响相对较小,但作为一个专业的SEO的站长,当然不能忽视每一个细节,让我们分析一个图片怎么做SEO优化. 首先,学 ...
如何制作自己的网页java_怎样制作自己的购物网站页面？
如果是自己去做一个购物网站,推荐你采用以下步骤一.项目大致分析我这个网站做来干什么,有什么用,几个人做,多长时间做完,采用什么架构,需要用到什么技术等. 二.具体分析既然是用Java做,你就不得 ...

购物网站（内容页面）

购物网站（内容页面）相关推荐

最新文章

热门文章