css-note

css学习内容

css基础语法
css使用方法
css选择器
css继承与层叠
css优先级
css命名规范

学习css的好处

简化HTML相关标签，网页体积小，下载快
解决内容与表现分离的问题
更好地维护网页，提高工作效率

第一二章 css3基础语法

css样式规则

css规则由两部分组成：选择器、声明

h1 选择器

{color:red;font-size:14px;} 声明

css引用

写在<head></head>标签内：

<style type="text/css">

css样式

</style>

注意：

css本身不区分大小写，但是也有个别例外情况；
值与单位之间不能有空格，eg：pont-size:30px(30与px之间不能有空格）；
所有标点符号都要在英文的状态下书写；
新添加的样式可以并排写，但是为了阅读和维护方便，把每条样式另起一行写；
针对多个选择器具有相同的声明时，可用逗号连接，eg：h1,h2,h3,h4{pont-size:30px;}；

css注释

html注释：``````
css注释：/* 注释语句 */

如何引用css样式

行内样式（内联样式）

在开始标签内添加style样式属性，如：<p style="color:red;"> 内容 </p>
内部样式表（嵌入样式）

把css样式代码写在：<style type="text/css"> 样式... </style>
外部样式表

把css样式代码写在独立的一个文件中

扩展名：css文件名.css

引用外部文件：<link href="XX.css" rel="stylesheet" type="text/css"/>
导入式

方法一：@import "外部css样式"

方法二：@import url("外部css样式文件地址");

注意：

不建议大量使用行内样式；
嵌入样式中，style标签必须在head标签里；
外部样式表中，link标签也要放到head标签里面；
导入式标签须写在style标签内，且在样式代码最开始处。

css使用方法优先级（可添加`!important`规则调整为最高级）

行内样式（全值为1000） > 内部样式 > 外部样式

遵循就近原则

css选择器

css选择器分类

标签选择器（全值为1）

以HTML标签作为选择器
类选择器（全值为10）

为HTML标签添加class属性：

<h1 class="值名">内容1</h1>

<p>内容2</p>

<p class="值名">内容3</p>

通过类选择器来为具有此class属性的元素设置css样式：

.值名{color:red;}

可对不同类型元素的同一个名称的类选择器设置不同的样式规则：

p.相同值名{color:blue;}

h1.相同值名{color:red;}
ID选择器（全值为100）

为HTML标签添加ID属性：

<h1>内容1</h1>

<p id="p1">内容2</p>

<p id="p2">内容3</p>

通过ID选择器来为具有此ID的元素设置css样式规则：

#p1{color:red;}

#p2{color:blue;}
全局选择器（通配符选择器）（权值为0）

所有标签设置样式：

*{color:red;font-size:30px;}
群组选择器

用逗号连接各个选择器，如：

h1,#p1,.值名,h4{color:red;}
后代选择器

<em>css层叠样式</em>

<p><em>css</em>层叠样式</p>

<p><em>css</em>层叠样式</p>

使用后代选择器设置，之间要用空格隔开：

p em{font-size:40px;}指对p标签下em标签设置40像素的字体大小

p a em{font-size:40px;}指对p标签下a标签下的em标签设置40像素的字体大小

#p1 em{font-size:40px;}指对id为p1标签下em标签设置40像素的字体大小

p.red a em{font-size:40px;}指对class为red的p标签下a标签下的em标签设置40像素的字体大小
子元素选择器

与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。
- 例如，如果您希望选择只作为 h1 元素子元素的 strong 元素，可以这样写：h1 > strong {color:red;}
- 这个规则会把第一个 h1 下面的两个 strong 元素变为红色，但是第二个 h1 中的 strong 不受影响：
- <h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
- <h1>This is <em>really <strong>very</strong></em> important.</h1>
相邻兄弟选择器

相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。
- 例如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：h1 + p {margin-top:50px;}
- 这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。
```
   <div>
        <ul>
             <li>List item 1</li>
             <li>List item 2</li>
             <li>List item 3</li>
        </ul>
        <ol>
               <li>List item 1</li>
               <li>List item 2</li>
               <li>List item 3</li>
        </ol>
 </div>
```
- 在上面的片段中，div 元素中包含两个列表：一个无序列表，一个有序列表，每个列表都包含三个列表项。这两个列表是相邻兄弟，列表项本身也是相邻兄弟。不过，第一个列表中的列表项与第二个列表中的列表项不是相邻兄弟，因为这两组列表项不属于同一父元素（最多只能算堂兄弟）。
- 请记住，用一个结合符只能选择两个相邻兄弟中的第二个元素。请看下面的选择器：li + li {font-weight:bold;}
- 上面这个选择器只会把列表中的第二个和第三个列表项变为粗体。第一个列表项不受影响
- 效果如下：
  
  效果图

注意：

每一个ID都必须是唯一的；
ID和class的引用值必须区分大小写；

伪类

伪类选择器定义特殊状态下的样式
无法使用标签、id、class及其他属性实现

链接伪类的4种状态：

激活状态(a:active)、已访问状态(a:visited)、未访问状态(a:link)、鼠标悬停状态(a:hover)。

链接伪类的顺序:

:link > :visited > :hover > :active

a:hover必须置于a:link和a:visited之后才有效

a:active必须置于a:hover之后才有效

伪类名称对大小写不敏感

注意：

伪类：hover和：active不单单用于a元素

伪类：hover和：active兼容 IE6及更早版本，支持<a>元素的4种状态；

IE6浏览器不支持其它元素的：hover和：active。

css文本样式

font-family：字体/字体集设置字体
line-height：长度值/百分比设置元素中文本行高
text-indent：首行缩进
word-spacing：设置元素内单词之间间距
letter-spacing：设置元素内字母之间间距
text-transform：capitalize/uppercase/lowercase/none 设置元素内文本的大小写
text-decoration：underline/overline/line-through/blink(有兼容性问题）/none 设置元素内文本的装饰（多个属性值可以同时存在；不可继承）
vertical-align：baseline/sub/super/top/text-top/middle/bottom/text-bottom/长度/百分比设置元素内容的垂直方式
line-height：长度值/百分比设置行高
text-align：left/right/center/justify 设置元素内内容水平对齐方式
font-style：normal/italic/oblique 设置元素内文字倾斜程度
font-weight：normal/bold/bolder/lighter/100-900 文字粗细
font-size：绝对单位/相对单位设置文字大小

相对单位

属性值说明

in Inch,英寸

cm 厘米

mm 毫米

pt Point,印刷的点数

pc Pica,1pc=12pt

属性值	说明
in	Inch,英寸
cm	厘米
mm	毫米
pt	Point,印刷的点数
pc	Pica,1pc=12pt

属性值 css2缩放系数1.2

XX-small 9px

X-small 11px

small 13px

medium 16px

large 19px

X-large 23px

XX-large 28px

属性值	css2缩放系数1.2
XX-small	9px
X-small	11px
small	13px
medium	16px
large	19px
X-large	23px
XX-large	28px

css背景和列表

背景样式

background-color：颜色/transparent 设置元素的背景颜色

说明:

1、transparent是全透明黑色（black）的速记法，类似rgba(0，0，0，0）这样的值；

2、颜色值（颜色名/RGB/十六进制）；

3、背景区包括内容、内边距（padding）和边框(记得设置边框样式为虚线还是直线，还有设置边框颜色，否则默认与文本颜色相同），不包含外边距（margin）。

background-image：URL地址（相对地址/绝对地址）/none 把图像设置为背景

说明：

1、元素的背景占据了元素的全部尺寸（包括内边距和边框，不包括外边距）；

2、默认地，背景图像位于元素的左上角，并在水平和垂直方向上重复。

background-position：百分比（X% Y%）/值（X Y） /top/bottom/right/left/center 设置背景图像的起始位置（相对整个网页的位置而言；只写一个参数的话，第二个参数默认居中）
background-attachment：scroll/fixed 设置背景图像显示方式，即是否固定或者随着页面的其余部分滚动

说明：

scroll：默认值，背景图片随滚动条滚动

fixed：当页面的其余部分滚动时，背景图片不会移动

background-repeat：repeat（横纵都重复）/no-repeat（不重复）/repeat-x（水平重复）/repeat-y（垂直重复）设置背景图像是否重复及如何重复
background：简写属性，作用是将背景属性设置在一个声明中

说明： 各值之间用空格隔开，不分先后顺序

例如：background:repeat red left scroll

列表样式

list-style-type：关键字/none设置列表项标志的类型

无序列表：
none: 无标记
disc: 实心的圆点
circle: 空心的圆点
square: 实心的方块
有序列表：
none: 无标记
decimal: 从1开始的整数
lower-roman: 小写罗马数字
upper-roman: 大写罗马数字
lower-alpha: 小写英文字母
upper-alpha: 大写英文字母

list-style-image：URL/none 将图像设置为列表项标志
list-style-position：inside/outside 设置列表中列表项标志的位置

说明：

inside：列表项目标记放置在文本以内，且环绕文本根据标记对齐

outside：默认值，列表项目标记放置在文本以外，且环绕文本不根据标记对齐

list-style：简写属性。用于把所有列表的属性设置于一个声明中

说明：
1、各值之间用空格隔开
2、不分先后顺序
3、list-style-image会覆盖list-style-type的设置
例如：list-style:disc inside

css盒子模型

学习内容

盒子模型概念
高和宽设置
边框设置
内边距设置
外边距设置
盒子的计算
元素显示方式

盒子模型的概念

盒子模型用来“放”网页中的各种元素
网页设计中内容，如文字、图片等元素，都可是盒子（DIV嵌套）

盒子模型属性

宽度属性（设置块级元素和替换元素的内容宽度）

宽度：width：长度值/百分比/auto

最大宽度：max-width：长度值/百分比/auto

最小宽度：min-width：长度值/百分比/auto
高度属性（设置块级元素和替换元素的内容高度）

高度：height：长度值/百分比/auto

最大高度（有兼容性问题，IE不支持）：max-height：长度值/百分比/auto

最小高度：min-height：长度值/百分比/auto

块级元素：
<p> <div> <h1>~<h6> <ul> <li> <ol> <dl> <dt> <dd>等

替换元素：
浏览器根据其标签的元素与属性来判断显示的具体内容，如<img> <input> <textarea>等

边框属性

边框宽度 (border-width) ：thin/medium/thick/长度值

边框颜色 (border-color) ：颜色值/transparent

边框样式 (border-style) ：值

值描述

none 定义无边框，默认值

hidden 与none相同，除非在表格元素中解决边框冲突时

dotted 定义点状边框。在大多数浏览器中呈现为实线

dashed 定义虚线。在大多数浏览器中呈现为实线

solid 定义实线

double 定义双线

groove 定义3D凹槽边框

ridge 定义3D垄状边框

inset 定义3D inset边框

outset 定义3D outset边框

inherit 规定应该从父元素继承边框样式

值	描述
`none`	定义无边框，默认值
`hidden`	与`none`相同，除非在表格元素中解决边框冲突时
`dotted`	定义点状边框。在大多数浏览器中呈现为实线
`dashed`	定义虚线。在大多数浏览器中呈现为实线
`solid`	定义实线
`double`	定义双线
`groove`	定义3D凹槽边框
`ridge`	定义3D垄状边框
`inset`	定义3D inset边框
`outset`	定义3D outset边框
`inherit`	规定应该从父元素继承边框样式

4个不同方向来表示（上、下、左、右）：

边框宽度：border-top / bottom / left / right-width

边框颜色：border-top / bottom / left / right-color

边框样式：border-top / bottom / left / right-style

内边距属性：设置元素内的内容与边框之间的距离（内边距或填充），分4个方向（上、下、左、右）(不能为负值）：

padding-top：长度值 / 百分比

padding-bottom：长度值 / 百分比

padding-left：长度值 / 百分比

padding-right：长度值 / 百分比

内边距属性缩写

padding：值1；//4个方向都为值1

padding：值1 值2；//上下=值1，左右=值2

padding：值1 值2 值3；//上=值1，左右=值2，下=值3

padding：值1 值2 值3 值4；//上=值1，右=值2，下=值3，左=值4

注意：

盒子在网页中占的空间，不单单与width和height属性有关，还与 padding有关。
外边距属性：设置元素与元素之间的距离（外边距），4个方向（上、下、左、右）（可为负值）：

margin-top：长度值 / 百分比 / auto

margin-bottom：长度值 / 百分比 / auto

margin-left：长度值 / 百分比 / auto

margin-right：长度值 / 百分比 / auto

外边距属性缩写

margin：值1；//4个方向都为值1

margin：值1 值2；//上下=值1，左右=值2

margin：值1 值2 值3；//上=值1，左右=值2，下=值3

margin：值1 值2 值3 值4；//上=值1，右=值2，下=值3，左=值4

注意：

默认情况下，相应HTML块级元素（如body h1~h6 p等）存在外边距；

声明margin属性，覆盖默认样式：
body,h1,h2,h3,h4,h5,h6,p{margin:0)

margin值为auto，实现水平方向居中显示效果

由浏览器计算外边距

垂直方向，两个相邻元素都设置了外边距，则外边距会发生合并。
合并后外边距高度 = 两个发生合并外边距的高度中的最大值

盒子模型的计算

盒子在页面中所占的宽度 = 左边距 + 左边框 + 左填充 + 内容宽度 + 右填充 + 右边框 + 右边距
盒子在页面中所占的高度 = 上边距 + 上边框 + 上填充 + 内容高度 + 下填充 + 下边框 + 下边距

盒子模型的应用

HTML元素分类

块级元素，独占一行
如<p> <div> <h1>~<h6> <ul> <li> <ol> <dl> <dt> <dd>等

行内元素（内联元素），一行显示，直到该行排满之后，再到下一行
如<span> <a> <em>等

display属性

inline：元素将显示为内联元素，元素前后没有换行符

block：元素将显示为块级元素，元素前后有换行符

inline-block：行内块元素，元素呈现为inline，具有block相应特性

none：此元素不会被显示

注意：

1、相应内联元素及使用display：inline设置成内联元素的元素width和height属性无效；
水平方向margin-left/margin-right/padding-left/padding-right有效；
垂直方向magin-top/margin-bottom/padding-left/padding-right无效；

2、块级元素及使用display：block设置成块级元素的元素width / height / margin / padding属性都生效。

css中的`float`浮动

`float`中的四个参数

float：left 左浮动
float：right 右浮动
float：none 不浮动
float：inherit 继承浮动

浮动副作用的解决

手动给父元素添加高度
通过clear清除内部和外部浮动

clear属性

clear: none 不清除浮动

clear: left 清除左侧浮动

clear: right 清除右侧浮动

clear: both 清除两边浮动

给父元素添加overfloat: hidden属性并结合zoom:1使用
给父元素添加浮动
使用before：：伪类

css定位

HTML中的三种布局方式

标准流（按顺序布局）
浮动
定位

position属性的意义

position属性决定了元素将如何定位
通过top right bottom left实现位置

position中的可选参数

static：默认值，元素位置正常排列
relative：相对定位，可通过top right bottom left改变元素位置
absolute：绝对定位，通过top right bottom left可脱离正常文档流，拥有层级概念，后写元素可覆盖先写元素
fixed：固定定位，通过top right bottom left可脱离正常文档流，在整个窗口进行定位，拥有层级概念，不受制于父元素。常用场景有：对联广告、登录弹窗等
inherit：继承定位

z-index（只作用于带有定位属性的元素）

可以设置元素的叠加顺序，但依赖定位属性
z-index大（数字大）的元素会覆盖z-index小（数字小）的元素
z-index为auto的元素不参与层级比较
z-index为负值，元素被普通流中的元素覆盖

css网页布局

认识布局

以最适合浏览的方式将图片和文字排放在页面的不同位置
布局模式有多种，不同的制作者会有不同的布局设计

学习内容

行布局
多列布局
圣杯布局
双飞翼布局

经典的行布局

基础的行布局
行布局自适应
行布局自适应限制最大宽
行布局垂直水平居中
行布局固定宽
行布局某部位自适应
行布局导航随屏幕滚动

margin: 0 auto; (上下为0，左右居中）

width: 100%;（页面自适应）

position: absolute; left:50%; top:50%; margin-left: -50% width; margin-top: -50% height; (垂直、水平都居中）

经典的列布局

两列布局固定
两列布局自适应
三列布局固定
三列布局自适应

混合布局

混合布局固定
混合布局自适应

圣杯布局

圣杯布局是由国外的Kevin Cornell提出的一个布局模型概念
在国外由淘宝UED的工程师传播开来

流程方式

Middle部分首先要放在container的最前部分
然后是Left，Right

<div class = "container">
  <div> 中间 </div>
  <div> 左侧 </div>
  <div> 右侧 </div>
</div>

布局要求

三列布局，中间宽度自适应，两边定宽
中间栏要在浏览器中优先展示渲染
允许任意列的高度最高
用最简单的css、最少的HACK语句

双飞翼布局

经淘宝UED的工程师针对圣杯布局改良后得出双飞翼布局
去掉相对布局，只需要浮动和负边距

流程方式

main要放在最前边，其次是sub，extra

<div class = "main">
  <div> 中间 </div>
</div>
  <div> 左侧 </div>
  <div> 右侧 </div>

css网页布局案例

需要具备的基础

HTML基础（div ul li dd dt dl img...)
css基础（字体、背景、图片...）
css定位、浮动（position、盒子模型、float）

css网页布局案例操练

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title> css网页布局 </title>
  <link rel="stylesheet" href="index.css" />
</head>
<body>
  <!-- 头部 -->
  <div class="header">
      <div class="logo">
          <img src="image/logo.png" alt="logo" />
      </div>
      <div class="nav">
          <ul> 
              <li> 首页 </li>
              <li> 图片 </li>
              <li> 视频 </li>
              <li> 手记 </li>
          </ul>
      </div>  
  </div>
  <!-- 主体 -->
  <div class="main">
      <div class="top">
          <img src="image/1.jpeg" />
      </div>
      <!-- 遮罩层 -->
      <div class="topLayer">
        <div class="topLayer-top">
          <div class="word"> MY BEAUTIFUL LIFE </div>
          <button> LOOK MORE &gt; </button>
        </div>
      </div>
      <div class="middle">
        <div class="m-top">
            <div class="common">
                <img src="image/weibo.png" />
                <div class="comm"> MICROBLOG </div>
            </div>
            <div class="common">
                <img src="image/weixin.png" />
                <div class="comm"> WECHAT </div>
            </div>
            <div class="common">
                <img src="image/QQ.png" />
                <div class="comm"> QQ </div>
            </div>
            <div class="clear"></div>
        </div>
        <div class="m-middle">
            "I want to give good things to record down,<br/>after the recall will be very beautiful."
        </div>
        <div class="m-bottom">
            <div class="m-com">
                <img src="image/03-01.jpg" />
                <div class="des1"> Cool Image </div>
                <div class="des2"> Record The Picture </div>
            </div>
            <div class="m-com">
                <img src="image/03-02.jpg" />
                <div class="des1"> Cool Image </div>
                <div class="des2"> Record The Picture </div>
            </div>
            <div class="m-com">
                <img src="image/03-03.jpg" />
                <div class="des1"> Cool Image </div>
                <div class="des2"> Record The Picture </div>
            </div>
        </div>
      </div>
      <div class="clear"></div>
      <div class="bottom">
        <div class="content">
          <div class="title">
              FROM THE PHOTO ALBUM
          </div>
          <div class="pic-content">
              <dl>
                  <dt><img src="image/04-01.jpg" /></dt>
                  <dd class="word"> Life is like a book, just read more and more refined, more write more carefully. When read, mond open, all things have been indifferent to heart. Life is the precipitation. </dd>
              </dl>
              <dl>
                  <dt><img src="image/04-02.jpg" /></dt>
                  <dd class="word"> Life is like a cup of tea, let people lead a person to endless aftertastes. You again good taste, it will always have a different taste, different people will have different taste more. </dd>
              </dl>
          </div>
          <div class="clear"></div>
        </div>
      </div>
  </div>
  <!-- 底部 -->
  <div class="footer">
      <div class="word"> 我是有底线的 </div>
  </div>
  
</body>
</html>

index.css 如下：

*{
    padding: 0;
    margin: 0;
}
.header{
    width: 100%;
    height: 100px;
    background-color: #eee; 
}
.header img{
    width: 300px;
    height: 85px;
    padding-left: 100px;
    padding-top: 8px;
}
.header .logo{
    float: left;
}
.header .nav{
    float: right;
}
.header .nav ul{
    padding-right: 100px;
}
.header .nav ul li{
    float: left;
    list-style: none;
    width: 80px;
    height: 100px;
    line-height: 100px;
    font-size: 15px;
    font-weight: bolder;
    color: #7D7D7D;
}
.main .top{
    width: 100%;
    height: 600px;
}
.main .top img{
    width: 100%;
    height: 600px;
}
.main .topLayer{
    position: absolute;
    top: 100px;
    left: 0;
    background-color: #000; 
    width: 100%;
    height: 600px;
    opacity: 0.5;
}
.main .topLayer-top{
    width: 500px;
    height: 300px;
    position: absolute;
    top: 400px;
    margin-top: -150px;
    z-index: 2;
    right: 50%;
    margin-right: -250px;
}
.main .topLayer-top .word{
    padding-top: 100px;
    color: #fff;
    font-size: 45px;
    font-weight: bolder;
    text-align: center;
    font-family: 微软雅黑;
}
.main .topLayer-top button{
    width: 200px;
    height: 60px;
    margin-top: 50px;
    color: #fff;
    background-color: #F5704F;
    font-family: 微软雅黑;
    text-align: center;
    font-size: 14px;
    font-weight: bolder;
    border-radius: 8px;
    /* 圆角 */
    clear: both;
    margin-left: 150px;
}
.main .middle{
    width: 1000px;
    margin: 0 auto;
}
.main .middle .m-top .common{
    float: left;
    padding-top: 50px;
    width: 33.3%;
    text-align: center;
}
.main .middle .m-top .common img{
    width: 100px;
    height: 100px;
}
.main .middle .m-top .common .comm{
    font-size: 20px;
    color: #7D7C7F;
    font-weight: bold;
    padding-top: 20px;
}
.main .middle .m-middle{
    font-size: 22px;
    color: #E19796;
    font-weight: bold;
    padding-top: 50px;
    font-style: italic;
    text-align: center;
    padding-bottom: 50px;
}
.clear{
    clear: both;
}
.main .middle .m-bottom .m-com{
    float: left;
    padding: 10px;
    text-align: center;
    font-weight: bold;
    font-size: 20px;
}
.main .middle .m-bottom .m-com img{
    width: 310px;
    height: 260px;
}
.main .middle .m-bottom .m-com .des1{
    color: #7D7D7F;
    padding-top: 20px;
}
.main .middle .m-bottom .m-com .des2{
    color: #BDBDBC;
    padding-top: 10px;
}
.main .bottom{
    background-color: #F9F9F9;
}
.main .bottom .content{
    width: 1000px;
    margin: 0 auto;
}
.main .bottom .content .title{
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    color: #7D7C7F;
    font-family: 微软雅黑;
    padding-top: 50px;
    padding-bottom: 50px;
}
.main .bottom .content .pic-content dl{
    float: left;
    width: 470px;
    margin: 10px 12px;
}
.main .bottom .content .pic-content dl img{
    width: 470px;
    height: 460px;
}
.main .bottom .content .pic-content dl .word{
    font-size: 20px;
    padding-top: 20px;
    font-weight: bold;
    color: #7D7C7F;
    padding-bottom: 50px;
}
.footer{
    background-color: #eee;
    width: 100%;
    height: 100px;
}
.footer .word{
    font-size: 20px;
    text-align: center;
    font-weight: bold;
    font-family: 微软雅黑;
    color: gray;
    line-height: 100px;
}

最后编辑于：2018.07.26 16:28:10

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 204,732评论 6赞 478
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 87,496评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 151,264评论 0赞 338
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,807评论 1赞 277
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,806评论 5赞 368
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,675评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,029评论 3赞 399
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,683评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 41,704评论 1赞 299
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,666评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,773评论 1赞 332
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,413评论 4赞 321
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,016评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,978评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,204评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,083评论 2赞 350
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,503评论 2赞 343

css-note

css学习内容

学习css的好处

第一二章 css3基础语法

css样式规则

css规则由两部分组成：选择器、声明

css引用

注意：

css注释

如何引用css样式

注意：

css使用方法优先级（可添加!important规则调整为最高级）

css选择器

css选择器分类

注意：

伪类

链接伪类的4种状态：

链接伪类的顺序:

:link > :visited > :hover > :active

注意：

css文本样式

css背景和列表

背景样式

列表样式

css盒子模型

学习内容

盒子模型的概念

盒子模型属性

注意：

注意：

盒子模型的计算

盒子模型的应用

HTML元素分类

注意：

css中的float浮动

float中的四个参数

浮动副作用的解决

css定位

HTML中的三种布局方式

position属性的意义

position中的可选参数

z-index（只作用于带有定位属性的元素）

css网页布局

认识布局

学习内容

经典的行布局

经典的列布局

混合布局

圣杯布局

流程方式

布局要求

双飞翼布局

流程方式

css网页布局案例

需要具备的基础

css网页布局案例操练

推荐阅读更多精彩内容

css使用方法优先级（可添加`!important`规则调整为最高级）

css中的`float`浮动

`float`中的四个参数