margin居中显示
摘要:标签(空格分隔): margin居中 margin居中: 如下图的代码查看: 文字居中: 总结: 水平居中必须有width,必须要明确width,文字水平居中使用text align:center 2.只有标准流下的盒子才能使用margin:0auto 3.当一个盒子浮动了,固定定位了,绝对定位了,
阅读全文
margin的垂直方向塌陷
摘要:标签(空格分隔): margin塌陷 margin垂直方向塌陷问题: 如下代码: 执行结果为: ![image.png 24.9kB][1] 如上述代码的编写过程如下,查看红色盒子和绿色盒子中间的间距为50px; ![image.png 22.6kB][2] 总结:如果是margin里面的设置下边的
阅读全文
认识一下margin
摘要:标签(空格分隔): margin 特别注意一下margin的特殊之处,margin默认会使我们看到左边框有8px的宽度,为了去除默认我们加入 { width:0; heigth:0; }具体可以把上述的代码去除 {},这个查看一下; ![image.png 201.7kB][1] 通过上述的代码我们
阅读全文
认识border
摘要:标签(空格分隔): border border的认识: border:边框的意思,描述盒子的边框,边框有三个要素: 粗细, 线性样式 ,颜色; ![image.png 178.7kB][1] 2、如果颜色不写,默认是黑色的: 如图:![image.png 178.3kB][2] 如果只保留solid
阅读全文
padding设置和清除
摘要:padding设置和清除 标签(空格分隔): padding padding介绍: padding:就是内边距的意思,它是边框到内容之间的距离; 另外padding的区域是有背景颜色的。并且背景颜色和内容的颜色一样。也就是说background color这个属性将填充所有的border以内的区域;
阅读全文
盒模型简介绍
摘要:标签(空格分隔): 盒模型 盒模型的概念: 在CSS中,"box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子。我们称为这种盒子叫盒模型。 盒模型有两种:标准模型和IE模型。我们在这里重点讲标准模型。 盒模型的属性: width:内容的宽度 height:
阅读全文
css的继承和层叠
摘要:标签(空格分隔): css css称为层叠样式表,CSS有两大特性:继承性和层叠性,本章简单介绍一下继承性: 继承性: 定义:继承就是给父及设置了一些属性,子级继承了父及的该属性,这就是我们的css的继承,有一些属性可以继承, ![image.png 232.5kB][1] 问题:背景色是不是继承?
阅读全文
伪元素选择器
摘要:标签(空格分隔): 伪元素 介绍常用的伪元素: 设置第一个首字母的样式: first letter 例如: before 用于在元素的内容前面插入新内容。结合content使用,使用不是很频繁; after 使用比较频繁,建议掌握; 用于在元素的内容后面插入新内容。如下是在最后加入:&符号,代码如下
阅读全文
伪类选择器
摘要:伪类选择器 标签(空格分隔): 伪类选择器 常用的几种伪类选择器。 没有访问的超链接a标签样式: 访问过的超链接a标签样式: 鼠标悬浮在元素上应用样式: 鼠标点击瞬间的样式: nput输入框获取焦点时样式: hover选择器在网页中非常好用,如果是我鼠标悬浮的是父盒子,想让父盒子的子盒子显示出来,这
阅读全文
分组选择器
摘要:标签(空格分隔): 分组选择器 分组 当多个元素的样式相同的时候,我们没有必要重复地为每个元素都设置样式,我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。 例如: 为div标签和p标签统一设置字体为红色的样式。 通常,我们会分两行来写,更清晰:
阅读全文
属性选择器
摘要:标签(空格分隔): 属性选择器 属性选择器: 除了HTML元素的id属性和class属性外,还可以根据HTML元素的特定属性选择元素 根据属性查找 根据属性和值查找 找到所有title属性等于hello的元素: 找到所有title属性以hello开头的元素: 找到所有title属性以hello结尾的
阅读全文
组合选择器
摘要:标签(空格分隔): 高级选择器 高级选择器 ![image.png 124.6kB][1] 后代选择器 因为HTML元素可以嵌套,所以我们可以从某个元素的后代查找特定元素,并设置样式: 从div的所有后代中找p标签,设置字体颜色为红色。 儿子选择器 从div的直接子元素中找到p标签,设置字体颜色为红
阅读全文
css之标签选择器
摘要:标签(空格分隔): 标签选择器 选择器定义: 在一个HTML页面中会有很多很多的元素,不同的元素可能会有不同的样式,某些元素又需要设置相同的样式,选择器就是用来从HTML页面中查找特定元素的,找到元素之后就可以为它们设置样式了。选择器为样式规则指定一个作用范围。 基础选择器包含: 1.标签选择器 2
阅读全文
css介绍
摘要:标签(空格分隔): css介绍 css介绍和感知: css定义: CSS是指层叠样式表(Cascading Style Sheets),样式定义如何显示HTML元素,样式通常又会存在于样式表中。也就是说把HTML元素的样式都统一收集起来写在一个地方或一个CSS文件里 css优势: 1.内容与表现分离
阅读全文
常用的标签分类和嵌套规则
摘要:标签(空格分隔): 标签嵌套规则 HTML中标签元素三种不同类型:块状元素,行内元素,行内块状元素。常用的块状元素: 常用的行内元素: 常用的行内块状元素 块级元素特点:display:block; 1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。独占一行 2、元素的高度、宽度、行高以及
阅读全文
body标签
摘要:标签(空格分隔): body标签 body标签: 想要在网页上展示出来的内容一定要放在body标签中。 把我们之前那一段HTML代码贴过来,保存到一个HTML格式的文件中。 标题标签 h1~h6 h1~h6标签的默认样式: html 文本样式标签主要用来对HTML页面中的文本进行修饰,比如加粗、斜
阅读全文
head标签
摘要:标签(空格分隔): head标签 我们首先来介绍一下head标签的主要内容和作用,文档的头部描述了文档的各种属性和信息,包括文档的标题、编码方式及URL等信息,这些信息大部分是用于提供索引,辩认或其他方面的应用(移动端)的等。 以下标签是可以用在head标签中的: title标签 标签:在和标签之间
阅读全文
html开发环境
摘要:标签(空格分隔): 环境 开发环境: 市面上有很多的HTML编辑器可以选择,常见的Hbuild、Sublime Text、Dreamweare都可以用来开发HTML。 当然PyCharm也支持HTML开发。 文件后缀名规范 文件后缀一般使用.html或.htm .html与.htm均是静态网页后缀名
阅读全文
web前端介绍
摘要:web前端内容介绍 标签(空格分隔): web前端 web1.0时代的网页制作 网页制作是web1.0时代的产物,那个时候的网页主要是静态网页,所谓的静态网页就是没有与用户进行交互而仅仅供读者浏览的网页,我们当时称为“牛皮癣”网页。例如一篇QQ日志、一篇博文等展示性文章。在web1.0时代,用户能做
阅读全文
面向对象之元类介绍
摘要:标签(空格分隔): 元类介绍 元类介绍: 在正式介绍元类之前,大家储备一下知识:exec; exec命令使用 这个命令有三个参数: 1.字符串形式的命令,(把字符串提取出来) 2.全局作用域;(字典形式,如果不指定,默认使用globals()) 3.局部作用域,(字典形式,如果不指定默认locals
阅读全文