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>
View Code
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>
View Code
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>
View Code
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>
View Code
<!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>
View Code
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.cssdiv {background-color: yellow;width: 500px;height: 300px;}02.cssdiv {border:1px solid red;} all.cs@import url(01.css); @import url(02.css);
View Code
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>
View Code
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>
View Code
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>
View Code
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>
View Code
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>
View Code
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>",则会出错,使用字符串拼接的方法-->
View Code
转载于:https://www.cnblogs.com/Time_1990/p/4049174.html
23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍...相关推荐
- css三种定位都脱离文档流了吗,CSS布局之脱离文档流详解——浮动、绝对定位脱离文档流的区别...
1.代码 (1)示例代码1 CSS布局之脱离文档流详解--浮动.绝对定位脱离文档流的区别 .left { width: 300px; height: 500px; background: red; f ...
- CSS布局之脱离文档流详解——浮动、绝对定位脱离文档流的区别
准确的说,float浮动属于半脱离文档流,1.float浮动跟position:absolute一样拥有脱离文档流的功能,但是float虽然脱离了文档流但是仍然会占据位置,其他的文本内容会按照顺序继续 ...
- CSS使用display:incline与float:left的区别:脱离文档流 参差不齐
脱离文档流 对元素设置display:inline-block ,元素不会脱离文本流, 而float就会使得元素脱离文本流,且还有父元素高度坍塌的效果 参差不齐:display的空隙可以使用font- ...
- JavaScript-页面布局-div布局-盒子模型
文章目录 1.盒子模型 2.定位方式 3.排列属性-float和clear 4.块和内联属性 5.作者答疑 在使用Html构建界面时,最关键的标签是div,这是一个有着各种属性的块状标签,能够以绝 ...
- 文档流,浮动,定位的区别和处理
1.文档流 - 所有的元素默认情况下都是在文档流中存在的 - 文档流是网页的最底层 - 元素在文档流中的特点: - 块元素 1.默认宽度 ...
- div与span区别及用法
以下是在没有对开发网页页面设置css样式时候情况下,系统默认情况下的介绍 div与span区别 div占用的位置是一行, span占用的是内容有多宽就占用多宽的空间距离,说明如下图 分析:从上图很容易 ...
- 文档流及其特性 块级元素与行内元素的区别 浮动的清除方法(解决浮动塌陷)
标准文档流 web页面的制作,是一个"流",必须从上到下,像是"织毛衣". 标准文档流的特性 1.空白折叠现象 无论有多少个空格,换行,tab,都会折叠成一个空 ...
- css span 右端对齐_CSS标准文档流
web页面的制作,是个"流",像水流一样,必须从上往下,一点点的编织,不像画画,可以这个地方画一个,另一个地方画一个,随意而为. 标准文档流的一些微观现象 1. 空白折叠现象 1) ...
- 5中div标签有没有url属性_[网页编程]-03 CSS 常用属性
字体处理常用属性 <!DOCTYPE html> <html><head><meta charset="utf-8"><tit ...
- swift和oc区别----属性部分(参考官方swift2.1文档)
对于实用过OC的人来说实用swift上手时非常容易的,swift包括了oc的大部分功能,但是swift毕竟是一门新的编程语言,它和OC还是 有很多不同的地方,而且提供了不少新功能,所以本人在读swif ...
最新文章
- Sql PATINDEX 函数
- jdbc mysql 函数 慢_java jdbc addBatch()提交mysql速度过慢
- 第6天-css笔记 三大定位-定位 子绝父相 与精灵图
- android daemon 程序,(转)Android App Daemon
- ant更改主题色报错Inline JavaScript is not enabled. Is it set in your options? vue ant主题色更改 vue-cli3
- 连CEO都不香了?这些互联网大佬接连辞任
- centos6 与 7 其中的一些区别
- ceph对象存储ceph-deploy部署记录
- 46.贪心算法练习: 区间合并
- 韩犯罪团伙雇朝鲜***从中国发动***
- eps如何建立立体白模_EPS 三维测图系统(垂直摄影)快速入门手册.pdf
- 专家系统是一种智能计算机软件系统,人工智能习题答案-第6篇-专家系统.pdf
- 看完这个,让你分分钟搞定罗盘与加计校准!
- vs code中英文标点符号自动更改
- 华硕T100 安装linux,华硕T100重装win10系统教程
- Python爬虫与信息提取(八)将新浪热搜排名导入数据库
- 默克推进下一代抗体药物偶联物疗法;美国FDA受理君实生物特瑞普利单抗治疗鼻咽癌的上市申请 | 医药健闻...
- 边框样式(border-style)、边框圆角(border-radius)以及媒体查询(@media)
- 2017年全球医疗器械公司TOP100分析表(转载)
- Scala之类型参数化:Type Parameterization
热门文章
- java end_Fabric学习笔记(七) - fabric-sdk-java End2endIT运行
- 买“背包“吗?送“手臂”的那种!卡耐基梅隆大学可穿戴机械臂问世
- npm报错Beginning October 4, 2021, all connections to the npm registry - including for package installa
- CHM文件打不开或者提示的解决办法
- IPhone 日历提醒
- C语言,最新猴子摘桃(递归方法)
- 几个Python小案例, 爱上Python编程!
- 戴尔计算机无法安装Win10,dell电脑安装win10 识别不了硬盘
- 工欲善其事必先利其器-SpringBoot源码研究之源码编译
- python字典保存为文件_关于python:如何将字典列表保存到文件中?