flex布局仿站练习 - 作业 - php中文网博客

首页 > 博客列表 > flex布局仿站练习

博主信息

博文 26

粉丝 2

访问量 30901

专题推荐

更多>

flex布局练习

css

@charset "UTF-8";
@font-face { font-family: 'iconfont'; /* project id 1913940 */ src: url("//at.alicdn.com/t/font_1913940_smuvpc4954.eot"); src: url("//at.alicdn.com/t/font_1913940_smuvpc4954.eot?#iefix") format("embedded-opentype"), url("//at.alicdn.com/t/font_1913940_smuvpc4954.woff2") format("woff2"), url("//at.alicdn.com/t/font_1913940_smuvpc4954.woff") format("woff"), url("//at.alicdn.com/t/font_1913940_smuvpc4954.ttf") format("truetype"), url("//at.alicdn.com/t/font_1913940_smuvpc4954.svg#iconfont") format("svg"); }
.icon { font-family: "iconfont" !important; font-size: 14px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
* { padding: 0; margin: 0; box-sizing: border-box; outline: 0; cursor: pointer; }
img { width: 100%; height: auto; }
li { list-style: none; }
a { text-decoration: none; color: #666; }
body { width: 100vw; height: 300vh; overflow-x: hidden !important; background-color: #f6f6f6; }
header { width: 100%; height: 13em; }
.search_wrapper { position: fixed; display: flex; width: 100%; min-height: 44px; color: #fff; justify-content: space-between; background-color: #c82519; margin-bottom: 5px; z-index: 100; }
.search_wrapper > .item { flex: 0 0 50px; display: flex; flex-direction: column; justify-content: center; }
/* 搜索框样式 */
.search_wrapper > .item:nth-of-type(2) { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.search_wrapper > .item > .searchbar { background: #fff; border-radius: 20px; height: 30px; margin-right: 10px; }
.search_wrapper > .item > .searchbar .s-left { float: left; }
.search_wrapper > .item > .icon { color: #fff; font-size: 1.7em; text-align: center; }
.search_wrapper .searchbar .s-input-logo { color: #f1503b; margin: 8px 8px 0 15px; font-weight: bold; position: relative; }
.search_wrapper .searchbar .s-input-logo::after { content: ""; position: absolute; border-right: 1px solid #ddd; top: 0; left: 26px; height: 16px; }
.search_wrapper .searchbar .s-input-icon { position: relative; margin: 5px 0 0 8px; color: #999; font-size: 1.2em; }
.search_wrapper .searchbar input { border: none; margin: 9px 0 0 10px; font-size: 12px; width: 70%; }
.search_wrapper .login { font-size: 1em; }
.slider-bg { background-image: linear-gradient(0deg, #f1503b, #c82519 50%); position: absolute; top: 0; left: -25%; height: 10em; width: 150%; border-bottom-left-radius: 100%; border-bottom-right-radius: 100%; z-index: -1; }
/* 焦点图 */
.focus { width: 93vw; margin: auto; position: relative; top: 3em; }
.focus .hd { width: 100%; position: absolute; z-index: 1; bottom: 1em; display: flex; justify-content: center; }
.focus .hd li { background: rgba(255, 255, 255, 0.5); width: 8px; height: 3px; margin: 0 2px; overflow: hidden; }
.focus .hd li.on { background: white; width: 12px; }
.focus .bd li img { width: 100%; border-radius: .35em; }
/* 栏目导航 */
.navigation { position: relative; padding: .5em 0 0.3em 0; }
.navigation > .nav-hd { width: 100%; position: absolute; z-index: 1; bottom: .8em; display: flex; justify-content: center; }
.navigation > .nav-hd li { width: 5px; height: 5px; background-color: rgba(0, 0, 0, 0.3); border-radius: 50%; margin: 0 3px; }
.navigation > .nav-hd li.on { background-color: #e93b3d; width: 10px; height: 5px; border-radius: 3px; opacity: .7; }
.nav { display: flex; flex-flow: row wrap; margin-bottom: 15px; justify-content: space-around; }
.nav a { text-align: center; flex: 0 0 auto; min-width: 20%; font-size: .6em; text-align: center; margin-bottom: 10px; }
.nav a span { display: block; }
.nav img { margin-bottom: 5px; width: 44px; }
/* 秒杀 */
.seckill { width: 93vw; margin: auto; background: #fff; border-radius: .4em; padding: .6em 0 .8em 0; font-size: 14px; overflow: hidden; }
.seckill > .title_wrap { display: flex; justify-content: flex-start; }
.seckill > .title_wrap > .sec-tit { margin: 0 .4em 0 .6em; }
.seckill > .title_wrap > .sec-time-wrap { border: 1px solid #f2270c; border-radius: .4rem; }
.seckill > .title_wrap > .sec-time-wrap > .sec-time-order { float: left; border-radius: .4rem; background: #f2270c; color: #fff; padding: 0 0.3em; margin-right: .5em; }
.seckill > .title_wrap > .sec-time-wrap > .sec-timer { float: right; padding-right: .5em; color: #f2270c; font-weight: bold; }
.seckill > .title_wrap > .sec-more { margin-left: auto; margin-right: .5em; color: #f2270c; }
.seckill > .title_wrap > .sec-more > i { margin-left: .3em; }
/* 秒杀列表 */
.seckill-wrap { overflow-x: scroll; }
.seckill-wrap > .sec-list { display: flex; flex-flow: row nowrap; justify-content: flex-start; overflow: hidden; margin: .8em 0 0 .6em; }
.seckill-wrap > .sec-list > .sec-item { flex: 0 0 auto; width: 75px; text-align: center; margin-right: .6em; }
.seckill-wrap > .sec-list > .sec-item img { width: 100%; }
.seckill-wrap > .sec-list > .sec-item span { display: block; font-weight: 550; margin-top: .5em; }
.seckill-wrap > .sec-list > .sec-item span:first-of-type { color: #f2270c; }
.seckill-wrap > .sec-list > .sec-item span:last-of-type { color: #999; text-decoration: line-through; }
/* banner */
.banner { width: 93vw; margin: auto; position: relative; margin-top: .8em; }
.banner > .show-banner { height: 7.8em; display: flex; justify-content: center; overflow: hidden; border-radius: 0.6em; }
.banner-full { margin-top: .8em; }
/* 小院 */
.module-jdxy { width: 93vw; margin: auto; position: relative; border-radius: .4em; background: #fff; margin-bottom: .6em; }
.module-jdxy > .m-two { display: flex; justify-content: space-around; }
.module-jdxy > .m-two > .item { flex: 1; position: relative; padding: .5em .6em; }
.module-jdxy > .m-two > .item::after { height: 100%; content: ""; width: 1px; border-right: 1px solid #ddd; position: absolute; top: 0; right: 0; transform: scaleX(0.5); z-index: 10; }
.module-jdxy > .m-two > .item > .item-tit { font-size: 1.1em; font-weight: bold; background: linear-gradient(50deg, #45CAFF, #1471FB); background-clip: content-box; color: transparent; -webkit-background-clip: text; }
.module-jdxy > .m-two > .item > .item-txt { font-size: .8em; color: #7e7e7e; margin-bottom: .5em; }
.module-jdxy > .m-two > .item > .item-img { display: flex; justify-content: space-around; }
.module-jdxy > .m-two > .item > .item-img a { flex: 0 0 auto; width: 4.2em; height: 4.2em; }
.module-jdxy > .m-4 { display: flex; justify-content: center; border-top: 1px solid #f0f0f0; }
.module-jdxy > .m-4 > .item { flex: 1; position: relative; padding: .3em 0 .3em .6em; }
.module-jdxy > .m-4 > .item > .item-tit { font-size: 1.1em; font-weight: bold; }
.module-jdxy > .m-4 > .item > .item-txt { font-size: .8em; color: #7e7e7e; display: block; }
.module-jdxy > .m-4 > .item img { width: 83%; margin-top: .5em; }
/* 每日逛 */
.module-br { width: 93vw; margin: auto; position: relative; border-radius: .4em; background: #fff; margin-bottom: 1em; }
.m-8 { display: flex; justify-content: center; flex-flow: row wrap; border-top: 1px solid #f0f0f0; }
.m-8 > .item { flex: none; width: 25%; position: relative; padding: .3em 0 .3em .6em; }
.m-8 > .item > .item-tit { font-size: 1.1em; font-weight: bold; }
.m-8 > .item > .item-txt { font-size: .8em; color: #7e7e7e; display: block; }
.m-8 > .item img { width: 83%; margin-top: .5em; }
/* 为你推荐 */
.m-2 { display: flex; flex-wrap: wrap; justify-content: space-between; }
.m-2 > .item { flex: none; background: #fff; width: 49.5%; margin-bottom: .3em; padding-bottom: 1em; }
.m-2 > .item > .txt { font-size: .8em; color: #232326; padding: 0 .3em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-bottom: .6em; }
.m-2 > .item > .price-wrap { display: flex; justify-content: space-between; margin: 0 .4em; }
.m-2 > .item > .price-wrap > .price { color: #f23030; font-weight: bold; }
.m-2 > .item > .price-wrap > .btn { text-align: center; color: #686868; font-size: .6em; height: 2.5em; line-height: 2.5em; padding: 0 .5em; position: relative; }
.m-2 > .item > .price-wrap > .btn::after { content: ""; width: 200%; height: 200%; position: absolute; top: 0; left: 0; border: 1px solid #bfbfbf; border-radius: 4px; -webkit-transform: scale(0.5); transform: scale(0.5); -webkit-transform-origin: top left; transform-origin: top left; }
.boder-after::after { height: 100%; content: ""; width: 1px; border-right: 1px solid #ddd; position: absolute; top: 0; right: 0; transform: scaleX(0.5); z-index: 10; }
.gradient-red-pink { background: linear-gradient(90deg, #FF2A2A, #F139D2); -webkit-background-clip: text; color: transparent; }
.gradient-pink-red { background: linear-gradient(20deg, #F139D2, #FF2A2A); -webkit-background-clip: text; color: transparent; }
.gradient-blue-green { background: linear-gradient(90deg, #00C2AB, #3E94FF); -webkit-background-clip: text; color: transparent; }
.gradient-green-blue { background: linear-gradient(90deg, #2AD396, #85BB1F); -webkit-background-clip: text; color: transparent; }
.load-more { text-align: center; background: #f3f5f7; height: 3em; font-size: .8em; margin-bottom: .5em; width: 93vw; margin: auto; position: relative; border-top: 1px solid #ddd; padding-top: .5em; }
.common { width: 100vw; background: #fff; padding: 1em 0; margin-bottom: 3.5em; }
.common-links { display: flex; justify-content: space-evenly; border-bottom: 1px solid #e6e6e6; padding-bottom: 1em; }
.common-links > a { flex: none; position: relative; color: #848689; font-size: .92em; padding: 0 2em; }
.common-links > a::after { content: ""; height: 80%; width: 1px; background-color: #d7d7d7; position: absolute; right: 0; top: 15%; }
.common-links > a:last-of-type::after { display: none; }
.common-icons { display: flex; justify-content: space-around; padding: .5em 0; border-bottom: 1px solid #e6e6e6; }
.common-icons > a { flex: 0 0 16%; }
.common-copyright { text-align: center; color: #848689; font-size: 1.86667vw; padding: .5em 0; }
.common-nav { width: 100vw; height: 3.5em; position: fixed; left: 0; bottom: 0; z-index: 99; background-color: #fff; box-shadow: 0 0 10px 0 rgba(154, 141, 141, 0.6); font-size: 16px; display: flex; justify-content: space-around; align-items: center; }
.common-nav a { flex: none; width: 16%; text-align: center; }

html代码

<body>
    <div class="slider-bg"></div>
    <header>
        <div class="search_wrapper">
            <div class="item">
                <span class="icon"></span>
            </div>
            <div class="item">
                <div class="searchbar">
                    <i class="s-left icon s-input-logo"></i>
                    <i class="s-left icon s-input-icon"></i>
                    <form action="" method="get">
                        <input type="text" name="" id="" placeholder="搜索商品">
                    </form>
                </div>
            </div>
            <div class="item login">
                登录
            </div>
        </div>
        <!-- 焦点图 -->
        <div class="focus">
            <ul class="hd">
                <li></li>
                <li class="on"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <ul class="bd">
                <li>
                    <a href="">
                        <img src="/img/focus.jpg" alt="">
                    </a>
                </li>
            </ul class="bd">
        </div>
    </header>
    <!-- 导航 -->
    <nav class="navigation">
        <ul class="nav-hd">
            <li class="on"></li>
            <li></li>
        </ul>
        <div class="nav">
            <a href="">
                <img src="img/nav1.jpg" alt="">
                <span>京东超市</span>
            </a>
            <a href="">
                <img src="img/nav2.jpg" alt="">
                <span>数码电器</span>
            </a> <a href="">
                <img src="img/nav3.jpg" alt="">
                <span>京东服饰</span>
            </a>
            <a href="">
                <img src="img/nav4.jpg" alt="">
                <span>京东生鲜</span>
            </a>
            <a href="">
                <img src="img/nav5.jpg" alt="">
                <span>京东到家</span>
            </a>
            <a href="">
                <img src="img/nav6.jpg" alt="">
                <span>充值缴费</span>
            </a>
            <a href="">
                <img src="img/nav7.jpg" alt="">
                <span>9.9元拼</span>
            </a> <a href="">
                <img src="img/nav8.jpg" alt="">
                <span>领券</span>
            </a>
            <a href="">
                <img src="img/nav9.jpg" alt="">
                <span>赚钱</span>
            </a>
            <a href="">
                <img src="img/nav10.jpg" alt="">
                <span>PLUS会员</span>
            </a>
        </div>
    </nav>
    <!-- 秒杀 -->
    <section class="seckill">
        <div class="title_wrap">
            <div class="sec-tit">京东秒杀</div>
            <div class="sec-time-wrap">
                <div class="sec-time-order">10点场</div>
                <div class="sec-timer">00:30:08</div>
            </div>
            <div class="sec-more">
                更多秒杀<i class="icon"></i>
            </div>
        </div>
        <div class="seckill-wrap">
            <ul class="sec-list">
                <li class="sec-item">
                    <a href=""><img src="img/item1.jpg" alt=""></a>
                    <span><i class="icon"></i>799</span>
                    <span><i class="icon"></i>1299</span>
                </li>
                <li class="sec-item">
                    <a href=""><img src="img/item2.jpg" alt=""></a>
                    <span><i class="icon"></i>799</span>
                    <span><i class="icon"></i>1299</span>
                </li>
                <li class="sec-item">
                    <a href=""><img src="img/item3.jpg" alt=""></a>
                    <span><i class="icon"></i>799</span>
                    <span><i class="icon"></i>1299</span>
                </li>
                <li class="sec-item">
                    <a href=""><img src="img/item4.jpg" alt=""></a>
                    <span><i class="icon"></i>799</span>
                    <span><i class="icon"></i>1299</span>
                </li>
                <li class="sec-item">
                    <a href=""><img src="img/item5.jpg" alt=""></a>
                    <span><i class="icon"></i>799</span>
                    <span><i class="icon"></i>1299</span>
                </li>
                <li class="sec-item">
                    <a href=""><img src="img/item6.jpg" alt=""></a>
                    <span><i class="icon"></i>799</span>
                    <span><i class="icon"></i>1299</span>
                </li>
            </ul>
        </div>
    </section>
    <!-- banner -->
    <section class="banner">
        <div class="show-banner">
            <a href=""><img src="img/item11.jpg" alt=""></a>
            <a href=""><img src="img/item12.jpg" alt=""></a>
        </div>
    </section>
    <section class="banner-full">
        <a href="">
            <img src="img/item13.jpg" alt="">
        </a>
    </section>
    <!-- 东家小院 -->
    <section>
        <img src="img/item14.jpg" alt="">
    </section>
    <section class="module-jdxy">
        <div class="m-two">
            <div class="item">
                <span class="item-tit">品质生活</span>
                <p class="item-txt">讲究是一种生活态度</p>
                <div class="item-img">
                    <a href=""><img src="img/item15.jpg" alt=""></a>
                    <a href=""><img src="img/item16.jpg" alt=""></a>
                </div>
            </div>
            <div class="item">
                <span class="item-tit">内衣洗护</span>
                <p class="item-txt"> 贴身衣物洗护京选好物 </p>
                <div class="item-img">
                    <a href=""><img src="img/item17.jpg" alt=""></a>
                    <a href=""><img src="img/item18.jpg" alt=""></a>
                </div>
            </div>
        </div>
        <div class="m-4">
            <div class="item boder-after">
                <span class="item-tit">4K高清</span>
                <span class="item-txt">品质电视</span>
                <a href=""><img src="img/item19.jpg" alt=""></a>
            </div>
            <div class="item boder-after">
                <span class="item-tit">厨房配件</span>
                <span class="item-txt">厨房神器</span>
                <a href=""><img src="img/item20.jpg" alt=""></a>
            </div>
            <div class="item boder-after">
                <span class="item-tit">品质宝宝</span>
                <span class="item-txt"> 宝宝要吃好 </span>
                <a href=""><img src="img/item21.jpg" alt=""></a>
            </div>
            <div class="item">
                <span class="item-tit">时尚男鞋</span>
                <span class="item-txt">舒适男鞋</span>
                <a href=""><img src="img/item22.jpg" alt=""></a>
            </div>
        </div>
    </section>
    <!-- 每日逛 -->
    <section>
        <img src="img/item23.jpg" alt="">
    </section>
    <div class="module-br">
        <div class="m-8">
            <div class="item boder-after">
                <span class="item-tit gradient-red-pink">免息星球</span>
                <span class="item-txt"> 白条免息购 </span>
                <a href=""><img src="img/item24.jpg" alt=""></a>
            </div>
            <div class="item boder-after ">
                <span class="item-tit gradient-red-pink">每日特价</span>
                <span class="item-txt "> 9块9疯抢 </span>
                <a href=""><img src="img/item25.jpg" alt=""></a>
            </div>
            <div class="item boder-after">
                <span class="item-tit gradient-red-pink">品牌闪购</span>
                <span class="item-txt "> 汇大牌好价 </span>
                <a href=""><img src="img/item26.jpg" alt=""></a>
            </div>
            <div class="item">
                <span class="item-tit gradient-red-pink">京东直播</span>
                <span class="item-txt"> 好货即刻买 </span>
                <a href=""><img src="img/item27.jpg" alt=""></a>
            </div>
            <div class="item boder-after">
                <span class="item-tit gradient-pink-red">排行榜</span>
                <span class="item-txt "> 热销推荐 </span>
                <a href=""><img src="img/item28.jpg" alt=""></a>
            </div>
            <div class="item boder-after">
                <span class="item-tit gradient-blue-green">拍拍好物</span>
                <span class="item-txt"> 二手优品 </span>
                <a href=""><img src="img/item29.jpg" alt=""></a>
            </div>
            <div class="item boder-after">
                <span class="item-tit gradient-pink-red">新品首发</span>
                <span class="item-txt"> 京东小魔方 </span>
                <a href=""><img src="img/item30.jpg" alt=""></a>
            </div>
            <div class="item">
                <span class="item-tit gradient-pink-red gradient-green-blue">发现好货</span>
                <span class="item-txt"> 教你买买买 </span>
                <a href=""><img src="img/item31.jpg" alt=""></a>
            </div>
        </div>
    </div>
    <!-- 为你推荐 -->
    <div class="module-br" style=" background-color: #f6f6f6;">
        <section>
            <img src="img/item32.jpg" alt="">
        </section>
        <div class="m-2">
            <div class="item">
                <a href=""><img src="img/item33.jpg" alt=""></a>
                <p class="txt">
                    沐凡 毛巾 4条装洗脸毛巾吸水加大加厚成人儿童亲肤素色运动柔软洗澡洁面巾擦脸巾带挂绳 35*75cm 4条装（蓝+桔+粉+咖）
                </p>
                <div class="price-wrap">
                    <span class="price"><i class="icon"></i>29</span>
                    <span class="btn">看相似</span>
                </div>
            </div>
            <div class="item">
                <a href=""><img src="img/item34.jpg" alt=""></a>
                <p class="txt">
                    TP-LINK双千兆路由器 1900M无线家用5G双频 WDR7660千兆 六信号放大器 高速路由WIFI穿墙IPv6
                </p>
                <div class="price-wrap">
                    <span class="price"><i class="icon"></i>129</span>
                    <span class="btn">看相似</span>
                </div>
            </div>
            <div class="item">
                <a href=""><img src="img/item35.jpg" alt=""></a>
                <p class="txt">
                    木闻 沙发 布艺沙发北欧沙发ins实木沙发科技布沙发现代简约布艺沙发组合客厅家具 1+2+贵妃位 海绵款【麻布】 双人位+单人位+贵妃位（3.3米）
                </p>
                <div class="price-wrap">
                    <span class="price"><i class="icon"></i>3329</span>
                    <span class="btn">看相似</span>
                </div>
            </div>
            <div class="item">
                <a href=""><img src="img/item36.jpg" alt=""></a>
                <p class="txt">
                    英国欧乐集（Sticksology）柠檬绿茶 进口茶叶冲调饮品 袋泡茶包盒装1*15包 37.5g
                </p>
                <div class="price-wrap">
                    <span class="price"><i class="icon"></i>56</span>
                    <span class="btn">看相似</span>
                </div>
            </div>
            <div class="item">
                <a href=""><img src="img/item37.jpg" alt=""></a>
                <p class="txt">
                    北欧鞋柜 简约创意鞋架 源头厂家一件多功能防尘木质鞋柜家具 A款暖白色 双门 60*30*90
                </p>
                <div class="price-wrap">
                    <span class="price"><i class="icon"></i>499</span>
                    <span class="btn">看相似</span>
                </div>
            </div>
            <div class="item">
                <a href=""><img src="img/item38.jpg" alt=""></a>
                <p class="txt">
                    圣罗兰（YSL）细管纯口红2.2g 21#复古正红 小金条复古哑光口红 送女友 送老婆
                </p>
                <div class="price-wrap">
                    <span class="price"><i class="icon"></i>389</span>
                    <span class="btn">看相似</span>
                </div>
            </div>
        </div>
    </div>
    <!-- 底部 -->
    <section class="load-more">
        <a href="">点击继续加载</a>
    </section>
    <section class="common">
        <div class="common-links">
            <a href="">登录</a>
            <a href="">注册</a>
            <a href="">客户服务</a>
            <a href="">返回顶部</a>
        </div>
        <div class="common-icons">
            <a href="">
                <img src="img/item33.jpg" alt="">
            </a>
            <a href="">
                <img src="img/item36.jpg" alt="">
            </a>
            <a href="">
                <img src="img/item35.jpg" alt="">
            </a>
        </div>
        <div class="common-copyright">
            Copyright © 2004-2019 京东JD.com 版权所有
        </div>
    </section>
    <section class="common-nav">
        <a href="" class="icon">
            <img src="img/item40.jpg" alt="">
        </a>
        <a href="" class="icon">
            <img src="img/item41.jpg" alt=""></a>
        <a href="" class="icon">
            <img src="img/item42.jpg" alt="">
        </a>
        <a href="" class="icon">
            <img src="img/item43.jpg" alt="">
        </a>
        <a href="" class="icon">
            <img src="img/item44.jpg" alt="">
        </a>
    </section>
</body>

完成效果

总结：通过本次联系基本掌握常用flex布局属性的使用，对主轴和副轴的概念有了明确的认识，学到了很多细节处理技巧，例如：padding，margin使用时机,伪类模拟间隔线，文本渐变背景，文本裁切，内联元素转换等。
不足之处：在移动端布局使用的计量单位em,rem,px理解还比较模糊，导致页面在切换浏览器尺寸的时候会出现上下间隔比例不同的问题。

批改老师：

Guanhui

批改状态：合格

老师批语：很不错！

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

php本地集成环境配置、编辑器配置及markdown基本语法

2020-06-11 17:29:28