腳本之家服務器常用軟件

快捷導航

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

發(fā)布時間：2013-03-28 15:46:59 作者：佚名

我要評論

這幾天一直在研究HTML+CSS布局。并沒有把所有的布局都弄明白，只學了一點常用的css控制屬性，此圖只為說明功能，感興趣的各位可以參考下哈，希望可以幫助到你

好久沒有更新了，學習也一直停頓著。

今天看到同學的一句博客“你的高度決定你的視線，長得不高不是你的錯，但是站的不高就是你的錯了。”

廢話少說，開始學習：

這幾天一直在研究HTML+CSS布局。并沒有把所有的布局都弄明白，只學了一點常用的css控制屬性；

先上圖看看吧。ps：只為說明功能，搞后臺的對界面很……

html代碼：

復制代碼

代碼如下:

<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)絡層</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>應用層</h3>
<div>
<a href="#">aaa</a>
<a href="#">bbb</a>
<a href="#">ccc</a>
</div>
</div>
</div>
<div id="rightif">
<div align="center">
<iframe width="100%" height="100%" id="ife"></iframe>
</div>
</div>
<div id="footer"></div>
</div>

css代碼

復制代碼

代碼如下:

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代碼：

復制代碼

代碼如下:

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è)的導航控制主體部分變動，其他頁面不動。方法有很多，js或者是jquery都可以實現(xiàn)也可以使用“框架”實現(xiàn)。只是在html5中“框架”的概念已經(jīng)不在了。所以盡量避開框架。

我的js和jquery掌握的也是馬馬虎虎。

所以我就采用<iframe width="100%" height="100%" id="ife"></iframe>，所謂的網(wǎng)頁中的網(wǎng)頁。

利用id控制iframe中的網(wǎng)頁內(nèi)容。

<IFrame name="自定義" />

<a href="" target="自定義">

利用ul li 制作橫排導航

代碼如下：

復制代碼

代碼如下:

<ul>
<li>藍蓮花</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;}

Tag：HTML CSS布局 CSS屬性

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

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

相關文章

最新評論

文章分類

大家感興趣的內(nèi)容

最近更新的內(nèi)容