纯HTML、CSS实现搭建品优购商城的静态网站这布局还好吗？超适合前端入门者

鸭绒

于 2020-07-19 12:09:40 发布

阅读量3.8k

点赞数 5

分类专栏：布局效果文章标签： html5 css3 css html 前端

本文链接：https://blog.csdn.net/weixin_43334673/article/details/107442588

版权

这是一个适合前端入门者的实践项目，通过纯HTML5和CSS3搭建了一个品优购商城的静态网站。网站布局清晰，提供PC端预览，鼓励动手实践以加深前端知识的理解。源代码分为公共样式`common.css`和专有样式`index.css`，分别处理头部、尾部及内容主体部分。

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

这个静态网站非常适合前端入门者，我们很多时候学习的都是理论知识，我们应该多动手，把理论转化为实践，前端知识多，多动手才能加深印象。

网站地址：在PC端，点击这里，查看完整静态网站。

下面我们先来看看静态网站的布局效果：
在这里插入图片描述

觉得这个静态网站还OK的话？自己也想动手尝试一下，可以到这里取相应的素材.

接着上源码：

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>品优购</title>
    <link rel="stylesheet" href="../css/common.css" />
    <link rel="stylesheet" href="../css/index.css" />
  </head>
  <body>
    <!-- 头部公共部分 -->
    <header>
      <div class="header">
        <div class="typeArea">
          <div class="hLeft">
            <ul>
              <li>品优购欢迎您！</li>
              <li><a href="#">请登录</a></li>
              <li><a href="#" class="font_color">免费注册</a></li>
            </ul>
          </div>
        </div>
        <div class="hRight">
          <ul>
            <li><a href="#">我的订单</a></li>
            <li>|</li>
            <li><a href="#" class="more">我的品优购</a></li>
            <li>|</li>
            <li><a href="#">品优购会员</a></li>
            <li>|</li>
            <li><a href="#">企业采购</a></li>
            <li>|</li>
            <li><a href="#" class="more">关注品优购</a></li>
            <li>|</li>
            <li><a href="#">客户服务</a></li>
            <li>|</li>
            <li><a href="#" class="more">网站导航</a></li>
          </ul>
        </div>
      </div>
      <div class="nav typeArea">
        <a href="#"><img src="../uploads/pinyou.com.png" title="品优购" /></a>
        <div class="nav_middle">
          <div class="search">
            <input type="search" value="语言开发" /><button>搜索</button>

            <ul>
              <li><a href="#" class="font_color">优惠购首发</a></li>
              <li><a href="#">亿元优惠</a></li>
              <li><a href="#">9.9元团购</a></li>
              <li><a href="#">美满99减30</a></li>
              <li><a href="#">办公用品</a></li>
              <li><a href="#">电脑</a></li>
              <li><a href="#">通信</a></li>
            </ul>
          </div>
        </div>
        <div class="shopCar">
          我的购物车
          <div class="num">8</div>
        </div>
      </div>
      <div class="shop_list typeArea">
        <div class="all">全部商品分类</div>

        <ul>
          <li>服装城</li>
          <li>美妆馆</li>
          <li>传智超市</li>
          <li>全球购</li>
          <li>闪购</li>
          <li>团购</li>
          <li>拍卖</li>
          <li>有趣</li>
        </ul>
      </div>
    </header>
    <!-- 头部公共部分 -->
    <!-- 核心内容 -->
    <!-- 主体导航栏start -->
    <div class="body_title typeArea">
      <div class="all_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>
          <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="divImg">
        <a href="#"><img src="../uploads/divImg.png" /></a>
      </div>
      <div class="body_aside">
        <div class="body_aside_title">
          <ul>
            <li>品优购快报 <a href="#">更多</a></li>
            <li>
              <a href="#"><strong>[特惠]</strong>备战开学季 全民半价购物数码</a>
            </li>
            <li>
              <a href="#"><strong>[公告]</strong>备战开学季 全民半价购物数码</a>
            </li>
            <li>
              <a href="#"><strong>[特惠]</strong>百元中秋全品类礼券限量领</a>
            </li>
            <li>
              <a href="#"><strong>[公告]</strong>上品优生鲜 享阳澄湖大闸蟹</a>
            </li>
            <li>
              <a href="#"><strong>[特惠]</strong>每日享折扣品优品质游</a>
            </li>
            <li></li>
            <li></li>
            <li></li>
          </ul>
        </div>
        <div class="body_aside_list">
          <ul>
            <li>
              <a href="#"
                ><div></div>
                <span>花费</span></a
              >
            </li>
            <li>
              <a href="#"
                ><div></div>
                <span>机票</span></a
              >
            </li>
            <li>
              <a href="#"
                ><div></div>
                <span>电影票</span></a
              >
            </li>
            <li>
              <a href="#"
                ><div></div>
                <span

最低0.47元/天解锁文章

鸭绒

关注

5
点赞
踩
28

收藏

觉得还不错? 一键收藏
0
评论
纯HTML、CSS实现搭建品优购商城的静态网站这布局还好吗？超适合前端入门者

这个静态网站非常适合前端入门者，我们很多时候学习的都是理论知识，我们应该多动手，把理论转化为实践，前端知识多，多动手才能加深印象。下面我们先来看看静态网站的布局效果：觉得这个静态网站还OK的话？自己也想动手尝试一下，可以到这里取相应的素材.接着上源码：HTML:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name=".
复制链接

扫一扫