前端周结

最新推荐文章于 2024-08-22 05:43:09 发布
最新推荐文章于 2024-08-22 05:43:09 发布
阅读量105 收藏 1
点赞数 2
文章标签： html5 css3 less
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_52040370/article/details/114776552
版权
  1. 流式布局的案例–京东移动端
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable-no,maximum-scale=1.0,minimum-scale=1.0">
    <!-- 引入我们css初始化文件 -->
    <link rel="stylesheet" href="css/normalize.css">
    <!-- 引入我们自己的css文件 -->
    <link rel="stylesheet" href="css/index.css">
    <title>京东案例</title>
</head>
<body>
    <!-- 头部模块 -->
    <header class="app">
        <ul>
            <li>
                <img src="images1/cha.png" alt="">
            </li>
            <li>
                <img src="images1/logo.png" alt="">
            </li>
            <li>打开京东app,购物更简单</li>
            <li>立即打开</li>
        </ul>
    </header>
    <!-- 搜索模块 -->
    <div class="search">
        <div class="search-btn"></div>
        <div class="center">
            <div class="jd"></div>
            <div class="sou"></div>
        </div>
        <div class="search-login">登录</div>
    </div>
    <!-- 主体模块 -->
    <div class="main">
        <!-- 滑动图 -->
        <div class="slider">
            <img src="upload/q70.jpg" alt="">
        </div>
        <!-- 蔡康永模块 -->
        <div class="brand">
            <div>
                <a href="##"><img src="upload/pic1.dpg" alt=""></a>
            </div>
            <div>
                <a href="##"><img src="upload/pic2.dpg" alt=""></a>
            </div>
            <div>
                <a href="##"><img src="upload/pic3.dpg" alt=""></a>
            </div>
        </div>
        <!-- nav模块 -->
        <nav class="clearfix">
            <a href="#">
                <img src="upload/nav1.webp" alt="">
                <span>京东超市</span>
            </a>
            <a href="#">
                <img src="upload/nav2.webp" alt="">
                <span>京东超市</span>
            </a>
            <a href="#">
                <img src="upload/nav3.webp" alt="">
                <span>京东超市</span>
            </a>
            <a href="#">
                <img src="upload/nav1.webp" alt="">
                <span>京东超市</span>
            </a>
            <a href="#">
                <img src="upload/nav1.webp" alt="">
                <span>京东超市</span>
            </a>
            <a href="#">
                <img src="upload/nav1.webp" alt="">
                <span>京东超市</span>
            </a>
            <a href="#">
                <img src="upload/nav1.webp" alt="">
                <span>京东超市</span>
            </a>
            <a href="#">
                <img src="upload/nav1.webp" alt="">
                <span>京东超市</span>
            </a>
            <a href="#">
                <img src="upload/nav1.webp" alt="">
                <span>京东超市</span>
            </a>
            <a href="#">
                <img src="upload/nav1.webp" alt="">
                <span>京东超市</span>
            </a>
        </nav>
        <!-- 新闻模块 -->
        <div class="news">
            <a href="#">
                <img src="upload/new1.dpg" alt="">
            </a>
            <a href="#">
                <img src="upload/new2.dpg" alt="">
            </a>
            <a href="#">
                <img src="upload/new3.dpg" alt="">
            </a>
        </div>
    </div>
</body>
</html>

.clearfix:after {
    visibility: hidden;
    clear: both;
    display: block;
    content: ".";
    height: 0
}

.clearfix {
    *zoom: 1
}
body {
    width: 100%;
    min-width: 320px;
    max-width: 640px;
    margin: 0 auto;
    font-size: 14px;
    font-family: -apple-system, Helvetica, sans-serif;
    color: #666;
    line-height: 1.5;

}
a {
    color: #666;
    text-decoration: none;
}
.app {
    height: 45px;
}
img  {
    vertical-align: middle;
}
ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.app ul li {
    float: left;
    height: 45px;
    line-height: 45px;
    background-color: #333333;
    text-align: center;
    color: #fff;
}
.app ul li:nth-child(1) {
    width: 8%;
}
.app ul li:nth-child(1) img {
    width: 12px;
}
.app ul li:nth-child(2) {
    width: 10%;
}
.app ul li:nth-child(2) img {
    width: 35px;
    vertical-align: middle;
}
.app ul li:nth-child(3) {
    width: 57%;
}
.app ul li:nth-child(4) {
    width: 25%;
    background-color: #f63515;
}
.search {
    position: fixed;
    width: 100%;
    height: 44px;
    overflow: hidden;
    min-width: 320px;
    max-width: 640px;
}
.search-btn {
    position: absolute;
    left: 0;
    top: 0;
    width: 40px;
    height: 44px;
}
.search-btn::before {
    content: "";
    display: block;
    width: 20px;
    height: 18px;
    background: url(../images1/three.png) no-repeat;
    background-size: 20px 18px;
    margin: 14px 0 0 15px;
}
.search-login {
    position: absolute;
    right: 0;
    top: 0;
    width: 40px;
    height: 44px;
    color: #fff;
    text-align: center;
    line-height: 44px;
}
.center {
    position: relative;
    height: 30px;
    background-color:#fff;
    margin: 0 50px ;
    border-radius: 15px;
    margin-top: 7px;
}
.jd {
    position: absolute;
    top: 8px;
    left: 13px;
    width: 20px;
    height: 15px;
    background: url(../images1/jd.png);
    background-size: 20px 15px;
}
.jd::after {
    position: absolute;
    right: -8px;
    top: 0;
    content: "";
    display: block;
    width: 1px;
    height: 15px;
    background-color: #ccc;
}
.sou {
    position: absolute;
    top: 8px;
    left: 50px;
    width: 18px;
    height: 15px;
    background: url(../images1/jd-sprites.png) no-repeat -81px 0;
    background-size: 200px auto;
}
.slider img {
    width: 100%;
}
.brand {
    overflow: hidden;
    border-radius: 10px 10px 0 0;
}
.brand div {
    float: left;
    width: 33.33%;
}
.brand div img {
    width: 100%;
}
nav {
    padding-top: 5px;
}
nav a {
    float: left;
    width: 20%;
    text-align: center;
}
nav a img {
    width: 40px;
    margin: 10px 0;
}
nav a span {
    display: block;
}
.news {
    margin-top: 20px;
}
.news img {
    width: 100%;
}
.news a {
    float: left;
    box-sizing: border-box;
}
.news a:nth-child(1) {
    width: 50%;
}
.news a:nth-child(2) {
    width: 25%;
    border-left: 1px solid #ccc;
}
.news a:nth-child(3) {
    width: 25%;
    border-left: 1px solid #ccc;
}

.clearfix:after {
    visibility: hidden;
    clear: both;
    display: block;
    content: ".";
    height: 0
}

.clearfix {
    *zoom: 1
}
body {
    width: 100%;
    min-width: 320px;
    max-width: 640px;
    margin: 0 auto;
    font-size: 14px;
    font-family: -apple-system, Helvetica, sans-serif;
    color: #666;
    line-height: 1.5;

}
a {
    color: #666;
    text-decoration: none;
}
.app {
    height: 45px;
}
img  {
    vertical-align: middle;
}
ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.app ul li {
    float: left;
    height: 45px;
    line-height: 45px;
    background-color: #333333;
    text-align: center;
    color: #fff;
}
.app ul li:nth-child(1) {
    width: 8%;
}
.app ul li:nth-child(1) img {
    width: 12px;
}
.app ul li:nth-child(2) {
    width: 10%;
}
.app ul li:nth-child(2) img {
    width: 35px;
    vertical-align: middle;
}
.app ul li:nth-child(3) {
    width: 57%;
}
.app ul li:nth-child(4) {
    width: 25%;
    background-color: #f63515;
}
.search {
    position: fixed;
    width: 100%;
    height: 44px;
    overflow: hidden;
    min-width: 320px;
    max-width: 640px;
}
.search-btn {
    position: absolute;
    left: 0;
    top: 0;
    width: 40px;
    height: 44px;
}
.search-btn::before {
    content: "";
    display: block;
    width: 20px;
    height: 18px;
    background: url(../images1/three.png) no-repeat;
    background-size: 20px 18px;
    margin: 14px 0 0 15px;
}
.search-login {
    position: absolute;
    right: 0;
    top: 0;
    width: 40px;
    height: 44px;
    color: #fff;
    text-align: center;
    line-height: 44px;
}
.center {
    position: relative;
    height: 30px;
    background-color:#fff;
    margin: 0 50px ;
    border-radius: 15px;
    margin-top: 7px;
}
.jd {
    position: absolute;
    top: 8px;
    left: 13px;
    width: 20px;
    height: 15px;
    background: url(../images1/jd.png);
    background-size: 20px 15px;
}
.jd::after {
    position: absolute;
    right: -8px;
    top: 0;
    content: "";
    display: block;
    width: 1px;
    height: 15px;
    background-color: #ccc;
}
.sou {
    position: absolute;
    top: 8px;
    left: 50px;
    width: 18px;
    height: 15px;
    background: url(../images1/jd-sprites.png) no-repeat -81px 0;
    background-size: 200px auto;
}
.slider img {
    width: 100%;
}
.brand {
    overflow: hidden;
    border-radius: 10px 10px 0 0;
}
.brand div {
    float: left;
    width: 33.33%;
}
.brand div img {
    width: 100%;
}
nav {
    padding-top: 5px;
}
nav a {
    float: left;
    width: 20%;
    text-align: center;
}
nav a img {
    width: 40px;
    margin: 10px 0;
}
nav a span {
    display: block;
}
.news {
    margin-top: 20px;
}
.news img {
    width: 100%;
}
.news a {
    float: left;
    box-sizing: border-box;
}
.news a:nth-child(1) {
    width: 50%;
}
.news a:nth-child(2) {
    width: 25%;
    border-left: 1px solid #ccc;
}
.news a:nth-child(3) {
    width: 25%;
    border-left: 1px solid #ccc;
}
  1. flex布局的案例学习
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/normalize.css">
    <title>携程在手，说走就走</title>
</head>
<body>
    <div class="search">
        <div class="search_lit">搜索:目的地/酒店/景点/航班号</div>
        <a href="#" class="user">我 的</a>
    </div>
    <!-- 焦点图模块 -->
    <div class="focus">
        <img src="upload/focus.jpg" alt="">
    </div>
    <!-- 本地模块 -->
    <ul class="local_nav">
        <li>
            <a href="#" title="景点·玩乐">
                <span class="local_icon-i1"></span> 
                <span>景点·玩乐</span>
            </a>
        </li>
        <li>
            <a href="#" title="景点·玩乐">
                <span class="local_icon-i2"></span> 
                <span>景点·玩乐</span>
            </a>
        </li>
        <li>
            <a href="#" title="景点·玩乐">
                <span class="local_icon-i3"></span> 
                <span>景点·玩乐</span>
            </a>
        </li>
        <li>
            <a href="#" title="景点·玩乐">
                <span class="local_icon-i4"></span> 
                <span>景点·玩乐</span>
            </a>
        </li>
        <li>
            <a href="#" title="景点·玩乐">
                <span class="local_icon-i5"></span> 
                <span>景点·玩乐</span>
            </a>
        </li>
    </ul>
    <!-- 主导航栏模块 -->
    <nav>
        <div class="nav-common">
            <div class="nva-items">
                <a href="#">海外酒店</a>
            </div>
            <div class="nva-items">
                <a href="#">海外酒店</a>
                <a href="#">特价酒店</a>
            </div>
            <div class="nva-items">
                <a href="#">海外酒店</a>
                <a href="#">特价酒店</a>
            </div>
        </div>
        <div class="nav-common">
            <div class="nva-items">
                <a href="#">海外酒店</a>
            </div>
            <div class="nva-items">
                <a href="#">海外酒店</a>
                <a href="#">特价酒店</a>
            </div>
            <div class="nva-items">
                <a href="#">海外酒店</a>
                <a href="#">特价酒店</a>
            </div>
        </div>
        <div class="nav-common">
            <div class="nva-items">
                <a href="#">海外酒店</a>
            </div>
            <div class="nva-items">
                <a href="#">海外酒店</a>
                <a href="#">特价酒店</a>
            </div>
            <div class="nva-items">
                <a href="#">海外酒店</a>
                <a href="#">特价酒店</a>
            </div>
        </div>
    </nav>
    <!-- 侧导航栏模块 -->
    <ul class="subnav_entry">
        <li>
            <a href="#">
                <span class="subnav_entry-icon"></span>
                <span>电话费</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="subnav_entry-icon"></span>
                <span>电话费</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="subnav_entry-icon"></span>
                <span>电话费</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="subnav_entry-icon"></span>
                <span>电话费</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="subnav_entry-icon"></span>
                <span>电话费</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="subnav_entry-icon"></span>
                <span>电话费</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="subnav_entry-icon"></span>
                <span>电话费</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="subnav_entry-icon"></span>
                <span>电话费</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="subnav_entry-icon"></span>
                <span>电话费</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="subnav_entry-icon"></span>
                <span>电话费</span>
            </a>
        </li>
    </ul>
    <!-- 销售模块 -->
    <div class="sales-box">
        <div class="sales-hd">
            <h2>热门活动</h2>
            <a href="#" class="more">获取更多福利</a>
        </div>
        <div class="sales-bd">
            <div class="row">
                <a href="#">
                    <img src="upload/pic1.jpg" alt="">
                </a>
                <a href="#">
                    <img src="upload/pic2.jpg" alt="">
                </a>
            </div>
            <div class="row">
                <a href="#">
                    <img src="upload/pic3.jpg" alt="">
                </a>
                <a href="#">
                    <img src="upload/pic4.jpg" alt="">
                </a>
            </div>
            <div class="row">
                <a href="#">
                    <img src="upload/pic5.jpg" alt="">
                </a>
                <a href="#">
                    <img src="upload/pic6.jpg" alt="">
                </a>
            </div>
        </div>
    </div>
</body>
</html>

body {
    max-width: 540px;
    min-width: 320px;
    margin: 0 auto;
    font: normal 14px/1.5 Tahoma, "Lucida Grande", Verdana, "Microsoft Yahei", STXihei, hei;
    color: #000;
    background: #f2f2f2;
    overflow-x: hidden;
    -webkit-tap-highlight-color: transparent;
}
div {
    box-sizing: border-box;
}
ul {
    margin: 0;
    padding: 0;
}
li {
    list-style: none;
}
a {
    text-decoration: none;
}
.search {
    display: flex;
    /* 固定定位跟父级没有关系，它以屏幕为准 */
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 540px;
    min-width: 320px;
    height: 44px;
    background-color: #f6f6f6;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}
.search_lit {
    position: relative;
    height: 26px;
    line-height: 24px;
    border:1px solid #ccc ;
    font-size: 12px;
    color: #666;
    flex: 1;
    margin: 7px 10px;
    padding-left: 30px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,.2);
}
.search_lit::before {
    content: "";
    position: absolute;
    top: 1px;
    left: 5px;
    width: 15px;
    height: 15px;
    background:url(../images/sprite.png) no-repeat -59px -279px;
    background-size: 104px auto;
    margin: 5px;
}
.user {
    text-decoration: none;
    width: 44px;
    height: 44px;
    font-size: 12px;
    text-align: center;
    color: #2eaae0;
}
.user::before {
    content: "";
    display: block;
    width: 23px;
    height: 23px;
    background: url(../images/sprite.png) no-repeat -59px -194px;
    background-size: 104px auto;
    margin: 4px auto -2px;
}
.focus {
    padding-top: 44px;
}
.focus img {
    width: 100%;
}
.local_nav {
    display: flex;
    height: 64px;
    background-color: #fff;
    border-radius: 8px;
    margin: 3px 4px;
}
.local_nav li {
    flex: 1;
}
.local_nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #222;
    font-size: 12px;
}
.local_nav li [class^="local_icon"] {
    background: url(../images/localnav_bg.png) no-repeat 0 0;
    width: 32px;
    height: 32px;
    margin-top: 8px;
    background-size: 32px auto ;
}
.local_nav li .local_icon-i2 {
    background-position: 0 -32px;
}
.local_nav li .local_icon-i3 {
    background-position: 0 -64px;
}
.local_nav li .local_icon-i4 {
    background-position: 0 -96px;
}
.local_nav li .local_icon-i5 {
    background-position: 0 -128px;
}
nav {
    overflow: hidden;
    border-radius: 8px;
    margin: 0 4px 3px;
}
.nav-common {
    display: flex;
    height: 88px;
    background-color: pink;
}
.nav-common:nth-child(2) {
    margin: 3px 0;
}
.nva-items {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.nva-items:nth-child(-n+2) {
    border: 1px solid #fff;
}
.nva-items a:nth-child(1) {
    border-bottom: 1px solid #fff;
}
.nva-items a {
    flex: 1;
    text-align: center;
    line-height: 44px;
    color: #fff;
    font-size: 14px;
    text-shadow: 1px 1px rgba(0,0,0,.2);
}
.nva-items:nth-child(1) {
    border-bottom: none;
}
.nva-items:nth-child(1) a {
    background: url(../images/hotel.png) no-repeat bottom center;
    background-size: 121px auto;
}
.nav-common:nth-child(1) {
    background: -webkit-linear-gradient(left,#fa5a55,#fa994d);
}
.nav-common:nth-child(2) {
    background: -webkit-linear-gradient(left,#4b90ed,#53bced);
}
.nav-common:nth-child(3) {
    background: -webkit-linear-gradient(left,#34c219,#6cd559);
}
.subnav_entry {
    display: flex;
    border-radius: 8px;
    background-color: #fff;
    margin: 0 4px;
    flex-wrap: wrap;
    padding: 5px 0 ;
}
.subnav_entry li {
    /* 里面的子盒子可以写百分比 相对于父级来说的 */
    flex: 20%;
}
.subnav_entry a {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.subnav_entry-icon {
    width: 28px;
    height: 28px;
    background-color: pink;
    margin-top: 4px;
    background:url(../images/subnav-bg.png) no-repeat;
    background-size: 28px auto;
}
.sales-box {
    border-top: 1px solid #bbb;
    background-color: #fff;
    margin: 4px;
}
.sales-hd {
    position: relative;
    height: 44px;
    border-bottom: 1px solid #ccc;
}
.sales-hd h2 {
    position: relative;
    overflow: hidden;
    text-indent: -999px;
}
.sales-hd h2::after {
    position: absolute;
    top: 8px;
    left: 20px;
    content: "";
    width: 79px;
    height: 15px;
    background:url(../images/hot.png) no-repeat 0 -20px;
    background-size: 79px auto;
}
.more {
    position: absolute;
    right: 5px;
    top: 0px;
    background: -webkit-linear-gradient(left,#ff506c,#ff6bc6);
    border-radius: 15px;
    padding: 3px 20px 3px 10px;
    color: #fff;
}
.more::after {
    position: absolute;
    top: 9px;
    right: 9px;
    content: "";
    width: 7px;
    height: 7px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
}
.row{
    display: flex;
}
.row a {
    flex: 1;
    border-bottom: 1px solid #ccc;
}
.row a img {
    width: 100%;
}
.row a:nth-child(1) {
    border-right: 1px solid #ccc;
}
  1. less 制作苏宁案例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="index.css">
    <title>Document</title>
</head>
<body>
    <!-- 顶部搜索框 -->
    <div class="search_content">
        <a href="#" class="classify"></a>
        <div class="search">
            <form action="">
                <input type="search" value="厨卫保暖季 每千减百">
            </form>
        </div>
        <a href="#" class="login">登录</a>
    </div>
     <!-- banner模块 -->
     <div class="banner">
        <img src="upload/banner.gif" alt="">
    </div>
    <!-- 广告部分 -->
    <div class="ad">
        <a href="#"><img src="upload/ad1.gif" alt=""></a>
        <a href="#"><img src="upload/ad2.gif" alt=""></a>
        <a href="#"><img src="upload/ad3.gif" alt=""></a>
    </div>
    <!-- nav模块 -->
    <div class="nav">
        <a href="#">
            <img src="upload/nav1.png" alt="">
            <span>爆款手机</span>
        </a>
        <a href="#">
            <img src="upload/nav1.png" alt="">
            <span>爆款手机</span>
        </a>
        <a href="#">
            <img src="upload/nav1.png" alt="">
            <span>爆款手机</span>
        </a>
        <a href="#">
            <img src="upload/nav1.png" alt="">
            <span>爆款手机</span>
        </a>
        <a href="#">
            <img src="upload/nav1.png" alt="">
            <span>爆款手机</span>
        </a>
        <a href="#">
            <img src="upload/nav1.png" alt="">
            <span>爆款手机</span>
        </a>
        <a href="#">
            <img src="upload/nav1.png" alt="">
            <span>爆款手机</span>
        </a>
        <a href="#">
            <img src="upload/nav1.png" alt="">
            <span>爆款手机</span>
        </a>
        <a href="#">
            <img src="upload/nav1.png" alt="">
            <span>爆款手机</span>
        </a>
        <a href="#">
            <img src="upload/nav1.png" alt="">
            <span>爆款手机</span>
        </a>
    </div>
</body>
</html>

// 首页的样式less文件
@import "common";
//import 是导入的意思 可以把一个样式文件导入另一个样式文件里面
//link是把样式文件引入到 html页面中去
body {
    min-width: 320px;
    margin: 0 auto;
    width: 15rem;
    line-height: 1.5;
    font-family: Arial, Helvetica;
    background: #f2f2f2;
}
a {
    text-decoration: none;
}
@basefont:50px;
.search_content {
    display: flex;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 15rem;
    height: (88rem / @basefont);
    background-color: #ffc001;
}
.classify {
    width:(44rem / @basefont ) ;
    height: (70rem / @basefont);
    background-color: pink;
    margin: (11rem / @basefont) (25rem / @basefont) (7rem / @basefont) (24rem / @basefont);
    background: url(images/classify.png) no-repeat;
    background-size: 0.88rem 1.4rem;
}
.search {
    flex: 1;
    // background-color: purple;
    input {
        outline: none;  //没有边框
        width: 100%;
        border: 0;
        height: (66rem / @basefont);
        border-radius: (33rem / @basefont);
        background-color: #fff2cc;
        margin-top: (12rem / @basefont);
        padding-left: (55rem / @basefont);
        font-size: (25rem / @basefont);
        color: #757575;
    }
}
.login {
    width: (75rem / @basefont);
    height: (70rem / @basefont);
    // background-color: blue;
    margin: (10rem / @basefont);
    font-size: (25rem / @basefont);
    text-align: center;
    color: #fff;
    line-height: (70rem / @basefont);
}
.banner {
    width: 15rem;
    height: (368rem / @basefont);
    img {
        width: 100%;
        height: 100%;
    }
}
.ad {
    display: flex;
    a {
        flex: 1;
    }
    a img {
        width: 100%;
    }
}
.nav {
    display: flex;
    flex-wrap: wrap;
    a {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex: 20%;
        font-size: (25rem / @basefont);
        color: #333;
    }
    a img {
        width: (82rem / @basefont);
        // margin: (10rem / @basefont) auto 0;
    }
}
前端小白在前进
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
前端周数计算
狼道的博客
10-14 500
业务场景：在界面上点击后端回传字段如‘2020年第21周’，此时需要往后端传所选周的始末时间（年月日 时分秒） const selectTime = '2020年第21周' constyear1=selectTime .split('年')[0] //截取当前选择的周数 constweek=selectTime .split('第')[1].split('周')[0] //起始日期 constparams=`$...
周结
01-08
本周的学习总结主要围绕着自学过程中的反思与策略调整。作者在持续阅读自考书籍超过一个月后，发现学习效果并不显著，于是决定改变学习路径，转向观看.NET的视频教程，特别是针对C#的部分，尽管这部分内容在之前的...
java-日记 前端
04-17
java-日记 前端
前端周记三
qq_44300774的博客
11-03 337
请解释一下Css的Flexbox（弹性盒布局模型）以及适用场景? 概念：Flex是Fiexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。采用Flex布局的元素，称Flex容器(f lex container), 简称"容器"。它的所有子元素自动 成为容器成员，称为Flex项目(flex item ), 简称“项目”。 适用场景:任何一个容器都可以指Flex布局。Flexbox用于不同尺寸的屏幕中创建可自动扩展和收缩布局。 display: inline-block 什么时候显示.
前端实习周记01
weixin_42841738的博客
06-03 2万+
前端实习周记01 上周是进入公司实习的第一周。 本来计划是上周末写周记。无奈有论文要写，把第一周的周记拖到了现在。 我是星期三进入公司的，第一天学习Vue cli 3项目搭建，配置webpack4，试着运行、编译等。公司是在做一个很大的网站重构项目，前端这边工期也很紧，所以并没有给我安排demo来测试我的业务能力2333。 聊一聊公司的重构项目 之前是用jsp写的电商平台，重构是用的vue.js...
div中class属性的理解
热门推荐
liulang68的博客
07-01 6万+
div 在网页设计中是表示块、区域的意思，比如你在制作一个卖衣服的网页时，把男装和女装各分一个区域这是就可以定义两个div，两个块，class则可以表示你可以给这个块加一些属性啊，比如长和宽，背景颜色什么的，你可以给这些属性取一个名字，class=shuxing就表示你给这个属性的集合取了个shuxing的名称 <div class=nanzhuang>、<div class=nvzhuang> 就可以表示你给男装区域和女装区域定义的属性名，这样你就可以设疑class改变他的属性了
vue笔记周结
相濡以沫不如相忘于江湖.
11-01 274
vue笔记周结 概述 实例化参数 指令 过滤-管道 动画 组件 一、Vue概述 了解 作者： 尤雨溪 (现任阿里巴巴Weex团队技术顾问)。 官网： cn.vuejs.org vue的定位： 是一个渐进式框架 前端三大mvvm框架 vue , react ,angular。 特点： 简单，上手简单 结合Angular指令与react组件思维 生态丰富(插件多)api文档完善 二、实例化参数 el:"#app" 选择目的标签 data：{} 指定数据 data(){return{}} 一个函数返回一
寒假学习周结
qq_61956177的博客
01-06 135
一．自学外边距margin的相关知识 块级元素的居中 设置块级元素CSS属性为：margin：0auto；即左右margin设置为auto 设置块级元素的display为inline（要求块级元素包含内容，否则由于内联元素的高度设置不起作用，相当于高度为零，块级元素就无法被看到）或者inline-block。该块状元素的父级元素CSS设置：text-align：center；此时会将该块级元素看作text进行居中处理。 嵌套块元素外边距合并导致的塌陷如何处理（有三种方法） 嵌套块元素塌陷：两个嵌套关系.
学习周结06
uoprewqsnh的博客
04-25 135
文章目录一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码如下（示例）： import numpy as np import pandas as pd import matplotlib.pyplot as plt import seaborn as sns import warnings warnings.filterwarnings('ignor
周结-2019年中国网络视听发展研究报告（PPT全文）-2019.5-81页精品报告.pdf
04-24
周结-2019年中国网络视听发展研究报告（PPT全文）-2019.5-81页精品报告.pdf
临床专业毕业生实习总结.doc
11-20
临床专业毕业生实习总结.doc
员工工资结算管理系统
04-26
前端界面则采用用户友好的设计，如B/S架构，使得操作简便易懂。同时，系统应具有良好的兼容性和扩展性，以适应企业未来的升级需求。 在实际应用中，系统还需要考虑与其他部门如人事、财务、税务等的接口，实现数据...
学校领导述职报告范文.doc.doc
11-08
- 日清周结：建立了完善的日清周结制度，通过量化管理细化班级管理，提升学生自我管理和责任感。 - 德育活动：学校通过丰富的德育活动，如升旗仪式、新队员入队、国学经典诵读、体育活动等，潜移默化地进行爱国...
周周结
前端小白在前进的博客
04-16 84
js的知识点总结
HTML5简洁的通用网站模板源码
接受定制，友情互惠，致力于前端的全类型模板，打造通用模板源码，进阶于前后端联合模板，适用于全类型。
08-19 709
HTML5简洁的通用网站模板源码，各行各业的网站源码，文字源码大作业网站源码，毕业设计网站源码，通用模板，网站源码，布局规整，色彩鲜明，导航菜单，轮播图（可自定义内容），图文结合，滚动信息，信息表单，描点跳转，整体风格简洁，内容丰富，各种风格都有，兼容性强，代码上手简单，代码独立，可以直接使用。也可直接预览效果。
404炫酷单页面html5源码
最新发布
爱酷码的博客
08-22 202
404炫酷单页面html5源码，感觉应该符合一些人的感觉！可以用来做404页面。记事本打开源码文件可以进行内容文字之类的修改，双击html文件可以本地运行效果，也可以上传到服务器里面，重定向这个界面。
【css】水平对齐方式（justify、text-align、display: flex；）
qq_45852108的博客
08-20 364
【css】水平对齐方式（justify、text-align、display: flex;）
cache数据库学习周结
05-18
本周我主要学习了Cache数据库的相关知识，并整理了以下的学习周结： 1. Cache数据库是一种高速缓存数据库，能够提高数据访问速度和性能。 2. Cache数据库采用内存存储，可以大大减少数据读写的时间，提高数据访问...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端小白在前进

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值