html iframe如何設置高度和寬度
一、iframe 元素會創建包含另外一個文檔的內聯框架(即行內框架)。
二、有以下方式對iframe進行設置高度和寬度
1、iframe元素標簽可以使用width和height屬性,
<iframe src ="/index.html" width="400" height="300"></iframe>
2、可以使用css來定義寬度和高度
<iframe src ="/index.html" style="width:400px;height:300px"></iframe>
三、補充:
iframe的屬性如下:
解釋一下:leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"
參數leftmargin=20 表示與瀏覽器左部距離為20
參數topmargin=30 表示與瀏覽器頂部距離為30
參數marginwidth=100 表示與左右邊邊界為100
參數marginheight=50 表示與上下邊邊界為50
在DW中,可以在菜單上的修改>頁面屬性里設置這些參數
群體2318126
htlm的常用標簽有哪些,還有。。。
是不是想學習網頁設計?
常用標記并不太多。
HTML語言是網頁制作中最基礎的代碼,博客日志許多都支持HTML標記,能熟悉HTML標記對博客和個人網站的美化會有很大的幫助。
<html> </html>標志著html文件的開始與結束
<head> </head>頭部標志符
<title> </title>網頁的標題
<boby> </boby>構成web的主體
1.background 定義網頁的背景圖案
2.bgcolor 背景色(默認 白)
3.text 文字顏色(默認 黑)
4.link 超鏈接顏色(默認 藍)
5.alink 當前被選中的超鏈接顏色(默認 紅)
6.vlink 已被訪問過的超鏈接顏色(默認 紫)
<font> </font>標志符可以控制字符的樣式
1.face 設置文字的字體效果
2.color 設置文字顏色
3.size 設置字體大小
<b></b> 粗體 <strike></strike>刪除線
<big></big>大字體 <sub></sub>下標
<i></i>斜體 <sup></sup>上標
<s></s>刪除線 <u></u>下劃線
<small></small>小字體
<hn></hn>設置文件中的標題 nj 1~6的數字
<p></p>(paragraph)劃分段落
<pre></pre>預格式化標志符
<hr> 換行并繪制一條水平線(沒有結束標志符)
1.width 水平線長度
2.size 水平線粗細
3.noshade 無陰影
4.align 水平線的對齊方式(left center right)
5.color 水平線顏色
<br> 強制換行(沒有結束標志符)
<ol>
<li>......</li>
<li>......</li>
.......
</ol> 設置有序列表 li可是1.2.3....或a.b.c....或A.B.C...或i.ii.iii.....或I.II.III....
(兩個屬性:type start)
<ul>
<li>......</li>
<li>......</li>
......
</ul> 無序列表 (一個屬性:type disc實心圓 circle空心圓 square方框)
<a></a>實現超鏈接
1.href 定義超鏈接所指向的文檔的URL
2.target 目標窗口
3.name 錨名稱 (該屬性一般在創建頁面內超鏈接時使用)
<a href="/URL"> </a>使用a標志符創建超鏈接時,可以使用相對路徑(同一網站內的文件),也可以使用絕對路徑(指向本站點以外的文件)
<a name="錨點名稱"> </a>
.....
<a href="#錨點名稱"> </a> 創建網面內超鏈接邏輯上分為兩步,首先定義錨點,然后再創建指向錨點的超鏈接
<a href="mailto:電子郵箱地址"> </a>指向電子郵箱的超鏈接>
<img> 插入圖像
1.src 設置被引用的圖像文件所在的位置
2.alt 設置圖像的簡單文字說明
3.width,height 設置圖像的寬度與高度
4.align 對齊方式(left,right,top,bottom,middle)
5.border 邊框寬度
6.hspace ,vspace 定義了圖像與周圍元素的水平和垂直間距
<map name="圖像映射名稱">
<area>
<area>
......
</map>
<img src="/"umap="#圖像映射名稱"> <map></map>定義了圖像映射的區域
img通過umap可以確定與所建立的圖像映射區域的關系
area定義圖像不同區域與不同文檔之間建立鏈接
1.shape 形狀(rect矩形 circle圓 poly多邊形)
2.coords 坐標
3.target 目標窗口
4.alt 替換文字
<table>
<caption> </caption>
<tr>
<th> </th><th> </th>......
</tr>
<tr>
<td> </td><td> </td>......
</tr>
<tr>
<td> </td><td> </td>
</tr>
......
</table> table標記符定義表格 caption定義表格標題 tr標記符定義表格的行 th,td標志符定義表格的單元格 th定義表頭單元格
table可以創建一個新的表格
1.width(寬),height(高)
2.border(邊框)
3.bgcolor(背景顏色)
4.align(對齊方式left right center)
5.cellpadding(填充距)
6.cellspacing(單元格間距)
7.rules(分隔線 none無分隔線 groups在行列之間有 rows只有行分隔線 cols只有列 all所有)
8.frame(邊框 void無邊框 above只顯示頂部邊框 below只顯示底部邊框 hsides只顯示頂,底部邊框 vsides只顯示左右邊框 lhs顯示左邊框 rhs顯示右 box顯示所有)
<tr> </tr>表行
1.align 對齊方式(left center right)
2.valign 垂直對齊方式 (top middle bottom baline)
3.bgcolor 背景顏色
<td></td>表格數據
1.width,height
2.align(left right center)
3.valign(top middle bottom)
4.bgcolor
5.rowspan 單元表的行數
6.colspan 單元表的列數
<framet>
<frame>
<frame>
......
<frame>
</framet> framet是將窗口分割成若干個子窗口,子窗口數取決于frame的個數
<frame> 標記符來標識子窗口(無結果符)
1.name
2.src(源) 設置框架內容的URL
3.frameborder(框架邊框)
4.marginwidth (框架的左右邊距)
5.marginheight(框架的上下邊距)
6.scrolling(是否顯示滾動條 auto自動 yes顯示 no不顯示)
7.noresize(不允許調整框架的尺寸)
<a herf="目標文件"target="目標框架名">超鏈接內容</a>
1._top 表示將超鏈接的目標文件裝入整個瀏覽器窗口
2._lf 表示將超鏈接的目標文件裝入當前框架,以取代該框架中正在顯示的文件
3._blank 表示將超鏈接的目標文件裝入一個新的瀏覽窗口
4._parent 表示將超鏈接的目標文件裝入當前框架的父框架
<iframe></iframe>定義了一個頁面內的框架
1.src(源) 設置框架內容的URL
2.name
3.width,height
4.align (top middle bottom)
5.frameborder(框架邊框)
6.marginwidth(框架左右邊框),marginheight(框架上下邊框)
7.scrolling(是否顯示滾動條 auto yes no)
<form></form>表單
1.method(方法) 定義表單的提交方式
2.action(動作) 指定表單所對應的處理程序
<input> 定義了一個用于用戶輸入的表單元素(無結束標記符)
1.name 標識表單元素
2.type 指定表單元素的類型(text文本 password密碼 checkbox復選框 radio單選框 submit提交按鈕 ret重置按鈕)
<input type="text">將type指定為text,在瀏覽器中顯示一個文本輸入框,供用戶輸入信息
1.value (初始值)
2.size (尺寸)
3.maxlength(輸入文本的最大字符數)
<input type="password">密碼文本框
例:<form>
密碼:<input type="password"name="password"size="10"maxlength="15">
</form>
<input type="checkbox">復選框
例:<from>
<p>你的愛好:</P>
<input type="checkbox"name="favorite1"value="music"checked>音樂
<input type="checkbox"name="favorite2"value="sports">體育
<input type="checkbox"name="favorite3"value="other">其它
</form>
<input type="radio">單選框
例:<form>
<p>公司的人數:</p>
<p><input type="radio"name="number">少于10人</p>
<p><input type="radio"name="number"checked>10人至100人</p>
<p><input type="radio"name="number">100人以上</p>
</form>
<input type="submit">提交按鈕
<form>
<input type="submit"value="提交">
</form>
<input type="ret">重置按鈕
<input type="image">圖像提交按鈕
<input type="file">
<input type="buttom">
<input type="hidden">
<textarea> </textarea>定義一個用于用戶多行輸入的表單元素
1.name 指定文本域的名稱
2.rows 指定文本域的高度
3.cols 指定文本域的寬度
<lect>
<option></option>
<option></option>
......
<option></option>
</lect> 定義了一個選項列表表單元素
1.name 指定選取項列表的名稱
2.size 指定列表選項顯示時一次顯示選項的數目
3.multiple使用該屬性可以允許多重選擇
4.value 指定當該選項被選中并提交后,瀏覽器傳給服務器的數據
5.lected 指定哪一個選項在默認狀態下是選中狀態
<label></label>選中該控件
<marquee></marquee>創建一些滾動字幕
1.direction(方向 left right up down)
2.behavior (行為 scroll繞圈滾動 slide只滾一次 alternate來回滾動)
3.loop (循環)
4.scrollamount(滾動的速度)
5.scrolldelay(滾動延時)
6.align(對齊方式 top middle bottom)
7.bgcolor
8.height,width
9.hspace,vspace(垂直和水平間距)
<applet>
<param>
<param>
......
</applet> applet用來在網頁中插入一個Java小應用程序對象
1.code(源代碼) 指定Java小應用程序的源代碼文件(.class文件)
2.name
3.width,height
4.align
param用來定義Java小應用程序中的參數
1.name
2.value(值)給變量賦值
3.valuetype(值類型 data表示value指定的值將作為一個字符串傳遞的對象
ref表示value指定的值是一個URL
object表示value指定的值是一個指向同一文檔中一個object的標志符)
4.type(類型)當valuetype屬性的值設置為ref時,此屬性指定了URL所代表資源的內容類型
<object>
<param>
<param>
......
</object> object可以定義很多種不同的多媒體文件
1.classid:該屬性指定了瀏覽器中用來播放相應多媒體對象的控件ID
2.codeba:定義多媒體文件相對位置的根目錄
3.codetype:指定當下載由classid所指定的對象時使用的數據內容的類型
4.data:定義多媒體文件的位置
5.type:定義多媒體文件的類型
6.width,height
lector{property1:value1;property2:value2......}lector表示需要應用式樣的對象
property表示由css標準定義的樣式屬性
value表示樣式賂性的值
例:h2{text-align:center;font-family:楷體_gb2312}
lector.classname{property1:value1;......} 標記符類
.classname{property:value;......} 通用類
#IDname{property:value;......}用戶定義ID
虛類
a:link或:link 當超鏈接末被訪問過時,超鏈接的顯示方式
a:visited或:visited 當超鏈接已經被訪問過時,超鏈接的顯示方式
a:active或:active當超鏈接當前為選中姿態時,超鏈接的顯示方式
a:hover或:hover 當鼠標指針懸停在超鏈接上時,超鏈接的顯示方式
例: a:link{color:blue}
長度單位
1.em:它所代表的長度是當前字體中m字母的寬度
2.ex:它所代表的長度是當前字體中x字母的高度
3.px:像素,它是相對于計算機屏幕的分辨率來定義的
in:英寸,1in=2.54cm 1cm=10mm
pt:點,1點=1/72in pc:帕 1帕=12點
font-family(字體族)
font-family:字體名稱 | 字體族名稱
例: p{font-family:黑體,宋體,rif}
font-style(字體風格)
font-style:字體風格名稱
例: p{font-style:oblique}
font-size(字體大小)
font-size:絕對大小 | 相對大小 | 百分比
font-variant(字體變形)
font-varient:字體變形值
1.normal(普通)
2.small-caps(小型大寫字母)
font-weight(字體加粗)
font-weight:字體加粗值
1.normal(普通)
2.bold(加粗)
3.bolder(更粗)
4.lighter(更細)
letter-spacing(字符間距)
letter-spacing:數值
text-decoration(文字修飾)
text-decoration:文字修飾效果
1.none 無
2.underline 下劃線
3.overline 上劃線
4.line-through 刪除線
5.bink 閃爍
text-transform(文本轉換)
text-transform:文本轉換方式
1.none 無
2.capitalize 使所有單詞的第一個字母大寫
3.upperca 使所有單詞字母都大寫
4.lowerca 使所有單詞字母都小寫
text-align(文本對齊方式)
text-align:對齊方式
1.left
2.right
3.justify 可調整
text-indent(文本縮放)
text-indent:縮放的數值
line-height(行高)
line-height:數值
margin(頁邊距)
margin:數值
padding(填充距)
padding:數值
例: table{padding:2cm 3cm 5cm}上填充距2cm,左右填充距為3cm,下填充距5cm
border-style(邊框樣式)
border-style:邊框樣式
1.none
2.dotted 點線
3.dashed 虛線
4.solid 實線
5.double
6.groove 凹線
7.ridge 凸線
8.int 內陷
9.outt 外凸
border-color(邊框顏色)
border-color: 顏色值
border-width(邊框寬度)
border-width:數值
1.thin 細
2.medium 中
3.thick 寬
border(邊框)
border:邊框樣式|邊框寬度|邊框顏色
例: h1{border:5px solid red}
float(浮動)
float:參數
1.none
2.left
3.right
顏色代碼多數是"#ffffff"這種格式的,找到后改改試試看。
再想要更詳細的內容,加我QQ,給你發電子書看看吧。
QQ:30638057
請解釋一下:leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"
參數leftmargin=20 表示與瀏覽器左部距離為20
參數topmargin=30 表示與瀏覽器頂部距離為30
參數marginwidth=100 表示與左右邊邊界為100
參數marginheight=50 表示與上下邊邊界為50
在DW中,可以在菜單上的修改>頁面屬性里設置這些參數
<BODY leftMargin=0 topMargin=0 marginheight="0" marginwidth="0">
leftMargin=0 表示與瀏覽器左部距離為0
topMargin=0 表示與瀏覽器頂部距離為0
marginheight="0" 表示帶有0 像素頂部和底部空白邊距
marginwidth="0" 表示帶有 0 像素左側和右側空白邊距
Css為什么有了margin-top后width會變
這是因為加了margin-top后,這個div已經超出窗體范圍了,所以窗體出現了縱向滾動條,而div的width是100%,所以要減去滾動條的寬度才是div的實際width,這樣width就從1370px變為1353px了