• 博客园logo
  • 会员
  • 周边
  • 新闻
  • 博问
  • 闪存
  • 赞助商
  • Chat2DB
    • 搜索
      所有博客
    • 搜索
      当前博客
  • 写随笔 我的博客 短消息 简洁模式
    用户头像
    我的博客 我的园子 账号设置 会员中心 简洁模式 ... 退出登录
    注册 登录
KK筑梦人
博客园    首页    新随笔    联系   管理    订阅  订阅

玉米商城 第五十天 2018.12.13

页面展示

pycharm端展示

图片编辑网站

HTML篇

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--告诉IE以最高级模式渲染文档-->
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>mi.com</title>
    <!--normalize.css为前端框架-->
    <!--https://cdn.bootcss.com/normalize/8.0.1/normalize.min.css为开源服务器存放的源码地址-->
    <link href="https://cdn.bootcss.com/normalize/8.0.1/normalize.min.css" rel="stylesheet">
    <link rel="stylesheet" href="mi.css">
</head>

<body>
    <!-- 顶部导航栏 start -->
    <div class="nav">
        <div class="container">
            <div class="nav-left fl">
                <a href="">玉米商城</a>
                <a href="">链接A</a>
                <a href="">链接B</a>
                <a href="">链接C</a>
                <a href="">链接D</a>
            </div>
            <div class="nav-right fr">
                <a href="">登录</a>
                <a href="">注册</a>
                <a href="">消息</a>
                <a href="">购物车</a>
            </div>
        </div>

    </div>
    <!-- 顶部导航栏 end -->

    <!-- 首屏 开始 -->
    <div class="main">
        <!-- 目录导航 开始 -->
        <div class="main-header">
            <div class="logo fl">
                <img src="./img/logo.png" alt="">
                <img src="./img/logo_r.png" alt="">
            </div>
            <div class="top-menu fl">
                <a href="">玉米手机</a>
                <a href="">苞米</a>
                <a href="">电视</a>
                <a href="">爆米花</a>
                <a href="">服务</a>
                <a href="">社区</a>
            </div>
            <div class="main-search fr">
                <!--input按钮标签，普通按钮用来绑定JS事件-->
                <input type="text">
                <button>搜索</button>
            </div>
        </div>
        <!-- 目录导航 结束 -->

        <!-- 菜单+轮播 开始 -->
        <div class="menu clearfix">
            <div class="sidebar fl">
                <div class="item-list">
                    <a href="">手机 电话卡</a>
                    <a href="">电视 盒子</a>
                    <a href="">笔记本</a>
                    <a href="">智能 家电</a>
                    <a href="">健康 家居</a>
                    <a href="">出行 儿童</a>
                    <a href="">路由器 手机配件</a>
                    <a href="">移动电源 插线板</a>
                    <a href="">耳机 音箱</a>
                    <a href="">生活 米兔</a>
                </div>
            </div>
            <div class="carousel fr">
                <img src="./img/carousel.png" alt="">
            </div>
        </div>
        <!-- 菜单+轮播 结束 -->

        <!-- 副广告曲 开始 -->
        <div class="main-down clearfix">
            <div class="fl">
                <a class="pic">
                    <img src="./img/pic0.png" alt="">
                </a>
            </div>

            <div class="fr">
                <a class="pic-item first">
                    <img src="./img/pic1.png" alt="">
                </a>
                <a class="pic-item">
                    <img src="./img/pic2.png" alt="">
                </a>
                <a class="pic-item">
                    <img src="./img/pic3.png" alt="">
                </a>
            </div>

        </div>
        <!-- 副广告区 结束 -->

        <!-- 闪购 开始 -->
        <div class="flash-sale">
            <h1>限时闪购</h1>
            <div class="flash-list clearfix">
                <div class="flash-left fl">
                    <a class="flash-item first" href="">
                        <img src="./img/flash0.png" alt="">
                    </a>
                </div>
                <div class="flash-right fr">
                    <a class="flash-item" href="">
                        <img src="./img/flash1.png" alt="">
                    </a>
                    <a class="flash-item" href="">
                        <img src="./img/flash2.png" alt="">
                    </a>
                    <a class="flash-item" href="">
                        <img src="./img/flash1.png" alt="">
                    </a>
                    <a class="flash-item" href="">
                        <img src="./img/flash2.png" alt="">
                    </a>
                </div>

            </div>
        </div>
        <!-- 闪购 结束 -->
    </div>

    <!-- 首屏 结束 -->

    <!-- 商品展示 开始 -->
    <div class="goods">
        <div class="container">
            <div class="goods-box clearfix">
                <h2>家电</h2>
                <div class="goods-box-left fl">
                    <img src="./img/goods-left0.png" alt="">
                </div>
                <div class="goods-box-right fr">
                    <div class="goods-item fl">
                        <div class="item-img">
                            <a href="">
                                <img src="./img/item1.png" alt="">
                            </a>

                        </div>
                        <p class="item-title">
                            <a href="">商品名称</a>
                        </p>
                        <p class="item-price">1999元</p>
                    </div>
                    <div class="goods-item fl">
                        <div class="item-img">
                            <a href="">
                                <img src="./img/item2.png" alt="">
                            </a>
                        </div>
                        <p class="item-title">
                            <a href="">商品名称</a>
                        </p>
                        <p class="item-price">1999元</p>
                    </div>
                    <div class="goods-item fl">
                        <div class="item-img">
                            <a href="">
                                <img src="./img/item3.png" alt="">
                            </a>
                        </div>
                        <p class="item-title">
                            <a href="">商品名称</a>
                        </p>
                        <p class="item-price">1999元</p>
                    </div>
                    <div class="goods-item fl">
                        <div class="item-img">
                            <a href="">
                                <img src="./img/item4.png" alt="">
                            </a>
                        </div>
                        <p class="item-title">
                            <a href="">商品名称</a>
                        </p>
                        <p class="item-price">1999元</p>
                    </div>
                    <div class="goods-item fl">
                        <div class="item-img">
                            <a href="">
                                <img src="./img/item4.png" alt="">
                            </a>

                        </div>
                        <p class="item-title">
                            <a href="">商品名称</a>
                        </p>
                        <p class="item-price">1999元</p>
                    </div>
                    <div class="goods-item fl">
                        <div class="item-img">
                            <a href="">
                                <img src="./img/item3.png" alt="">
                            </a>

                        </div>
                        <p class="item-title">
                            <a href="">商品名称</a>
                        </p>
                        <p class="item-price">1999元</p>
                    </div>
                    <div class="goods-item fl">
                        <div class="item-img">
                            <a href="">
                                <img src="./img/item2.png" alt="">
                            </a>

                        </div>
                        <p class="item-title">
                            <a href="">商品名称</a>
                        </p>
                        <p class="item-price">1999元</p>
                    </div>
                    <div class="goods-item fl">
                        <div class="item-img">
                            <a href="">
                                <img src="./img/item1.png" alt="">
                            </a>

                        </div>
                        <p class="item-title">
                            <a href="">商品名称</a>
                        </p>
                        <p class="item-price">1999元</p>
                    </div>

                </div>
            </div>
            <div class="goods-box clearfix">
                <h2>智能</h2>
                <div class="goods-box-left fl">
                    <a class="left-item first" href="">
                        <img src="./img/goods-left1.png" alt="">
                    </a>
                    <a class="left-item" href="">
                        <img src="./img/goods-left1.png" alt="">
                    </a>
                </div>
                <div class="goods-box-right fr">
                    <div class="goods-item fl">
                        <div class="item-img">
                            <a href="">
                                <img src="./img/item1.png" alt="">
                            </a>

                        </div>
                        <p class="item-title">
                            <a href="">商品名称</a>
                        </p>
                        <p class="item-price">1999元</p>
                    </div>
                    <div class="goods-item fl">
                        <div class="item-img">
                            <a href="">
                                <img src="./img/item2.png" alt="">
                            </a>
                        </div>
                        <p class="item-title">
                            <a href="">商品名称</a>
                        </p>
                        <p class="item-price">1999元</p>
                    </div>
                    <div class="goods-item fl">
                        <div class="item-img">
                            <a href="">
                                <img src="./img/item3.png" alt="">
                            </a>
                        </div>
                        <p class="item-title">
                            <a href="">商品名称</a>
                        </p>
                        <p class="item-price">1999元</p>
                    </div>
                    <div class="goods-item fl">
                        <div class="item-img">
                            <a href="">
                                <img src="./img/item4.png" alt="">
                            </a>
                        </div>
                        <p class="item-title">
                            <a href="">商品名称</a>
                        </p>
                        <p class="item-price">1999元</p>
                    </div>
                    <div class="goods-item fl">
                        <div class="item-img">
                            <a href="">
                                <img src="./img/item4.png" alt="">
                            </a>

                        </div>
                        <p class="item-title">
                            <a href="">商品名称</a>
                        </p>
                        <p class="item-price">1999元</p>
                    </div>
                    <div class="goods-item fl">
                        <div class="item-img">
                            <a href="">
                                <img src="./img/item3.png" alt="">
                            </a>

                        </div>
                        <p class="item-title">
                            <a href="">商品名称</a>
                        </p>
                        <p class="item-price">1999元</p>
                    </div>
                    <div class="goods-item fl">
                        <div class="item-img">
                            <a href="">
                                <img src="./img/item2.png" alt="">
                            </a>

                        </div>
                        <p class="item-title">
                            <a href="">商品名称</a>
                        </p>
                        <p class="item-price">1999元</p>
                    </div>
                    <div class="goods-item fl">
                        <div class="item-img">
                            <a href="">
                                <img src="./img/item1.png" alt="">
                            </a>

                        </div>
                        <p class="item-title">
                            <a href="">商品名称</a>
                        </p>
                        <p class="item-price">1999元</p>
                    </div>

                </div>
            </div>
            <!-- 热评产品 开始 -->
            <div class="goods-box clearfix">
                <h2>热评商品</h2>
                <div class="hot-goods-list">
                    <div class="hot-goods first fl">
                        <p class="hot-goods-img">
                            <a href="">
                                <img src="./img/item11.png" alt="">
                            </a>
                        </p>
                        <p class="hot-goods-msg">
                            <a>东西真心不错，用过最好用的插线板，做工外观没得挑剔，3个USB接口很实用，充电快，建议不包邮的应该在...</a>
                        </p>
                        <p class="hot-goods-author">
                            <a href="">来源于水军1号的评价</a>
                        </p>
                        <div class="hot-goods-info">
                            <h3 class="title">玉米插线板</h3>
                            <span>|</span>
                            <p class="price">49元</p>
                        </div>
                    </div>
                    <div class="hot-goods fl">
                        <p class="hot-goods-img">
                            <a href="">
                                <img src="./img/item12.png" alt="">
                            </a>
                        </p>
                        <p class="hot-goods-msg">
                            <a>东西真心不错，用过最好用的插线板，做工外观没得挑剔，3个USB接口很实用，充电快，建议不包邮的应该在...</a>
                        </p>
                        <p class="hot-goods-author">
                            <a href="">来源于水军1号的评价</a>
                        </p>
                        <div class="hot-goods-info">
                            <h3 class="title">玉米插线板</h3>
                            <span>|</span>
                            <p class="price">49元</p>
                        </div>
                    </div>
                    <div class="hot-goods fl">
                        <p class="hot-goods-img">
                            <a href="">
                                <img src="./img/item11.png" alt="">
                            </a>
                        </p>
                        <p class="hot-goods-msg">
                            <a>东西真心不错，用过最好用的插线板，做工外观没得挑剔，3个USB接口很实用，充电快，建议不包邮的应该在...</a>
                        </p>
                        <p class="hot-goods-author">
                            <a href="">来源于水军1号的评价</a>
                        </p>
                        <div class="hot-goods-info">
                            <h3 class="title">玉米插线板</h3>
                            <span>|</span>
                            <p class="price">49元</p>
                        </div>
                    </div>
                    <div class="hot-goods fl">
                        <p class="hot-goods-img">
                            <a href="">
                                <img src="./img/item12.png" alt="">
                            </a>
                        </p>
                        <p class="hot-goods-msg">
                            <a>东西真心不错，用过最好用的插线板，做工外观没得挑剔，3个USB接口很实用，充电快，建议不包邮的应该在...</a>
                        </p>
                        <p class="hot-goods-author">
                            <a href="">来源于水军1号的评价</a>
                        </p>
                        <div class="hot-goods-info">
                            <h3 class="title">玉米插线板</h3>
                            <span>|</span>
                            <p class="price">49元</p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 热评商品 结束 -->
        </div>
    </div>

    <!-- 商品展示 结束 -->

    <!-- 底部 开始 -->
    <div class="footer">
        <div class="container">
            <div class="service-info">
                <div class="service-item first"><a href="">预约维修</a></div>
                <div class="service-item"><a href="">7天无理由退货</a></div>
                <div class="service-item"><a href="">15天免费换货</a></div>
                <div class="service-item"><a href="">满150元包邮</a></div>
                <div class="service-item"><a href="">520余家售后网点</a></div>  
            </div>
            <div class="slogan">
                &copy;为发骚而生
            </div>
        </div>
    </div>
    <!-- 底部 结束 -->
</body>

</html>
HTML篇452lines

CSS篇

/*所有跳转a标签去除下划线*/
a {
    text-decoration: none;
}
/*所有列表标签去除前面type属性*/
ul {
    list-style-type: none;
}
/*右飘*/
/*登录、注册、消息、购物车4个a标签右飘*/
/*搜索栏右飘*/
.fr {
    float: right
}
/*商城、链接5个a标签左飘*/
.fl {
    float: left;
}

/*几乎所有标签都需要用到浮动*/
.clearfix:before,
.clearfix:after {
    content: "";
    display: block;
    clear: both;
}
/*顶部导航栏*/
/*margin: 0 auto 常见居中*/
/*auto自动适应*/
.container {
    width: 1226px;
    margin: 0 auto;
}

/* 顶部导航栏导航条样式，且使用固定位置 */
.nav {
    background-color: #333;
    height: 40px;
    line-height: 40px;
    width: 100%;
    position: fixed;
    top: 0;
}

/*统一去除顶部导航栏、目录导航左栏、轮播栏、底部开始栏的内填充和外边距*/
.nav-left,
.nav-right,
.top-menu,
.item-list,
.service-info {
    margin: 0;
    padding: 0;
}
/*顶部导航左右栏设置*/
.nav-left li {
    float: left;
    padding-right: 15px;
}

.nav-right li {
    float: left;
    padding-left: 15px;
}
/*设置nav类中a标签的颜色，顶部导航栏一般用半灰色字体*/
.nav a {
    color: #b0b0b0;
}
/*设置nav类a标签，鼠标移动上去变为纯白色*/
.nav a:hover {
    color: #fff;
}


/* main区 样式 */
/*目录导航栏*/
/*margin: 上下 左右auto(居中)*/
.main {
    width: 1226px;
    margin: 40px auto;
    background-color: white;
}
/*控制两个图标的右侧外边距*/
.logo>* {
    margin-right: 15px;
}

.main-header {
    height: 55px;
    /*行间距(行高)*/
    line-height: 55px;
}
/*目录导航栏内部a标签的颜色以及鼠标移动上后的颜色*/
.top-menu a {
    color: #3d3d3d;
}
.top-menu a:hover {
    color: #ff6700;
}
.top-menu li {
    float: left;
    padding: 0 10px;
}
/*设置搜索栏使用到了按钮标签*/
.main-search {
    width: 300px;
    height: 50px;
    margin-top: 15px;
}
.main-search input {
    border: 1px solid #e0e0e0;
    width: 80%;
}
.main-search button {
    border: 1px solid #e0e0e0;
    width: 19%;
}
.main-search input,
.main-search button {
    padding: 10px 0;
    display: block;
    float: left;
}


/* 左侧菜单和轮播carousel */
.menu {
    margin-bottom: 30px;
}
/*轮播栏*/
.menu > .sidebar {
    width: 234px;
    background-color: #0a3651;
}

.item-list {
    padding: 20px 0;
}
/*轮播栏中的a标签颜色，*/
.item-list a {
    color: white;
    /*默认占整个页面宽度*/
    display: block;
    height: 42px;
    line-height: 42px;
    padding: 0 25px;
}
/*轮播栏鼠标移动到a标签后，颜色变为胡萝卜色*/
.item-list a:hover {
    background-color: tomato;
}
/*设置轮播菜单的右边图片*/
.menu > .carousel {
    width: 992px;
}

/*紧跟着轮播菜单的4个图片*/
/* 目录下 二级广告区 */
.pic-item {
    margin-left: 8px;
}

.pic.first{
    margin-left: 0;
}

/* 闪购  */
.flash-item {
    margin-left: 8px;
}

.flash-item.first {
    margin-left: 0px;
}

/* 商品列表 */
/*家电和智能几乎是一模一样的*/
.goods {
    background-color: #f5f5f5;
    padding-bottom: 60px;
}

.goods-box {
    padding-top: 20px;
}
.goods-box-left {
    width: 234px;
}
.left-item {
    display: block;
}

.left-item.first {
    margin-bottom: 10px;
}
.goods-box-right {
    width: 992px;
}
/*设置右边小块标签样式*/
.goods-item {
    height: 246px;
    width: 234px;
    padding: 34px 0 20px;
    background-color: white;
    margin-left: 14px;
    margin-bottom: 14px;
}

.item-img {
    width: 150px;
    height: 150px;
    margin: 0 auto 18px;
}

.item-img>a {
    display: block;
}

.item-price {
    /*文字水平对齐*/
    text-align: center;
    color: red;
}
.item-title {
    text-align: center;
}
.item-title>a {
    color: #3d3d3d;
}
.item-memo>a {
    display: block;
    padding: 8px 30px;
}

/* 热评商品 */
.hot-goods {
    width: 296px;
    height: 415px;
    background-color: white;
    margin-left: 14px;
}
.hot-goods.first {
    margin-left: 0px;
}
.hot-goods-img {
    margin: 0 0 28px;
}

.hot-goods-msg {
    padding: 0 28px;
    color: #333;
}

.hot-goods-author {
    height: 18px;
    margin: 0 28px 8px;
    padding: 0 10px 0 0;
    font-size: 12px;
}
.hot-goods-author>a {
    color: #b0b0b0;
}

.hot-goods-info {
    margin: 0 30px;
}
.hot-goods-info>* {
    display: inline;
}

.price {
    color: red
}

/* 页脚 */

.footer {
    background-color: white;
}
.service-info {
    padding: 27px 0;
    border-bottom: 1px solid #e0e0e0;
}

.service-item {
    float: left;
    width: 19%;
    height: 25px;
    border-left: 1px solid #e0e0e0;
    font-size: 16px;
    line-height: 25px;
    text-align: center;
}
.service-item.first {
    border-left: none;
}
.service-item>a {
    color: #616161;
}

.service-item>a:hover{
    color: #ff6700;
}
/*发骚栏*/
.slogan {
    padding: 5px 0;
    text-align: center;
    color: #616161;
    background-color: #f5f5f5;
}
CSS篇309lines
posted @ 2018-12-13 18:59  KK筑梦人  阅读(83)  评论(0)    收藏  举报
刷新页面返回顶部
博客园  ©  2004-2026
浙公网安备 33010602011771号 浙ICP备2021040463号-3