web学习

最新推荐文章于 2024-08-22 17:38:39 发布

21cv

最新推荐文章于 2024-08-22 17:38:39 发布

阅读量179

点赞数

分类专栏： web 文章标签：前端学习 css

本文链接：https://blog.csdn.net/weixin_73800442/article/details/130549131

版权

web 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

WEB 学习week02之小demo

--关于尚品汇--

–关于尚品汇–

通过html css 来实现一个简单的购物页面

利用到了定位列表盒子模型布局版心浮动以及常用的文本,字体属性等知识,算是对自己知识的一次整合
完成效果展示:

在这里插入图片描述

注:
其中大部分都是利用a标签生成(或者cursor) 但没有实现页面跳转
即只是简单点的UI设计

准备工作

首先为了解决不同的浏览器尚,标签默认的属性会有不同的影响所以需要清理一下它的默认属性这里引用网上的一段css代码进行处理:

/* 基础设置 */
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{
    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", Tahoma, Helvetica, Arial, "\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;
}

导航条

首先需要确认我们的版心大小
这里设置为1190px
这样我们的主内容都是限定这个宽度
接下来如这里所见
在这里插入图片描述
将导航条分为左右两个区域
用float 一个左浮动一个右浮动
注意到右边的区域可以利用列表(或者几个div)
浮动实现
实现代码
html部分:

<!-- 顶部导航条 -->    
    <div class="topbar">
        <!-- 版心 -->
    <div class="container clearfix">
        <!-- 左侧欢迎区 -->
        <div class="welcome leftfix">
            <span class="hello">尚品汇欢迎您</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>

css部分:

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

/* #region顶部导航条start */
.topbar {
    height: 30px;
    background-color: #ECECEC;
}
.welcome {
    height: 30px;
    line-height: 30px;
    font-size: 0;
    color: #666;
}
.welcome span,.welcome a {
    font-size: 12px;
}
.welcome .hello {
    margin-right: 28px;
}
.welcome .login {
    padding-right: 10px;
    border-right: 1px solid #666;
}
.welcome .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 */

头部

在这里插入图片描述

一个logo 和一个表单
也是利用浮动来实现
需要注意的就是
搜索框的图像可以通过设置背景图实现
需要no-repeat
代码部分:


    <!-- 头部 -->
    <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="#"></form>
                <input type="text"><button></button>
            </div>
        </div>
    </div>

css:

/* #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 */

主要内容区

在这里插入图片描述
可以分为3个部分

左边导航区

其实套路跟前面一样,用到的是自定义列表
但是这里需要实现一个功能
当导航区的item被鼠标点击的时候
中间的广告部分需要替换成二级导航区
所以可以通过让导航区开启相对定位,然后列表里的内容(二级导航)
开启绝对定位当鼠标移动到导航item时,动态改变二级导航的display就行
实现代码:

html:
 <ul class="slide-nav leftfix">
                <li>
                    <!-- 一级菜单 -->
                    <a href="#">手机/运营商/数码</a>
                    <!-- 二级菜单 --></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>
                        <dl class="clearfix">
                            <dt><a href="#">音像</a></dt>
                            <dd><a href="#">音乐</a></dd>
                            <dd><a href="#">影视</a></dd>
                            <dd><a href="#">教育音像</a></dd>
                        </dl>
                        <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>
                            <dd><a href="#">传记</a></dd>
                            <dd><a href="#">励志</a></dd>
                        </dl>
                        <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>
                            <dd><a href="#">艺术</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">少儿</a></dt>
                            <dd><a href="#">胎教</a></dd>
                            <dd><a href="#">0-2岁</a></dd>
                            <dd><a href="#">3-6岁</a></dd>
                            <dd><a href="#">7-10岁</a></dd>
                            <dd><a href="#">11-14岁</a></dd>
                        </dl>
                        <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>
                            <dd><a href="#">法律</a></dd>
                            <dd><a href="#">人文社科</a></dd>
                            <dd><a href="#">心理学</a></dd>
                            <dd><a href="#">文化</a></dd>
                            <dd><a href="#">社会科学</a></dd>
                        </dl>
                        <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>
                        <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>
                        <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>
                            <dd><a href="#">科学与自然</a></dd>
                            <dd><a href="#">计算机与互联网</a></dd>
                            <dd><a href="#">电子通信</a></dd>
                        </dl>
                        <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>
                            <dd><a href="#">科学与自然</a></dd>
                            <dd><a href="#">字典词典</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">艺术与收藏</a></dt>
                            <dd><a href="#">经济管理</a></dd>
                            <dd><a href="#">文化与艺术</a></dd>
                        </dl>
                        <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>
                        <dl class="clearfix">
                            <dt><a href="#">运营商</a></dt>
                            <dd><a href="#">合约机</a></dd>
                            <dd><a href="#">选号中心</a></dd>
                            <dd><a href="#">装宽带</a></dd>
                        </dl>
                        <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>
                            <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>
                            <dd><a href="#">冰箱</a></dd>
                            <dd><a href="#">洗衣机</a></dd>
                            <dd><a href="#">迷你音响</a></dd>
                        </dl>
                        <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>
                            <dd><a href="#">洗碗机</a></dd>
                        </dl>
                        <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>
                            <dd><a href="#">豆浆机</a></dd>
                            <dd><a href="#">咖啡机</a></dd>
                            <dd><a href="#">微波炉</a></dd>
                            <dd><a href="#">电磁炉</a></dd>
                        </dl>
                        <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>
                            <dd><a href="#">吸尘器</a></dd>
                            <dd><a href="#">挂烫机</a></dd>
                            <dd><a href="#">电话机</a></dd>
                            <dd><a href="#">电风扇</a></dd>
                        </dl>
                        <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>
                            <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>
                            <dd><a href="#">镜头</a></dd>
                            <dd><a href="#">户外器材</a></dd>
                            <dd><a href="#">数码相框</a></dd>
                        </dl>
                        <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>
                            <dd><a href="#">数码支架</a></dd>
                        </dl>
                        <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>
                            <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>
                            <dd><a href="#">医疗保健</a></dd>
                            <dd><a href="#">宠物玩具</a></dd>
                            <dd><a href="#">出行装备</a></dd>
                        </dl>
                        <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>
                            <dd><a href="#">洗漱用品</a></dd>
                        </dl>
                    </div>
                </li>
               
            </ul>

css:
.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 {
    background-color: skyblue;
    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: green;
    margin: 0 10px;
}

 <div class="banner leftfix">
                <img src="./images/banner主图.png" alt="">
            </div>

右边其他信息区

这里也是分成两个部分
上面比较简单
用一个div 分成两个部分一个左飘一个右飘
需注意:
给一个盒子加margin的时候,
可能会遇到塌陷问题
这时候可以加padding解决或者让付容器加上overflow
下面的部分结构是3个列表
如果利用imag 引入图片
有几个问题:资源浪费浏览器响应较慢
所以我们利用精灵图(将一些小图片合在一起)
将设置为背景 ,通过移动xy方向来定位
这里需要注意 :给元素定位后要想添加背景图片需要指定宽高
实现代码:

<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="#">[特惠] 毛衣+直筒裤才是YYDS</a></li>
                        <li><a href="#">太酷啦</a></li>
                        <li><a href="#">雪distance </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>


.main-content .slide-other {
    width: 290px;
    height: 458px;
    /* background-color: orange; */
}
.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;
  
    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;
}

页签尾部

在这里插入图片描述
这里也是大同小异
整体分为上下两个区域
上面是几个浮动的列表
对于高我选择固定的176px
这样有利于下面的分割线的对齐
下面的部分也是一个浮动的列表
对于浮动的元素可以在其父元素加上

 content: "";
    display: block;
    clear: both;

清除浮动带来的影响
代码实现:

 <!-- 页脚 -->
 <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>
             </ul>
             <ul class="links-list">
                 <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>
             </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>
             </ul>
             <ul class="links-list">
                 <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>
             </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>
             </ul>
             <div class="copyright">京ICP备123456</div>
         </div>

            /* #region页脚区start */
.footer {
    margin-top: 48px;
    height: 440px;
    background-color: #483E3E ;
}
.links-list {
    float: left;
    width: 190px;
    height: 176px;
    margin-top: 48px;
    margin-right: 10px;
}
.links-list:last-child {
    margin-right: 0px;
}
.links-list a {
    color: white;
    font-size: 14px;
}
.line {
    margin-top: 22px;
    height: 1px;
    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 {
    margin-top: 10px;
    color: white;
}


/* #endregion页脚区end */