尚硅谷前端入门html+css学习笔记——尚品汇页面设计

PLJJ685

于 2024-09-03 14:34:57 发布

阅读量293

点赞数 9

文章标签：前端 html css

本文链接：https://blog.csdn.net/qq_62237063/article/details/141812514

版权

一、前言

1、学习地址

z尚硅谷前端入门html+css零基础教程，零基础前端开发htmzl5+css3视频

2、重置默认样式reset.css

/* 基础设置 */
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input {
    margin: 0;
    padding: 0;
}

ul,ol {
    list-style: none;
}

img {
    /* 底部留白 */
    display: block;
    border:0;
}

b,strong {
    font-weight: 400;
}

h1,h2,h3,h4,h5,h6 {
    /* 父元素字号的百分比 */
    font-size: 100%;
    font-weight: normal;
}

i,em {
    /* 不倾斜 */
    font-style: normal;
}

u,ins,s,del {
    /* 去掉中划线和下划线 */
    text-decoration: none;
}

table {
    border: 1px solid #999;
    /* 相当于是cellspacing */
    border-spacing: 0;
    /* 1px边框 */
    border-collapse: collapse;
}

td,th {
    border: 1px solid #999;
}

input,button {
    /* 去掉轮廓线 */
    outline: none;
    border: none;
}

/* 风格设置 */
body {
    font: 12px/1.5 "Microsoft YaHei", "\5b8b\4f53", sans-serif;
    color: #333;
}

a {
    text-decoration: none;
    color: #666;
}

a:hover {
    color: #DD302D;
    text-decoration: none;
}

.leftfix {
    float: left;
}

.rightfix {
    float: right;
}

.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

二、尚品汇—顶部导航条

1、index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>尚品汇</title>
    <!-- 引入页签图标 -->
    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">
    <!-- 引入重置样式（先） -->
    <link rel="stylesheet" href="./css/reset.css">
    <!-- 引入样式（后） -->
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <!-- 顶部导航条 -->
    <div class="topbar">
        <!-- 版心 -->
        <div class="container clearfix">
            <!-- 左侧欢迎区 -->
            <div class="welcom leftfix">
                <span class="hello">尚品汇欢迎您</span>
                <span>请</span>
                <a href="#" class="login">登录</a>
                <a href="#" class="register">免费注册</a>
            </div>
            <!-- 右侧导航区 -->
            <div class="topbar-nav rightfix">
                <ul class="list clearfix">
                    <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>
    </div>
</body>
</html>

2、index.css

/* 基础设置 */
.container {
    width: 1190px;
    margin: 0 auto;
}

/* #region顶部导航条start */
.topbar {
    height: 30px;
    background-color: #ECECEC ;
}
.welcom {
    height: 30px;
    line-height: 30px;
    font-size: 0;
    color: #666;
}
.welcom span, .welcom a {
    font-size: 12px;
}
.welcom .hello {
    margin-right: 28px;
}
.welcom .login {
    padding-right: 10px;
    border-right: 1px solid #666;
}
.welcom .register {
    padding-left: 10px;
}
.topbar-nav .list {
    height: 30px;
    line-height: 30px;
}
.topbar-nav .list li {
    float: left;
}
.topbar-nav .list li a {
    padding: 0 15px;
    border-right: 1px solid #666;
}
.topbar-nav .list li:first-child a {
    padding-left: 0;
}
.topbar-nav .list li:last-child a {
    padding-right: 0;
    border: 0;
}
/* #endregion顶部导航条end */

三、尚品汇—头部

1、index.html

<!-- 头部 -->
    <div class="header">
        <div class="container clearfix">
            <!-- 左侧logo区 -->
            <div class="logo leftfix">
                <img src="./images/logo.png" alt="尚品汇">
            </div>
            <!-- 右侧搜索区 -->
            <div class="search rightfix">
                <form action="#">
                    <input type="text">
                    <button></button>
                </form>
            </div>
        </div>
    </div>

2、css.html

/* #region头部start */
.header {
    height: 120px;
    background-color: skyblue;
}
.header .search form {
    margin-top: 42px;
    font-size: 0;
}
.header .search input {
    width: 508px;
    height: 34px;
    border: 1px solid #DD302D ;
}
.header .search button {
    width: 80px;
    height: 36px;
    background-color: #DD302D;
    vertical-align: top;
    background-image: url('../images/serch_icon.png');
    background-repeat: no-repeat;
    background-position: 28px 6px;
}
/* #endregion尾部end */

四、尚品汇—主导航

1、html

<!-- 主导航 -->
    <div class="main-nav">
        <div class="container clearfix">
            <div class="all-types leftfix">全部商品分类</div>
            <ul class="main-nav-list leftfix clearfix">
                <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="#">plus会员</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>

2、css

/* #region主导航start */
.main-nav {
    height: 48px;
    border-bottom: 1px solid #DD302D;
}
.main-nav .all-types {
    width: 190px;
    height: 48px;
    line-height: 48px;
    background-color: #DD302D;
    color: white;
    text-align: center;
    font-size: 16px;
}
.main-nav-list {
    height: 48px;
    line-height: 48px;
}
.main-nav-list li {
    float: left;
    margin: 0 10px;
    font-size: 16px;
}
/* #endregion主导航end */

五、尚品汇—主要内容区

1、html

   <!-- 主要内容区 -->
    <div class="main-content">
        <div class="container clearfix">
            <ul class="slide-nav leftfix">
                <li>
                    <!-- 一级菜单 -->
                    <a href="#">手机</a>
                    <!-- 二级菜单 -->
                    <div class="second-menu">
                        <dl class="clearfix">
                            <dt><a href="#">电子书刊</a></dt>
                            <dd><a href="#">电子书</a></dd>
                            <dd><a href="#">网络原创</a></dd>
                            <dd><a href="#">数字杂志</a></dd>
                            <dd><a href="#">多媒体图书</a></dd>
                        </dl>
                        <!-- 共12个 -->
                        <dl class="clearfix">
                            <dt><a href="#">电子书刊</a></dt>
                            <dd><a href="#">电子书</a></dd>
                            <dd><a href="#">网络原创</a></dd>
                            <dd><a href="#">数字杂志</a></dd>
                            <dd><a href="#">多媒体图书</a></dd>
                        </dl>
                    </div>
                </li>
                <li>
                    <a href="#">电脑</a>
                    <!-- 二级菜单 -->
                    <div class="second-menu">
                        <dl class="clearfix">
                            <dt><a href="#">手机通讯</a></dt>
                            <dd><a href="#">手机</a></dd>
                            <dd><a href="#">对讲机</a></dd>
                        </dl>
                        <!-- 共12个 -->
                        <dl class="clearfix">
                            <dt><a href="#">运营商</a></dt>
                            <dd><a href="#">选号中心</a></dd>
                            <dd><a href="#">宽带</a></dd>
                        </dl>
                    </div>
                </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 class="banner leftfix">
                <img src="./images/banner主图.png" alt="">
            </div>
            <div class="slide-other leftfix">
                <div class="message">
                    <div class="title clearfix">
                        <span class="leftfix">尚品快报</span>
                        <a href="#" class="rightfix">更多&nbsp;&gt;</a>
                    </div>
                    <ul class="msg-list">
                        <li><a href="#">特惠：毛衣和直筒</a></li>
                        <li><a href="#">特惠：毛衣和直筒</a></li>
                        <li><a href="#">特惠：毛衣和直筒</a></li>
                        <li><a href="#">特惠：毛衣和直筒</a></li>
                    </ul>
                </div>
                <div class="other-nav">
                    <ul class="other-nav-list clearfix">
                        <li>
                            <div class="picture"></div>
                            <span>话费</span>
                        </li>
                        <li>
                            <div class="picture"></div>
                            <span>话费</span>
                        </li>
                        <li>
                            <div class="picture"></div>
                            <span>话费</span>
                        </li>
                        <li>
                            <div class="picture"></div>
                            <span>话费</span>
                        </li>
                    </ul>
                    <ul class="other-nav-list clearfix">
                        <li>
                            <div class="picture"></div>
                            <span>话费</span>
                        </li>
                        <li>
                            <div class="picture"></div>
                            <span>话费</span>
                        </li>
                        <li>
                            <div class="picture"></div>
                            <span>话费</span>
                        </li>
                        <li>
                            <div class="picture"></div>
                            <span>话费</span>
                        </li>
                    </ul>
                    <ul class="other-nav-list clearfix">
                        <li><div class="picture"></div>
                            <span>话费</span>
                        </li>
                        <li><div class="picture"></div>
                            <span>话费</span>
                        </li>
                        <li><div class="picture"></div>
                            <span>话费</span>
                        </li>
                        <li><div class="picture"></div>
                            <span>话费</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

2、css

/* #region主要内容区start */
.main-content {
    margin-top: 10px;
}
.main-content .slide-nav {
    width: 190px;
    height: 458px;
    background-color: #F4F4F4;
    position: relative;
}
.main-content .slide-nav li {
    font-size: 14px;
    height: 28px;
    line-height: 28px;
    padding-left: 16px;
}
.main-content .slide-nav li:hover {
    background-color: #DD302D;
}
.main-content .slide-nav li:hover>a {
    color: white;
}
.second-menu {
    width: 680px;
    height: 458px;
    background-color: #F4F4F4;
    position: absolute;
    top: 0;
    left: 190px;
    padding-left: 20px;
    display: none;
}
.main-content .slide-nav li:hover .second-menu {
    display: block;
}
.second-menu dl {
    height: 36px;
    line-height: 36px;
}
.second-menu dl:first-child {
    margin-top: 10px;
}
.second-menu dt {
    float: left;
    width: 70px;
    font-weight: bold;
    margin-right: 10px;
}
.second-menu dd {
    float: left;
}
.second-menu dd a {
    padding: 0 10px;
    border-left: 1px solid #666;
}

.main-content .banner {
    width: 690px;
    height: 458px;
    background-color: orange;
    margin: 0 10px;
}

.main-content .slide-other {
    width: 290px;
    height: 458px;
}
.slide-other .message {
    width: 260px;
    height: 156px;
    padding: 0 14px;
    border: 1px solid #D9D9D9 ;
}
.slide-other .message .title {
    height: 38px;
    line-height: 38px;
    border-bottom: 1px solid #D9D9D9;
}
.slide-other .message .title span {
    font-size: 14px;
}
.slide-other .message .title a {
    font-size: 12px;
}
.slide-other .msg-list li {
    height: 26px;
    line-height: 26px;
}

.slide-other .other-nav {
    margin-top: 10px;
    width: 290px;
    height: 290px;
    /* background-color: gray; */
    overflow: hidden;
}
.other-nav-list:first-child {
    margin-top: 16px;
}
.other-nav-list:nth-child(2) {
    margin: 17px 0;
}
.other-nav-list li {
    width: 48px;
    height: 70px;
    /* background-color: rgb(190, 225, 239); */
    float: left;
    margin: 0 11px;
    text-align: center;
    cursor: pointer;
}
.other-nav-list li:first-child {
    margin-left: 16px;
}
.other-nav-list .picture {
    width: 48px;
    height: 48px;
    background-image: url('../images/精灵图-侧边功能.png');
}
.other-nav-list:nth-child(1) li:nth-child(1) .picture{
    background-position: 0 0;
}
.other-nav-list:nth-child(1) li:nth-child(2) .picture{
    background-position: -48px 0;
}
.other-nav-list:nth-child(1) li:nth-child(3) .picture{
    background-position: -96px 0;
}
.other-nav-list:nth-child(1) li:nth-child(4) .picture{
    background-position: -144px 0;
}

.other-nav-list:nth-child(2) li:nth-child(1) .picture{
    background-position: 0 -48px;
}
.other-nav-list:nth-child(2) li:nth-child(2) .picture{
    background-position: -48px -48px;
}
.other-nav-list:nth-child(2) li:nth-child(3) .picture{
    background-position: -96px -48px;
}
.other-nav-list:nth-child(2) li:nth-child(4) .picture{
    background-position: -144px -48px;
}

.other-nav-list:nth-child(3) li:nth-child(1) .picture{
    background-position: 0 -96px;
}
.other-nav-list:nth-child(3) li:nth-child(2) .picture{
    background-position: -48px -96px;
}
.other-nav-list:nth-child(3) li:nth-child(3) .picture{
    background-position: -96px -96px;
}
.other-nav-list:nth-child(3) li:nth-child(4) .picture{
    background-position: -144px -96px;
}
/* #endregion主要内容区end */

六、尚品汇—秒杀

1、html

<div class="seckill">
        <div class="container clearfix">
            <img src="./images/seckill.png" alt="秒杀">
            <img src="./images/banner1.png" alt="秒杀1">
            <img src="./images/banner2.png" alt="秒杀2">
            <img src="./images/banner3.png" alt="秒杀3">
            <img src="./images/baner4.png" alt="秒杀4">
        </div>
    </div>

2、css

/* #region秒杀start */
.seckill {
    margin-top: 10px;
}
.seckill img {
    float: left;
    margin-right: 11px;
    cursor: pointer;
}
.seckill img:last-child {
    margin-right: 0px;
}
/* #endregion秒杀end */

七、尚品汇—楼层

1、html

 <!-- 楼层 -->
    <div class="floor">
        <div class="container">
            <!-- 上部分 -->
            <div class="floor-nav clearfix">
                <span class="floor-name leftfix">家用电器</span>
                <ul class="floor-nav-list rightfix clearfix">
                    <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="floor-info clearfix">
                <div class="item item1">
                    <ul class="item1-list clearfix">
                        <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>
                    <img src="./images/编组.png" alt="广告">
                </div>
                <div class="item item2">
                    <img src="./images/appliance_banner07.png" alt="广告">
                </div>
                <div class="item item3">
                    <img src="./images/微波炉.png" alt="微波炉">
                    <img src="./images/空气炸锅.png" alt="空气炸锅">
                </div>
                <div class="item item4">
                    <img src="./images/冰箱.png" alt="冰箱">
                </div>
                <div class="item item5">
                    <img src="./images/电饭煲.png" alt="电饭煲">
                    <img src="./images/电饭煲2.png" alt="电饭煲2">
                </div>
            </div>
        </div>
    </div>

2、css

/* #region楼层start */
.floor {
    margin-top: 48px;
}
.floor-name {
    font-size: 20px;
}
.floor-nav {
    margin-top: 30px;
    line-height: 30px;
    padding-bottom: 4px;
    border-bottom: 2px solid red;
}
.floor-nav-list li {
    float: left;
    font-size: 14px;
}
.floor-nav-list li a {
    padding: 0 10px;
    border-right: 1px solid #666;
}
.floor-nav-list li:first-child a {
    padding-left: 0;
}
.floor-nav-list li:last-child a {
    padding-right: 0;
    border: 0;
}
.floor-info .item {
    float: left;
}
.floor-info .item1 {
    width: 190px;
    height: 392px;
    background-color: #F4F4F4;
    padding: 20px;
}
.item1-list {
    margin-bottom: 29px;
}
.item1-list li {
    width: 90px;
    height: 22px;
    padding-bottom: 3.5px;
    border-bottom: 1px solid #D9D9D9;
    font-size: 16px;
    text-align: center;
}
.item1-list li:nth-child(2n-1) {
    float: left;
}
.item1-list li:nth-child(2n) {
    float: right;
}
.item1-list li:nth-child(3),
.item1-list li:nth-child(4) {
    margin: 14.4px 0;
}
.floor-info .item2 {
    width: 340px;
    height: 432px;
}
.floor-info .item3,
.floor-info .item4,
.floor-info .item5 {
    width: 206px;
    height: 432px;
}
.floor-info .item3 img,
.floor-info .item4 img,
.floor-info .item5 img {
    border-bottom: 1px solid #E2E2E2;
}
.floor-info .item3,
.floor-info .item4 {
    border-right: 1px solid #E2E2E2;
}
/* #endregion楼层end */

八、尚品汇—页脚

1、html

<!-- 页脚 -->
    <div class="footer">
        <div class="container">
            <!-- 顶部链接 -->
            <div class="top-links clearfix">
                <ul class="links-list">
                    <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>
                <ul class="links-list">
                    <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>
                <ul class="links-list">
                    <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>
                <ul class="links-list">
                    <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>
                <ul class="links-list">
                    <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>
                <ul class="links-list">
                    <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="line"></div>
            <!-- 底部链接 -->
            <div class="bottom-links">
                <ul class="bottom-links-list clearfix">
                    <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 class="copyright">京备1288878787873236515</div>
            </div>
        </div>
    </div>

2、css

/* #region页脚start */
.footer {
    margin-top: 48px;
    height: 440px;
    background-color: #483E3E;
}
.links-list {
    width: 190px;
    height: 176px;
    float: left;
    margin-top: 48px;
    margin-right: 10px;
}
.links-list a {
    color: white;
    font-size: 14px;
}
.links-list:last-child {
    margin-right: 0;
}
.line {
    height: 1px;
    margin-top: 22px;
    background-color: #584D4D;
}
.bottom-links {
    text-align: center;
    margin-top: 47px;
}
.bottom-links-list {
    display: inline-block;
}
.bottom-links-list li {
    float: left;
}
.bottom-links-list li a {
    padding: 0 26px;
    border-right: 1px solid white;
    color: white;
}
.bottom-links-list li:first-child a {
    padding-left: 0;
}
.bottom-links-list li:last-child a {
    padding-right: 0;
    border: 0;
}
.copyright {
    color: white;
    margin-top: 10px;
}
/* #endregion页脚end */