使用div+css模擬fieldset標簽

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

css fieldset 樣式_html fieldset 樣式_fieldset css樣式

fieldset是html中一個不常見的標簽,一般用于包裝表單元素以及顯示一些提醒信息,在瀏覽器中會有一些非??岬男Ч?。雖然絕大部分的瀏覽器都支持css fieldset 樣式,但是顯示的效果仍不盡相似,如邊框、寬度等,為了維持一致的效果,參考網上的資料,整理實現了使用div+css模擬fieldset。

因網上資料很多,且大多原理相似,不知最初何人所創,故此處只列舉一個百度排名靠前的:

效果截圖:

20140612161046

fieldset css樣式_css fieldset 樣式_html fieldset 樣式

標題可以按照文字數量自動適應css fieldset 樣式,邊框材質可以改變,高度可以按照內容自動適應,當然有了源代碼什么都可以改。

html源碼:

<div id="DivFieldset1" style="font-family:微軟雅黑;font-size:Small;display:block;clear:left;padding:0;margin:0;">
<div id="DivFieldset1_title" style="position:relative;display:inline;left:10px;top:8px;white-space:nowrap;text-align:center;background-color:#ffffff;font-weight:bold">這里是標題</div>
<div id="DivFieldset1_content" style="height:90px;width:400px;border:#D2691E 1px solid;">
<div style="margin:15px 5px 8px 10px;overflow:auto">這里是內容</div>
</div>
</div>

然后我又開了歷史的倒車,把這個封裝成了一個asp.net webform 自定義控件。

css fieldset 樣式_fieldset css樣式_html fieldset 樣式

設計時效果:

design2104

設計時源碼:

<cc1:DivFieldset ID="DivFieldset1" runat="server" FieldsetContent="這里是內容" FieldsetHeight="90px" FieldsetTitle="這里是標題" FieldsetWidth="400px" FieldsetBorderColor="Chocolate" Font-Names="微軟雅黑" Font-Size="Small">
</cc1:DivFieldset>

html fieldset 樣式_css fieldset 樣式_fieldset css樣式

運行效果跟純html是一樣一樣的。

除了借助屬性可以設定內容,還可以在標簽中直接編寫內容,但是它們沒法選其二,并且屬性優先,如下:

<cc1:DivFieldset ID="DivFieldset1" runat="server" FieldsetHeight="90px" FieldsetTitle="這里是標題" FieldsetWidth="400px" FieldsetBorderColor="Chocolate" Font-Names="微軟雅黑" Font-Size="Small">這里是內容。
</cc1:DivFieldset>

控件的屬性:

html fieldset 樣式_fieldset css樣式_css fieldset 樣式

attr62539

這幾個特殊的屬性是為了便于控制相關風格的,有了人們簡單設定下就可以用上了,當然控件的其他有關樣式的屬性似乎會起作用。

如果愿意使用此控件,點擊此處下載,無毒無公害。

本博客所有文章如無特別標明均為原創。


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

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

    熱點圖片
    拼命載入中...
    少林宝藏100在线客服 大发快三官网统一开奖 富翁捕鱼城怎么赚钱 天津麻将技巧 正版的贵州闲来麻将 云南快乐十分今天走势 七位数历史号码查询 日本av快播网站大全 明天哪支股票涨停 山水广西麻将官方网站 秒速快3提前预知 3d预测汇总今天的 股票配资平台哪个好一点 pk10技巧 2020白小姐精选四不像大全 弈乐贵州麻将 贵州十一选五投注