您的位置：首页 > Web前端 > HTML

HTML实战训练(2)——广州大学附属中学

2016-07-13 15:35 253 查看

隔了大半个月，才发布了这第二篇博客。期间有很多事在忙，才导致了这一次的网页写了这么久

（关键是自己技术不行）

这一次模仿的网站是 "广州大学附属中学” http://www.gdfz.edu.cn/
比上一个项目：美站库显然要复杂的多，写到最后心都累了，但这就是新手不可避免的过程。过程确实很痛苦，但是收获很大：

在CSS文件里面定义好基本格式可以免除了重复写这些基本代码的麻烦，绝对的提高效率，代码放在下面了。然后，把CSS文件根据一个页面的布局，大致分为上中下或者左右，用注释标记起来，这样修改起来方便省事（老鸟称之为方便维护，但我还没到维护的层次）

/*********基本格式*************/
body, divm, ul, ol, il, dl, dt, dd, h1, h2, h3, h4, h5, h6, form, input, textarea, p {
padding: 0px;
font-size: 13px;
margin: 0;
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
.auto {
width: 980px;
margin: 0 auto;
}
/**********基本格式结束**********/

这个网页给了我一个很大的启发，我不知道其它网页是不是也是这样处理的。它将每一个内容框之间的上下间隙设置为一个div，这个div里面什么都没有，单纯的设置宽度、高度，这样一来的一个好处就是不用再去每一个你要展现的div中去设置padding或者margin。直接用空的div就好了！（用的时候记得消除浮动，即clear:both;）
关于a标签的块级元素用法，先前我有一个错误的理解就是以为a标签中放一张图片的话，这张图片只有一小部分可以点击（a标签的默认高度），但是后来我发现，直接在a标签里面插入img是可以使整张图片完全点击的，因为一张图片的大小把a的默认大小给撑开了（不知道这么说科不科学）；再者，要说一下a元素中block的问题，a元素为内联元素，若需要对它的物理属性（宽度、高度）进行设置的话，是需要使用block将它变成块级元素的。如，现在需要使得 “百度一下” 可以点击，且可点击的大小为100px*100px，那么如果不用block是做不到的，因为内联元素只能设置如margin、padding的改变。所以代码如下

a{
display:block;
height: 100px;
width: 100px;
}

补充一点，如果在a元素内设置了浮动float，那么这个元素就相当于转换成了块级元素，就不必再用block了。
在写这个网页的时候，遇到过很多居中、换行的问题。文本、图片上下居中的话，我用的最多的就是设置height，然后再设置line-height的值与height一样，这样就上下居中了；左右居中就设置text-align:center；这里提到左右居中，我特地去查了一下资料，结论如下：

1.text-align:center 设置文本或img标签等一些内联对象（或与之类似的元素）的居中。

2.margin:0 auto 设置块元素（或与之类似的元素）的居中。（ps：要使margin:0 auto在body中生效，必须定义body的宽度。具体应用见下面代码）/*********基本格式*************/
body, divm, ul, ol, il, dl, dt, dd, h1, h2, h3, h4, h5, h6, form, input, textarea, p {
padding: 0px;
font-size: 13px;
margin: 0;
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
.auto {
width: 980px;
margin: 0 auto;
}
/**********基本格式结束************/
<body>
<div id="header" class="auto"></div>
<div id="main" class="auto"></div>
<div id="bottom" class="auto"></div>
</body>

关于浮动的问题，设计网站浮动是不可能少的。我在这次写网页的时候总因为忘记消除浮动而浪费了很多时间去调试，在另起一行的时候，若上一行有浮动元素，记得一定要消除浮动的影响。clear：both;

好了，这次实战训练所获得的经验大致都写出来了，有些细小的地方不好表述也就没写了。

大家看看，互相交流，高手勿喷，欢迎指正！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航