HTML+CSS商城网站

本文详细解读了一个简单的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;
}

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

如需图片请评论@我或思信

  • 21
    点赞
  • 22
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
好的,我可以为您提供一个简单的购物商城网页示例,包含 HTMLCSS 和 JS,并带有网页跳转功能。 HTML 代码: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>购物商城</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <h1>购物商城</h1> <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">商品分类</a></li> <li><a href="#">购物车</a></li> <li><a href="#">登录</a></li> </ul> </nav> </header> <main> <h2>最新商品</h2> <div class="product-list"> <div class="product"> <img src="product1.jpg" alt="Product 1"> <h3>商品名称1</h3> <p>商品描述1</p> <button>加入购物车</button> </div> <div class="product"> <img src="product2.jpg" alt="Product 2"> <h3>商品名称2</h3> <p>商品描述2</p> <button>加入购物车</button> </div> <div class="product"> <img src="product3.jpg" alt="Product 3"> <h3>商品名称3</h3> <p>商品描述3</p> <button>加入购物车</button> </div> </div> </main> <footer> <p>© 2021 购物商城</p> </footer> <script src="script.js"></script> </body> </html> ``` CSS 代码: ```css body { font-family: Arial, sans-serif; margin: 0; padding: 0; } header { background-color: #333; color: #fff; padding: 10px; } header h1 { margin: 0; } header nav ul { list-style: none; margin: 0; padding: 0; } header nav ul li { display: inline-block; margin-right: 10px; } header nav ul li:last-child { margin-right: 0; } header nav ul li a { color: #fff; text-decoration: none; } main { padding: 10px; } .product-list { display: flex; flex-wrap: wrap; } .product { flex-basis: calc(33.33% - 20px); margin: 10px; padding: 10px; background-color: #f9f9f9; text-align: center; } .product img { width: 100%; height: auto; margin-bottom: 10px; } .product h3 { margin: 0; } .product button { background-color: #333; color: #fff; border: none; padding: 5px 10px; margin-top: 10px; cursor: pointer; } footer { background-color: #333; color: #fff; text-align: center; padding: 10px; } ``` JS 代码: ```javascript // 在商品按钮上添加点击事件 var buttons = document.querySelectorAll('.product button'); for (var i = 0; i < buttons.length; i++) { buttons[i].addEventListener('click', function() { alert('已加入购物车!'); }); } ``` 这是一个简单的购物商城网页,包含了一个导航栏、一个商品列表和一个页脚,以及一个简单的 JS 功能,点击商品按钮会弹出提示框。 您可以根据需要修改代码和样式,添加更多功能和交互,实现一个完整的购物商城网站
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

码农进厂打螺丝

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值