HTML+CSS布局(常用css控制屬性)小結(jié)

2020-03-24 15:55:53

字體：大中小

供稿：網(wǎng)友

好久沒有更新了，學(xué)習(xí)也一直停頓著。今天看到同學(xué)的一句博客你的高度決定你的視線，長(zhǎng)得不高不是你的錯(cuò)，但是站的不高就是你的錯(cuò)了。廢話少說，開始學(xué)習(xí)：這幾天一直在研究HTML+CSS布局。并沒有把所有的布局都弄明白，只學(xué)了一點(diǎn)常用的css控制屬性；先上圖看看吧。ps：只為說明功能，搞后臺(tái)的對(duì)界面很 html代碼：

復(fù)制代碼代碼如下:
div id="contner"
div id="header" h1 header部分 /h1
/div
div id="mian"
div id="leftnav"
div id="nav"
h3 物理層 /h3
div
a target="ife" 呵呵 /a
a href="#" 222 /a
a href="#" 333 /a /div
h3 數(shù)據(jù)鏈路 /h3
div
a href="#" aaa /a
a href="#" bbb /a
a href="#" ccc /a
/div
h3 網(wǎng)絡(luò)層 /h3
div
a href="#" aaa /a
a href="#" bbb /a
a href="#" ccc /a
/div
h3 傳輸層 /h3
div
a href="#" aaa /a
a href="#" bbb /a
a href="#" ccc /a
/div
h3 表示層 /h3
div
a href="#" aaa /a
a href="#" bbb /a
a href="#" ccc /a
/div
h3 應(yīng)用層 /h3
div
a href="#" aaa /a
a href="#" bbb /a
a href="#" ccc /a
/div
/div
/div !--這部分是左側(cè)導(dǎo)航--
div id="rightif"
div align="center"
iframe width="100%" height="100%" id="ife" /iframe
/div
/div
div id="footer" /div
/div

css代碼

復(fù)制代碼代碼如下:
body{ margin:0px;text-align:center;}
#contner{ width:996px; margin:0px auto;}
#header{ height:150px; background-color:#999999;}
#leftnav{ background-color:#999966; float:left; width:20%;}
#rightif{ background-color:#FF9933; float:left; width:80%; border:0px;}
*{margin:0; padding:0}
#nav{ width:150px; margin:0px auto; text-align:left;}
#nav h3{ cursor:pointer; line-height:30px; height:30px;}
#nav a{display:block; line-height:24px;color:#666666; margin-left:20px;}
#nav a:hover{background-color:#eee; color:#000;}
#nav div{display:none; border-top:none}

左側(cè)的展開目錄js代碼：

復(fù)制代碼代碼如下:
script type="text/javascript"
function $(id){return document.getElementById(id)}
window.onload = function(){
$("nav").onclick = function(e){
var src = e?e.target:event.srcElement;
if(src.tagName == "H3"){
var next = src.nextElementSibling || src.nextSibling;
next.style.display = (next.style.display =="block")?"none":"block";
}
}
}
/script

用左側(cè)的導(dǎo)航控制主體部分變動(dòng)，其他頁(yè)面不動(dòng)。方法有很多，js或者是jquery都可以實(shí)現(xiàn)也可以使用框架實(shí)現(xiàn)。只是在html5中框架的概念已經(jīng)不在了。所以盡量避開框架。我的js和jquery掌握的也是馬馬虎虎。所以我就采用 iframe width= 100% height= 100% id= ife /iframe ，所謂的網(wǎng)頁(yè)中的網(wǎng)頁(yè)。利用id控制iframe中的網(wǎng)頁(yè)內(nèi)容。 IFrame name= 自定義 / a href= target= 自定義利用ul li 制作橫排導(dǎo)航代碼如下：

復(fù)制代碼代碼如下:
ul
li 藍(lán)蓮花 /li
li 老男孩 /li
li 父親 /li
li 希望 /li
/ul
ul{ list-style-type:none; float:left; margin:0px; padding:0px;}
ul li{ list-style-type:none; float:left; width:99px; display:block; line-height:30px; text-align:center;}
更多編程語(yǔ)言

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。

上一篇：html圖片自適應(yīng)手機(jī)屏幕大小的css寫法

下一篇：CSS3控制HTML元素動(dòng)畫效果