div、span、p标签
这三个标签都可以看作是一个容器, 可以用来包裹其他的 html内容, 被包裹起来的内容形成了一个组, 可以通过css样式对这一组的内容统一设置样式.
元素的类型:
块级元素: 默认情况下独占一行的元素, 如: div p h1~h6 br hr
行内元素: 默认情况下, 多个行内元素可以处在同一行。如：span，input，font。。。
CSS概述
CSS：层叠样式表，可以用来美化html页面， 通过CSS设置样式， 可以实现展示数据的html代码和设置样式的CSS代码的分离，增强了网页的显示能力！
在html页面中引入css样式的方式
通过标签上的style属性引入css样式
大多数标签都可以具有style属性, 可以通过style属性为当前标签设置样式
这种方式设置样式不推荐大量使用, 会造成页面结构的混乱, 不利于后期的维护及扩展.
通过style标签引入css样式
在head标签内部, 可以提供一个style标签, 在style标签内部可以选中元素进行修饰!
这种方式是将所有的css代码放在一个style标签内部统一进行管理, 初步的实现了html代码和css代码的分离.
通过链接引入外部的css文件
通过head标签下的link标签可以引入外部的css文件
这种方式是将所有的css代码放在一个独立的文件中进行统一管理, 真正的实现了html代码和css代码的分离.
选择器
所谓的选择器可以 帮助我们在html中选中想要修饰的标签进行修饰的技术
基本选择器
标签名(元素名)选择器
通过标签的名称选中指定名称的标签进行样式的修饰
格式: 元素名{}, 如: span{}
<span></span>
<span></span>
类(class)选择器
通过标签上的class属性, 可以为标签设置所属的类, 所有class值相同的标签则为一类, 可以通过标签名选择器选中这一类的标签进行修饰.
格式: .类名{ css属性 }, 如: .c1{}
<div class=”c1”></div>
<p class=”c1”></p>
<span class=”c1”></span>
ID选择器
通过标签上的id属性, 可以为标签设置所属的编号, id值的特点是在整个html中是独一无二的. 可以通过id值选中想要修饰的标签
格式: #id值{ css属性 }, 如: #d1{}
<div id=”d1”></div>
扩展选择器
后代选择器
在父选择器选中的元素内部, 再选中指定的后代元素进行修饰
格式: 父选择器 后代选择器{ }
如: 选中div下所有的后代span à #d1 span{}
子元素选择器
在父选择器选中元素的内部, 选中指定的子元素进行样式的修饰
格式: 父选择器>子元素选择器{ }
如: 选中div下所有的子元素span à #d1>span{}
分组选择器
可以将多个选择器选中的元素统一来设置样式
选择器1,选择器2,选择器3,…选择器n{}
属性选择器
可以通过属性条件选中元素进行修饰
格式: 选择器[属性条件..]{}
如: 选中所有的普通文本输入框 à input[type=’text’]{}
<input type=”text” name=”xx”/>
<input type=”submit” name=”xx”/>
相邻兄弟选择器
如果两个元素具有相同的父元素, 并且是紧挨着的, 这两个元素就是相邻兄弟, 可以通过相邻兄弟选择器选中A元素后的B元素.
格式: 大哥+小弟{ }
伪元素选择器
伪元素选择器选中的不仅仅是元素本身, 还包括元素的状态
状态分为如下几种:
:link 表示元素未被点击时的状态
:hover 表示光标(鼠标)悬停时的状态(掌握!)
:active 表示元素被点击时的状态
:visited 表示元素被点击之后的状态
外边距/边框/内边距
margin – 外边距
margin-top:30px
margin-left: 30px
margin-bottom: 30px
margin:10px 20px 30px 40px/* 上 右 下 左 */
margin:10px 20px 30px/* 上 左右 下*/
margin:10px 20px/* 上下 左右 */
margin:10px/* 上下左右 */
注意: 垂直外边距合并的现象:
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
border – 边框
border: 1px solid red
border-width:10px
border-style:solid
border-color:blue
border-top-width:10px
border-right-width:5px
border-bottom-width:15px
border-left-width:5px
border-width:10px
border-style:solid double dotted dashed
padding – 内边距
padding:10px 20px 30px 40px/* 上 右 下 左 */
padding:10px 20px 30px/* 上 左右 下*/
padding:10px 20px/* 上下 左右 */
padding:20px/* 上下左右 */
常用的css属性
元素类型的补充
块级元素:
默认情况下, 块级元素可以独占一行
块级元素可以设置宽和高
如果不设置宽度: 其中宽是默认填满父元素, 高是由内容决定(由内容撑起来)
如果设置, 就是设置的宽和高.
给块级元素设置的外边距/边框/内边距都会起作用
行内元素:
默认情况下, 多个行内元素可以处在同一行
不可以设置宽和高, 其中宽和高由内容决定
给行内元素设置的左右外边距/边框/内边距都会起作用, 但是上下外边距将不会起作用!
display属性 -- 设置元素的显示方式
block: 块级元素的默认值
inline: 行内元素的默认值
inline-block: 既具备行内元素的特性(可以同行显示), 也具备块级元素的特性(可以设置宽高)
none: 用来隐藏一个元素, 这种方式的隐藏是真的隐藏了, 元素在原位置不再占用空间
visibility: hidden 这种方式也可以隐藏一个元素, 但是这种隐藏只是元素不显示了, 在原位置仍然占用空间
text-align 设置元素中文本水平对齐方式
left: 默认值。左对齐
right: 右对齐
center: 居中对齐
justify: 两端对齐
list列表属性
list-style-type: none/disc/square/circle...
字体属性
font-size
font-weight
font-family
color
line-height
text-decoration
背景属性
background-color
背景色设置
background-image
背景图片设置
background-repeat
设置或检索对象的背景图像是否及如何铺排
background-position
设置或检索对象的背景图像位置
其他
width 设置宽度
height 设置高度
框架标签
frameset – 定义一个框架集合
frame – 定义框架集中的一个窗口
easymall页面练习
略
css导图:
工具篇
手绘的工具，最简单。
1，空白纸一张
A4纸就可以了，再大一点也挺好。纸上不要有各种线条，白纸最好。
2，彩笔一副
水彩笔也好，彩色铅笔也好，有啥用啥。
水粉水彩之类，感觉有点太高大上了，驾驭不了。
甚至，没有颜色丰富的彩笔，只有一支黑笔，都可以开始手绘思维导图。
一、确定思维导图的基本结构
1、先将中心主题画在白纸中间其实，无论是儿童还是大人们，在画思维导图的时候，第一步要做的都是先将中心主题确定下来，并画在白纸中间。之所以要先将中心主题画在白纸中间，是因为这样有利于儿童们思维的发散。
2、进一步扩张思维导图的分支接下来儿童们要做的是：进一步扩张该思维导图的分支，需要注意的是，儿童们在扩张思维导图的分支时，要从中心主题向外扩张。另外，儿童们还可以想象成树的分支进行扩张，其中越靠近中心主题的分支，枝干则越粗。
二、补充以及完善
1、用图形来表达各分支的内容。思维导图的基本结构完成后，接下来儿童们则要进行补充和完善了。在进行补充和完善的时候，儿童们可以用图形来表达各分支的内容，这样会更生动，并且能较好的发挥儿童的创意。
2、给各分支加上合适的关键词。此外，还要给各分支加上合适的关键词，这样能便于记忆和理解。
扩展资料：
自上世纪八十年代思维导图传入中国内地。最初是用来帮助“学习困难学生”克服学习障碍的，但后来主要被工商界（特别是企业培训领域）用来提升个人及组织的学习效能及创新思维能力，在学科教学方面，历经52年的发展，也没在学校广泛应用。
华东师大刘濯源带领的思维可视化研究团队十五年的研究及实践，得出的结论是“思维导图”并不适合直接应用于学科教学，因为“思维导图”过于强调“图像记忆”和“自由发散联想”而非“理解性记忆”和“结构化思考”。
对于抽象思维能力较差的学生，“图像记忆”的确可以帮助学生提高“把知识记住”的效率，但却无法加深学生对知识的理解，属于一种浅层的学习。
