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>
今天第一次写csdn,感觉markdown用的不是很熟练,下周开始学JavaScript了,会把每一天所学的和大家分享,继续奔跑的码农一枚加油。
说着说着跑偏了,我感觉布局方面就是一部分一个大盒子套几个小盒子,分好区域,心里面要有一杆秤,不要乱,该浮动就浮动,最关键的是一些距离内边距外边距,如何选择,能内边距就内边距,最好不要外边距。因为自我感觉可能出问题。