2017-3.20 less

导航栏

HTML:

        <div class="l-top">
            <div class="l-top-content">
                <div class="f-l">
                    <a href="">1</a>
                    <a href="">2</a>
                    <a href="">3</a>
                    <a href="">4</a>
                </div>
                <div class="f-r">
                    <a href="">1</a>
                    <a href="">2</a>
                    <a href="">3</a>
                    <a href="">4</a>
                </div>
            </div>
        </div>

Less:

.f-l {
    float: left;
}

.f-r {
    float: right;
}

.l-top {
    background-color: #cdcdcd;
    width: 100%;
    height: 30px;
    .l-top-content {
        width: 1000px;
        margin: 0 auto;
        a {
            padding: 10px 40px;
            display: block;
            float: left;
            text-decoration: none;
            line-height: 10px;
            margin: 0 4px;
        }
        .f-l a {
            background-color: #f9e9e0;
            &:hover {
                background: #ff9900;
            }
        }
        .f-r a {
            background-color: #ff4800;
            &:hover {
                background-color: #000;
            }
        }
    }
}

CSS :

.f-l {
  float: left;
}
.f-r {
  float: right;
}
.l-top {
  background-color: #cdcdcd;
  width: 100%;
  height: 30px;
}
.l-top .l-top-content {
  width: 1000px;
  margin: 0 auto;
}
.l-top .l-top-content a {
  padding: 10px 40px;
  display: block;
  float: left;
  text-decoration: none;
  line-height: 10px;
  margin: 0 4px;
}
.l-top .l-top-content .f-l a {
  background-color: #f9e9e0;
}
.l-top .l-top-content .f-l a:hover {
  background: #ff9900;
}
.l-top .l-top-content .f-r a {
  background-color: #ff4800;
}
.l-top .l-top-content .f-r a:hover {
  background-color: #000;
}

图片

HTML：

       <div class="main">
            <ul>
                <li><a href="">![](images/U996P30DT20170313091204.jpg)</a></li>
                <li><a href="">![](images/U996P30DT20170313091204.jpg)</a></li>
                <li><a href="">![](images/U996P30DT20170313091204.jpg)</a></li>
                <li><a href="">![](images/U996P30DT20170313091204.jpg)</a></li>
                <li><a href="">![](images/U996P30DT20170313091204.jpg)</a></li>
                <li><a href="">![](images/U996P30DT20170313091204.jpg)</a></li>
            </ul>
        </div>

Less:

.main {
    position: relative;
    ul {
        width: 1000px;
        margin: 0 auto;
        li {
            list-style-type: none;
            a {
                width: 300px;
                height: 300px;
                border: 1px solid #ff4800;
                display: block;
                float: left;
                text-align: center;
                margin: 10px 20px; 
                img {
                    width: 260px;
                    height: 260px;
                    margin: 20px;
                }
            }
        }
    }
}

CSS :

.main {
  position: relative;
}
.main ul {
  width: 1000px;
  margin: 0 auto;
}
.main ul li {
  list-style-type: none;
}
.main ul li a {
  width: 300px;
  height: 300px;
  border: 1px solid #ff4800;
  display: block;
  float: left;
  text-align: center;
  margin: 10px 20px;
}
.main ul li a img {
  width: 260px;
  height: 260px;
  margin: 20px;
}

在 LESS 中可以定义一些通用的属性集为一个 class，然后在另一个 class 中去调用这些属性。

LESS:

.txt-tit {
    width: 300px;
    height: 300px;
    border: 1px solid #ff4800;
}

.main {
    position: relative;
    ul {
        width: 1000px;
        margin: 0 auto;
        li {
            list-style-type: none;
            a {
                display: block;
                float: left;
                text-align: center;
                margin: 10px 20px; 
                .txt-tit;
                img {
                    width: 260px;
                    height: 260px;
                    margin: 20px;
                }
            }
        }
    }
}