aoai0959-CSDN博客

转载课时138.清除浮动方式六

转载于:https://www.cnblogs.com/luckyshuangshuang/p/9192317.html

2018-06-17 11:01:00 142

转载课时137.清除浮动方式五

我们之前所讲的隔墙法虽然可以清除浮动，但是，它没有任何语义，我们推荐使用css来更改样式，所以我们更推荐使用伪类选择器来改变样式的方法。这就符合我们前端开发结构和样式分离的思想。转载于:https://www.cnblogs.com/luckyshuangshuang/p/9192283.html...

2018-06-17 10:47:00 135

转载课时136.伪元素选择器（掌握）

有没有什么方式是我们推崇使用的一种方式呢？确实有一种方式可以如果我们想去掌握这种方式，我们先要去掌握一个知识点转载于:https://www.cnblogs.com/luckyshuangshuang/p/9188714.html...

2018-06-17 10:33:00 161

转载课时135.清除浮动方式四（理解）

这节课来学习内墙法，无论是外墙法还是内墙法，它的墙指的就是块级元素，只不过额外添加的块级元素它所处的位置不同。我们的外墙法是将块级元素添加到两个div之间，而我们的内墙法是要将块级元素写到我们第一个盒子所有元素的最后。我们使用外墙法的时候是没有后面那个红色的部分的为什么是这样？因为外墙法是不能够撑起第一个盒子的高度的。我们发现外墙法的高度是0 ...

2018-06-15 19:05:00 121

转载课时134.清除浮动方式三（理解）

我们接下来学习的这几种浮动方式我们不用去理解它，因为它中间有一些知识点我们没有学，所以我们只要背诵下来就行了。等学完了一些相关的知识点以后我们再回来看一下细节。我们从刚才的页面拷贝一份代码，然后默认情况下不浮动是这个样子然后将浮动元素打开，默认情况下是长的这个样子然后我们想清除浮动但是现在我们有一个需求：不能给盒子设置高度，并且要让第二个盒子的margin属性...

2018-06-15 18:43:00 141

转载课时133.margintop失效原因（理解）

我们之前讲过如果只有子元素设置了margin top而父元素没有边框则会跟着被顶下来的。而我们怎么解决这个问题呢？就是给父元素设置一个边框而为什么我们在第二个浮动的盒子设置边框没有用呢？应为第一个盒子浮动了以后，第二个盒子前面就没有元素了，就默认是body父元素了，所以我们如果不给父元素设置边框就会被顶下来。而我们给body设置边框仅仅是为了演示一下这个现象，因为...

2018-06-15 18:11:00 171

转载课时132.清楚浮动方式二（理解）

我们第一种方式不推荐大家使用，有没有一种方式可以不用设置高度，又不让第二个元素去找第一个元素呢？我们来打开w3c官方文档，我们发现元素有一个clear属性，这个属性就能保证既不让我们元素设置高度，又不让我们第二个元素去找第一个元素。这个clear属性一共有四个取值，left,right,both,none left是告诉元素不要去找前面左浮动的那一个元素 both是告诉不要去...

2018-06-15 17:41:00 100

转载课时131.清楚浮动方式一（理解）

我们先来设置两个div元素，然后分别给它们设置背景颜色。然后我们再来给文字设置背景颜色，发现div的背景颜色被覆盖掉了。由于p是块级元素，它的宽度与它的父元素是同宽的，所以它的背景颜色盖住了div的背景颜色。为了能够看到p的背景颜色，我们给p的宽度改一改，改为100px。然后现在我们想让div1中的p和div2中的p都左浮，我们发现变成了如下都样式。 ...

2018-06-15 17:13:00 111

转载课时130.浮动元素高度问题

在标准流中我们学习过，内容的高度可以撑起盒子的高度。然后我们先设置一个div，然后清楚一切的内外边距，里面嵌套一个p元素，我们没有给div设置宽度，默认是和父元素同宽的，但是没有高度，我们给p元素设置一个高度和宽度，然后发现div也有了高度，那么就是div是被内容给撑起来的高度。然后我们给p加一个浮动，发现盒子还是有宽度和高度，但是父元素div此时此刻就没有高度了。 ...

2018-06-15 16:32:00 107

转载课时109.外边距合并现象（掌握）

我们先写一个案例，通过案例来了解它们之间的水平距离就是两个间距的和我们看完水平再来看垂直方向在默认布局的垂直方向上，默认情况下外边距是不会叠加的，会出现合并现象，谁的外边距比较大就听谁的转载于:https://www.cnblogs.com/luckyshuangshuang/p/9182739.html...

2018-06-14 14:06:00 105

转载课时108.外边距属性（掌握）

1.什么是外边距？标签和标签之间的距离就是外边距 2.格式 2.1非连写 margin-top: margin-right: margin-bottom: margin-left: 然后我们发现span并没有宽度和高度，因为span是行内元素，没有办法设置宽高，所以我们将行内元素改为行内块元素，添加一条代码：display:inline-block; 发现有三...

2018-06-14 13:32:00 154

转载课时107.内边距属性（掌握）

1.什么是内边距？边框和内容之间的距离就是内边距 2.格式 2.1非连写 padding-top: padding-right: padding-bottom: padding-left: 2.2连写 padding:上右下左; 注意点 1.这三个属性的取值省略时的规律上右下左 > 上右下>左边的取值和右...

2018-06-14 12:18:00 170

转载课时106.边框练习（理解）

让我们做出来如下的样式： 1.首先看下有几个边框，就做几个div，用简单方法div.box$*6 tab键 2.然后给它们设置宽高 3.然后依此来做边框第一个：有四种方法，第一种最简单第二个：有两种方法，第二种简单第三个：第四个：第五个：第六个：转载于:https://www.cnblogs.com/luckys...

2018-06-13 20:08:00 124

转载课时105.边框属性下（掌握）

2.3连写（分别设置四条边的边框） border-width:上右下左; border-style:上右下左; border-color:上右下左; 注意点： 1.这三个属性的取值是按顺时针来赋值的也就是按照上右下左来赋值，而不是按照日常生活中的上下左右 2.这三个属性的取值省略时的规律 2.1上右下左 >...

2018-06-13 18:42:00 108

转载课时104.边框属性上（掌握）

这节课我们还会再来介绍几个属性，然后都介绍完了，我们来介绍盒模型 1.什么是边框？边框就是环绕在标签宽度和高度周围的线条这就是边框 2.边框属性的格式 2.1连写（同时设置四条边的边框） border:边框的宽度边框的样式边框的颜色; 快捷键： bd+ border:1px solid #000; 2.2连写（分别设置四条边的边...

2018-06-13 18:11:00 95

我们这节课来介绍一个和背景图片相关的东西，精灵图 1.设么是css精灵图？ css精灵图是一种图像合成技术 2.css精灵图作用可以减少请求的次数，以及可以降低服务器处理压力 3.如何使用css精灵图 css的精灵图需要配合背景图片和背景定位来使用需要用到firework这个软件转载于:https://www.cnblogs.com/luckyshuangshuan...

2018-06-13 11:52:00 101

转载课时101.背景图练习（理解）

要将第二个div嵌套进第一个div中去如果以后我们看到一张图片是由多张图片拼接的，那么就是用到div的嵌套，我们这个练习是用大的div嵌套一个小的div，再将小div定位到底部。转载于:https://www.cnblogs.com/luckyshuangshuang/p/9176689.html...

2018-06-13 11:02:00 112

转载课时100.背景图片和插入图片区别（掌握）

快捷键补充： bc background-color:; bibackground-image:; bgrbackground-repeat:; gpbackground-position:; babackground-attachment:; bg +background：#fff url() 0 0 no-repeat; 到这里属性基本就...

2018-06-13 10:18:00 400

转载课时99.背景关联和缩写（理解）

1.背景属性缩写的样式 background:背景颜色背景图片平铺方式关联方式定位方式; 这是开始的写法，然后我们可以缩写两者之间没有任何的区别 2.注意点： background属性中，任何一个属性都可以被省略，所以我们经常写以下的这个代码background:#FFF;这样写是可以的，或者，background:url();可以写其中的一个，都无所谓。 ...

2018-06-13 09:10:00 148

转载课时98.背景定位下（掌握）

我们来看控制背景图片的位置，在企业开发中用在什么地方呢？1.我们打开一个网站，如盛大游戏，保存它的背景图到本地 http://www.sdo.com/ 我们先点击检查，查看背景图的地址然后将地址复制到地址栏中然后将图片保存到本地工程的images文件夹中然后在网页中先用background-image打开发现图片不能完全显示，然后我们用<im...

2018-06-13 07:54:00 92

转载课时97.背景定位上（掌握）

注意点：同一个标签可以同时设置背景颜色和背景图片，如果颜色和图片同时存在，那么图片会覆盖颜色，但凡给我们的标签设置了背景图片以后，我们发现这个图片一直在左上角，我如果不想让它在左上角应该怎么办呢？这就要用到我们这节课的内容：background-position。 1.如何控制背景图片的位置？在CSS中有一个叫做background-position：属性，就是专门用于控制...

2018-06-13 02:27:00 87

转载课时96.背景平铺（掌握）

1.如何控制背景图片的平铺方式？在CSS中有一个background-repeat属性，就是专门用于控制背景图片的平铺方式的取值： repeat 默认，在水平和垂直都需要平铺 no-repeat 在水平和垂直都不需要平铺 repeat-x 只在水平方向平铺 repeat-y 只在垂直方向平铺应用场景：先看原理图片可以通过...

2018-06-12 22:28:00 123

转载课时95.背景图片（掌握）

1.如何设置背景图片？在css中有一个叫做background-image:url();的属性，就是专门用于设置背景图片的。注意点： 1.图片的地址必须放在url()中，图片的地址是本地的地址，也可以是网络的地址 2.如果图片的大小没有标签的大小大，那么会自动在水平和垂直方向平铺和填充 3.如果网页上出现了图片，那么浏览器会再次发送请求获取图片。我们先将...

2018-06-12 21:55:00 98

转载课时94.背景颜色（掌握）

1.如何设置标签的背景颜色？在CSS中有一个background-color：属性，就是专门用来设置标签的背景颜色的取值：具体单词 rgb rgba 十六进制我们来依次验证一下转载于:https://www.cnblogs.com/luckyshuangshuang/p/9175072.html...

2018-06-12 21:10:00 75

转载课时93.百度首页（理解）

这节课来做一个百度首页的实例转载于:https://www.cnblogs.com/luckyshuangshuang/p/9174819.html

2018-06-12 20:00:00 86

转载课时92.CSS元素显示模式转换（掌握）

我们之前学习的显示模式都可以不用记忆，因为这节课我们要学习转换，我们可以任意来进行一个转换的，上面这些东西有一个了解就行了。所有的标签都有一个属性叫做display，display的中文含义就是显示的意思。 1.如何转换CSS元素的显示模式？设置元素的display属性 2.display的值 block 块级 inline 行内 inline-block ...

2018-06-12 18:34:00 119

转载课时91.CSS元素显示模式（掌握）

在HTML中HTML将所有的标签分为两类，分别是容器级和文本级在CSS中CSS也将所有的标签分为两类，分别是块级元素和行内元素 1.什么是块级元素，什么是行内元素？块级元素会独占一行行内元素不会独占一行块级元素容器级标签都是块级元素还要加上一个p p div h ul ol dl li dt dd 行内元素文本级...

2018-06-12 17:30:00 145

转载课时90.div和span（掌握）

为什么在这里讲解div和span呢，而不在html中讲解呢？因为在我们的开发中div和span一般是配合css来使用的，来完成一定的效果，来设置一些属性，在前面我们没有学习css，所以体会不到它的效果。 div和span都可以把信息独立称一个小小都区域。 1.什么是div？作用：一般用于配合css完成网页都基本布局如何快速打出以下样式？ <div class="h...

2018-06-12 16:49:00 129

转载课时89.CSS三大特性练习（理解）

给大家补充一点：通配符是不参与权重计算的，因为通配符的权重是0，而权重只计算id，类，标签，将来还有一种，到后面说。练习1 直接选中和间接选中的，必然要听直接选中的。练习2 直接选中一共有两个，直接比较这两个直接选中的权重大小，听从权重大的。练习3 在比较两个都是直接选中时，看哪个权重大则选哪个。练习4 练习5 练习6 转载于:http...

2018-06-12 14:55:00 75

转载课时88.权重问题（掌握）

1.什么是优先级的权重？作用：当多个选择器混合在以前使用时，我们可以通过计算权重来判断谁的优先级最高。三个选择器都是直接选中p标签 2.权重问题的计算规则 2.1首先先计算选择器中有多少个id，id多的选择器优先级最高 2.2如果id的个数一样，那么再看类名的个数，类名个数多的优先级最高 .box1 .box2{ 　　　　　　color:blue; }这个...

2018-06-12 13:56:00 173

转载课时87. !important（掌握）

1.什么是important 作用：用于提升某个直接选中标签的选择器中的某个属性的优先级，可以将被指定的属性的优先级提升为最高。注意点： 1.important只能用于直接选中，不能用于间接选中 p{ 　　color:red !important; 分号写在最后 } 直接将p标签选择器提升为最高 2.通配符选择器选中的标签也是直接选中的分析：通配符选择器会拿...

2018-06-12 13:01:00 127

转载课时38.表格标签的属性（了解）

1.宽度和高度的属性可以给table标签和td标签使用（tr标签不能使用） 2.水平对齐和垂直对齐的属性其中水平对齐可以给table标签和tr标签和td标签使用垂直对齐只能给tr标签和td标签使用 3.外边距和内边距属性只能给table标签使用补充上节课内容： 1.1表格的宽度和高度默认是按照内容的尺寸来调整的也可以通过给table标签设置width/h...

2018-06-12 12:25:00 104

转载课时37.表格标签基本使用（理解）

表格标签是我们一个时代都代表，曾经在过去一段时间，我们大部分网站都是用表格来做的。 1.什么是表格标签？表格标签的作用：用来给一堆数据添加表格语义，其实表格是一种数据的展现形式，当数据量非常大的时候，表格这种展现形式被认为是最为清晰的一种展现形式。 2.表格标签格式：其实表格标签中的table代表整个表格，也就是一对table标签就是一个表格。其实表格标签中的tr标签...

2018-06-12 11:55:00 130

转载课时36.定义列表练习（了解）

在这里我们介绍一个之前从来没有了解过都语法： dl>dt+dd 按下tab键，因为dt和dd是同一级别的，因为它们的父标签都是dl标签转载于:https://www.cnblogs.com/luckyshuangshuang/p/9172324.html...

2018-06-12 11:43:00 147

转载课时35.定义列表（掌握）

1.定义列表的作用： 1.1给一堆数据添加列表语义 1.2先通过dt标签定义列表中的所有标题，然后再通过dd标签给每个标题添加描述信息 2.定义列表的格式：我们可以将dt和dd看做一个整体其实dt和dd都是英文的缩写 dt是英文difinition title的缩写，所以dt的含义就是用来定义列表中的标题 dd是英文difinition description的...

2018-06-12 11:38:00 245

转载课时34.有序列表（理解）

什么是有序列表？有序列表的作用：给一堆数据添加列表语义，并且这一堆数据中所有的数据都有先后之分。有序列表格式： <ol> 　　　　<li></li> </ol> 其它用法和ul都差不多，也就是应用场景/注意点都和ul差不多 <ol type="A/a/I/i"> 　　　　　　<li></li...

2018-06-12 11:30:00 319

转载课时33.无序列表练习3（理解）

上节课做了第一个练习，这节课我们来完成第二个练习（多级界面）做之前先分析： 1.物品清单是这个界面的标题，可以通过<h1>标签来做。 2.蔬菜，水果同属于物品清单里的，并且蔬菜，水果谁先谁后都无所谓，所以是无序列表，而蔬菜里面又包含这几样，所以它们又是一个无序列表，水果同理，这是无序列表中又包含无序列表，这是这节课讲解都重点。分析：这个li标签除了可以添加其它标签...

2018-06-12 11:26:00 163

转载课时32.无序列表练习2（理解）

这节课我们主要通过在li标签中添加其它标签让界面更加丰富多彩，这节课我们来做两个练习。前面我们说过ul中最好只放li标签，但是在企业开发中，li标签中的内容可能会很复杂，所以我们可以继续在li标签中添加其它的标签来丰富我们的界面。总结： 1.一定要记住ul标签中最好只放li标签 2.但是li标签中还可以继续放其它标签转载于:https://www.cnblogs....

2018-06-12 11:10:00 111

转载课时16.HTML-XHTML-HTML5区别（了解）

简而言之 HTML语法非常宽松容错性强； XHTML更为严格，它要求标签必须小写，必须严格闭合，标签中的属性必须使用引号引起等等。 HTML5是HTML的下一个版本所以除了非常宽松容错性强以外，还增加许多新的特性。 .htm和.html扩展名区别 DOS操作系统（win95或win98）下只能支持长度为3位的扩展名，所以是htm 但是在windows后缀长度可以大于3位，所以...

2018-06-12 10:58:00 68

转载课时15.DTD文档声明下（了解）

W3C的官方网站是W3School，我们可以去官方网站查询DTD文档声明。 HTML4.01 Strict 非常严谨的如果你写了这个DTD文档声明，你就不能写如下样式： <font size="50px" color="red">你好</font> 因为html是添加语义的，而css才是添加样式的，在这种严格的DTD文档声明中不被允许 ...

2018-06-12 10:53:00 77

空空如也

空空如也