HTML+CSS商城网站

置顶码农进厂打螺丝

已于 2024-01-23 16:12:23 修改

阅读量1.3k

点赞数 21

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

于 2024-01-23 15:00:18 首次发布

本文链接：https://blog.csdn.net/weixin_64537406/article/details/135771605

版权

#HTML 专栏收录该内容

5 篇文章 3 订阅

订阅专栏

本文详细解读了一个简单的HTML页面代码，介绍了页面的基本设置、CSS样式导入、结构划分（页眉、搜索栏、主体内容和商品展示），以及页面底部的页脚部分。这是一个静态页面，不含交互功能。

摘要由CSDN通过智能技术生成

这是简单的 HTML 页面代码，描述了一个电商网站的布局和样式。

1. 首先，它定义了页面的基本设置，包括字符集和视口设置。
2. 然后，它导入了一个 CSS 文件，该文件定义了页面的样式。
3. 页面被分为三个主要部分：页眉（header）、搜索栏（search）和主体内容（main）。
4.页面接着展示了一些商品展示的区域（product show），包括商品秒杀、企业团购等选项。

5. 搜索栏部分包括网站的 logo 和一个搜索框。
6.页眉部分包括网站的导航栏和用户登录/注册区域。
7.主体内容部分分为两个列：一个是主要选项列表（main_list），另一个是主要内容展示区域（main_contant）和选项卡内容区域（tab_contant）。
8. 最后，页面的底部有一个简单的页脚，包含了一些售后服务信息。

运行结果：

完整源码如下：HTML完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="./favicon.ico">
<link rel="stylesheet" href="css/style.css">      <!-- 导入CSS样式-->
<title>码农进厂打螺丝</title>        <!-- 商城名字-->
</head>

<body>
<!-- header start -->
<div class="header">
  <div class="nav w">
    <ul>
    	<!--导航栏部分-->
      <li><a href="#">TWR商城</a></li>
      <li class="fengexian"></li>
      <li><a href="#">嘿嘿</a></li>
      <li class="fengexian"></li>
      <li><a href="#">哈嗨</a></li>
      <li class="fengexian"></li>
      <li><a href="#">云服务</a></li>
      <li class="fengexian"></li>
      <li><a href="#">金融</a></li>
      <li class="fengexian"></li>
      <li><a href="#">细品</a></li>
      <li class="fengexian"></li>
      <li><a href="#">TWR开发平台</a></li>
      <li class="fengexian"></li>
      <li><a href="#">企业团购</a></li>
      <li class="fengexian"></li>
      <li><a href="#">资质证明</a></li>
      <li class="fengexian"></li>
      <li><a href="#">协议规划</a></li>
      <li class="fengexian"></li>
      <li><a href="#">下载App</a></li>
      <li class="fengexian"></li>
      <li><a href="#">Select Location</a></li>
    </ul>
    <div class="shopcar"> 购物车（0） </div>
    <div class="login"> <span>登录</span> <i></i> <span>注册</span> </div>
  </div>
</div>
<!-- header end -->
<!-- search start -->
<div class="search w">
  <div class="logo"></div>
  <div class="search_nav">
    <ul>
      <li><a href="#">啥啥</a></li>
      <li><a href="#">--品牌</a></li>
      <li><a href="#">电视</a></li>
      <li><a href="#">笔记本</a></li>
      <li><a href="#">家电</a></li>
      <li><a href="#">路由器</a></li>
      <li><a href="#">智能硬件</a></li>
      <li><a href="#">服务</a></li>
      <li><a href="#">社区</a></li>
    </ul>
  </div>
  <div class="inp">
    <input type="text" name="" id="">
    <a href="#"></a> </div>
</div>
<!-- search end -->
<!-- main start -->
<div class="main w">
  <div class="main_list">
    <ul>
      <li><a href="#">手机、电话卡</a></li>
      <li><a href="#">电视盒子</a></li>
      <li><a href="#">笔记本 显示器 平板</a></li>
      <li><a href="#">家电 插线板</a></li>
      <li><a href="#">出行 穿戴</a></li>
      <li><a href="#">智能路由器</a></li>
      <li><a href="#">电源配件</a></li>
      <li><a href="#">健康 儿童</a></li>
      <li><a href="#">耳机 音响</a></li>
      <li><a href="#">生活 箱包</a></li>
    </ul>
  </div>
  <div class="main_contant"> <i> <img  src="img/banner2.jpg" alt="" style="display: block;">
  </div>
  <div class="tab_contant">
    <ul>
      <li><a href="#">手机、电话卡</a></li>
      <li><a href="#">电视盒子</a></li>
      <li><a href="#">笔记本 显示器 平板</a></li>
      <li><a href="#">家电 插线板</a></li>
      <li><a href="#">出行 穿戴</a></li>
      <li><a href="#">智能路由器</a></li>
      <li><a href="#">电源配件</a></li>
      <li><a href="#">健康 儿童</a></li>
      <li><a href="#">耳机 音响</a></li>
      <li><a href="#">生活 箱包</a></li>
    </ul>
  </div>
</div>
<!-- main end -->

<!-- product show start -->
<div class="product w">
  <div class="list">
    <ul>
      <li> <i></i> <span>商品秒杀</span> </li>
      <li> <i></i> <span>企业团购</span> </li>
      <li> <i></i> <span>F码通道</span> </li>
      <li> <i></i> <span>粉卡</span> </li>
      <li> <i></i> <span>以旧换新</span> </li>
      <li> <i></i> <span>话费充值</span> </li>
    </ul>
  </div>
  <div class="show1"> <a href="#"> <img src="img/list1.jpg"alt =""> </a> </div>
  <div class="show2"> <a href="#"> <img  src="img/list2.jpg" alt=""> </a> </div>
  <div class="show3"> <a href="#"> <img src="img/list3.jpg" alt=""> </a> </div>
</div>
<!-- product show end -->

<!-- footer start -->
<div class="footer"> <span>预约维修服务</span> <i></i> <span>7天无理由退货</span> <i></i> <span>15天免费换货</span> <i></i> <span>满99包邮</span> <i></i> <span>全国300余家售后网点</span> </div>
<!-- footer end -->

</body>
</html>

CSS完整代码：

* {
  margin: 0;
  padding: 0;
  border: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  line-height: 0;
}

a {
  text-decoration: none;
}

li {
  list-style: none;
}

.fl {
  float: left;
}

.fr {
  float: right;
}

.w {
  width: 1226px;
  margin: 0 auto;
}


/* header start */

.header {
  width: 100%;
  height: 40px;
  background-color: #333333;
}

.nav ul li {
  float: left;
}

.nav ul li a {
  height: 40px;
  line-height: 40px;
  color: #afafaf;
  font-size: 12px;
}

.nav ul li a:hover {
  color: #fff;
}

.nav ul .fengexian,
.login i {
  height: 12px;
  border-left: 1px solid #34393d;
  border-right: 1px solid #423d39;
  margin: 16px 7px 0;
}

.shopcar {
  width: 140px;
  height: 40px;
  line-height: 40px;
  /* background-color: #424242; */
  float: right;
  color: #afafaf;
  font-size: 12px;
  margin-left: 20px;
  text-align: center;
  background: url(../images/shopcar.png) no-repeat 14px center #424242;
}

.shopcar:hover {
  background: url(../images/shopcar_hover.png) no-repeat 14px center #fff;
  color: #ff8500;
}

.login {
  height: 40px;
  line-height: 40px;
  float: right;
  color: #afafaf;
  font-size: 12px;
}


/* search start */

.search {
  /* width: 100%; */
  height: 100px;
  position: relative;
}

.search .logo {
  height: 55px;
  width: 55px;
  background: url(../img/logo2.jpg) no-repeat center #ff8500;
  position: absolute;
  left: 0;
  top: 22px;
}

.search .logo:hover {
  background: url(../img/logo.jpg) no-repeat center #ff8500;
}

.search .search_nav {
  width: 614px;
  height: 100px;
  /* background-color: pink; */
  position: absolute;
  left: 234px;
}

.search .search_nav li {
  float: left;
  padding: 0 10px;
}

.search_nav li a {
  display: inline-block;
  height: 100px;
  line-height: 100px;
  font-size: 14px;
  color: #323433;
}

.search_nav li a:hover {
  color: #ff8500;
}

.inp {
  height: 50px;
  width: 296px;
  /* background-color: yellow; */
  position: absolute;
  right: 0;
  top: 25px;
  font-size: 0px;
}

.inp input {
  width: 243px;
  height: 48px;
  border: 1px solid #dfdfdf;
  outline: none;
  float: left;
}

.inp input:focus {
  border: 1px solid #ff8500;
}

.inp a {
  float: left;
  width: 50px;
  height: 48px;
  border: 1px solid #dfdfdf;
  border-left: none;
  background: url(../img/search_img.png)  no-repeat center;
}

.inp a:hover {
  background: url(../img/shopcar_hover.png)  no-repeat center #ff8500;
}


/* main start */

.main {
  height: 460px;
  position: relative;
  margin-bottom: 14px;
}

.main .main_list {
  width: 234px;
  height: 420px;
  background-color: rgba(0, 0, 0, .5);
  float: left;
  padding: 20px 0;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 999;
}

.main .main_list li {
  height: 42px;
  line-height: 42px;
  /* background-color: pink; */
}

.main .main_list li:hover {
  background-color: #ff8500;
}

.main .main_list li a {
  padding-left: 30px;
  font-size: 12px;
  color: #fff;
}

.main .main_contant {
  width: 1226px;
  height: 100%;
  /* background-color: hotpink; */
  float: left;
}

.main .main_contant i {
  display: block;
}

.main .main_contant i img {
  width: 1226px;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}

.main .toggle {
  height: 70px;
  width: 992px;
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -35px;
  z-index: 999;
}

.toggle span {
  height: 70px;
  width: 40px;
  cursor: pointer;
  line-height: 70px;
  text-align: center;
  font-size: 32px;
  color: #d2d2d2;
}

.toggle span:hover {
  background-color: rgba(0, 0, 0, .5);
  color: #fff;
  /* background-color: pink; */
}

.main .main_contant ol {
  width: 90px;
  height: 10px;
  position: absolute;
  right: 34px;
  bottom: 25px;
  z-index: 99;
}

.main .main_contant ol li {
  float: left;
  width: 6px;
  height: 6px;
  border: 2px solid #939393;
  background-color: #8e8e8e;
  margin: 0 4px;
  border-radius: 50%;
}

.current {
  background-color: #fff!important;
}


/* tab 栏 */

.tab_contant {
  width: 992px;
  height: 460px;
  position: absolute;
  top: 0;
  left: 234px;
  z-index: 1;
}

.tab_contant li {
  list-style: none;
  width: 990px;
  height: 458px;
  /* background-color: yellow; */
  background-color: #fff;
  border: 1px solid #ccc;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}


/* show start */

.product {
  height: 170px;
  /* background-color: pink; */
  margin-bottom: 52px;
}

.product .list {
  height: 170px;
  width: 234px;
  background-color: #605750;
  float: left;
}

.product .list ul li {
  float: left;
  height: 85px;
  width: 78px;
  position: relative;
  cursor: pointer;
  opacity: 0.6;
}

.product .list ul li:hover {
  opacity: 1;
}

.product ul li i {
  display: block;
  height: 22px;
  width: 22px;
  background-color: pink;
  position: absolute;
  top: 22px;
  left: 28px;
  background: url(../images/jlt.png);
}

.product ul li:nth-child(2) i {
  background: url(../images/jlt.png) 0 -36px;
}

.product ul li:nth-child(3) i {
  background: url(../images/jlt.png) 0 -71px;
}

.product ul li:nth-child(4) i {
  background: url(../images/jlt.png) 0 -107px;
}

.product ul li:nth-child(5) i {
  background: url(../images/jlt.png) 0 -143px;
}

.product ul li:nth-child(6) i {
  background: url(../images/jlt.png) 0 -178px;
}

.product .list span {
  position: absolute;
  bottom: 20px;
  text-align: center;
  width: 100%;
  color: #c9c8c4;
  font-size: 12px;
}

.product .show1,
.show2,
.show3 {
  height: 170px;
  width: 316px;
  background-color: skyblue;
  float: left;
  margin-left: 15px;
}

.product .show1 {
  margin-left: 14px;
}

.product img {
  width: 316px;
  height: 170px;
}


/* footer start */

.footer {
  height: 25px;
  padding-left: 56px;
  width: 1114px;
  margin: 0 auto;
}

.footer span {
  color: #616163;
  font-size: 16px;
  height: 25px;
  display: inline-block;
  line-height: 25px;
  vertical-align: top;
  cursor: pointer;
}

.footer i {
  display: inline-block;
  height: 25px;
  width: 1px;
  background-color: #616163;
  margin: 0 54px;
  vertical-align: top;
}

.footer span:hover {
  color: #ff8500;
}

这只是一个静态页面的代码，不能执行任何交互功能。它提供了页面的布局和样式，但没有与后端服务器进行交互。