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属性的时候成立单独使用某一条边以下不成立）
1. 一个值的时候表示四个方向的内边距都是这个值
2. 两个值的时候表示上右顺序，左下没有值但是会参照对面的值。
3. 三个值上右下有值左没有值参照右边的值
4. 四个方向都有值
```
<!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;//默认
```
概念：元素的排布从上至下从左到右 块元素每个元素独占一行排斥其他元素。

标准流中的元素分类：
1. 块元素
  
  概念： 块元素每个元素独占一行排斥其他元素
  
  例子：div p form h…
2. 行内元素
  
  概念：可以在一行当中从左至右排布。
  
  例子：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.内部引入css2.内联引入css3.外联引入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:both2.在父元素上 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 表示四个方向的内边距都是50pxpadding: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>