CSS實例:用fieldset、legend實現文字寫在邊線上的效果

電腦雜談  發布時間:2020-01-28 22:02:32  來源:網絡整理

css fieldset 樣式_css fieldset_html5 fieldset 樣式

這是一個非常不錯的效果,在實際制作中也非常常見css fieldset 樣式,我們看下邊的截圖:

或許你想到可以用照片來實現這種的效果css fieldset 樣式,但照片除了重量稍大,語義上也更缺乏。這樣的效果如何用xhtml+css實現呢?首先我們借助 fieldset設置一個方框(也譯作域),然后借助特定的標簽legend域標題,設置一個標題,并對他們進行相應的風格定義就能實現這種效果。我們首 先來知道一下fieldset方框、legend域標題這兩個標簽的知識。

HTML元素fieldset方框

Drawsaboxaroundthetextandotherelementsthatthefieldsetcontains.

在字段集包括的文本跟其他元素外面畫一個方框。

fieldset元素用于對表單中的元素進行分組并在文檔中區分標出文本。它與窗口框架的行為有些相似。fieldset在InternetExplorer4.0及以上版本的HTML和的腳本中可用。

fieldset元素元素是塊元素。并且應該關閉標簽,即需要成對出現:<fieldset></fieldset>。

HTML元素legend域標題

InsertsacaptionintotheboxdrawnbythefieldSetobject.

css fieldset 樣式_html5 fieldset 樣式_css fieldset

在fieldSet對象繪制的空格內插入一個標題。

legend元素必必位于fieldset內的第一個元素。在InternetExplorer4.0及以上版本的HTML和腳本中可用。

legend元素是塊元素。并且應該關閉標簽,即需要成對出現:<legend></legend>。

我們開始著手制作這種的一個小例子,我們看以下的xhtml代碼:

div css xhtml xml Example Source CodeExample Source Code[]

<fieldset>

<legend>52CSS.comCSS網頁布局</legend>

<ul>

<li>Div+CSS教程系統的講述了關于CSS布局的知識</li>

<li>CSS布局實例向你顯現了52css.com中的一些示例</li>

html5 fieldset 樣式_css fieldset 樣式_css fieldset

<li>CSS模板下載你可以查看一些模板</li>

<li>CSS酷站欣賞高手與前輩的佳作定會使你有所收獲</li>

</ul>

</fieldset>

這是一個簡單的頁面,所有的代碼進入一個fieldset方框內,方框內的第一個元素為legend域標題,另外就是一個無序列表ul,隨機加了一些內容。我們看以下的css是怎樣定義的:

div css xhtml xml Example Source CodeExample Source Code[]

*{

font-size:12px;

margin:0;

padding:0;

html5 fieldset 樣式_css fieldset_css fieldset 樣式

}

fieldset{

padding:10px;

margin:10px;

width:270px;

color:#333;

border:#06cdashed1px;

}

legend{

color:#06c;

css fieldset 樣式_html5 fieldset 樣式_css fieldset

font-weight:800;

background:#fff;

}

ul{

list-style-type:none;

margin:8px04px0;

}

li{

margin-top:4px;

}


本文來自電腦雜談,轉載請注明本文網址:
http://www.gefhbj.live/a/ruanjian/article-138692-1.html

    相關閱讀
    發表評論  請自覺遵守互聯網相關的政策法規,嚴禁發布、暴力、反動的言論

    熱點圖片
    拼命載入中...
    少林宝藏100在线客服 江苏体彩7位数 老快3开奖号 今日试机号3d 3.15股票推荐 黑龙江省36选7最新开奖结果 热刺历年英超排名 至尊棋牌娱乐 天天重庆麻将麻将辅助 广东十一选五360 中至江西麻将 捕鱼大亨系统小说 850游戏怎么代理 琼崖海南麻将安卓版 吉林十一选五手机 十一选五开奖结果辽 瑞士与丹麦足球比分预测