码迷,mamicode.com
首页 > Web开发 > 详细

HTML页面布局

时间:2017-06-27 23:31:09      阅读:268      评论:0      收藏:0      [点我收藏+]

标签:tle   lin   初学   one   oct   div   lis   图标   har   

  接下来的下面代码,只是给了一个大的前端编写布局,如果你已经是牛人了,就当没看到,如果是一些初学者,不妨拿去用用,里面也写了一些常用的css样式,现在虽然有很多牛逼的前段框架,用起来也非常得心应手,但是如果你要对自己很多定制化需求,最后肯定是要自己来编写前端页面的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--网页标题-->
    <title>我搜</title>
    <!--网页图标-->
    <link rel="icon" href="//www.jd.com/favicon.ico">
    <!--文件引入CSS样式-->
    <link rel="stylesheet" href="niubi.css">
    <style>
        *{
           margin:0px;
           border:0px;
           padding:0px;
           font-size:14px;
        }
        ul{
            list-style:none;
        }
        .test{
            border:2px yellow bolid;
        }
        a{
            text-decoration:none;
        }
        body{
            background:white;
        }
        .w{
            width:980px;
            margin:0 auto;
        }
        .clear{
            clear:both;
        }
        .d{
            position:relative;
        }
    </style>
</head>
<body>
    <!--页面布局-->
    <div class="pg-header">
        <div class="w"></div>
    </div>
    <div class="pg-body">
        <div class="w"></div>
    </div>
    <div class="pg-foot">
        <div class="w"></div>
    </div>

    <!--文件引入js-->
    <script src="jquery-1.8.2.js"></script>
    <script>
        //增加其他代码
    </script>
</body>
</html>

 

HTML页面布局

标签:tle   lin   初学   one   oct   div   lis   图标   har   

原文地址:http://www.cnblogs.com/xinsiwei18/p/7087457.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!