首页 > 代码库 > HTML页面布局

HTML页面布局

2024-10-13 01:09:02   214人阅读

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--网页标题-->
    <title>我搜</title>
    <!--网页图标-->
    <link rel="icon" href="http://www.jd.com/favicon.ico">
    <!--文件引入CSS样式-->
    <link rel="stylesheet" href="http://www.mamicode.com/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="http://www.mamicode.com/jquery-1.8.2.js"></script>
    <script>
        //增加其他代码
    </script>
</body>
</html>

 

HTML页面布局


联系
我们