JAVA萌新学习day25 css
一.CSS概念：
CSS :层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应 用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
CSS作用
1. 修饰美化html网页。
2. 外部样式表可以提高代码复用性从而提高工作效率。
3. html内容与样式表现分离，便于后期维护
CSS语法规则
CSS 规则由两个主要的部分构成：（1）选择器（2）一条或多条声明.
1. 选择器通常是您需要改变样式的 HTML 元素。
2. 每条声明由一个属性和一个值组成。
CSS使用方式
- 内联方式
- 内部样式
- 外部样式
优先级：
内联样式>内部样式>外部样式，就近原则。注意：内部样式和外部样式的位置
CSS选择器
基本选择器
- 元素(标签)选择器
- id选择器
- 类(class)选择器
备注:以上基本选择器的优先级从高到低:id >class >标签
属性选择器
input[type='text'] { background-color: pink }
input[type='password'] { background-color: yellow }
font[size] { color: green }
a[href] { color: blue; }
伪元素选择器
<!--静止状态 -->
a:link {color: red;}
<!--悬浮状态 -->
a:hover {color: green;}
<!--触发状态 -->
a:active {color: yellow;}
<!--完成状态 -->
a:visited {color: blue;}
层级选择器
后代选择器
div p{...} 表示div中的p标签，所有的p,后代
div span{....} 表示div中的span标签，包括所有的span，后代
子代选择器
div>span{…} 表示 div中有一个span， span是子代
相邻兄弟 +
通用兄弟 ~
其他选择器
全局选择器
* {
font-size: 35px;
margin: 0;
padding: 0;
}
组选择器
h1,h2 { background-color: red; }
CSS属性
文字属性
文本属性
背景属性
例表属性
尺寸显示轮廓属性
盒模型
概念：是一种分析页面元素的模型思维，主要的分析属性如下:
包含的属性:
-
内容
-
内填充（内边距）
概念：指的是边框到内容的距离 四个方向 上右下左
内边距也算在元素的面积当中
注意：（直接使用padding属性的时候成立 单独使用某一条边 以下不成立）
-
一个值的时候 表示四个方向的内边距 都是这个值
-
两个值的时候 表示上右 顺序， 左下没有值但是会参照对面的值。
-
三个值 上右下有值 左没有值 参照右边的值
-
四个方向都有值
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> div{ width: 400px; height: 400px; background-color: red; padding-top: 10px; padding-right: 15px; padding-bottom: 20px; padding-left: 25px; } </style> </head> <body> <div> 我是div </div> </body> </html>
-
-
边框
概念：元素的边 包括 边的宽度 颜色 样式
边框也算在元素的面积当中
border：1px red solid;//四条边框都是这个样子 border-top:2px green dotted;//可以单独去写一条边 border-color:pink black white yellow;//单独去写一个属性（四个方向） border-style:solid dotted double groove; border-width:5px 6px 7px 8px;<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> div{ height: 400px; width: 400px; background-color: skyblue; /* border: ; */ /* border-top: 1px pink dotted; border-right: 5px yellow double; border: 10px black solid; */ border-style: dashed solid double groove; border-width: 5px 8px 12px 14px; border-color: pink purple springgreen: ; magenta; } </style> </head> <body> <div></div> </body> </html> -
外边距
概念：指的是 元素与元素的距离(同级元素)
margin:10px;//表示四个方向外边距都是10px; margin-top:5px;//某个方向的外边距 .......<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .d1{ height: 200px; width: 200px; background-color: #00FF7F; margin-top: 5px; margin-right: 8px; margin-bottom: 10px; margin-left: 12px; } .d2{ height: 200px; width: 200px; background-color:red; margin: 5px; } </style> </head> <body> <div class="d0"> <div class="d1"></div> <div class="d2"></div> </div> </body> </html>
注意:
在处理元素距离问题的时候：
如果是父子元素距离一般使用 父元素的内边距属性
如果是兄弟元素 则使用外边距 属性
练习题：
div{
height:70px;
width:50px;
padding:10px 20px 30px 15px;
border-widht:8px 5px 4px 10px;
margin-left:30px;
margin-top:50px;
}
定位
-
标准流
position: static;//默认概念：元素的排布 从上至下 从左到右 块元素每个元素独占一行 排斥其他元素。
标准流中的元素分类：
-
块元素
概念： 块元素每个元素独占一行 排斥其他元素
例子：div p form h…
-
行内元素
概念：可以在一行当中从左至右 排布。
例子：span a标签
注意：行内元素的宽高是由其内容决定 并不受宽高属性 影响。简答的说 width height 是对行内元素无效的。
块元素和行内元素的相互转换
注意：当行内元素和块元素转换之后 拥有转换之后的元素效果 比如div如果转换成行内元素 则宽高失效。
//块元素转成行内元素 div{ display:inline; } //行内元素转换成块元素 span{ display:block; }
-
相对定位
position：relative;
概念：指的是元素相对于其原来的位置发生偏移 但是其所在的区域的位置不发生改变
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.d1{
height: 200px;
width: 200px;
background-color: red;
position: relative;
left: 400px;
top: 100px;
}
.d2{
height: 200px;
width: 200px;
background-color: green;
}
</style>
</head>
<body>
<div class="d1"></div>
<div class="d2"></div>
</body>
</html>
绝对定位
概念：当前元素的位置 以最近的已经定位的父元素为参照点 进行定位 如果当前元素没有已经定位的父元素则以body标签为参照。
position:absolute;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.father{
height: 400px;
width: 400px;
background-color: red;
position: relative;
left: 400px;
}
.child{
height: 200px;
width: 200px;
background-color: green;
position: absolute;
left: 40px;
}
</style>
</head>
<body>
<div class="father">
<div class="child"></div>
</div>
</body>
</html>
固定定位
概念：相对于浏览器窗口定位 滚动不发生位置偏移。
position:fixed;
<style>
div{
height: 400px;
width: 150px;
background-color: red;
position: fixed;
color: white;
top: 100px;
}
</style>
练习：在固定定位元素中插入一张图片
浮动
概念：指的是脱离标准流 在最上层展示 没有浮动的元素会在其下面展示。
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dInB9I1h-1576503545639)(1.gif)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WS1ri2YZ-1576503545641)(2.gif)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FdUGNmc6-1576503545643)(3.gif)]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.d1{
height: 300px;
width: 300px;
background-color: red;
float: left;
}
.d2{
height: 200px;
width: 200px;
background-color: springgreen;
float: left;
}
.d3{
height: 150px;
width: 150px;
background-color: blue;
float: left;
}
</style>
</head>
<body>
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
</body>
</html>
清除浮动
概念：清除浮动所带来的影响 并不是清除浮动本身。
方法一：
父元素中 添加 overflow:hidden;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.d0{
border: 3px #0000FF solid;
overflow: hidden;
}
.d1{
height: 200px;
width: 200px;
background-color: #00FF7F;
float: left;
}
.d2{
height: 200px;
width: 200px;
background-color: red;
float: left;
}
</style>
</head>
<body>
<div class="d0">
<div class="d1"></div>
<div class="d2"></div>
</div>
</body>
</html>
方法二：
添加一个同级子元素 样式 clear:both;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.d0{
border: 3px #0000FF solid;
}
.d1{
height: 200px;
width: 200px;
background-color: #00FF7F;
float: left;
}
.d2{
height: 200px;
width: 200px;
background-color: red;
float: left;
}
.clear{
clear: both;
}
</style>
</head>
<body>
<div class="d0">
<div class="d1"></div>
<div class="d2"></div>
<div class="clear"></div>
</div>
</body>
</html>
二.代码部分：
css扩展属性.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
height: 100px;
width: 100px;
background-color: orange;
border: #000000 solid 1px;
border-radius: 20%;
box-shadow:10px 10px 20px gray ;
/*
第一个参数 水平位置偏移
第二个参数 垂直方向偏移
第三个参数 模糊指数
第四个是 颜色
*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
css的引入方式.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- CSS 三种引入方式：
1.内部引入css
2.内联引入css
3.外联引入css
-->
<style>/* 1.内部引入css */
p{
color: pink;
font-size: 70px;
}
</style>
<link rel="stylesheet" href="css/mycss.css" /><!-- 3外联引入css -->
<style ></style>
</head>
<body>
<p>我是一个p标签</p>
<p style="color: red;">我是第二个p标签</p>
<div style="color: aqua;font-size: 70px;">我是一个div</div><!-- 2.内联引入css -->
<span>我是一个span</span>
</body>
</html>
css选择器.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#p1{
color: red;
}
.s1{
color: blue;
}
input[type='text']{
color: red;
}
input[type='submit']{
color: green;
}
font[size='1']{
color: magenta
}
/* 没点击过的 静止的 */
#a1:link {
color: olive;
}
/* 鼠标移入 */
#a1:hover{
color: #FF00FF;
}
/* 点击的时候 */
#a1:active{
color: #008000;
}
/* 点过的 */
#a1:visited{
color: yellow;
}
/* div元素中的p标签 后代选择器 子元素或者子孙元素 */
/* #gf p {
color:royalblue
} */
/* 直接子元素 */
/* #gf>p {
color:royalblue
} */
/* 相邻元素选择器 */
/* #f+p{
color: #FFFF00;
} */
/* 通用兄弟选择器 */
#f~p{
color: #FFFF00;
}
</style>
</head>
<body>
<p id="p1">我是p1</p>
<a href="">超链接</a>
<span class="s1">我是第一个 s1</span>
<span class="s1">我是第二个 s1</span>
<span class="s1">我是第三个 s1</span>
<br/>
<input type="text" />
<input type="password" />
<font size="1">我是font</font>
<form>
<input type="submit" value="提交"/>
</form>
<hr />
<a id="a1" href="http://baidu.com" >百度</a>
<hr />
<p>我是普通p标签</p>
<div id="gf">
<div id="f">
<p>孙子层</p>
</div>
<p>我是div里面的p标签
<i>我是i</i>
</p>
<p>我是另一个兄弟</p>
</div>
</body>
</html>
背景相关样式.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body{
background-image:url(img/1.jpg) ; /*背景图片*/
/* background-color: #0000FF; 背景颜色*/
/* background-repeat: repeat; 背景图重复属性
repeat 水平垂直方向都重复 默认值
repeat-x 水平重复
repeat-y 垂直重复
no-repeat 不重复
*/
background-repeat: no-repeat;
background-position: top ;
}
</style>
</head>
<body >
</body>
</html>
尺寸与轮廓属性.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.div1{
height: 100px;/* 元素内容的宽 */
width: 100px;/* 元素内容的高 */
/* outline: #FFFF00 solid 1px; */
outline-style: dotted;/* 外围线的样式 */
outline-color: #808000;/* 线的颜色 */
outline-width: 10px;/* 线的宽度 */
display: none;
}
.div2{
height: 100px;/* 元素内容的宽 */
width: 100px;/* 元素内容的高 */
/* outline: #FFFF00 solid 1px; */
outline-style: dotted;/* 外围线的样式 */
outline-color: red;/* 线的颜色 */
outline-width: 10px;/* 线的宽度 */
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>
浮动.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/*
清除浮动的两种方式
1.在元素之间添加一个元素 让它 clear:both
2.在父元素上 overflow:hidden;
*/
/* .clear{
clear: both;
} */
.d1{
width: 100px;
height: 150px;
background-color: green;
float: left;
}
.d2{
width: 100px;
height: 100px;
background-color: red;
float: left;
}
.d3{
width: 100px;
height: 100px;
background-color: pink;
float: left;
}
.d4{
width:200px;
height: 200px;
background:orange ;
border: black solid 1px;
}
.d5{
overflow: hidden;
}
</style>
</head>
<body>
<div class="d5">
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
</div>
<!-- <div class="clear"></div> -->
<div class="d4"></div>
</body>
</html>
固定定位.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
height: 120px;
width: 70px;
background-color: orange;
border: #000000 solid 1px;
position: fixed;
}
</style>
</head>
<body>
<div>
性感荷官<br/>
在线发牌<br/>
请联系QQ：<br/>
<p style="color:purple">1657557</p>
</div>
赢在面试之JavaWeb篇(15)
148，AJAX有哪些有点和缺点？
149，AJAX应用和传统Web应用有什么不同？
150，Ajax的实现流程是怎样的？
151，简单说一下数据库的三范式？
152，Java集合框架是什么？说出一些集合框架的优点？
153，Java集合框架的基础接口有哪些？
154，集合框架中的泛型有什么优点？
155，Enumeration和Iterator接口的区别？
156，Iterater和ListIterator之间有什么区别？
157，我们如何对一组对象进行排序？
158，与Java集合框架相关的有哪些最好的实践？
159，什么是事务？
赢在面试之Java框架篇（9）
81，使用Spring框架的好处是什么？
82. ApplicationContext通常的实现是什么?
83，什么是Spring的依赖注入？有哪些方法进行依赖注入
84，什么是Spring beans?
85，解释Spring支持的几种bean的作用域。
86，解释Spring框架中bean的生命周期。
87，在 Spring中如何注入一个java集合？
88，解释不同方式的自动装配 。
89，Spring框架的事务管理有哪些优点？
90.什么是基于Java的Spring注解配置? 给一些注解的例子？
赢在面试之Java持久层（10）
91，什么是ORM？
92，Hibernate中SessionFactory是线程安全的吗？Session是线程安全的吗（两个线程能够共享同一个Session吗）？
93，Session的save()、update()、merge()、lock()、saveOrUpdate()和persist()方法分别是做什么的？有什么区别？
94，阐述Session加载实体对象的过程。
95，MyBatis中使用#和$书写占位符有什么区别？
96，解释一下MyBatis中命名空间（namespace）的作用。
97、MyBatis中的动态SQL是什么意思？
98，JDBC编程有哪些不足之处，MyBatis是如何解决这些问题的？
99，MyBatis与Hibernate有哪些不同？
100，简单的说一下MyBatis的一级缓存和二级缓存？
赢在面试之数据库篇（11）
101，查询课程1的成绩比课程2的成绩高的所有学生的学号
102，查询平均成绩大于60分的同学的学号和平均成绩
103，查询所有同学的学号、姓名、选课数、总成绩
104，查询姓“张”的老师的个数
105，查询没学过“张三”老师课的同学的学号、姓名
106，查询同时学过课程1和课程2的同学的学号、姓名
107，查询学过“李四”老师所教所有课程的所有同学的学号、姓名
108，查询课程编号1的成绩比课程编号2的成绩高的所有同学的学号、姓名
109，查询所有课程成绩小于60分的同学的学号、姓名
110，查询至少有一门课程与学号为1的同学所学课程相同的同学的学号和姓名
赢在面试之数据库篇（12）
111、把“sc”表中“王五”所教课的成绩都更改为此课程的平均成绩
112、查询和编号为2的同学学习的课程完全相同的其他同学学号和姓名
113、删除学习“王五”老师课的sc表记录
114、向sc表中插入一些记录，这些记录要求符合以下条件：
将没有课程3成绩同学的该成绩补齐, 其成绩取所有学生的课程2的平均成绩
115、按平平均分从高到低显示所有学生的如下统计报表：
-- 学号,企业管理,马克思,UML,数据库,物理,课程数,平均分
116、查询各科成绩最高分和最低分：以如下形式显示：课程号，最高分，最低分
117、按各科平均成绩从低到高和及格率的百分数从高到低顺序
118、查询如下课程平均成绩和及格率的百分数(用"1行"显示):
企业管理（001），马克思（002），UML （003），数据库（004）
119、查询不同老师所教不同课程平均分, 从高到低显示
120、查询如下课程成绩均在第3名到第6名之间的学生的成绩：
-- [学生ID],[学生姓名],企业管理,马克思,UML,数据库,平均成绩
赢在面试之Java多线程（13）
121，什么是线程？
122，线程和进程有什么区别？
123，如何在Java中实现线程？
124，Java 关键字volatile 与 synchronized 作用与区别？
125，有哪些不同的线程生命周期？
126，你对线程优先级的理解是什么？
127，什么是死锁(Deadlock)？如何分析和避免死锁？
128，什么是线程安全？Vector是一个线程安全类吗？
129，Java中如何停止一个线程？
130，什么是ThreadLocal?
131，Sleep()、suspend()和wait()之间有什么区别？
132，什么是线程饿死，什么是活锁？
133，什么是Java Timer类？如何创建一个有特定时间间隔的任务？
134，Java中的同步集合与并发集合有什么区别？
135，同步方法和同步块，哪个是更好的选择？
136，什么是线程池？ 为什么要使用它？
137，Java中invokeAndWait 和 invokeLater有什么区别？
138，多线程中的忙循环是什么?
赢在面试之Java泛型篇（14）
139. Java中的泛型是什么 ? 使用泛型的好处是什么?
140，Java的泛型是如何工作的 ? 什么是类型擦除 ?如何工作？
141，你可以把List<String>传递给一个接受List<Object>参数的方法吗？
142，如何阻止Java中的类型未检查的警告?
143，Java中List<Object>和原始类型List之间的区别?
144，编写一段泛型程序来实现LRU缓存?
145，Array中可以用泛型吗?
146，如何编写一个泛型方法，让它能接受泛型参数并返回泛型类型?
147，C++模板和java泛型之间有何不同？
赢在面试之JavaWeb篇(15)
148，AJAX有哪些有点和缺点？
149，AJAX应用和传统Web应用有什么不同？
150，Ajax的实现流程是怎样的？
151，简单说一下数据库的三范式？
152，Java集合框架是什么？说出一些集合框架的优点？
153，Java集合框架的基础接口有哪些？
154，集合框架中的泛型有什么优点？
155，Enumeration和Iterator接口的区别？
156，Iterater和ListIterator之间有什么区别？
157，我们如何对一组对象进行排序？
158，与Java集合框架相关的有哪些最好的实践？
159，什么是事务？
赢在面试之Java框架篇（9）
81，使用Spring框架的好处是什么？
82. ApplicationContext通常的实现是什么?
83，什么是Spring的依赖注入？有哪些方法进行依赖注入
84，什么是Spring beans?
85，解释Spring支持的几种bean的作用域。
86，解释Spring框架中bean的生命周期。
87，在 Spring中如何注入一个java集合？
88，解释不同方式的自动装配 。
89，Spring框架的事务管理有哪些优点？
90.什么是基于Java的Spring注解配置? 给一些注解的例子？
赢在面试之Java持久层（10）
91，什么是ORM？
92，Hibernate中SessionFactory是线程安全的吗？Session是线程安全的吗（两个线程能够共享同一个Session吗）？
93，Session的save()、update()、merge()、lock()、saveOrUpdate()和persist()方法分别是做什么的？有什么区别？
94，阐述Session加载实体对象的过程。
95，MyBatis中使用#和$书写占位符有什么区别？
96，解释一下MyBatis中命名空间（namespace）的作用。
97、MyBatis中的动态SQL是什么意思？
98，JDBC编程有哪些不足之处，MyBatis是如何解决这些问题的？
99，MyBatis与Hibernate有哪些不同？
100，简单的说一下MyBatis的一级缓存和二级缓存？
赢在面试之数据库篇（11）
101，查询课程1的成绩比课程2的成绩高的所有学生的学号
102，查询平均成绩大于60分的同学的学号和平均成绩
103，查询所有同学的学号、姓名、选课数、总成绩
104，查询姓“张”的老师的个数
105，查询没学过“张三”老师课的同学的学号、姓名
106，查询同时学过课程1和课程2的同学的学号、姓名
107，查询学过“李四”老师所教所有课程的所有同学的学号、姓名
108，查询课程编号1的成绩比课程编号2的成绩高的所有同学的学号、姓名
109，查询所有课程成绩小于60分的同学的学号、姓名
110，查询至少有一门课程与学号为1的同学所学课程相同的同学的学号和姓名
赢在面试之数据库篇（12）
111、把“sc”表中“王五”所教课的成绩都更改为此课程的平均成绩
112、查询和编号为2的同学学习的课程完全相同的其他同学学号和姓名
113、删除学习“王五”老师课的sc表记录
114、向sc表中插入一些记录，这些记录要求符合以下条件：
将没有课程3成绩同学的该成绩补齐, 其成绩取所有学生的课程2的平均成绩
115、按平平均分从高到低显示所有学生的如下统计报表：
-- 学号,企业管理,马克思,UML,数据库,物理,课程数,平均分
116、查询各科成绩最高分和最低分：以如下形式显示：课程号，最高分，最低分
117、按各科平均成绩从低到高和及格率的百分数从高到低顺序
118、查询如下课程平均成绩和及格率的百分数(用"1行"显示):
企业管理（001），马克思（002），UML （003），数据库（004）
119、查询不同老师所教不同课程平均分, 从高到低显示
120、查询如下课程成绩均在第3名到第6名之间的学生的成绩：
-- [学生ID],[学生姓名],企业管理,马克思,UML,数据库,平均成绩
赢在面试之Java多线程（13）
121，什么是线程？
122，线程和进程有什么区别？
123，如何在Java中实现线程？
124，Java 关键字volatile 与 synchronized 作用与区别？
125，有哪些不同的线程生命周期？
126，你对线程优先级的理解是什么？
127，什么是死锁(Deadlock)？如何分析和避免死锁？
128，什么是线程安全？Vector是一个线程安全类吗？
129，Java中如何停止一个线程？
130，什么是ThreadLocal?
131，Sleep()、suspend()和wait()之间有什么区别？
132，什么是线程饿死，什么是活锁？
133，什么是Java Timer类？如何创建一个有特定时间间隔的任务？
134，Java中的同步集合与并发集合有什么区别？
135，同步方法和同步块，哪个是更好的选择？
136，什么是线程池？ 为什么要使用它？
137，Java中invokeAndWait 和 invokeLater有什么区别？
138，多线程中的忙循环是什么?
赢在面试之Java泛型篇（14）
139. Java中的泛型是什么 ? 使用泛型的好处是什么?
140，Java的泛型是如何工作的 ? 什么是类型擦除 ?如何工作？
141，你可以把List<String>传递给一个接受List<Object>参数的方法吗？
142，如何阻止Java中的类型未检查的警告?
143，Java中List<Object>和原始类型List之间的区别?
144，编写一段泛型程序来实现LRU缓存?
145，Array中可以用泛型吗?
146，如何编写一个泛型方法，让它能接受泛型参数并返回泛型类型?
147，C++模板和java泛型之间有何不同？
</body>
</html>
盒模型-边框.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
height: 200px;
width:200px;
/* border: purple dotted 10px; 边框线的颜色 线的样式 线的宽度
border-top:pink solid 1px;
border-right: orange double 2px;
border-bottom: black dotted 3px;
border-left: #008000 solid 4px; */
border-style: solid double dotted solid;
border-color: pink orange yellow bisque;
border-width: 10px 15px 20px 25px;
/* div的面积
s=宽*高
宽=左边框宽+左内边距+width+右内边距+右边框宽
高=上边框width+上内边距+height+下内边距+下边边框width
*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
盒模型-内边距.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
height: 100px;
width: 100px;
background-color: #FF0000;
border: black solid 1px;
/* padding-left: 50px;
padding-top: 49px;
padding-right: 48px;
padding-bottom: 47px; */
/* padding: 49px 48px 47px 50px; 上右下左 顺序*/
/* padding: 50px; 四个方向的内边距都是50px*/
padding: 50px 49px 48px;
/* padding:50px 表示四个方向的内边距都是50px
padding:50px 49px; 表示上下 分别是 50px 和 49px 底边参照上班 左边参照右边
padding:50px 49px 48px 表示 上内边距50px 右边距49px 底边距48px 左边参照右边49px
*/
}
</style>
</head>
<body>
<div>
我是一个div
</div>
</body>
</html>
绝对定位.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.d1{
width: 50px;
height: 50px;
background-color: red;
border: #000000 solid 1px;
position: absolute;
left: 10px;
bottom: 10px;
}
.con{
width: 100px;
height: 100px;
background-color: lightseagreen;
border: #000000 solid 1px;
position: relative;
left: 100px;
}
</style>
</head>
<body>
<div class="con">
<div class="d1"></div>
</div>
</body>
</html>
列表元素.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
ul{
/* list-style-type: circle;
list-style-image: url(img/1.jpg);*/
/* list-style-type: none; */
list-style-position: inside;
}
</style>
</head>
<body>
<ul>
<li>大米</li>
<li>面</li>
<li>猪肉</li>
<li>羊肉</li>
<li>牛肉</li>
</ul>
</body>
</html>
外边距.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 100px;
height:100px;
background-color: #008000;
border: #008000 solid 1px;
}
.d1{ padding: 20px;
margin-bottom: 200px;
}
.d2{
margin-top: 10px;
}
.d1s{
width: 50px;
height: 50px;
background: pink;
/* margin: 10px 20px 30px 40px; */
margin: 10px 20px 30px;
/* margin-top: ;
margin-right: ;
margin-bottom: ;
margin-left: ; */
}
</style>
</head>
<body>
<div class="d1">
<div class="d1s"></div>
</div>
<div class="d2">
</div>
aaa
</body>
</html>
相对定位.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.d1{
width: 100px;
height: 100px;
background-color: orange;
border: red solid 1px;
position: relative;
left: 100px;
}
.d2{
width: 100px;
height: 100px;
background-color: orange;
border: red solid 1px;
position: relative;
bottom: 102px;
}
.d3{
width: 100px;
height: 100px;
background-color: orange;
border: red solid 1px;
}
</style>
</head>
<body>
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
</body>
</html>
字体样式.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.p1{
color: #008000;/*字体颜色 */
font-size: 50px;/* 字体大小 */
font-family: 楷体;/* 字体 */
font-style: oblique ;/* 斜不斜 */
font-weight: 900;/* 粗细 */
}
.p2{
color: red;
/* font:oblique 900 50px 楷体 ; */
text-align: center;
word-spacing:1rem;/* 写中文不认识 英文标识 单词之间的距离 */
letter-spacing:20px;/* 一个一个字母之间的距离 中文可以使用 */
line-height: 100px;
}
div{
width: 100px;
height: 100px;
border: 1px black solid;
}
div p{
text-indent: 50%; /* 首行缩进*/
text-decoration: line-through;
}
</style>
</head>
<body>
<p class="p1">我是一个单纯的p标签</p>
<p class="p2">Hello world这里是中文
<br/>
我是第二行
</p>
<div>
<p>我是div里面的p标签</p>
</div>
</body>
</html>
文档流.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--
文档流 标准流：
块元素：每个元素独占一水平行 不和其他元素同在 div p h 都是块元素
行内元素：行内元素 和其他行内元素 在一个水平行 span a 都是行内元素
块元素和行内元素的转化：
display:block; 将行内元素转化成块元素
display:inline; 将块元素转化成行内元素；
行内元素的宽高由其内容决定
-->
<style>
div{
height: 100px;
width: 100px;
background-color: orange;
border: #0000FF solid 1px;
display: inline;
}
span{
width: 50px;
height: 50px;
background-color: #20B2AA;
display: block;
}
</style>
</head>
<body>
<div>qqqq</div>
<div>wwww</div>
<span>s1</span>
<span>s2</span>
</body>
</html>
淘宝模板.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.top{
width: 1900px;
height:100px;
background-color: yellow;
border: #000000 solid 1px;
}
.mheight{
height: 700px;
}
.left{
background-color: red;
width: 500px;
float: left;
border: #000000 solid 1px;
}
.center{
width: 880px;
background-color: #008000;
float: left;
border: #000000 solid 1px;
}
.right{
width: 500px;
background-color: firebrick;
float: left;
border: #000000 solid 1px;
}
.foot{
width: 1900px;
height:200px ;
background-color: pink;
}
.main{
overflow: hidden;
}
</style>
</head>
<body>
<div class="top">top</div>
<div class="main">
<div class="left mheight ">left</div>
<div class="center mheight">center</div>
<div class="right mheight">right</div>
</div>
<div class="foot"></div>
</body>
</html>
470
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
