html基础学习第七节-略讲网站布局

最近比较忙,没更新教程,今天,我们来说说网站大致的布局,会讲到下面三个内容,页面的分割,页面地图和表格这三大块!这三大块相对比较难,其实也很简单,只要大家清楚思路即可

网站的分割

大家都知道,网站是一个大框架,网站的分割是很重要的,比如分三大块,头部,中间和底部。这里所讲的只是一个基础的分割概念,当然一个漂亮的页面不是这种简单的分割引用出来的,我们先来了解下如何分割

<frameset cols="10%,*">

<frame>

<frame>

</frameset>

这是一个框架集,注意,frameset和body同一个等级,不能套用,而且也不需要,因为这个框架集其实是定义了两个html页面的,往下看

<frameset cols="10%,*">

<frame src="1.html">

<frame src="2.html">

</frameset>

这里,src="1.html"定义了第一个分割出来的格子显示的html页面,大家可以尝试这样写一个代码,然后建立一个1.html和2.html并随意写上内容,你就会看到了效果,当然,这这是一个纵向分割,还有横向分割的,如下

<frameset rows="10%,*">

<frame>

<frame>

</frameset>

大家可以看到,这和上面的代码,只是修改了一个cols为rows而已,这两个分别定义纵向分割和横向分割,不明白的可以下载文章最下面的代码,好,我们看到了横向和纵向的定义,那么,怎么套用呢?其实也很简单,大家多练习就知道,我先示范给大家看

<frameset cols="10%,*">

<frame>

<frameset rows="20%,*">

<frame>

<frame>

</frameset>

</frameset>

可以看出,上面的代码,定义了一个纵向分割为两个窗口,而其中之一的窗口分割为两个横向分割的窗口,那么,如果是横向的分割两个窗口之后纵向的分割其中一个横向分割的窗口呢?看下面代码

<frameset rows="10%,*">

<frame>

<frameset cols="20%,*">

<frame>

<frame>

</frameset>

</frameset>

可见,套用的分割也很简单,具体需要大家实践才会明白!大家不妨自己编写代码保存为html文件然后用浏览器打开测试!

下面我们分析下这里面的语法定义,其中cols是定义纵向分割的,rows是定义横向分割的,10%和*都是定义分割的大小,其中*代表的是剩下的大小的意思,frameset是定义需要分割的,frame是定义分割时候对应的内容的,而src在这里不是定义图片,而是定义一个html文件或者一个页面地址,在这里可以用绝对地址或者相对地址,具体大家实践一下!

上面讲了分割窗口,只是其中一种,如果一个页面要漂亮的展示,需要引用图片或者CSS,CSS的以后讲解,如何引用图片呢?下面这里我们要讲到地图了!

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

目前评论:9   其中:访客  0   博主  0   引用   1

  1. avatar 象牙塔 4

    头部logo该换一个啦,好丑~

    • avatar yumanutong 5

      @象牙塔 暂时用的

    • avatar yumanutong 5

      @象牙塔 网站备案好了,现在觉得还是更知鸟强大,我稍稍的修改,现在不卡了

  2. avatar 可可博客 0

    博主对web前端开发很精通啊

    • avatar yumanutong 5

      @可可博客 网站方面我是菜鸟啦,过奖了啊

    • avatar yumanutong 5

      @可可博客 网站备案好了,可以的话加个友链如何?

  3. avatar snowinmay 3

    前端开发我也比较喜欢~~~

    • avatar yumanutong 5

      @snowinmay 呵呵,我最近都没学html和CSS了,在学C#

评论加载中...

来自外部的引用: 1

  • SDT技术网文章索引-二月份 | yumanutong blog

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

图片 表情