html less使用demo

最新推荐文章于 2024-01-15 13:45:53 发布

danfengw

最新推荐文章于 2024-01-15 13:45:53 发布

阅读量2.3k

点赞数 1

分类专栏： HTML

本文链接：https://blog.csdn.net/danfengw/article/details/54140675

版权

HTML 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

这里写图片描述
less文件编译使用的koala
less文件

/*reset*/
body {
    margin: 0;
}
/*框架搭建*/
html {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
body {
    width: 100%;
    height: 100%;
    overflow: auto;
    //设置字体大小
    font-size: 20/@rem;
    font-family: Arial,Helvetica,STHeiTi,sans-serif;
}
a {
    //取消a标签手指按下时产生的黑色遮罩层
    -webkit-tap-highlight-color: transparent;
    text-decoration: none;
    color: #818788;
}
input {
    //解决ios下元素圆角的问题
    -webkit-appearance: none;
    margin: 0;
    padding: 0;
    border: none;
}
ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
h3 {
    margin: 0;
    padding: 0;
}
/*LESS*/
//变量定义rem大小 并设置单位，语法：@
@rem: 40rem;
/*工具样式*/
.clearfix:after {
    content: "";
    display: block;
    clear: both;
}
/*主体部分*/
.head_box {
    width: 100%;
    height: 74/@rem;
    background-color: #FABC09;
    position: fixed;
    .btn_type {
        float: left;
        width: 78/@rem;
        height: 74/@rem;
        background: url("../img/icon_type.png") no-repeat 20/@rem 20/@rem;
        background-size: 35/@rem 45/@rem;
    }
    .search_box {
        float: left;
        width: 480/@rem;
        height: 74/@rem;
        .search_form {
            padding-top: 7/@rem;
            position: relative;
            &:before {
                position: absolute;
                left: 15/@rem;
                top: 18/@rem;
                width: 24/@rem;
                height: 28/@rem;
                background: url("../img/icon_search.png");
                background-size: 24/@rem 28/@rem;
                content: ""; //必须添加content才生效
            }
            //          .icon_search{
            //              position: absolute;
            //              left: 15/@rem;
            //              top:18/@rem;
            //              width:24/@rem  ;
            //              height: 28/@rem;
            //              background: url(../img/icon_search.png);
            //              background-size:24/@rem  28/@rem ;
            //          }
            .search_input {
                float: left;
                padding-top: 6/@rem;
                width: 480/@rem;
                height: 50/@rem;
                padding-left: 51/@rem;
                background-color: #FEF1CE;
                border-radius: 6/@rem;
                box-sizing: border-box;
            }
        }
    }
    .shop_car {
        float: left;
        width: 75/@rem;
        height: 88/@rem;
        background: url("../img/icon_shopcar.png") no-repeat 20/@rem 18/@rem;
        background-size: 30/@rem 35/@rem;
    }
}
.wrap {
    width: 100%;
    height: 4000px;
    padding-top: 100px;
}
.banner {
    width: 100%;
    height: 272/@rem;
    img {
        width: 100%;
    }
}
.nav {
    width: 100%;
    padding: 18/@rem 0 2/@rem;
    box-sizing: border-box;
    background-color: #cce3d1;
    border-top: 1px solid #acd3b3;
    margin-top: 1px;
    .nav_item {
        float: left;
        width: 20%;
        height: 114/@rem;
        padding-left: 14@rem;
        text-align: center;
        margin-bottom: 8/@rem;
        img {
            width: 68/@rem;
            height: 70/@rem;
        }
        .nav_title {
            display: block;
            font-weight: normal;
            line-height: 44/@rem;
        }
    }
}
.suning_tt {
    width: 100%;
    height: 87/@rem;
    background: #CCE3D1;
    margin-top: 2px;
    .tt_title {
        float: left;
        background: url("../img/ico-tt.jpg") no-repeat 22/@rem;
        width: 139/@rem;
        height: 87/@rem;
        background-size: 124/@rem 41/@rem;
    }
    .tt_line {
        float: left;
        width: 1px;
        height: 33/@rem;
        margin-top: 27/@rem;
        background: #eeeeee;
        margin-left: 10/@rem;
    }
    .tt_li {
        float: left;
        width: 430/@rem;
        height: 87/rem;
        padding-top: 14/@rem;
        box-sizing: border-box;
        margin-left: 10/@rem;
        .item {
            display: block;
            line-height: 28/@rem;
            background: url("../img/ico-list.jpg") no-repeat 14/@rem;
            background-size: 6/@rem 6/@rem;
            text-indent: 30/@rem;
        }
    }
}
.shoping_type {
    .type_top {
        height: 248/@rem;
        overflow: hidden; //防止图片过大
        a {
            float: left;
            margin: 0;
            padding: 0;
        }
        .big_img {
            width: 319/@rem;
            height: 248/@rem;
            box-sizing: border-box;
            margin-right: 1px;
            img {
                width: 319/@rem;
                height: 248/@rem;
            }
        }
        .sub_img {
            width: 319/@rem;
            height: 123/@rem;
            margin-bottom: 1px;
            img {
                width: 319/@rem;
                height: 123/@rem;
            }
        }
    }
    .bottom_img {
        float: left;
        margin: 0 1px 1px 0;
        img {
            width: 159/@rem;
            height: 257/@rem;
        }
    }
}
.suning_qg {
    width: 100%;
    height: 257/@rem;
    background-color: #CCE3D1;
    padding-left: 16/@rem;
    .head {
        width: 100%;
        height: 54/@rem;
        .head_left {
            float: left;
            .title {
                float: left;
                width: 116/@rem;
                height: 40/@rem;
                background: url("../img/title-qg.jpg") no-repeat;
                background-size: 116/@rem 40/@rem;
            }
            .time_box {
                float: left;
                margin-top: 14/@rem;
                .time_name {
                    float: left;
                    color: #f94f4e;
                    font-size: 18/@rem;
                    margin-left: 16/@rem;
                }
                .update_time {
                    float: left;
                    .time_item {
                        float: left;
                        width: 20/@rem;
                        height: 20/@rem;
                        border: 1px solid #818788;
                        border-radius: 4/@rem;
                        margin-left: 8/@rem;
                        text-align: center;
                        line-height: 20/@rem;
                        color: #000000;
                        padding: 2px;
                    }
                    .time_ico {
                        float: left;
                    }
                    .tips {
                        color: #ff0000;
                        border-color: #ff0000;
                    }
                }
            }
        }
        .head_right {
            float: right;
            padding: 14/@rem 20/@rem 0 0;
            .more {
                float: left;
                width: 104/@rem;
                height: 29/@rem;
                background-color: #ffc001;
                border-radius: 12/@rem;
                text-align: center;
                color: #456c24;
                font-size: 18/@rem;
                margin-right: 2px;
            }
            .ico_more {
                float: left;
                width: 15/@rem;
                height: 25/@rem;
                background: url("../img/ico-sj.jpg") no-repeat;
                background-size: 100%;
            }
        }
    }
    .shoping_box{
        width: 100%;
        overflow: hidden;

    .shoping_list {
        width: 200%;
        .list_item {
            width: 190/@rem;
            float: left;
            margin-right: 10/@rem;
            .item_img {
                width: 188/@rem;
                border: 1px solid #b2cdb1;
                display: block;
                img {
                    width: 100%;
                }
            }
            .item_bottom{
                padding-left: 16/@rem;
                width: 188/@rem;
                height: 57/@rem;
                background: #dddddd;
                position: relative;
                .price{

                    color: #dc0000;
                    font-size: 20/@rem;
                   line-height: 28/@rem;
                     display: block
                }
                .yuanprice{
                    color: #999999;
                    line-height: 24/@rem;
                    font-size: 16/@rem;
                }
                .zhekou{
                    position: absolute;
                    right: 6/@rem;
                    top: -6/@rem;
                    width: 61/@rem;
                    height: 61/@rem;
                    background: url(../img/ico-zhekou.jpg) no-repeat;
                    background-size: 100%;
                      text-align: center;
                      padding-top: 10/@rem;
                    .big_font{
                        color: #ffffff;
                       font-size: 22/@rem;
                       span{
                            font-size: 18/@rem;
                       }
                    }
                }
            }

        }
    }
}
 }

布局代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="css/index.css" />
        <script type="text/javascript">
            var pixradio = 1 / window.devicePixelRatio;
            document.write('<meta name="viewport" content="width=device-width,initial-scale=' + pixradio + ',minimum-scale=' + pixradio + ',maximum-scale=' + pixradio + ',user-scalable=no"/>');
            var html = document.getElementsByTagName('html')[0];
            var pageWidth = html.getBoundingClientRect().width;
            html.style.fontSize = pageWidth / 16 + 'px';
        </script>
        <!--1、固定定位：元素内容中有input的话，会导致触发键盘之后导致固定定位错位-->
    </head>

    <body>
        <header class="head_box">
            <a href="" class="btn_type"></a>
            <div class="search_box">
                <form action="" class="search_form">
                    <!--    <i class="icon_search"></i>-->
                    <input type="text" class="search_input" placeholder="涂涂女装淘宝店铺号85833577" />
                </form>

            </div>
            <a href="" class="shop_car"></a>
        </header>
        <section class="wrap">
            <ul class="banner">
                <li class="item">
                    <img src="img/banner.jpg" alt="" />
                </li>
            </ul>
            <nav class="nav clearfix">
                <a href="" class="nav_item ">
                    <img src="img/ico-nav.jpg" alt="" />
                    <strong class="nav_title">大聚惠</strong>
                </a>
                <a href="" class="nav_item ">
                    <img src="img/ico-nav.jpg" alt="" />
                    <strong class="nav_title">大聚惠</strong>
                </a>
                <a href="" class="nav_item ">
                    <img src="img/ico-nav.jpg" alt="" />
                    <strong class="nav_title">大聚惠</strong>
                </a>
                <a href="" class="nav_item ">
                    <img src="img/ico-nav.jpg" alt="" />
                    <strong class="nav_title">大聚惠</strong>
                </a>
                <a href="" class="nav_item ">
                    <img src="img/ico-nav.jpg" alt="" />
                    <strong class="nav_title">大聚惠</strong>
                </a>
                <a href="" class="nav_item ">
                    <img src="img/ico-nav.jpg" alt="" />
                    <strong class="nav_title">大聚惠</strong>
                </a>
                <a href="" class="nav_item ">
                    <img src="img/ico-nav.jpg" alt="" />
                    <strong class="nav_title">大聚惠</strong>
                </a>
                <a href="" class="nav_item ">
                    <img src="img/ico-nav.jpg" alt="" />
                    <strong class="nav_title">大聚惠</strong>
                </a>
                <a href="" class="nav_item ">
                    <img src="img/ico-nav.jpg" alt="" />
                    <strong class="nav_title">大聚惠</strong>
                </a>
                <a href="" class="nav_item ">
                    <img src="img/ico-nav.jpg" alt="" />
                    <strong class="nav_title">大聚惠</strong>
                </a>

            </nav>
            <div class="suning_tt">
                <div class="tt_title"></div>
                <div class="tt_line"></div>
                <div class="tt_li">
                    <ul>
                        <li>
                            <a class="item">快来看看涂涂女装，店铺号85833577</a>
                        </li>
                        <li>
                            <a class="item">快来看看涂涂女装，店铺号85833577</a>
                        </li>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="shoping_type">
                <div class="type_top">
                    <a href="" class="big_img"><img src="img/shoping-1.jpg" /></a>
                    <a href="" class="sub_img"><img src="img/shoping-2.jpg" /></a>
                    <a href="" class="sub_img"><img src="img/shoping-2.jpg" /></a>
                </div>
                <div class="type_bottom clearfix">
                    <a href="" class="bottom_img"><img src="img/shoping-3.jpg" /></a>
                    <a href="" class="bottom_img"><img src="img/shoping-3.jpg" /></a>
                    <a href="" class="bottom_img"><img src="img/shoping-3.jpg" /></a>
                    <a href="" class="bottom_img"><img src="img/shoping-3.jpg" /></a>
                    <a href="" class="bottom_img"><img src="img/shoping-3.jpg" /></a>
                    <a href="" class="bottom_img"><img src="img/shoping-3.jpg" /></a>
                    <a href="" class="bottom_img"><img src="img/shoping-3.jpg" /></a>
                    <a href="" class="bottom_img"><img src="img/shoping-3.jpg" /></a>
                </div>
            </div>
            <div class="suning_qg clearfix">
                <header class="head">
                    <div class="head_left">
                        <h3 class="title"></h3>
                        <div class="time_box ">
                            <span class="time_name">20点场</span>
                            <div class="update_time clearfix">
                                <span class="time_item">03</span>
                                <span class="time_ico">:</span>
                                <span class="time_item">04</span>
                                <span class="time_ico">:</span>
                                <span class="time_item tips" >52</span>
                            </div>
                        </div>
                    </div>
                    <div class="head_right">
                        <a class="more"> 吃货上新季</a>
                        <i class="ico_more"> </i>
                    </div>
                </header>
                <div class="shoping_box">
                <ul class="shoping_list">
                    <li class="list_item">
                        <a href="" class="item_img">
                            <img src="img/shoping-4.jpg" alt=""/>
                        </a>
                        <div class="item_bottom">
                            <strong class="price">￥15.90</strong>
                            <del class="yuanprice">￥16.80</del>
                            <div class="zhekou">
                                <span class="big_font">5.<span>8折</span></span>

                            </div>
                        </div>
                    </li>
                    <li class="list_item">
                        <a href="" class="item_img">
                            <img src="img/shoping-4.jpg" alt=""/>
                        </a>
                        <div class="item_bottom">
                            <strong class="price">￥15.90</strong>
                            <del class="yuanprice">￥16.80</del>
                            <div class="zhekou">
                                <span class="big_font">5.<span>8折</span></span>

                            </div>
                        </div>
                    </li>

                    <li class="list_item">
                        <a href="" class="item_img">
                            <img src="img/shoping-4.jpg" alt=""/>
                        </a>
                        <div class="item_bottom">
                            <strong class="price">￥15.90</strong>
                            <del class="yuanprice">￥16.80</del>
                            <div class="zhekou">
                                <span class="big_font">5.<span>8折</span></span>

                            </div>
                        </div>
                    </li>
                    <li class="list_item">
                        <a href="" class="item_img">
                            <img src="img/shoping-4.jpg" alt=""/>
                        </a>
                        <div class="item_bottom">
                            <strong class="price">￥15.90</strong>
                            <del class="yuanprice">￥16.80</del>
                            <div class="zhekou">
                                <span class="big_font">5.<span>8折</span></span>

                            </div>
                        </div>
                    </li>
                    <li class="list_item">
                        <a href="" class="item_img">
                            <img src="img/shoping-4.jpg" alt=""/>
                        </a>
                        <div class="item_bottom">
                            <strong class="price">￥15.90</strong>
                            <del class="yuanprice">￥16.80</del>
                            <div class="zhekou">
                                <span class="big_font">5.<span>8折</span></span>

                            </div>
                        </div>
                    </li>
                </ul>
                </div>

            </div>
        </section>
    </body>

</html>