HTML+CSS合理布局(常见css操纵特性)小结

日期:2021-03-10 类型:科技新闻 

关键词:如何制作微信小程序,微信小程序源码,小程序码生成,凡科网微信小程序,微信公众号小程序

好长时间沒有升级了,学习培训也1直间断着。

今日看到同学的1句blog“你的高宽比决策你的视野,长得不高并不是你的错,可是站的不高便是你的错了。”

空话少说,刚开始学习培训:

这几日1直在科学研究HTML+CSS合理布局。并沒有把全部的合理布局都弄搞清楚,只学了1点常见的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;}

上一篇:Css3+Js制做好看数字时钟(附源代码) 返回下一篇:没有了