程序猿小白成长之路[初级框架布局]

HTML框架布局

AJAX: 是JavaScript中的一个技术,需要先掌握JavaScript;AJAX是请求接口用的
frameset标签
frame 标签
框架页面的基本架构

水平布局
cols:表示子框架水平排列

垂直布局
rows:定义垂直布局的框架集

混合框架集
cols & rows


为框架添加内容
使用 style属性定义一个标签的内联样式

框架中的导航

框架的尺寸可以通过拖动边框来调整的,如何是边框固定?
1-1在源代码中为 frameset标签设置 一个属性noresize
1-2不显示边框:在frameset标签中设置frameborder为no,他的默认值是yes
2-1尺寸也可以用固定值:
<frameset rows="100, * , 50"; 意思是网站的头部高度是100像素,页脚是50像素,中间是根据浏览器的大小自由伸缩的;

3如何强制不显示滚动条:添加 scrolling属性的值为no

内联框架
iframe:内联框架标签,用于在网页中任意的位置嵌入另一个网页
<iframe scr="URL地址"></iframe>
这个地址可以是相对路径也可以是绝对路径

除了 src属性以外,还有以下常用的属性
width height scrolling frameborder src

<iframe width="200" height ="200" scrolling="no" frameborder="0" src="URL地址></iframe>

width height 的值默认的单位是px 像素,也可以是% 百分比
scrolling="no" 禁用滚动条
frameborder="0" 0代表没有边框,1代表有边框

设置背景透明

默认情况下 iframe的背景是透明的
要想兼容一些版本较旧的浏览器,需要按照下面的方式编写代码
首先需要设置 iframe标签 的 allowtransparency的值为 true,允许透明的意思
<iframe src="...allowttransparency="ture"></iframe>

另外还需要在 iframe的 src属性引用的页面中,将body标签的背景颜色设置为透明的transparent
<body style="background-color: transparent;">
</body>

使用iframe标签添加一个实时的天气预报代码
百度搜索 天气预报代码-天气代码定制 有详细的iframe代码,可以拷贝到我们的html
<iframe width="420" scrolling="no" height="60" frameborder="0" allowtransparency="true"
src="http://i.tianqi.com/index.php?c=code&id=12&color=%23FFFFFF&icon=4&num=5&site=12"></iframe>

调整网页的logo大小
先给iframe属性,添加一个类名 class为 weather
然后添加样式
weather,绝对定位 position为absolute,左边left30 上面top 10像素;

搜索引擎优化

使用meta标签提高搜索排名

除了看meta标签,还有使用HTML文档中的一下标签

可通过搜索引擎优化和SEO深入学习

原文地址:https://www.cnblogs.com/smillin2018-0803/p/9255996.html

时间: 2024-11-09 04:40:47

程序猿小白成长之路[初级框架布局]的相关文章

程序猿小白成长之路[盒模式&amp;浮动布局]

深入盒模式及浮动布局 1文档流:浏览器在页面上摆放HTML元素所用的方法1-1块元素的文档流 1-2内联标签的文档流:如果有足够空间 他们会挨个摆放,如果空间不够,剩下的会摆到下一行 2浮动布局<div>float 浮动clear 清除 有left right both none值 3浮动不居中的盒模式计算 在列表页添加左侧浮动的图片1-1使用 img 同样也添加一个alt属性 <img src="images/egg.jpg" alt="西红柿炒鸡蛋&qu

程序猿小白成长之路[定位]

定位 1-1在 CSS 中使用 position 属性实现网页的定位技术,他有4个值: static 是position属性的默认值,标签会显示在正常的文档流中relativeabsolutefixed1-2除了 static之外,使用另外3个值可以让一个标签变成定位元素当一个标签被定位之后,你就可以使用CSS的top. right.bottom.left四个属性精确控制标签在HTML文档中的位置,利用这些定位属性你可以在HTML文档中任意摆放一个标签的位置. 2-1relative 相对定位将

菜鸟程序猿的成长之路(一)——菜鸟程序猿起步

看到标题之后,突然想起一句文的话:白驹过隙,时光荏苒.每当看到这么有文採的话,总认为有点酸,再酸我也用*^◎^*. 9月开学季,大家陆续返校,让我想起了三年前自己带着新鲜与憧憬步入大学,大学对我来说一切都那么的美好和新鲜,时刻盼望着大学的生活.那些美好的场景仿佛就在昨天,转眼间,今年都大四了,"大四"简简单单的两个字让我清醒了很多,另一年的时间,我该面临毕业,就业压力也随之而至.青春,总是经不起蹉跎,留在大学的最后一年,也许一晃就过,如今的我们,也唯有奋力拼搏. 进入提高班也满两年的时

菜鸟程序员的成长之路(三)——2014,逝去的半年,奋斗的半年

从3月份到现在,仅仅半年的时间让我扮演了两个完全不同的角色,从在校生一下变成了毕业生,作为毕业生不能再像在校生一样自由自在,无所顾忌,想怎样就怎样,肆无忌惮的生活,浪费时间.如果你想从容的面临未来的生活,就需要彻头彻尾的改变.多一份稳重,多一份责任,多一份担当. 鉴于LZ不太擅长写非技术博文,那就以碎碎念的形式,来回顾一下我的奋斗历程: 技术 3月份开始备战软考,软考准备了两个多月的时间,从看视频做笔记,再到大家一起讲课,复习,做试题巩固,整个过程至今历历在目.软考虽然不难,但是对于基础差的同学

菜鸟程序员的成长之路(四)——欢送2014,欢迎2015

最近半个月一直想写年终总结,却迟迟没有提笔,不是不知道写什么而是需要写的东西太多,不知从哪下笔.继菜鸟程序员的成长之路(三)--2014,逝去的半年,奋斗的半年,请大家跟我一起再重新将2014"活"一遍. 2014年对于我来说承载了满满的回忆,也是我人生中比较重要的一年,因为在这一年里发生很多重要的事:1.我毕业了:2.我考过了软件设计师了:3.我考上了在职研究生... 学习篇 对于学习,其实有很多想写的内容,由于上篇博文:2014,逝去的半年,奋斗的半年,我已经写了2014上半年的总

Linux小白成长之路

Linux小白成长之路 本人忘祭,一个刚刚进入跨入Linux世界的小白.Linux对于我来说其实是很神秘的,很早以前就听说过.也曾见各种技术大牛使用过.但是一直以来也没有去接触的想法,因为感觉太高深.从四月开始报名马哥教育,到现在看预习视频已经一个月了.刚开始看到那些专业术语,感觉脑袋都要大了.对于一个已经三十岁的我来说,当初是硬逼着自己看下去的.看一遍不理解,就两遍三遍重复着看.随后在网上查看各种帖子.文章,想从中找到些学习的切入点,但是觉得不是那么容易着手.无法理解.但是现在听了王老师的面授

程序员的成长之路

从一个编程初学者,到一个程序开发菜鸟,再到技术高手.技术大牛.大师级人物, 必有一个成长路线. 根据自己的学习开发经历,我觉得一个程序员的成长之路可以按照如下循序渐进: 技术技能: 1.  初学编程: 找一两本优秀的编程语言书籍,按照例子敲代码. 推荐 K&R <TCPL> 和 BE <Thinking in java> ,每一种主流开发语言都有一些非常优秀的入门书籍.如果国外书看得不大懂,可以先找国内编程书籍看看,一般国内书籍更注重技术和技巧,而国外书籍更注重思想和思路:

高效程序猿的狂暴之路

不觉间已经工作六年,回忆第一天实习的场景历历在目.恍若昨日.六年已足以令很多人转管理.转产品.转測试.转行,也一定有人还在坚守着编码,仅仅因热爱.遇到过形形色色的经理.架构师.运维.性能工程师等等,还是认为写代码的才是最厉害的!在这里分享一些这些年来修习到的个人心得.或许并不适用于其它人,但对于我却都是最珍贵的"宝藏". 也谨以此文纪念在代码堆里度过的青春~ 看到这些点点滴滴的收获,就会感到全部逝去的光阴和挥洒的汗水都是值得的. 1.启动:得心应手的工具 1.1 全能IDE 关于IDE

一个程序猿的梦想之路

梦想的第一步 2006年,因为怀揣着对计算机浓烈的兴趣,于是高考第一志愿志愿填写了计算机专业,很快第一批次录取结束,大学入学通知书寄来了,是的,很激动,很多年过去了,再回忆那时的心情,心里还是有点微波荡漾,这应该算是我实现梦想的第一步. 来到了乌鲁木齐市,开始了学习计算机专业的生涯.那个时候班里的女生不多,不过我们这一届的女生算是多了,我也是其中一名,大学时光说短暂也漫长,我们意气风发,期待着在这里学到更多,只为了毕业后能找到一份工作,但是并不是无忧无虑的,希望时间过得快一点,赶紧毕业,赶紧工作