HTML+CSS布局(常用css控制属性)小结

前端技术 2023/09/03 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 href=\"http://www.baidu.com\" target=\"ife\">呵呵</a>
<a href=\"#\">222</a>
<a href=\"#\">333</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>
<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}


左侧的展开目录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>


用左侧的导航控制主体部分变动，其他页面不动。方法有很多，js或者是jquery都可以实现也可以使用“框架”实现。只是在html5中“框架”的概念已经不在了。所以尽量避开框架。

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

所以我就采用<iframe width=\"100%\" height=\"100%\" id=\"ife\"></iframe>，所谓的网页中的网页。

利用id控制iframe中的网页内容。

<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;}

本文地址：https://www.stayed.cn/item/7803

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案