DIV+CSS 基础
- 盒子模型：margin(边界)，可被占位；border(边框)；padding(填充)；content(内容)
- 块元素：
- 默认占据一行，前后换行。
- 作为容器，装载块元素和行内元素，被装载元素的位置，会都受到容器的限制。
- 在CSS（display/float/position）作用下，块元素和行内元素无异。
- position可以改变位置受容器的限制：
- top/left/bottom/right 只有在设置了定位属性的元素中有效
- 相对定位（relative）：是相对于自己的原始位置进行位置偏移，偏移后，原始空间仍然会被占据，不以父级作为参考。
- 绝对定位（absolute）：相对于自己父级（必须具有定位属性的）进行位置偏移，偏移后，原始空间不被占用，脱离原有容器。若所有父级都没有定位属性，则选择浏览器作为父级。
- 层级次序：如由于定位（相对或绝对）而引起元素之间的遮掩，则可以通过设置 z-index：###调整层级位置，值越大就越在上层。
- 行内元素：
- 默认不占据一行，行内元素，前后不换行。
- 通常不作为容器，只装载内容。
- float：设置浮动属性时，如本身没有宽高属性时，元素将会自动占据最小的空间；如相邻元素没有使用margin（left/right）属性，相邻元素则会象磁贴一样紧紧地粘上自己。
- 横向与纵向布局：
- 横向五级菜单
<!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=utf-8" />
<script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script><script type="text/javascript">
<![CDATA[
$(document).ready(
function() {
$("li")
.bind("mouseover",function(){$(this).attr("class","normal");})
.bind("mouseout",function(){$(this).romoveAttr("class");});
});
]]>
</script>
<style type="text/css">
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 1.5;
}
a {
color: #808080;
text-decoration: none;
}
a:hover {
color: #000080;
}
#menu { width: 360px; }
#menu ul { list-style: none; margin: 0px; padding: 0px; z-index:0; }
#menu ul li { margin-top:-2px; background: #eee; padding: 2px 10px; height: 20px; line-height: 20px; border: 1px solid #ccc; position:relative;display:inline; }
#menu ul li ul { display:none; position: absolute; left: 0px; top: 20px; width:180px; border:1px solid #ccc; border-bottom:none;z-index:100; }
#menu ul li ul li { background: #eee; padding: 2px 10px; height: 20px; line-height: 20px; border-bottom: 1px solid #ccc; position:relative;display:block; }
#menu ul li ul li ul{ display:none; margin-left:-2px; position: absolute; left: 180px; top: 0px; width:180px; border:1px solid #ccc; border-bottom:none;z-index:100; }
#menu ul li.normal > ul { display:block;}
#menu ul li:hover > ul { display:block;}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">第一级菜单 1</a></li>
<li><a href="#">第一级菜单 2</a>
<ul>
<li><a href="#">第二级菜单 2－1</a></li>
<li><a href="#">第二级菜单 2－2</a>
<ul>
<li><a href="#">第三级菜单 2－2－1</a>
<ul>
<li><a href="#">第四级菜单 2－2－1－1</a></li>
<li><a href="#">第四级菜单 2－2－1－2</a>
<ul>
<li><a href="#">第五级菜单 2－2－1－2－1</a></li>
<li><a href="#">第五级菜单 2－2－1－2－2</a></li>
</ul>
</li>
<li><a href="#">第四级菜单 2－2－1－3</a></li>
</ul>
</li>
<li><a href="#">第三级菜单 2－2－2</a></li>
</ul>
</li>
<li><a href="#">第二级菜单 2－3</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html> - 纵向五级菜单：
<!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=utf-8" />
<script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<![CDATA[
$(document).ready(
function() {
$("li")
.bind("mouseover",function(){$(this).attr("class","normal");})
.bind("mouseout",function(){$(this).romoveAttr("class");});
});
]]>
</script>
<style type="text/css">
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 1.5;
}
a {
color: #808080;
text-decoration: none;
}
a:hover {
color: #000080;
}
#menu { width: 180px; border: 1px solid #ccc; border-bottom:none;}
#menu ul { list-style: none; margin: 0px; padding: 0px; z-index:0; }
#menu ul li { background: #eee; padding: 2px 10px; height: 20px; line-height: 20px; border-bottom: 1px solid #ccc; position:relative;}
#menu ul li ul { display:none; position: absolute; left: 180px; top: 0px; width:180px; border:1px solid #ccc; border-bottom:none;z-index:100; }
#menu ul li.normal > ul { display:block;}
#menu ul li:hover > ul { display:block;}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">第一级菜单 1</a></li>
<li><a href="#">第一级菜单 2</a>
<ul>
<li><a href="#">第二级菜单 2－1</a></li>
<li><a href="#">第二级菜单 2－2</a>
<ul>
<li><a href="#">第三级菜单 2－2－1</a>
<ul>
<li><a href="#">第四级菜单 2－2－1－1</a></li>
<li><a href="#">第四级菜单 2－2－1－2</a>
<ul>
<li><a href="#">第五级菜单 2－2－1－2－1</a></li>
<li><a href="#">第五级菜单 2－2－1－2－2</a></li>
</ul>
</li>
<li><a href="#">第四级菜单 2－2－1－3</a></li>
</ul>
</li>
<li><a href="#">第三级菜单 2－2－2</a></li>
</ul>
</li>
<li><a href="#">第二级菜单 2－3</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html> float 布局
<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<style type="text/css">
body{
margin:0;
padding:0;
text-align:center
}
#container{
margin:0 auto;
width:1024px;
height:600px;
text-align:left;
background:aqua;
}
#left{
background:#ccc;
float:left;
width:10%;
height:100%;
}
#middle{
background:gray;
width:80%;
margin:0 10%;
height:100%;
}
#right{
background:#ccc;
float:right;
width:10%;
height:100%;
}
}
</style>
<title>无标题 1</title>
</head>
<body>
<div id="container">
<div id="left">left</div>
<div id="right">right</div>
<div id="middle">middle</div>
</div>
</body>
</html>
- 横向五级菜单
DIV+CSS 基础的更多相关文章
- div+css基础
Div+css技术 Div是用于存放文字,图片,元素的容器 Css 是用于指定存放在div中的内容如何显示,包括内容的位置和外观(层叠样式表) Html 文件 <!--必须引入的文件--> ...
- div+css基础教程
本文存下来作为备忘. 第一节 了解div+css 一.什么是div+css div元素是html(超文本语言)中的一个元素,是标签,用来为html文档内大块(block-level)的内容提供结构和 ...
- 2天驾驭DIV+CSS （基础篇）（转）
这是去年看到的一片文章,感觉在我的学习中,有不少的影响.于是把它分享给想很快了解css的兄弟们. 基础篇[知识一] “DIV+CSS” 的叫法是不准确的[知识二] “DIV+CSS” 将你引入两大误区 ...
- 【笔记-前端】div+css排版基础，以及错误记录
现在的网站对于前端的排版已经逐渐不使用<table>,而是使用div+css. 使用这种方法的最大好处就在于在维护页面时,可以只维护css而不去改动html. 可是这种方式对于初学者来说可 ...
- HTML+DIV+CSS+JSweb前端基础
HTML+DIV+CSS+JSweb前端基础 1.<html>和</html> 标签限定了文档的开始和结束点. 属性: (1) dir: 文本的显示方向,默认是从左向右 (2 ...
- DIV+CSS专题：第一天 XHTML CSS基础知识
欢迎大家学习<十天学会web标准>,也就是我们常说的DIV+CSS.不过这里的DIV+CSS是一种错误的叫法,建议大家还是称之为web标准. 学习本系列教程需有一定html和css基础 ...
- [19/06/05-星期三] CSS基础_样式表的位置(内联、内部、外部样式)、块元素(div)、内联元素(span)、常用的选择器
一.概念 CSS(Cascading Style Sheets,层叠样式表) 可以用来为网页创建样式表,通过样式表可以对网页进行装饰. 所谓层叠,就是可以将整个网页想象成是一层一层的结构,层次高的将会 ...
- DIV+CSS+JS基础+正则表达式
...............HTML系列.................... DIV元素是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素.DIV的起始 ...
- Web前端温故知新-CSS基础
一.CSS定义与编写CSS 1.1 CSS的定义 全名:Cascading Style Sheets -> 层叠样式表 定义:CSS成为层叠样式表,它主要用于设置HTML页面中的文本内容(字体. ...
随机推荐
- sql获取时间时分秒
select datename(hour,getdate())+':'+datename(minute,getdate())+':'+datename(second,getdate())
- netbeans 优化设置
下面我就以Windows上的NetBeans安装为例,说说如何配置字体. 1.NetBeans界面上的普通字体大小,可以通过配置NetBeans安装目录下netbeans.conf启动文件来实现,这个 ...
- libjpeg 交叉编译动态库和静态库
1.下载libjpeg库,解压之 得到了jpeg6b和libtool-2.2.4两个文件夹. 2.编译安装libtool工具. 这是配置libtool,这里需要注意:configure 参 ...
- (转)Yale CAS + .net Client 实现 SSO（5）
第一部分:安装配置 Tomcat 第二部分:安装配置 CAS 第三部分:实现 ASP.NET WebForm Client 第四部分:实现基于数据库的身份验证 第五部分:扩展基于数据库的身份验证 1. ...
- SSH连接 NAT型 VirtualBox + LINUX
1.首先登录到虚拟机中的Linux系统,查看一下使用NAT网卡的IP地址. 2.关闭虚拟机. 3.依次点击 "设置 -> 网络 -> (网络地址转换)端口转发",其中需 ...
- 【风马一族_xml】xml语法
xml语法 文档声明 用来声明xml的属性,用来指挥解析引擎如何去解析当前xml 通常一个xml都要包含并且只能包含一个文档声明 xml的文档必须在整个xml的最前面,在文档声明之前不能有任何内容 & ...
- Eclispe使用Maven添加官方库的jar包
先到百度或google搜索maven仓库,在仓库中搜索需要的jar包,如poi.jar. 搜索到之后找到需要的jar包,找到这里
- 【转】Class.forName()用法详解
ref: http://blog.csdn.net/kaiwii/article/details/7405761 主要功能 Class.forName(xxx.xx.xx)返回的是一个类 Class. ...
- react-native-vector-icons 安装
react-native-vector-icons 是可以直接使用图片名就能加载图片的第三方,类似于web的iconfont矢量图,使用很方便, 你不需要在工程文件夹里塞各种图片, 节省很多空间,下面 ...
- php文本操作方法集合比较
fgets和fputs.fread和fwrite.fscanf和fprintf 字符串读写函数fgets和fputs 一.读字符串函数fgets函数的功能是从指定的文件中读一个字符串到字符数组中,函数 ...