任务1.2 新年促销电商网页制作

lymite

已于 2023-12-01 16:41:11 修改

阅读量379

点赞数 7

文章标签： html 前端 css

于 2023-12-01 16:30:06 首次发布

本文链接：https://blog.csdn.net/2301_79724334/article/details/134736631

版权

1.整体布局

2.代码实现

3.总结与反思

1.整体布局

参考各大电商平台的网页布局后，我认为大致可以分为以下几个主要的部分：头部，主体和页脚，其中还可以继续进行分区（下文有相关说明）。

（1）在头部部分，我在左侧放置了该网页的logo，右侧则是导航栏部分，方便用户完成登录等操作。其次，我在导航栏下方设置了搜索框，方便用户搜索心仪的商品，提升用户体验。

（2）在主体部分，我在位于左侧的部分放置了一个侧边栏显示商品的类别，在下方，则是当日的热销商品。

（3）在页脚部分，我发置了一系列的用户操作，方便用户查找相关内容。

由于是以新年为主题的促销，所以我选择了以新年风格的海报作为整个网页的背景，凸显喜庆的氛围。

2.代码实现

由于该网页内容较多，所以我采用了将html和css完全分离的代码写法。以下是HTML的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="全栈组作业2.css">
</head>
<body>   
    <!-- 头部部分 -->
    <div class="header w">
        <div class="logo">
            <img src="image/logo.png" alt="">
        </div>
        <div class="nav">
            <ul>
                <li><a href="#">登录</a></li>   
                <li><a href="#">注册</a></li>
                <li><a href="#">消息通知</a></li>
                <li><a href="#"><img src="image/购物车.png" alt="">购物车</a></li>
            </ul>
        </div>
    </div>
    <!-- search部分 -->
    <div class="search w">
        <input type="text" placeholder="请输入商品名称">
        <button>
            <img src="image/search.logo.png" alt="">
        </button>
    </div>
    <!-- banner部分 -->
    <div class="banner w">
        <div class="subnav">
            <ul>
                <li><a href="#">手机 电脑 <span> > </span></a></li>
                <li><a href="#">家电 家居 <span> > </span></a></li>
                <li><a href="#">女鞋 时装 <span> > </span></a></li>
                <li><a href="#">食品 烟酒 <span> > </span></a></li>
                <li><a href="#">运动 户外 <span> > </span></a></li>
            </ul>
        </div>
        <div class="photo"></div>
    </div>
    <!-- goods部分 -->
    <div class="goods w">
        <div class="box">
            <h3>今日推荐</h3>
            <a href="">查看全部</a>
        </div>
        <ul class="clearfix">
            <li>
                <a href="#"><img src="image/airpod.jpg" alt="">
                    <p>索尼(SONY)INZONE Buds 电竞游戏耳机</p>
                </a>
                <div class="price">
                    <i>￥</i>
                    <span class="number">
                        1499.
                        <span class="float">00</span>
                    </span>
                </div>
            </li>
            <li>
                <a href="#"><img src="image/kettle.jpg" alt="">
                    <p>小熊(Bear) 养生壶养身杯办公室 智能多用恒温电热水壶</p>
                </a>
                <div class="price">
                    <i>￥</i>
                    <span class="number">
                        159.
                        <span class="float">00</span>
                    </span>
                </div>
            </li>
            <li>
                <a href="#"><img src="image/beer.jpg" alt="">
                    <p>茅台(MOUTAI) 53度 2.5L 1瓶 贵州大曲癸卯兔年</p>
                </a>
                <div class="price">
                    <i>￥</i>
                    <span class="number">
                        1858.
                        <span class="float">00</span>
                    </span>
                </div>
            </li>
            <li>
                <a href="#"><img src="image/changer.jpg" alt="">
                    <p>汇君品字插头铜镀镍大电流三芯电源充电插头 10A白色公头</p>
                </a>
                <div class="price">
                    <i>￥</i>
                    <span class="number">
                        12.
                        <span class="float">00</span>
                    </span>
                </div>
            </li>
            <li>
                <a href="#"><img src="image/refrigerator.jpg" alt="">
                    <p>西门子(SIEMENS)271升三门冰箱家用 分区保鲜 智能精确控温</p>
                </a>
                <div class="price">
                    <i>￥</i>
                    <span class="number">
                        2499.
                        <span class="float">00</span>
                    </span>
                </div>
            </li>
            <li>
                <a href="#"><img src="image/sweap.jpg" alt="">
                    <p>3M思高 F5夹布平板拖把 360度旋转无死角 共2块原装拖布</p>
                </a>
                <div class="price">
                    <i>￥</i>
                    <span class="number">
                        64.
                        <span class="float">00</span>
                    </span>
                </div>
            </li>
            <li>
                <a href="#"><img src="image/sofa.webp" alt="">
                    <p>免洗科技布布艺沙发 双人极简 轻奢乳胶 暮光橙 单人位【0.85米】</p>
                </a>
                <div class="price">
                    <i>￥</i>
                    <span class="number">
                        500.
                        <span class="float">00</span>
                    </span>
                </div>
            </li>
            <li>
                <a href="#"><img src="image/table.jpg" alt="">
                    <p>菲典森吧台桌收银台型 简约柜台 60CM暖白色</p>
                </a>
                <div class="price">
                    <i>￥</i>
                    <span class="number">
                        95.
                        <span class="float">00</span>
                    </span>
                </div>
            </li>
        </ul>
    </div>
    <!-- footer部分 -->
    <div class="footer w">
        <div class="links">
            <dl>
                <dt>关于我们</dt>
                <dd><a href="#">购物指南</a></dd>
                <dd><a href="#">常见问题</a></dd>
                <dd><a href="#">联系客服</a></dd>
                <dd><a href="#">帮助</a></dd>
            </dl>
            <dl>
                <dt>配送方式</dt>
                <dd><a href="#">上门自提</a></dd>
                <dd><a href="#">极速快递</a></dd>
                <dd><a href="#">海外配送</a></dd>
                <dd><a href="#">配送服务查询</a></dd>
            </dl>
            <dl>
                <dt>支付方式</dt>
                <dd><a href="#">货到付款</a></dd>
                <dd><a href="#">在线支付</a></dd>
                <dd><a href="#">分期付款</a></dd>
                <dd><a href="#">公司转账</a></dd>
            </dl>
            <dl>
                <dt>售后服务</dt>
                <dd><a href="#">售后政策</a></dd>
                <dd><a href="#">价格保护</a></dd>
                <dd><a href="#">退款说明</a></dd>
                <dd><a href="#">返修/退换货</a></dd>
            </dl>
        </div>
    </div>
</body>
</html>

以下是CSS的代码：

* {
    padding: 0;
    margin: 0;
}
a {
    text-decoration: none;
}
li {
    list-style: none;
}
.w {
    width: 1200px;
    margin: auto;
}
.clearfix:before,.clearfix:after {
    content:"";
    display:table;
  }
  .clearfix:after {
    clear: both;
  }
  .clearfix {
    *zoom:1;
  }
body {
    background-image: url(image/poster.png);
    background-repeat: no-repeat;
    background-position: center top;
}
.header {
    height: 42px;
    margin: auto;
    background-color: #333333;
}
.logo {
    float: left;
    width: 700px;
    height: 42px;
    margin-left: 30px;
}
.nav {
    float: left;
    margin-left: 120px;
}
.nav ul li {
    float: left;
}
.nav ul li a {
    float: left;
    display: block;
    height: 42px;
    line-height: 42px;
    padding: 0 10px;
    font-size: 18px;
    color: #b0b0b0;
}
.nav ul li a:hover {
    color: #fff;
}
.nav ul li a img {
    float: left;
    margin-left: 7px;
    margin-top: 10px;
}
.search {
    height: 100px;
    background-color: #fff;
    text-align: center;
}
.search input {
    float: left;
    width: 400px;
    height: 40px;
    margin-top: 30px;
    margin-left: 400px;
    border-right: 0;
    outline-color: red;
}
.search button{
    float: left;
    width: 50px;
    height: 44px;
    margin-top: 30px;
    background-color: red;
    border: 0;
}
.banner {
    height: 421px;
    background-color: pink;
}
.subnav {
    height: 421px;
    width: 230px;
    background: rgba(0,0,0,0.3);
    overflow: hidden;
}
.subnav ul li {
    height: 45px;
    width: 230px;
    line-height: 45px;
}
.subnav ul li span {
    float: right;
    margin-right: 25px;
}
.subnav ul li a {
    display: block;
    height: 45px;
    width: 200px;
    padding-left: 30px;
    margin: 23px 0;
    line-height: 45px;
    font-size: 14px;
    color: #fff;
}
.subnav ul li :hover {
    background-color: #ff6700;
}
.banner.w {
    background-image: url(image/image2.png);
}
.goods {
    margin-top: 15px;
}
.box {
    height: 45px;
    overflow: hidden;
}
.box h3 {
    float: left;
    font-size: 20px;
    color: black;
    margin-left: 25px;
    margin-top: 10px;
}
.box a {
    float: right;
    font-size: 12px;
    color: #a5a5a5;
    margin-right: 150px;
    margin-top: 25px;
}
.goods {
    background-color: #667;
    margin-bottom: 20px;
}
.goods ul li a {
    color: #333333;
}
.goods ul li a img {
    display: block;
    width: 150px;
    height: 150px;
    margin: 15px auto;
}
.goods ul li p {
    margin-left: 10px;
}
.goods ul li p:hover {
    color: blue;
    border-bottom-color: blue;
}
.goods ul li .price {
    margin-top: 10px;
    color: red;
    font-weight: 700;
}
.goods ul li {
    float: left;
    width: 250px;
    height: 270px;
    background-color: #fff;
    margin-bottom: 25px;
    margin-right: 25px;
    margin-left: 25px;
}
.footer {
    height: 355px;
    padding-top: 15px;
    background-color: #fff;
}
.links dl {
    float: left;
    margin-top: 50px;
    margin-left: 160px;
}
.links dl dt {
    font-size: 25px;
    margin-bottom: 10px;
    color: #333;
}
.links dl dd {
    height: 35px;
}
.links dl dd a {
    color: #666;
    font-size: 14px;
}
.links dl dd a:hover {
    color: red;
}

成果展示

注意：为了将CSS代码作用在HTML上，在HTML中要使用<link>标签引入CSS

3.总结与反思

1.在本次网页设计中，我大量地使用了标准流布局和浮动布局，在使用浮动布局时，我们应该尤其注意清除浮动的问题。

2.在使用内外边距时，要注意在设置了宽高的情况下，padding会撑大盒子；而在使用margin时，可能会出现塌陷问题。

总而言之，HTML与CSS的知识点比较繁杂，因此需要我们通过不断地练习来巩固和提升。

lymite

关注

7
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
任务1.2 新年促销电商网页制作

（1）在头部部分，我在左侧放置了该网页的logo，右侧则是导航栏部分，方便用户完成登录等操作。其次，我在导航栏下方设置了搜索框，方便用户搜索心仪的商品，提升用户体验。参考各大电商平台的网页布局后，我认为大致可以分为以下几个主要的部分：头部，主体和页脚，其中还可以继续进行分区（下文有相关说明）。1.在本次网页设计中，我大量地使用了标准流布局和浮动布局，在使用浮动布局时，我们应该尤其注意清除浮动的问题。（2）在主体部分，我在位于左侧的部分放置了一个侧边栏显示商品的类别，在下方，则是当日的热销商品。
复制链接

扫一扫