html模板代碼在線（中文html模板）
本篇文章給大家談?wù)刪tml模板代碼在線，以及中文html模板對應(yīng)的知識點，希望對各位有所幫助，不要忘了收藏本站喔。
本文目錄一覽：
- 1、html模板
- 2、幫我制作一個這樣的html代碼模板，做好框架就行
- 3、如何復用HTML模板代碼，比如頭部尾部等相同代碼的部分，具體怎么做
- 4、Python大神教你300行代碼搞定HTML模板渲染「附源碼」
- 5、HTML中模板的透明度用代碼怎樣實現(xiàn)?
html模板
1、ASP文件中的代碼
pencat=rs.Fields.Item("m_content").Value
pencat=replace(pencat,"t_title",n_title)
pencat=replace(pencat,"t_author",n_author)
pencat=replace(pencat,"t_content",n_content)
Set fso = Server.CreateObject("Scripting.FileSystemObject")
Set fout = fso.CreateTextFile(server.mappath(fpath "\" fname))
fout.WriteLine pencat
fout.close
2、如下給出要生成的網(wǎng)頁模板：
html
head
meta http-equiv=""Content-Language"" content=""zh-cn""
meta http-equiv=""Content-Type"" content=""text/html; charset=gb2312""
meta name=""GENERATOR"" content=""Microsoft FrontPage 4.0""
meta name=""ProgId"" content=""FrontPage.Editor.Document""
title/title
/head
body topmargin=""0"" leftmargin=""0""
table border=""0"" width=""760"" height=""100%"" background=""background.jpg""
tr
td width=""752"" height=""10"" colspan=""3""
p align=""center""t_title
/td
/tr
tr
td width=""752"" height=""18"" colspan=""3""
div align=""center""
/div
div align=""center""
font size=""2""
作者：/fontfont color=""#990000""t_author/font
font size=""2""
加入時間：/fontfont color=""#990000""t_date/font
/div
/td
/tr
tr
td width=""15%"" height=""100%"" valign=""top""
/td
td width=""70%"" height=""100%"" valign=""top""
t_content
/td
td width=""15%"" height=""100%"" valign=""top""
/td
/tr
/table
/body
/html
3、解釋
（1）pencat=rs.Fields.Item("m_content").Value
pencat為一個字符串變量。
rs.Fields.Item("m_content").Value就是如上2、網(wǎng)頁模板的全部HTML字符
（2）pencat=replace(pencat,"t_title",n_title)
pencat=replace(pencat,"t_author",n_author)
pencat=replace(pencat,"t_content",n_content)
以上三句就是將字符串中的字串替換成為你所需要的內(nèi)容，即ASP中動態(tài)獲得的內(nèi)容。
（3）Set fso = Server.CreateObject("Scripting.FileSystemObject")
Set fout = fso.CreateTextFile(server.mappath(fpath "\" fname))
fout.WriteLine pencat
fout.close
以上為將剛剛組合所得的網(wǎng)頁代碼寫入文件的過程。第一句定義fso文件，第二句創(chuàng)建輸出流文件，其中fpath為你想要存儲的文件的路徑，fname為文件名；后兩句是將字符串寫入文件和關(guān)閉輸出流文件。
幫我制作一個這樣的html代碼模板，做好框架就行
這樣的不曉得行不，你看看
!DOCTYPE?html
html?lang="en"
head
?meta?charset="UTF-8"
?titleDocument/title
?style?type="text/css"
??*{
???margin:?0;padding:?0;
??}
??body{
???background:?#E3D6D6;?
??}
??ul,li,ol{
???list-style:?none;
??}
??#box{
???width:?560px;?height:?480px;
???margin:?100px?auto;
???position:?relative;
???border:5px?solid?#ADA4A4;
???box-shadow:?0px?0px?20px?red;
???overflow:?hidden;
??}
??.left_top_01{
???width:?210px;height:?170px;
???margin-left:?17px;
??}
??.left_top_01?li{
???
???float:?left;
???
??}
??.left_top_01?li?span{
???display:?block;width:?20px;
???font-size:?18px;font-weight:?bolder;
???padding:?15px;
??}
??.left_top_02{
???width:?210px;height:?170px;
???margin-left:?17px;
??}
??.left_top_02?li{?
???width:?20px;
???padding:?15px;
???float:?left;
???position:?relative;
???margin-bottom:?-10px;
??}
??.left_top_02?li?span{
???display:?block;
???font-size:?14px;
???line-height:?30px;
???height:?30px;width:?170px;?
???transform:?rotate(270deg);
???position:?absolute;
???left:-55px;top:?50px;
???/*margin-right:?-50px;*/
??}
??.left_top_02+img{
???position:?absolute;
???top:?0px;?left:?246px;
??}
??.left_bottom{
???width:?210px;height:?140px;margin:?15px?0?0?20px;
??}
??.left_bottom?li{
???border-top:?2px?solid?#DCD2D2;
???line-height:?38px;height:?38px;
???font-size:?16px;font-weight:?bold;font-family:?"黑體";
??}
??.right_bottom{
???width:?350px;height:?140px;
???position:?absolute;
???right:?0;bottom:?18px;
??}
??.right_bottom?li{
???float:?right;
???width:?95px;
???margin:?0?6px;
??}
??.right_bottom?li?p{
???font-size:?12px;font-weight:?bold;font-family:?"黑體";
??}
?/style
/head
body
div?id="box"
?ul?class="left_top_01"
??li
???span首頁/span
??/li
??li
???span關(guān)于我/span
??/li
??li
???span作品展示/span
??/li
??li
???span聯(lián)系我/span
??/li
?/ul
?ul?class="left_top_02"
??li
???spanHOME/span
??/li
??li
???spanABOUT?ME/span
??/li
??li
???spanWORKS?SHOW/span
??/li
??li
???spanCONTACT?ME/span
??/li
?/ul
?img?src="#"?alt="#"?width="300px"?height="320px"?/
?ul?class="left_bottom"
??li教育背景/li
??li在校經(jīng)歷/li
??li語言及計算機能力/li
?/ul
?ul?class="right_bottom"
??li
????img?src="#"?alt="#"?width="95px"?height="85px"/
????p喜歡簡單純粹的生活方式，待人待事細致沉穩(wěn)，喜歡簡單純粹的生活方式，待人待事細致沉穩(wěn)/p
??/li
??li
????img?src="#"?alt="#"?width="95px"?height="85px"/
????p喜歡簡單純粹的生活方式，待人待事細致沉穩(wěn)，喜歡簡單純粹的生活方式，待人待事細致沉穩(wěn)/p
??/li
??li
????img?src="#"?alt="#"?width="95px"?height="85px"/
????p喜歡簡單純粹的生活方式，待人待事細致沉穩(wěn)，喜歡簡單純粹的生活方式，待人待事細致沉穩(wěn)/p
??/li
?/ul
/div
/body
/html
如何復用HTML模板代碼，比如頭部尾部等相同代碼的部分，具體怎么做
HTML復用，不需要任何模板就可以復用相同的內(nèi)容
條件：控制頁面布局顯示就可以完成
示例：
主頁
!DOCTYPE html
html
head
meta charset='utf-8' /
titleHTML調(diào)試/title
script type='text/javascript' src='js/jquery-1.8.0.min.js'/script
script src='js/zui.min.js' type='text/javascript' charset='utf-8'/script
script src='js/jquery-barcode.js' type='text/javascript' charset='utf-8'/script
link rel='stylesheet' type='text/css' href='css/zui.css' /
style type='text/css'
#container {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
overflow: auto;
font-family: '宋體';
}
/style
/head
body
div id='container'
!--復用頁面容器1--
div style="position: absolute;left: 0px;top: 0px;height: 70px;width: 100%;border-bottom: 1px solid #F1F1F1;"
iframe align="center" width="100%" height="70px" src="html/page_header.html" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"/iframe
/div
div id="contents" style="position: absolute;left: 0px;top: 70px;width: 100px;"
!--不相同內(nèi)容容器--
/div
!--復用頁面容器2--
div style="position: absolute;left: 0px;top: 585px;height: 70px;width: 100%;border-top: 1px solid #F1F1F1;"
iframe align="center" width="100%" height="70px" src="html/page_footer.html" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"/iframe
/div
/div
/body
/html
復用頁面1
!DOCTYPE html
html
head
meta charset="UTF-8"
script src="../js/jquery-1.8.0.min.js" type="text/javascript" charset="utf-8"/script
link rel="stylesheet" href="../css/bootstrap.min.css" /
title復用頭部/title
/head
body
div style="position: absolute;left: 0px;top: 0px;height: 70px;width:100%;background: #ff0;font-size: 30px;text-align: center;line-height: 70px;"
復用頭部
/div
/body
/html
復用頁面2
!DOCTYPE html
html
head
meta charset="UTF-8"
script src="../js/jquery-1.8.0.min.js" type="text/javascript" charset="utf-8"/script
link rel="stylesheet" href="../css/bootstrap.min.css" /
title復用底部/title
/head
body
div style="position: absolute;left: 0px;top: 0px;height: 70px;width:100%;background: #ff0;font-size: 30px;text-align: center;line-height: 70px;"
復用底部
/div
/body
/html
項目結(jié)構(gòu)
實現(xiàn)結(jié)果：
Python大神教你300行代碼搞定HTML模板渲染「附源碼」
模板語言由HTML代碼和邏輯控制代碼組成，此處 @PHP 。通過模板語言可以快速的生成預(yù)想的HTML頁面。應(yīng)該算是后端渲染不可缺少的組成部分。
通過使用學習 tornado 、 bottle 的模板語言，我也效仿著實現(xiàn)可以獨立使用的模板渲染的代碼模塊，模板語法來自 tornado 和 bottle 的語法。可以用來做一些簡單的事情 網(wǎng)頁渲染 ， 郵件內(nèi)容生成 等HTML顯示方面。以下就是簡單的語法使用介紹。
1. 變量。使用 {{ }} 包裹起來，里面的變量為Python傳入。模板渲染時會將傳入的變量轉(zhuǎn)換成字符串并填入對應(yīng)位置。
2. 轉(zhuǎn)義。默認傳入的數(shù)據(jù)都會進行HTML轉(zhuǎn)義，可以使用 {% raw value %} 來將value的內(nèi)容按原始字符串輸出。
3. 條件控制。支持Python的 if，elif，else 。條件代碼需要放在 {% %} 內(nèi)部，并且在條件結(jié)束后需要額外增加 {% end %} ，用于標識條件控制語句塊范圍。
4. 循環(huán)控制。支持Python的 for 和 while 。與條件控制一樣也需要放在 {% %} 內(nèi)部，并且結(jié)束處需要額外增加 {% end %} ，用于標識循環(huán)控制語句塊的范圍。
這個模板語言模塊是在 Python2.7 上面開發(fā)使用的，如果要在 Python3+ 上使用需要對 str 和 bytes 進行一些處理即可，由于沒有引用任何其他模塊，可以很好地獨立使用。
原文鏈接：
HTML中模板的透明度用代碼怎樣實現(xiàn)?
Firefox3.5已不支持私有屬性-moz-opacity了，在Mozilla 1.7 (Firefox 0.9)之前FF都是使用這個私有屬性的，F(xiàn)irefox 0.9-Firefox3同時支持-moz-opacity和opacity這兩個屬性，F(xiàn)irefox升級到3.5之后，一些網(wǎng)站原來有的透明沒有了，呵呵。
除了IE之外，目前主流瀏覽器， Opera 9.0及更高版本，Safari 1.2(WebKit 125) 及更高版本，chrome等等都支持opacity這個設(shè)置透明度的屬性，opacity的屬性值是0number1的數(shù)值，默認值是1。
例如50%透明的類：.example { opacity: 0.5;}
IE的透明度的屬性從IE4-IE8使用filter: alpha(opacity=number)，這里的number是0-100之間的整數(shù)數(shù)值，IE8中我們也可以用-ms-filter: "alpha(opacity=number)"。IE中還支持progid:DXImageTransform.Microsoft.Alpha(Opacity=xx)這種寫法，但是不建議使用。
css中應(yīng)用的代碼如下：
.“類名" { /* make the box translucent (80% opaque) */ opacity: 0.8; /* Firefox, Safari(WebKit), Opera */ -ms-filter: "alpha(opacity=80)"; /* IE 8 */ filter: alpha(opacity=80); /* IE 4-7 */ zoom: 1;/* set "zoom", "width" or "height" to trigger "hasLayout" in IE 7 and lower */ }
js來設(shè)置元素的透明度代碼如下：
var el=document.getElementById("mybox"); el.style.opacity=50/100; //這里寫出50/100主要是為了和ie的寫法統(tǒng)一，便于一參數(shù)形式傳入 el.style.filter=’Alpha(Opacity=50)’;
關(guān)于html模板代碼在線和中文html模板的介紹到此就結(jié)束了，不知道你從中找到你需要的信息了嗎 ？如果你還想了解更多這方面的信息，記得收藏關(guān)注本站。
掃描二維碼推送至手機訪問。
版權(quán)聲明：本文由飛速云SEO網(wǎng)絡(luò)優(yōu)化推廣發(fā)布，如需轉(zhuǎn)載請注明出處。
