23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍
01 复习内容
复习之前的知识点
02演示VS创建元素
03div和span区别
通过display属性进行DIV与Span之间的转换。div->span 设置display:inline span->div 设置display:block
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<div style="border:red solid 1px;height:200px;">
<input type="button" name="name" value="我是按钮，我骄傲"/>
</div>
<span>
我也骄傲！
<input type="button" name="name" value="我更骄傲"/>
</span> 如果发现我邪恶了,请记住,我曾纯洁过.
传智播客<div style=" width: 300px; height: 200px; background-color: Yellow; display: inline; ">官网</div>http://www.itcast.cn
<br /> 传智播客<span style=" width: 300px; height: 200px; background-color: Yellow; display: block; ">官网</span>http://www.itcast.cn </body>
</html>
04 CSS中常用的几个属性
05常见的几个CSS属性
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<div style="width: 500px; height: 300px; background-color: white; border: 1px solid red; color: black; cursor: pointer;"> 另外一种方法cursor: url(dinosaru.ani);
<input type="button" name="name" value="我是老马，点我，狠点" />
如果我邪恶了，请记住，我曾经纯洁过。 <ul style="list-style-type:none;padding:0">
<li>靠，又变帅了</li>
<li>靠，又变帅了</li>
<li>靠，又变帅了</li>
<li>靠，又变帅了</li>
<li>靠，又变帅了</li>
</ul>
<table style="border:1px red solid">区分border="1"， 只有外边框，没有单元格的边框
<tr>
<td>123456</td>
<td>123456</td>
<td>123456</td>
<td>123456</td>
</tr>
<tr>
<td>123456</td>
<td>123456</td>
<td>123456</td>
<td>123456</td>
</tr>
<tr>
<td>123456</td>
<td>123456</td>
<td>123456</td>
<td>123456</td>
</tr>
<tr>
<td>123456</td>
<td>123456</td>
<td>123456</td>
<td>123456</td>
</tr>
</table>
</div>
</body>
</html>
06.三个选择器
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<!--第二种情况：写CSS代码，在本页面上写-->
<style type="text/css">
#dv /*id选择器*/
{
width: 300px;
height: 200px;
background-color:orange;
border:1px solid red;
}
/*运用于全部的DIV控件层，但是如果同时存在ID选择器及DIV层，则存在优先级设置样式*/
div /*标签选择器*/
{
cursor: pointer;
font-family: 全新硬笔行书简;
color: blue;
}
.cls /*类选择器*/ {
width: 300px;
height: 200px;
background-color: orange; /*当同时存在同一个属性的时候，以排序后面的为准。*/
}
.cls1 /*同一个标签，可以使用多个类选择器*/
{
color: red;
background-color: yellow; /*当同时存在同一个属性的时候，以排序后面的为准。*/
}
/*#dv--表示的是ID选择器，通常用在特定或者指定的某个元素上使用
div--表示的是标签选择器，通常用在很多相同标签上，希望这些标签都是用一个标签
.cls--表示的是类选择器，通常用在不同标签上，一般是几个标签（不同）应用同一个样式 优先级别：第一种情况中的就近原则 >> ID选择器最高 >> 类选择器 >>标签选择器
例子：第一步，如果div标签，则一定会先设置了div标签样式，然后再覆盖其它选择器的样式。
*/
</style> </head>
<body>
<!--第一种情况：写CSS代码，直接在HTML标签里面填写，-->
<div style="width:300px;height:200px;">
<!--id选择器-->
老马有才：文能提笔控萝莉
</div>
<!--第二种情况：写CSS代码，在本页面上写,使用ID选择器，则样式的优先级属于ID选择器-->
<div id="dv" ><!--id选择器-->
老马有才：文能提笔控萝莉
</div> <div class="cls cls1" > <!--/*同一个标签，可以使用多个类选择器*/-->
老马看到了老苏洗澡/*当同时存在同一个属性的时候，以排序后面的为准。*/
</div>
<div>
老马看到了老苏洗澡
</div>
<div>
老马看到了老苏洗澡
</div>
<input class="cls" type="button" name="name" value="我是按钮"/>
<input type="text" name="name" value="我是文本框"/>
<a href="http://www.xuanjics.com">玄机论坛</a>
</body>
</html>
07其它选择器
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
/*类名相同，但是不同标签就应用不同的样式，标签+类选择器*/
input.cls {
background-color: black;
width: 200px;
height: 100px;
} div.cls {
background-color: yellow;
width: 500px;
height: 300px;
}
/*类名相同，但是不同标签就应用不同的样式*/ div p span /*包含选择器（层次选择器）,写死了。*/
{
background-color: blue;
}
</style>
</head>
<body>
<input class="cls" type="button" name="name" value="我是按钮。" />
<div class="cls">
我是层。
</div>
<div>
<p>
<span>
我是Span
</span>
</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
/*伪选择器，不常用*/
a:link
{
text-decoration:none;
color:black;
}
a:hover
{
text-decoration:underline;
color:red;
}
a:active
{
color:yellow;
text-decoration:none;
}
a:visited
{
color:blue;
text-decoration:underline;
}
</style>
</head>
<body>
<a href="http://www.xuanjics.com">
玄机论坛，技术高手论坛
</a>
</body>
</html>
08几种使用CSS样式的方法
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
/*伪选择器，不常用，第二种（页面嵌入）使用CSS的方式*/
a:link
{
text-decoration:none;
color:black;
}
a:hover
{
text-decoration:underline;
color:red;
}
a:active
{
color:yellow;
text-decoration:none;
}
a:visited
{
color:blue;
text-decoration:underline;
}
/*第二种（页面嵌入）使用CSS的方式*/
div {
background-color: blue;
width: 100px;
height: 300px;
}
</style>
<!--/*第三种：使用CSS方式，外部引用*/-->
<link href="01.css" rel="stylesheet" /> >
<!--/*当同时使用多个CSS文件的时候，则会合并到一个ALL.css中*/-->
<link href="All.css" rel="stylesheet" />
</head>
<body>
<a href="http://www.xuanjics.com">
玄机论坛，技术高手论坛
</a>
<div style=" width:200px;height:500px;" > <!--第一种（元素内联）使用CSS的方式，直接在标签里面写CSS样式-->
玄机论坛，技术高手论坛
</div>
<div >
玄机论坛，技术高手论坛
</div>
</body>
</html> 01.css div {
background-color: yellow;
width: 500px;
height: 300px;
} 02.css div {
border:1px solid red;
}
all.cs @import url(01.css);
@import url(02.css);
09 脱离文档流
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
#dv1 {
background-color: red;
width: 300px;
height: 150px;
position: relative; /*脱离文档流，相当于之前的位置，相对定位*/
left: 100px; /*虽然已经脱离，但是后面的元素不会占了位置*/
top: 50px;
}
#dv2 {
background-color: green;
width: 300px;
height: 150px;
position: absolute; /*脱离文档流，绝对定位,相对于body*/
left: 500px; /*已经脱离，则后面的元素会占了位置*/
top: 50px;
z-index: 1001;/*值越大就越上面*/
}
#dv3 {
background-color: blue;
width: 300px;
height: 150px;
position:fixed;/*脱离文档流，固定定位，相对于浏览器平面*/ }
#dv4 {
background-color: green;
width: 300px;
height: 150px;
position: absolute; /*脱离文档流，绝对定位,相对于body*/
left: 500px; /*已经脱离，则后面的元素会占了位置*/
top: 50px;
z-index: 1000; /*值越大就越上面*/
}
</style>
</head>
<body>
<div id="dv1"> </div>
<div id="dv2"> </div>
<div id="dv3"> </div>
</body>
</html>
11 div和CSS布局
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<!--<script type="text/javascript">
window.onload = function() {
document.onclick = function () {
alert('我的范围');
};
document.body.onclick = function () {
alert('Body的范围');
};
};
</script>--> </head>
<body>
<div style="width: 90%; border: 1px solid red; margin: 0 auto; margin-bottom: 10px; ">
<!--margin: 0 auto; 设置居中显示。margin-bottom:10px;设置俩个DIV距离-->
<img src="imgs/01.png" />
</div>
<div>
<img src="imgs/02.png" />
</div>
<div>
<img src="imgs/03.png" />
</div>
<div>
<img src="imgs/04.png" />
</div>
<div id="dvbig"style="border:1px solid red;">
<div style="float:left;"><!--浮动向左边靠-->
<img src="imgs/05.png" />
</div>
<div style="float:left; margin-left:20px;"><!--浮动向左边靠-->
<img src="imgs/06.png" />
</div>
</div>
<div>
<img src="imgs/07.png" />
</div>
</body>
</html>
12 浮动的问题
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
大家好，你们好，你好，我也好。
下面的俩个DIV没有内容，则会导致第三个DIV会出现混乱排序，需要清除浮动的效果。
<div style="background:red;width:500px;height:200px;float:left;"> </div>
<div style="background:green;width:500px;height:200px;float:right;"> </div>
<div style="background:blue;width:500px;height:200px;clear:both;">
<!--clear:both; 清除浮动，对于有时使用float会导致排序混乱的时候，则需要清除浮动。-->
</div>
</body>
</html>
13. 盒子模型
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<div style="width:300px;height:200px;border:10px solid red ">
<input type="button" name="name" value="按钮"
style="width:100px;height:50px;
border:5px solid blue; margin:50px;"/>
</div>
<!--div层，设置的大小，不包括边框大小，只算空白部分。-->
<!--input，设置的大小，包括边框大小。-->
</body>
</html>
14.框架
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<!--frameset rows="30%,*">
根据此例子，可以对页面进行分块。
<frameset cols="30%,*"> <frame src="08伪选择器.html" />
<frame src="13盒子模型.html" />
</frameset>
<frameset cols="30%,30%,*">
<frame src="13盒子模型.html" />
<frame src="08伪选择器.html" />
<frame src="13盒子模型.html" />
</frameset>
</frameset>--> <frameset rows="30%,70%" cols="50%,50%">
<frame src="13盒子模型.html" noresize/><!--noresize,设置不可以拉动窗口。-->
<frameset cols="30%,*">
<frame src="08伪选择器.html" noresize />
<frame src="13盒子模型.html" noresize />
</frameset>
<noframes>
<body>当浏览器不支持框架时，则显示这个body中内容。</body>
</noframes>
</frameset> </html>
15 介绍JavaScript
1.JavaScript基本语法
2.JavaScript Dom(JavaScript操作html页面)
16 JS基本代码
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<!--<script type="text/javascript"> 如果放在前面，则会卡住页面加载信息。
var newDate = new Date();
alert(newDate.toLocaleDateString());
alert(newDate.toLocaleTimeString());
</script>--> </head>
<body> </body>
</html>
<!--script放在后面再加载，有利于客户体验。让网页页面先加载，再加载JS代码。-->
<script type="text/javascript">
var newDate = new Date();
alert(newDate.toLocaleDateString());
alert(newDate.toLocaleTimeString());
</script>
<script type="text/javascript"> alert('哈哈，我今天又变帅了。');
alert('我今天学习了<' + '/script>');
</script>
<!--如果包含了字符"</script>"，则会出错，使用字符串拼接的方法-->
23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍的更多相关文章
- CSS布局之脱离文档流详解——浮动、绝对定位脱离文档流的区别
1.代码 (1)示例代码1 <!DOCTYPE html> <html lang="zh"> <head> <meta charset=& ...
- 脱离文档流两操作，float和position:absolute的区别
文档流:将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,块状元素独占一行,内联元素不独占一行: CSS中脱离文档流,也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离 ...
- HTML+CSS基础 块级元素div分析 文档流 脱离文档流的方法
块级元素div分析 1.外边距 margin 2.内边距 padding 3.边框 border Div的真实宽度=width+margin-left+margin-right+border*2+ ...
- float 浮动 文档流和文字流区别
关于float属性的脱离文档流的问题 使用float浮动后,元素虽然会脱离文档流,但还处在文本流的位置当中,所以就不会出现重叠的效果吗? 下面我自己试了一下,给两个DIV分别设置了样式,而只给第一个D ...
- div排版+文档流+定位秘诀
由于没有找到自己认为完整的关于普通流.浮动和绝对定位的中文文章,于是鼓起勇气决定自己来写篇. 在普通流中的 Box(框) 属于一种 formatting context(格式化上下文) ,类型可以是 ...
- [转]div与span区别及用法
DIV与SPAN区别及div与san用法篇 接下来了解在div+css开发的时候在html网页制作,特别是标签运用中div和span的区别及用法.新手在使用web标准(div css)开发网页的时候, ...
- div与span区别及用法
DIV与SPAN区别及div与san用法篇 接下来了解在div+css开发的时候在html网页制作,特别是标签运用中div和span的区别及用法.新手在使用web标准(div css)开发网页的时候, ...
- DIV 和 SPAN 区别
DIV 和 SPAN 元素最大的特点是默认都没有对元素内的对象进行任何格式化渲染.主要用于应用样式表(共同点). 两者最明显的区别在于DIV是块元素,而SPAN是行内元素(也译作内嵌元素). 详解:1 ...
- css常用属性总结之 id和class的区别，使用类还是ID?
前面两篇文章我们分别谈到了class和id的相关知识和如何使用,但是在实际项目中,我们该如何抉择,class还是id? 先回顾下两者的区别吧! 1.id具有唯一性,class具有普遍性,所以一个页面同 ...
随机推荐
- 【HTML】KindEditor编辑器在ASP.NET中使用
本文大多内容来自KindEditor官网,自己加工理解后做的一个备份. 编辑器使用方法 1. 下载编辑器 下载 KindEditor 最新版本,下载之后打开 examples/index.html 就 ...
- CSS 强制换行和禁止换行学习
强制换行 1.word-break: break-all; 只对英文起作用,以字母作为换行依据. 2.word-wrap: break-word; 只对英文起作 ...
- hdu 4497 GCD and LCM 数学
GCD and LCM Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=4 ...
- discuz+ecmall+phpcms整合
所需软件 discuzx1.5 (包含ucenter1.5) ecmall2.3 phpcms v9.5 1.先安装discuz1.5 2.然后安装ecmall2.3 3.最后安装phpcms v9. ...
- Android ViewPager 应该及技巧
1. android 中的ViewPager 功能类似于iOS中的scrollView,实现最主要的页面的左右滑动功能.该类存在于Google的兼容包里面,所以在引用时记得在BuilldPath中 ...
- Android创建桌面快捷方式
在桌面上创建特定界面的快捷入口,icon和title根据请求参数命名.在网上收集的一些相关资 料,在使用intent发送广播的时候,一些型号的收集会有问题,如魅族MX,红米,以及华为,使用setCla ...
- iOS开发——实用技术OC篇&单例模式的实实现（ACR&MRC）
单例模式的实实现(ACR&MRC) 在iOS开发中单例模式是一种非常常见的模式,虽然我们自己实现的比较少,但是,系统却提供了不少的到来模式给我们用,比如最常见的UIApplication,No ...
- 终端I/O之终端标识
历史沿袭至今,在大多数UNIX系统中,控制终端的名字是/dev/tty. POSIX.1提供了一个运行时函数,可被用来确定控制终端的名字. #include <stdio.h> char ...
- SVM多分类
http://www.matlabsky.com/thread-9471-1-1.htmlSVM算法最初是为二值分类问题设计的,当处理多类问题时,就需要构造合适的多类分类器.目前,构造SVM多类分类器 ...
- 永远不要在Linux 执行的 10 个最危险的命令
转: http://www.tecmint.com/10-most-dangerous-commands-you-should-never-execute-on-linux/ http://www.l ...