HTML+CSS布局(常用css控制属性)小结
发布时间：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 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;}
相关文章
html+css布局的三种方式(自然布局/流动布局/定位布局)
html+css布局的三种方式(自然布局/流动布局/定位布局)一些新手朋友会很陌生，接下来为您详细介绍，感兴趣的朋友可以了解下2013-01-06基于display:table的CSS布局让HTML元素和像table一样
display:table的CSS声明能够让一个HTML元素和它的子节点像table元素一样。使用基于表格的CSS布局，使我们能够轻松定义一个单元格的边界、背景等样式，而不会产生因为使用了2012-12-07
HTML+CSS网页设计与布局从入门到精通 pdf 附随书源码
HTML+CSS网页设计与布局从入门到精通 紧密围绕网页设计师在制作网页过程中的实际需要和应该掌握的技术，全面介绍了使用HTML和CSS进行网页设计和制作的各方面内容和技巧2012-09-26- 网页制作Webjx文章简介：CSS网页布局学习之Font-size的妙用. 我在做网站项目的时候通常需要定义一个高度为10px以下的div。代码如下： <!DOCTYPE htm2009-04-02
不要使用的HTML标签(WEB标准网页布局)-CSS教程-网页制作-网页教学网
CSS网页布局中不推荐使用的HTML标签，请尽量不要使用这些HTML标签。 Do not use these html elements in html pages. Presentational elements should not2008-10-17CSS网页布局:网页页面结构化-CSS教程-网页制作-网页教学网
你正在学习CSS布局吗？是不是还不能完全掌握纯CSS布局？通常有两种情况阻碍你的学习： 第一种可能是你还没有理解CSS处理页面的原理。在你考虑你的页面整体表现效2008-10-17CSS页面布局中HTML结构化-CSS教程-网页制作-网页教学网
您正在学习WEB标准CSS网页布局吗？是不是还不能完全掌握纯CSS布局？通常有两种需要您特别注意： 第一种可能是你还没有理解CSS处理页面的原理。 在你考2008-10-17关于DIV CSS和XHTML CSS的理解-CSS教程-网页制作-网页教学网
WEB标准是一系列标准的集合，并不是仅“DIV CSS”布局就可以实现。以CSS网页布局只是标准的基础之一。“DIV CSS”布局只是一种通俗的称呼罢了。而2008-10-17
这篇文章主要介绍了HTML+CSS实现单列布局水平居中布局的相关资料,需要的朋友可以参考下2017-09-06
最新评论