前端练习项目——品优购 Day9 列表页搭建

最新推荐文章于 2023-07-03 19:23:42 发布

Acc222222

最新推荐文章于 2023-07-03 19:23:42 发布

阅读量595

点赞数 2

分类专栏：前端练习项目——品优购文章标签： html5 css html css3

本文链接：https://blog.csdn.net/Acc222222/article/details/119418829

版权

前端练习项目——品优购专栏收录该内容

10 篇文章 5 订阅

订阅专栏

（1）列表页面是新的页面，我们需要新建页面文件list.html。

（2）他因为列表页的头部和底部与index.html基本一致，所以要把首页中的头部和底部结构复制过去。

（3）头部和底部的样式也需要，因此list.html还需要引入common.css

（4）需要新的list.css样式文件，这是列表页专门的样式文件。

（5）还需要把meta的内容移植过来，更改一下即可。

<meta name="description"
        content="品优购 - 亚洲较大的网上交易平台，提供各类服饰、美容、家居、数码、话费/点卡充值… 数亿优质商品，同时提供担保交易(先收货后付款)等安全交易保障服务，并由商家提供退货承诺、破损补寄等消费者保障服务，让你安心享受网上购物乐趣！" />
    <meta name="keyword"
        content="网上购物,C2C,在线交易,交易市场,网上交易,交易市场,网上买,网上卖,购物网站,团购,网上贸易,安全购物,电子商务,放心买,供应,买卖信息,网店,一口价,拍卖,网上开店,网络购物,打折,免费开店,网购,频道,店铺" />
    <title>品优购列表页</title>

引入的内容：

1.修改header头部

（1）结构分析

其实就是在logo盒子旁边加上一个盒子，里面放一张图片，再加上一个左边框。

<!-- 秒杀盒子制作 -->
<div class="miaosha">
     <img src="images/miaosha.png">
</div>

（2）盒子的CSS代码

.miaosha {
    position: absolute;
    left: 190px;
    top: 40px;
    border-left: 1px solid #c81523;
    padding: 3px 0 0 14px;
}

用定位把盒子放在正确的位置，加上左边框，用padding修饰图片位置。

（3）img的CSS代码

.miaosha img {
    width: 55px;
    height: 38px;
}

如果不修图片的大小，图片是可以超出父盒子边界的。同时，图片超不超出边界与父盒子是否设立宽高没有关系（也就是有宽高的盒子是不会限制插入的图片大小的，但是可以限制背景图片）

2.修改nav导航栏

（1）结构分析

整体是一个大盒子（版心），大盒子里面总共有两个盒子，左边是miaosha_list，右边是miaosha_con，盒子里有多个li。

<!-- nav模块制作 -->
    <div class="nav">
        <div class="w">
            <div class="miaosha_list">
                <ul>
                    <li><a href="#">品优秒杀</a></li>
                    <li><a href="#">品优秒杀</a></li>
                    <li><a href="#">品优秒杀</a></li>
                </ul>
            </div>
            <div class="miaosha_con">
                <ul>
                    <li><a href="#">女装</a></li>
                    <li><a href="#" class="style_red">手机</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="#">更多分类<span class="iconfont">&#xe612;</span></a></li>
                </ul>
            </div>
        </div>
    </div>

（2）左侧盒子miaosha_list制作

用ul li a结构制作即可。

<div class="miaosha_list">
     <ul>
         <li><a href="#">品优秒杀</a></li>
         <li><a href="#">品优秒杀</a></li>
         <li><a href="#">品优秒杀</a></li>
     </ul>
</div>

盒子和li都加上左浮动

.miaosha_list {
    float: left;
}

.miaosha_list ul li {
    float: left;
}

1.a的CSS代码

.miaosha_list ul li a {
    display: block;
    line-height: 47px;
    padding: 0 30px;
    color: #000;
    font-size: 16px;
    font-weight: 700;
}

转换为块级元素，用padding拉开间距（参考nav导航栏，为了增大点击面积），修改字体大小与粗细。

（3）右侧盒子miaosha_con制作

同样的ul li a结构

            <div class="miaosha_con">
                <ul>
                    <li><a href="#">女装</a></li>
                    <li><a href="#" class="style_red">手机</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="#">更多分类<span class="iconfont">&#xe612;</span></a></li>
                </ul>
            </div>

miaosha_con盒子和li都要加上浮动：

.miaosha_con {
    float: right;
}

.miaosha_con ul li {
    float: left;
}

1.a的CSS代码

.miaosha_con ul li a {
    display: block;
    line-height: 47px;
    font-size: 14px;
    padding: 0 20px;
}

转化为块级元素，调整字体位置，间距，大小即可。

3.列表页主体制作

（1）结构分析

整体是一个大盒子（miaosha_container），里面有上下两个盒子（miaosha_hd，miaosha_bd）

（2）miaosha_hd盒子制作

1.结构分析

其实就是盒子里面插入一张图片，图片宽度与父盒子相同（继承自版心）

<div class="miaosha_hd">
    <img src="upload/shouji.png">
</div>

.miaosha_hd img {
    width: 100%;
}

（3）miaosha_bd盒子制作

1.结构分析

整体是一个大盒子（miaosha_bd），大盒子里面的每个li可以分为五部分——图片，说明，价格，进度条，按钮。其中价格和进度条可以放在一个盒子中。

2.对大盒子一些分析

大盒子不要给高度，因为内容是不确定的。但子盒子（li）需要浮动，li一浮动就不占位置了，这样会影响下面的标准流盒子（也就是footer），因此需要清除浮动。

对下面盒子的影响：

3.清除浮动的方法

在浮动元素的父元素中添加clearfix类即可。由于浮动的元素是li，因此可以在ul中添加。其中clearfix的CSS代码写在base.css中。

.clearfix:after {
    visibility: hidden;
    clear: both;
    display: block;
    content: ".";
    height: 0
}

.clearfix {
    *zoom: 1
}

<ul class="clearfix">

4.li的CSS代码

.miaosha_bd ul li {
    float: left;
    border: 1px solid transparent;
    width: 290px;
    height: 460px;
}

.miaosha_bd ul li:hover {
    border: 1px solid #c81523;
}

向左浮动，给出宽度和高度。值得注意的是：li有一个透明的边框——因为鼠标放在上面需要生成一个红色的边框，如果刚开始没有边框的话会影响别的盒子的位置，导致看起来非常奇怪。

5.li里面商品图片img制作

<!-- 商品图片 -->
<img src="upload/iphone12.jpg">

.miaosha_bd ul li img {
    width: 100%;
    height: 295px;
}

宽度与父盒子相同，给出高度即可。

6.li里面文字说明盒子（pro_con）制作

<!-- 商品文字说明 -->
<div class="pro_con">
      <p>Apple iPhone 12 (A2404) 128GB 白色<br>支持移动联通电信5G 双卡双待手机</p>
</div>

.miaosha_bd ul li .pro_con {
    width: 100%;
    height: 50px;
    color: #747474;
    font-size: 12px;
    text-align: center;
}

给出宽度，高度，字体颜色，字体大小，字体位置。（字体类的样式都是可以继承的）

7.li里面折扣盒子（包括价格和进度条）制作

这里给出了一种注释的写法——用start和end包围所做的模块，具体情况可以自己决定是否使用。

.sale {
    position: relative;
    width: 100%;
    height: 65px;
}

sale_up盒子制作：

<div class="sale_up">
     <p>¥</p>
     <h2>5999</h2>
     <p id="nosale">¥6999</p>
</div>

.sale_up p {
    display: inline-block;
    font-size: 14px;
    color: #e60012;
}

.sale_up h2 {
    display: inline-block;
    font-size: 22px;
    color: #e60012;
}

因为p是块级元素，h2也是块级元素，但是‘¥’要和‘5999’放在一起，因此p和h2都需要转化为行内块元素（或行内元素，反正外面有sale_up盒子与下面的sale_bot隔开）。

曾经价格的做法：

#nosale {
    font-size: 14px;
    color: #a4a4a4;
    text-decoration: line-through;
    padding-left: 10px;
}

正常的字体做出来，最后加上text-decoration:line-through即可。

sale_bot盒子制作：

<div class="sale_bot">
      <p>已售88%</p>
      <div class="sale_cen"></div>
      <p id="sale_le">
            剩余<span>31</span>件
       </p>
</div>

p的CSS代码：

.sale_bot p {
    position: absolute;
    top: 37px;
    left: 15px;
    color: #666666;
    font-size: 14px;
}

用定位把盒子定到合适位置，修改字体样式。

进度条的CSS代码：

.sale_cen {
    position: absolute;
    top: 41px;
    left: 78px;
    width: 132px;
    height: 12px;
    background-color: #ed282e;
    border-radius: 6px;
}

定位定到合适位置，给出合资的宽和高，然后加上背景颜色，用border-radius改成类似圆即可。

id的CSS代码：

#sale_le {
    position: absolute;
    top: 36px;
    left: 220px;
}

定个位就行了。

8.抢购按钮制作

<!-- 抢购按钮模块 -->
<button>立即抢购</button>

.miaosha_bd ul li button {
    height: 50px;
    width: 290px;
    background-color: #b1191a;
    color: white;
    font-size: 20px;
}

宽高，背景颜色，字体颜色，字体大小。

Acc222222

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
前端练习项目——品优购 Day9 列表页搭建

（1）列表页面是新的页面，我们需要新建页面文件list.html。（2）他因为列表页的头部和底部与index.html基本一致，所以要把首页中的头部和底部结构复制过去。（3）头部和底部的样式也需要，因此list.html还需要引入common.css（4）需要新的list.css样式文件，这是列表页专门的样式文件。（5）还需要把meta的内容移植过来，更改一下即可。<meta name="description" content="品优购 - 亚洲较大的网上交易平
复制链接

扫一扫