从设计稿到html页面 - 实战篇

Sokeer
152 阅读3分钟

设计稿

image.png

html代码

<section>
    <!-- 重复项 开始 -->
    <div class="box">
        <div class="title">
            <h3>众筹</h3>
            <a href="#"><img src="./imgs/pic1.png" ></a>
        </div>
        <div class="imgBox">
            <a href="#"><img src="./imgs/pic2.png" ></a>
            <h4><a href="#">迷你无人机-小到可思议</a></h4>
            <p>年轻人的新玩具</p>
        </div>
        <ul>
            <li>
                <a href="#"><img src="./imgs/pic3.png" ></a>
                <a href="#"  class="title">智能折叠车</a>
            </li>
            <li>
                <a href="#"><img src="./imgs/pic4.png" ></a>
                <a href="#" class="title">防水智能插座</a>
            </li>
        </ul>
        <p class="link1">
            <a href="#">科技控</a>
            <a href="#">创意设计</a>
            <a href="#">最新周边</a>
        </p>
        <p class="link2">[<a href="#">明星同款</a>]<span>头茬冬笋</span> </p>
    </div>
    <!-- 重复项 结束 -->
    <!-- 重复项 开始 -->
    <div class="box">...</div>
    <!-- 重复项 结束 -->
     <!-- 重复项 开始 -->
    <div class="box">...</div>
    <!-- 重复项 结束 -->
     <!-- 重复项 开始 -->
    <div class="box">...</div>
    <!-- 重复项 结束 -->
     <!-- 重复项 开始 -->
    <div class="box">...</div>
    <!-- 重复项 结束 -->
    <!-- 重复项 开始 -->
    <div class="box">
        <div class="title">
            <h3>众筹</h3>
            <a href="#"><img src="./imgs/pic1.png" ></a>
        </div>
        <div class="imgBox">
            <a href="#"><img src="./imgs/pic2.png" ></a>
            <h4><a href="#">迷你无人机-小到可思议</a></h4>
            <p>年轻人的新玩具</p>
        </div>
        <div class="hot">
            <p>
                <span>巴厘岛</span>
                <span>5天4晚2499</span>
            </p>
            <a href="#"><img src="./imgs/pic_last.png" alt=""></a>
        </div>
        <p class="link1">
            <a href="#">科技控</a>
            <a href="#">创意设计</a>
            <a href="#">最新周边</a>
        </p>
        <p class="link2">[<a href="#">明星同款</a>]<span>头茬冬笋</span> </p>
    </div>
    <!-- 重复项 结束 -->
</section>

less代码

/* 1.去掉默认样式 */
h3, h4, p{
    margin: 0;
}
ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
a{
    text-decoration: none;
}
//清除图片空隙 
img{
    vertical-align: middle; 
}

/* 2.公共类、变量 */

//清除浮动 
.clearfix{
    &:after{
        content: '';
        .dis(b);
        clear: both;
    }
}

//文本对齐
.align(l){
    text-align: left;
}
.align(c){
    text-align: center;
}
.align(r){
    text-align: right;
}

//块级元素、行内元素
.dis(b){
    display: block;
}
.dis(ib){
    display: inline-block;
}
.dis(i){
    display: inline;
}

//浮动
.float(l){
    float: left;
}
.float(r){
    float: right;
}

//文字
.font(@bold: normal; @size: 12px; @lineHeight: 12px; @color: #3c3c3c){
    font: @bold @size/@lineHeight "微软雅黑";
    color: @color;
}

//链接文字
.link(@size: 12px; @lineHeight: 12px; @color: #3c3c3c; @hover: red){
    font: normal @size/@lineHeight "微软雅黑";
    color: @color;
	
    &:hover{
        color: @hover;
    }
}

/* 3.不同区域的具体样式 */

/* 容器 */
section{
    @w: 1187px;
    @h: 363px;
    @boxPadding: 14px;
    @border: 1px solid #e8e8e8;

    margin: 0 auto;
    width: @w;
    border: @border;
    .clearfix;

    .box{
        .float(l);
        padding: 0 @boxPadding;
        width: (@w - 5)/6 - @boxPadding*2;
        height: @h;
        border-right: @border;

        &:nth-last-child(1){
            border-right: none;
        }
    }

    //标题
    h3{
        .dis(ib);
        margin-right: 4px;
        .font(@size:16px; @lineHeight: 41px)
    }

    //大图文 
    .imgBox{
        margin-bottom: 13px;
        padding-bottom: 5px;
        .font(normal; 12px; 18px; #9c9c9c);
        .align(c);
        background: #f5f5f5;

        img{
            margin-bottom: 8px;
        }

        a{
            color: #3c3c3c;
        }
    }

    //小图文 
    ul{
        .clearfix;

        li{
            width: 80px;
            .align(c);

            &:nth-child(1){
                .float(l);
            }

            &:nth-child(2){
                .float(r);
            }

            .title{
                padding: 10px 0;
                .dis(b);
                .link();
            }
        }
    }

    //第一行链接
    .link1{
        a{
            padding: 0 5px;
            .link();
            border-left: @border;

            &:nth-child(1){
                border-left: none;
                padding-left: 0;
            }
        }
    }

    //第二行链接
    .link2{
        margin-top: 14px;
        .font(@bold: normal);

        a{
            margin: 0 4px;
            .font(@color:#ff4400)
        }

        span{
            margin-left: 7px;
            .font(@bold: normal);
        }
    }

    //最后一个特别的重复项
    .hot{
        margin-bottom: 10px;
        height: 90px;
        border: @border;
        background: url(./imgs/hot.png) no-repeat left top;
        .clearfix;

        p{
            .float(l);
            margin-top: 22px;
            width: 77px;
            .align(r);

            span{
                .dis(b);

                &:nth-child(1){
                    .font(normal; 14px; 20px;)
                }

                &:nth-child(2){
                    .font(normal; 12px; 16px; #6c6c6c)
                }
            }
        }

        img{
            .float(r);
            margin: 10px; 
        }
    }
}

css代码

/* 1.去掉默认样式 */
h3,
h4,
p {
  margin: 0;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
a {
  text-decoration: none;
}
img {
  vertical-align: middle;
}
/* 2.公共类、变量 */
.clearfix:after {
  content: '';
  display: block;
  clear: both;
}
/* 3.不同区域的具体样式 */
/* 容器 */
section {
  margin: 0 auto;
  width: 1187px;
  border: 1px solid #e8e8e8;
}
section:after {
  content: '';
  display: block;
  clear: both;
}
section .box {
  float: left;
  padding: 0 14px;
  width: 169px;
  height: 363px;
  border-right: 1px solid #e8e8e8;
}
section .box:nth-last-child(1) {
  border-right: none;
}
section h3 {
  display: inline-block;
  margin-right: 4px;
  font: bold 16px/41px "微软雅黑";
  color: #3c3c3c;
}
section .imgBox {
  margin-bottom: 13px;
  padding-bottom: 5px;
  font: normal 12px/18px "微软雅黑";
  color: #9c9c9c;
  text-align: center;
  background: #f5f5f5;
}
section .imgBox img {
  margin-bottom: 8px;
}
section .imgBox a {
  color: #3c3c3c;
}
section ul:after {
  content: '';
  display: block;
  clear: both;
}
section ul li {
  width: 80px;
  text-align: center;
}
section ul li:nth-child(1) {
  float: left;
}
section ul li:nth-child(2) {
  float: right;
}
section ul li .title {
  padding: 10px 0;
  display: block;
  font: normal 12px/12px "微软雅黑";
  color: #3c3c3c;
}
section ul li .title:hover {
  color: #ff0000;
}
section .link1 a {
  padding: 0 5px;
  font: normal 12px/12px "微软雅黑";
  color: #3c3c3c;
  border-left: 1px solid #e8e8e8;
}
section .link1 a:hover {
  color: #ff0000;
}
section .link1 a:nth-child(1) {
  border-left: none;
  padding-left: 0;
}
section .link2 {
  margin-top: 14px;
  font: normal 12px/12px "微软雅黑";
  color: #3c3c3c;
}
section .link2 a {
  margin: 0 4px;
  font: bold 12px/12px "微软雅黑";
  color: #ff4400;
}
section .link2 span {
  margin-left: 7px;
  font: normal 12px/12px "微软雅黑";
  color: #3c3c3c;
}
section .hot {
  margin-bottom: 10px;
  height: 90px;
  border: 1px solid #e8e8e8;
  background: url(imgs/hot.png) no-repeat left top;
}
section .hot:after {
  content: '';
  display: block;
  clear: both;
}
section .hot p {
  float: left;
  margin-top: 22px;
  width: 77px;
  text-align: right;
}
section .hot p span {
  display: block;
}
section .hot p span:nth-child(1) {
  font: normal 14px/20px "微软雅黑";
  color: #3c3c3c;
}
section .hot p span:nth-child(2) {
  font: normal 12px/16px "微软雅黑";
  color: #6c6c6c;
}
section .hot img {
  float: right;
  margin: 10px;
}

小结

1 . 完成这一小部分就需要1个多小时。
2 . less 使用起来有优点也有缺点，但是结合Bootstrap一起使用就非常好。

avatar
文章
阅读
粉丝