HTML5学习5
来源:互联网 发布:淘宝网店保证金多少 编辑:程序博客网 时间:2024/06/05 03:37
在写一些网页设计的时候我们都要定义名字方便我们下面编写代码,其中一些就是要在CSS中定义。书写的时候有些规则时要注意的,下面我们讲一下这些规则。
了解了这个规则的时候,我们就要看大量的实例来具体了解,下面介绍一个在html5书籍推荐中看到的根据浏览器宽度自动把布局从三栏切换成两栏加底栏,脚本换样式,用脚本去读取浏览器宽度然后改变样式。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS布局:根据浏览器宽度自动把布局从三栏切换成两栏加底栏-懒人图库</title>
<STYLE type="text/css">
*{ margin:0; padding:0}
body{ text-align:center}
#wrapper{
margin-left:auto;
margin-right:auto;
text-align:left;
}
#header,#footer{
clear:both;
text-align:center;
}
h1,p{padding:10px;}
#main{
float:left;
width:720px;
}
#content{
float:right;
width:480px;
height:360px;
color:#333;
background-color:#efefef;
}
#extrabar{
float:left;
width:240px;
height:360px;
color:#fff;
background-color:#6666CC;
}
.box{
float:left;
width:240px;
height:120px;
}
#sidebar{ float:left;}
.minwidth{
width:720px;
}
.maxwidth{
width:960px;
}
.minwidth #sidebar{
width:720px;
}
.maxwidth #sidebar{
width:240px;
}
.s1{
color:#fff;
background-color:#6600CC;
}
.s2{
color:#fff;
background-color:#6666CC;
}
.s3{
color:#fff;
background-color:#6633CC;
}
</STYLE>
<SCRIPT type="text/javascript">
//from http://www.collylogic.com/?/comments/redesign-notes-1-width-based-layout/
wraphandler = {
init: function() {
if (!document.getElementById) return;
// set up the appropriate wrapper
wraphandler.setWrapper();
// and make sure it gets set up again if you resize the window
wraphandler.addEvent(window,"resize",wraphandler.setWrapper);
},
setWrapper: function() {
// width stuff from ppk's http://www.evolt.org/article/document_body_doctype_switching_and_more/17/30655/index.html
var theWidth = 0;
if (window.innerWidth) {
theWidth = window.innerWidth
} else if (document.documentElement &&
document.documentElement.clientWidth) {
theWidth = document.documentElement.clientWidth
} else if (document.body) {
theWidth = document.body.clientWidth
}
if (theWidth != 0) {
if (theWidth < 1000) {
document.getElementById('wrapper').className = 'minwidth';
} else {
document.getElementById('wrapper').className = 'maxwidth';
}
}
},
addEvent: function( obj, type, fn ) {
if ( obj.attachEvent ) {
obj['e'+type+fn] = fn;
obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
obj.attachEvent( 'on'+type, obj[type+fn] );
} else {
obj.addEventListener( type, fn, false );
}
}
}
wraphandler.addEvent(window,"load",wraphandler.init);
</SCRIPT>
</head>
<body>
<DIV id="wrapper" class="minwidth">
<DIV id="header">
<H1>根据浏览器宽度自动把布局从三栏切换成两栏加底栏</H1></DIV>
<DIV id="main">
<DIV id="content">
<P>因为要把主内容放这里又想先显示..所以.多套了个div</P>
<P>因为偷懒..选了几个刚刚好的宽度.高度也写死了..只是让大家能看到切换的效果..</P>
<P>米美化..用色块显示..奇丑无比.</P>
<P>相关资料:<A title="关于脚本使用的相关说明." href="http://www.collylogic.com/?/comments/redesign-notes-1-width-based-layout/">关于脚本使用的相关说明(英文)</A></P></DIV>
<DIV id="extrabar">
<P>这里是ID为extrabar的层...</P></DIV></DIV>
<DIV id="sidebar">
<DIV class="box s1">
<P>在ID为sidebar的层里的一个小栏1</P></DIV>
<DIV class="box s2">
<P>在ID为sidebar的层里的一个小栏2</P></DIV>
<DIV class="box s3">
<P>在ID为sidebar的层里的一个小栏3</P></DIV></DIV>
<DIV id="footer">
<P>Copyright <A href="http://www.aoao.org.cn/" rel="me">aoao</A> , <A href="http://www.creativecommons.cn/licenses/by-nc/2.5/">Some
Rights Reserved</A> .</P></DIV></DIV>
上面只是一个例子,大家可以参考看看,理解了这个写法后可以再参考一些html5书籍中写的其他例子来了解一些CSS的书写方法,其中设计了一些写DIV的语句代码,它的主要作用是用来方便定义CSS中内容的,也可写一些ID来定义,但是有一些人习惯DIV,所以上例中用的是div定义。
- HTML5学习5
- html5学习笔记(5)
- html5学习笔记5-HTML5基础
- HTML5 学习
- html5学习
- HTML5学习
- html5学习
- html5学习
- 学习HTML5
- HTML5学习
- HTML5学习
- Html5学习
- html5学习
- HTML5学习
- HTML5学习
- html5 学习
- HTML5学习
- 学习 HTML5
- WOJ 1014
- android socket 推送服务版本
- 射线方法--测试点
- LoaderManager - Android 3.0中的新功能
- 改进BeanUtils支持DATE类型
- HTML5学习5
- 微博feed系统的推(push)模式和拉(pull)模式和时间分区拉模式架构探讨
- Linux 环境下快速部署 MySQL 的替代方案
- SVN\TortoiseSVN\VisualSVN\VisualSVNServer
- 关于oracle行锁的相关处理--根据网络资源整理
- 【代码】Android 使用百度定位SDK 方法及处理错误
- vector C++ 详细用法
- Struts2如何使用Interceptors
- 字符集(Character Sets)