页面重构的技能与要点

页面重构,简单的说就是“将设计稿转换成WEB页面”。

这一过程可以很简单到直接把PSD从PS里导出成网页;也可复杂到需要考虑页面中每个标签的使用,考虑“页面性能”。

所涉及到的内容一般是“分析设计稿=>切图=>写HTML和CSS”

页面重构要注意一下几点:
1.不滥用id,尽量用class代替id。

2.CSS选择器最好控制在2-3个以内,不要使用内联样式,转移到样式表中。

3.根据上下结构命名id和class,而不是设计元素,避免html结构模糊化,尝试重网页中分离出设计元素,还可以减少代码的冗余。

4.避免css冗余和重复,能通用的写在一起。写 css 的时候心中对 html 层级结构要有个大致的规划,思考不同的设计元素之间的层级和关系,我们规划得越清晰,最终输出的 css 也越精简。

5.避免无意义的、无作用的样式、元素命名等。

6.在必须的地方要做好注释,使用工具把css文件中的注释转换成一个合适的文档。

网易严选的模拟
在这里插入图片描述

我的代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{ 
            margin: 0;
        }
        header{
            width: 100%;
            height: 180px;
            border: 1px solid red;
            margin-top: 0;
        }
        div.header-top{
            width: 100%;
            height: 36px;
            background-color: #333333; 
        }
        div.header-top-nav{ 
            width:1090px;
            height: 36px;
            background-color: #333333; 
            margin: 0 auto;
        }
        div.header-top-nav-inform{
            width: 254px;
            height:  36px;
            float: left;
            margin-left: 20px;
            line-height: 36px; 
        }
        div.header-top-nav-inform a{
            color: goldenrod;
             font-size: 12px;  
            cursor: pointer;
            padding-left:8px ;
        }
        div.header-top-nav-inform a:hover,ul.header-top-nav li a:hover{ 
            text-decoration: none; 
            color: white;
        }
        
        ul.header-top-nav{
            display: block;
            list-style-type: none; 
            width: 480px;
            height: 36px;
            float: right ; 
            margin: 8px 0;
            padding-right: 0;
        }
        ul.header-top-nav li{
            float: left;
             margin:0;
             padding:0 5px;
             border-right: 1px solid #cccccc;
        }
        ul.header-top-nav li a{ 
            text-decoration: none; 
            color: #cccccc;
            font-size: 12px;  
            cursor: pointer;
        }
        div.header-bottom{ 
            width: 100%;
            height: 140px;
            padding: 0;
            margin: 0 auto;
        }
        div.header-bottom-content{ 
            width: 1090px;
            height: 140px;
            margin: 0 auto; 
        }
        div.logo{
            width: 212px;
            height: 60px;
            line-height: 80px;
            float: left;
            margin-top: 8px;
        }
        div.logo>img{ 
            width: 212px;
            height: 60px;
            margin: 20px ;
        } 
        div.header-search{
            width:752px;
            height: 60px;
            line-height: 80px;
            float:right; 
            line-height: 80px;
            margin-left: 60px;
        } 
        #header-search-input{ 
            border-bottom-left-radius: 19px;
            border-top-left-radius: 19px; 
            border:1px solid #cc9756;
            box-sizing: border-box;
            padding: 15px;
            font-size: 14px;
            height: 38px;
            width: 442px;  
            float: left;
            margin-top: 20px;
            margin-right: 0; 
        }
        div.header-search-button{ 
            height: 38px;
            width: 90px;
            border-bottom-right-radius: 19px;
            border-top-right-radius: 19px; 
            background-color:#cc9756 ;
            font-size: 16px;
            text-align: center; 
            color: white; 
            float: left;
            line-height: 38px;
            margin: 20px 20px 0 0; 
        }
        div.shopping-cart{
            height: 37px;
            width: 133px;
            border:1px solid #cc9756;
            border-radius: 19px;
            float: left;
            color: #cc9756;
            line-height: 38px;
            text-align: center;  
            margin: 20px 0 0 20px; 
        }
        
        div.hotkeyword-list{
            width: 400px ;
             float :right ;
             margin-right: 300px;
        } 
        div.hotkeyword-list a{
            color: #cc9756;  
            font-size: 12px;
            text-decoration: none;
            display: inline;
        }
        div.header-bottom-nav{ 
            width: 100%;
            height: 30px;
            padding-left:0 ;
            margin-top: 20px;
            float: left;
        }
        ul.header-bottom-nav{ 
            width: 100%;
            height: 30px;
            display: inline-block;
            padding: 0;
        }
        ul.header-bottom-nav li{
            list-style-type: none;
            margin-right:40px ;
            float: left;
        }
        ul.header-bottom-nav li a{
            text-decoration: none; 
            color: black;
            font-weight: bold;
            padding-bottom: 6px;
        }
        ul.header-bottom-nav li a:hover{
            color: #cc9756;
            border-bottom: 3px solid #cc9756;
        }
    </style> 
</head>
<body>
    <div style="width: 5064px;height: 11087px; margin: 0;"id="background-plate">
        <header>
            <div class="header-top">
                <div class="header-top-nav">
                    <div class="header-top-nav-inform">
                         <span><img src="./images/asset 131.gif" alt="喇叭"></span><a href="#">关于新疆地区寄递管控通知</a>  
                    </div>
                    <ul class="header-top-nav">
                        <li><a href="#">登录/注册</a></li>
                        <li><a href="#">我的订单</a></li>
                        <li><a href="#">会员</a></li>
                        <li><a href="#">甄选家</a></li>
                        <li><a href="#">企业采购 </a> <span><img src="images/asset 139.png"></span></li>
                        <li><a href="#">客户服务</a> <span><img src="images/asset 139.png"></span></li>
                        <li><span><img src="images/图标/iphone.png"></span> <a href="#">APP</a></li>
                    </ul>  
                </div>
                
            </div>  
            <div class="header-bottom">
                <div class="header-bottom-content">
                     <div class="logo"><img src="./images/logo.png"></div>
                         <div class="header-search">
                             <input id="header-search-input" type="text" name="search" placeholder="🔍 9.9元超值专区 "> 
                             <div class="header-search-button">搜索</div> 
                             <div class="shopping-cart">🛒购物车</div>
                         </div> 
                         <div class="hotkeyword-list">
                             <a href="#">超国际高品质</a> | <a href="#">口罩专区</a> | <a href="#">筷子节美食3件85折</a> | <a href="#">筷子除菌黑科技99元</a> 
                         </div> 
                        <div class="header-bottom-nav">
                            <ul class="header-bottom-nav">
                                <li><a href="#">首页</a></li>
                                <li><a href="#">居家生活</a></li>
                                <li><a href="#">服饰鞋包</a></li>
                                <li><a href="#">美食酒水</a></li>
                                <li><a href="#">个护清洁</a></li>
                                <li><a href="#">母婴亲子</a></li>
                                <li><a href="#">运动旅行</a></li>
                                <li><a href="#">数码家电</a></li>
                                <li><a href="#">严选全球</a></li>
                                <li><a href="#">为你严选</a></li>
                                <li><a href="#">众筹</a></li>
                            </ul>
                        </div> 
                    </div>   
             </div>  
        </header>
        <article></article>
        <footer></footer>   
    </div>
</body>
</html>

效果如下

在这里插入图片描述

©️2020 CSDN 皮肤主题: 1024 设计师:上身试试 返回首页