大超教你建网站:NO.7 网站这栋房子的基础框架是用什么材料搭建的?

大超

其实建网站和造房子差不多,都是先打地基,再建框架,框架一旦建好,如果想改,大概率得拆了重盖。有些客户不理解,觉得改网站框架就是动动手指的简单问题,其实不然。

2018112117112321.jpg

网站框架工具table

上篇讲了HTML里面的表格table,其实table就是搭网站框架的工具之一,最开始的网站框架都是table搭建的。因为像Excel一样,增删行列很方便,还可以合并单元格,简直就是Excel的亲兄弟。用table实现下面的网页布局如何做呢?

很简单,就把它当成Excel表格就可以了,使用三行两列,把第一行的两个单元格合并,第三行的两个单元格合并,就成了。当然,Excel直接用鼠标就完成了,HTML需要用代码来完成,单元格合并需要使用colspan(列合并)和rowspan(行合并)。为了让代码尽量简单明白一些,就暂时不用rowspan了。如下:

<!DOCTYPE html>
<html>
<head>
<title>大超小志的个人博客</title>
<style type="text/css">
table {width:1000px;}
.xibiankuang
{
border-collapse: collapse;
border: none;
}
.xibiankuang td,.xibiankuang th
{
border: solid blue 1px;
}
.textcenter{text-align:center;}
</style>
</head>
<body>
<table class="xibiankuang" cellspacing="0" cellpadding="5">
<tr>
  <td colspan="2" class="textcenter" >大超小志的个人博客</td>
</tr>
<tr>
  <td width="200px" class="textcenter">栏目一<br>栏目二<br>栏目三</td>
  <td> 并不是每个人都需要种植自己的粮食,也不是每个人都需要做自己穿的衣服,我们说着别人发明的语言,使用别人发明的数学……我们一直在使用别人的成果。使用人类的已有经验和知识来进行发明创造是一件很了不起的事情。</td>
</tr>
<tr>
  <td colspan="2" class="textcenter">版权所有:大超小志</td>
</tr>
</table>
</body>
</html>

上面的代码就完成了网页布局的框架,看不懂的需要往前翻翻教程了。用table布局网页的优缺点如下:

  • 优点:简单明了,不需要过多的CSS代码控制,兼容性特别好。

  • 缺点:由于整个页面的区块都在一个平面内,在做手机、电脑自适应页面时异常困难,所以,在现在的移动互联网大潮中,这种整体框架逐渐被冷落了。

网站框架工具DIV

div是HTML里的另一个重要元素,和table一起相当于HTML里面的“南拳北腿”,各有千秋。div就是网页里面的一个个小区块,就像手里拿两个木板,不但可以在一个平面内平铺,还可以在立体空间里进行叠加。现在的网站框架基本上都是用div搭建的了,配合CSS能实现各种各样的网页布局,还可以自适应各种大小屏幕。如果用div来实现上面的布局怎么做呢?

先建三个div,分别存放网页头部、网页中间主体、网页底部,给他们设定宽度1000px,并居中。

在网页中间主体的div里面再建两个div,分别是左部和右部,左部向左对齐(float:left),右部向右对齐(float:right)。

上面这5个零件做好后,就需要用CSS来控制的位置和背景色以及字体大小、颜色了。

主要用的CSS代码有:

  • width:1000px; 宽度

  • background: #99CCFF; 背景色

  • height:80px; 高度

  • text-align:center; 文字居中对齐

  • font-size:30px; 文字大小

  • float:left; 对齐方向,这是左对齐,右对齐是right

  • color: white; 字体颜色

  • margin:0 auto; 这个很重要,让div居中

试试你能不能做出来?

有问题可在下方评论留言,或关注“大超小志”微信公众号留言。

标签: 大超教你建网站

留言评论

如需留言或评论,请在微信中打开此页面。