程序猿小白成長之路[初級框架佈局]

時間 2019-11-08

標籤程序成長之路初級框架佈局简体版

原文原文鏈接

HTML框架佈局

AJAX：是JavaScript中的一個技術，須要先掌握JavaScript;AJAX是請求接口用的
frameset標籤
frame 標籤
框架頁面的基本架構

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

php

垂直佈局
rows:定義垂直佈局的框架集

混合框架集
cols & rows html

爲框架添加內容
使用 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框架

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像素；

搜索引擎優化學習