web 前端规范实例 

<!DOCTYPE html>
<html>
  <head>
    <title>tmall</title>
                            <!-- 为了被搜索引擎作为流量入口 -->
    <meta name="keywords" content="keyword1,keyword2,keyword3">
                            <!-- 搜索引擎快照简介-->
    <meta name="description" content="this is my page">
                            <!-- 声明当前页面的字符编码集 ‘http-equiv’属性 -->
    <meta name="content-type" http-equiv="content-type" content="text/html; charset=utf-8">
    
    <style type="text/css">
        *{margin: 0;padding: 0}
        body{font-size: 12px;font-family: '微软雅黑';color: #666}
        img{border: none;}
        .top{width:100%;height: 50px;background: #000}
        .top .t-header{width:90%;height: 50px;margin: 0 auto;}
        .top .t-header .t-logo{float: left;margin-top: 6px}
        .top .t-header 
        .t-desc{float: right;line-height: 50px;font-size: 18px;color: #FFF}/*字体大小为偶数倍增长*/
        .content{width:100%;height: 600px;background: #6cf}
    </style>
  </head>
  
  <body>
    <div class='top' id=''>
        <div class='t-header'>
            <div class='t-logo'>
                <a href='#'>                    <!-- 为了被蜘蛛爬取 -->
                    <img src='images/tmall.png' alt='天猫' width='140' height='35' />
                </a>
            </div>
            <div class='t-desc'>天猫双11大数据实时处理</div>
        </div>
    </div>
    <div class='content'></div>
  </body>
</html>

效果：

 

posted @ 2018-01-20 23:25  如果屈原会编程  阅读(140)  评论(0)  编辑  收藏  举报