HTML+CSS布局(常用css控制属性)小结
2013-03-28 15:46
597 查看
好久没有更新了,学习也一直停顿着。
今天看到同学的一句博客“你的高度决定你的视线,长得不高不是你的错,但是站的不高就是你的错了。”
废话少说,开始学习:
这几天一直在研究HTML+CSS布局。并没有把所有的布局都弄明白,只学了一点常用的css控制属性;
先上图看看吧。ps:只为说明功能,搞后台的对界面很……
html代码:
css代码
左侧的展开目录js代码:
用左侧的导航控制主体部分变动,其他页面不动。方法有很多,js或者是jquery都可以实现也可以使用“框架”实现。只是在html5中“框架”的概念已经不在了。所以尽量避开框架。
我的js和jquery掌握的也是马马虎虎。
所以我就采用<iframe width="100%" height="100%" id="ife"></iframe>,所谓的网页中的网页。
利用id控制iframe中的网页内容。
<IFrame name="自定义" />
<a href="" target="自定义">
利用ul li ***横排导航
代码如下:
今天看到同学的一句博客“你的高度决定你的视线,长得不高不是你的错,但是站的不高就是你的错了。”
废话少说,开始学习:
这几天一直在研究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;}
相关文章推荐
- DivCSS布局基础:CSS中控制换行的四种属性
- HTML基础_CSS控制布局
- css 常用布局属性解释
- CSS布局最常用属性float(浮动)和position(定位)
- Android布局中的常用属性小结
- Android布局中的常用属性小结
- HTML 事件与属性,网页设计中常用的CSS属性,HTML ASCII 代码参考手册
- 使用CSS的position属性控制页面布局的入门教程
- HTML布局常用到的CSS
- 前端设计的常用属性,CSS的盒模型,页面布局的利器
- HTML+CSS基础入门-第十八天(CSS-布局的属性)
- web前端,html+css常用元素,属性总结
- html和css 常用标签和基本属性
- html学习-day02:div布局与css控制
- css布局以及一些常用属性
- 关于Js、jq css html常用属性的笔记
- 安卓布局常用的属性小结
- DIV+CSS常用的Html网页布局代码
- HTML中CSS的常用属性设置
- (转)DIV+CSS布局中常用到的属性、参数及说明