网页布局的个人理解

最新推荐文章于 2022-08-06 08:14:44 发布

keep96

最新推荐文章于 2022-08-06 08:14:44 发布

阅读量720

点赞数 1

文章标签：前端 html+css

本文链接：https://blog.csdn.net/keep96/article/details/89461555

版权

html+css网页布局的个见解

网页页面的大体结构

网页页面的大体结构

1.做网页之前先观察网页的头部，内容，底部，然后把版心确定下来，这是我做网页的第一步

网页项目文件夹的格式

2.大致文件夹方面一个css文件夹，js一个文件夹，index首页放在最外面，其余的页面的html文件放在新建的html文件夹里，同时注意命名规范。

公共css样式的初始化

3.把系统默认的标签属性给清除掉，

body, ul, p, h1, h2, h3, h4, h5, h6, input, dl, dt, dd {
    margin: 0;
    padding: 0;
}
h4 {
    font-weight: 400;
}
li {
    list-style: none;
}
a {
    text-decoration: none;
    color: #666;
}
a:hover {
    color: #c81623;
}
img {
    border: 0 none;   /*清除ie6默认图片边框*/
    vertical-align: middle;   /*清除图片默认底部缝隙*/
}
input,textarea {
    outline: none;
     border: 0;
}
/*版心*/
.w {
    width: 1200px;
    margin: 0 auto;
}
body {
    font: 12px/1.5 arial, 'microsoft yahei';
    background-color: #fff;
}
.fl {
    float: left;
}
.fr {
    float: right;
}
.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}
i, em {
    font-style: normal;
}
.f14 {
    font-size: 14px;
}
.f16 {
    font-size: 16px;
}
.red {
    color: #e60012;
}
.tc {
    text-align: center;
}

网页的 css，js文件引入

css放在最上面，js文件引入放在最下面，这样能提高网页性能。
DOM文档加载步骤：

解析html结构；
加载外部脚本和样式表文件；
解析并执行脚本；
dom树构建完成（触发DOMContentLoaded和 jquery ready事件）；
加载图片等外部文件；（会触发图片load事件）
页面加载完毕。（触发load事件）

注意：凡是没有绑定加载事件(如：window.onload、$(document).ready())的js文件中的代码，在本文件（代码）加载完成后立即解析执行。
下面举个例子方便各位看官理解

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    //1.外部引入js文件outer1.js
    <script src="js/outer1.js"></script>

    //2.内部head标签内代码段
    <script type="text/javascript">
        console.log("(head无绑定加载事件) " + document.getElementById("image") + ", run at：" + (new Date().getTime() - startTime));
    </script>
</head>
<body>

    <img src="http://pic1.win4000.com/wallpaper/4/5546eae50c041.jpg"
         id="image" alt="落日原图">

    //3.外部引入js文件outer2.js
    <script src="js/outer2.js"></script>

    //4.绑定window.onload的内部代码
    <script type=text/javascript>
      window.onload = function () {
            console.log("window.load! run at：" + (new Date().getTime() - startTime));
        }
    </script>

    //5.内部body标签内代码段
    <script type="text/javascript">
        document.addEventListener("DOMContentLoaded", function(event) {
            console.log("DOMContentLoaded：DOM fully loaded and parsed， run at ：" + (new Date().getTime() - startTime));
        });

        console.log("inner js(body无绑定加载事件), run at：" + (new Date().getTime() - startTime));
        console.log("(inner body无绑定加载事件)" + document.getElementById("image") + " run at：" + (new Date().getTime() - startTime));
        document.getElementById("image").onload = function () {
            console.log("img loaded (body绑定图片加载事件), loaded at：" + (new Date().getTime() - startTime));
        }
    </script>

</body>
</html>