HTML&CSS

前端入门

1、HTML&CSS

1、选择器

通配选择器

元素选择器

类选择器

id选择器

复合(组合) 选择器

• 交集选择器(且)

1
2
3
4
5
6
7
8
9
10

• 并集选择器(或者)

/* 任何选择器都可以作为选择器的一部分 */
1
2
3
4
5
6
7
8
9

• 后代选择器（儿子、孙子，重孙）

  ul li a {
  	...
  }
  .class1 a {
  
  }
  1
  2
  3
  4
  5
  6

• 子代选择器(儿子)

div>a {
	..
}
div>p>a {

}
.class1 > a {

}
1
2
3
4
5
6
7
8
9

• 兄弟选择器(向下找)

  div+p {
  /*紧紧相连的兄弟元素,向下找*/
  ...
  }
  div~p {
      /*通用选择器，所有兄弟选择器，向下找*/
  }
  1
  2
  3
  4
  5
  6
  7

• 属性选择器

[属性名] { } /*选择具有title属性的元素*/
[title="a"]  { }  /*选择具有title属性，且值为a的元素*/
[title^="a"]  { } /*选择具有title属性，且值以a开头的元素*/
[title$="s"]  { } /*选择具有title属性，且值以s结尾的元素*/
[title*="u"]  { } /*选择具有title属性，且值包含u的元素*/
1
2
3
4
5

• 伪类选择器

a:link {
 /*选中没有访问过的a元素*/
    ...
}
a:visited {
    /**选择的是访问过的a元素/
}
1
2
3
4
5
6
7

• 伪类选择器-动态伪类

a:hover {} /*悬停*/
a:active {} /*激活*/
/*hover,active 所有元素都有*/
input:focus {}
1
2
3
4

• 伪类选择器-结构伪类

div>p:first-child {} /*选择div第一个子元素是p元素的元素*/
div p:first-child {} /*选择div所有的p元素，且p元素的是其夫元素的第一个子元素*/
p:first-child   {} /*p元素，且p元素的是其夫元素的第一个子元素*/

p:last-child  {}  /*p元素，且p元素的是其夫元素的最后一个子元素*/

div p:first-of-type {}   /*p元素，第一个类型为p*/

div p:nth-of-type(n) {} /*p元素，第n个类型为p*/

p:nth-child(n)  {/*p元素，且p元素的是其夫元素的最后一个子元素*/}
p:nth-child(2n/even) {} /*偶数*/
p:nth-child(2n+1/odd) {} /*奇数*/
p:nth-child(-n+5) {} /*前5个*/


div>p:not(.clasa1) /*否定(排除)结构伪类*/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

• 伪类选择器-UI伪类

input:checked {} /* 选中的是勾选的复选框或者单选按钮*/
input:disabled
1
2

• 伪类选择器-目标伪类

div:target {} /* 选择描点选中的元素 */
1

• 伪元素选择器

div::first-letter {}
div::selection {}

input::placeholder {}
p::before {content：‘$’}
p::before {content：‘$’}
1
2
3
4
5
6

选择器的优先级

2、字体

3、盒模型

margin:

给一个块级元素左右margin设置auto可以实现该元素在其父元素水平居中

margin: 0 auto
1
2

margin 也可以设置负值

margin：-50px
1

• margin塌陷问题

  第一个元素的上外边距和最后一个元素的下外边距会作用在父元素上

overflow:hidden
1

• margin 合并问题

• 元素的溢出

• 隐藏元素

• 样式的继承

• 元素居中

• 行内元素空白问题

• 行内块的幽灵空白问题

4、浮动float

特点：

浮动后的影响：

解决方案：

布局练习：

代码：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    
    <style>
        /* #region清除默认样式 */
        * {
            margin: 0;
            padding: 0;
        }
        .leftfix {
            float: left;
        }
        .rightfix {
            float: right;
        }
        .clearfix::after {
            content: '';
            display: block;
            clear: both;
        }
        /* #endregion清除默认样式 */
        .container {
            width: 960px;
            margin: 0 auto;
            text-align: center;
        }
        .logo {
            width: 200px;
        }
        .banner1 {
            width: 540px;
            margin: 0 10px;
        }
        .banner2 {
            width: 200px;
        }
        .page-header div {
            height: 80px;
            line-height: 80px;
            background-color: #ccc;
        }
        .menu {
            height: 30px;
            line-height: 30px;
            background-color: #ccc;
            margin: 10px auto;
            text-align: center;
        }
        .left-top div {
            width: 368px;
            height: 198px;
            margin-right: 10px;
            border: 1px solid #000;
            background-color: white;
            line-height: 200px;
        }
        .left-bottom div {
            width: 178px;
            height: 198px;
            margin-top: 10px;
            border: 1px solid #000;
            line-height: 200px;
            margin-right: 10px;
        }
        .rightbox div {
            width: 198px;
            height: 128px;
            border: 1px solid #000;
            line-height: 128px;
        }
        .item-eight {
            margin: 10px 0;
        }
        .footdiv {
            height: 60px;
            background-color: #ccc;
            line-height: 60px;
            margin: 10px 0;
        }
    style>
    
head>
<body>
    <div class="container">
        <div class="page-header clearfix">
            <div class="logo leftfix">logodiv>
            <div class="banner1 leftfix">banner1div>
            <div class="banner2 leftfix">banner2div>
        div>
        <div class="menu">菜单div>
        <div class="content clearfix">
            <div class="leftbox leftfix ">
                <div class="left-top clearfix">
                    <div class="content-left leftfix">栏目一div>
                    <div class="content-right leftfix">栏目二div>
                div>
                <div class="left-bottom clearfix">
                    <div class="item-three leftfix">栏目三div>
                    <div class="item-four leftfix">栏目四div>
                    <div class="item-five leftfix">栏目五div>
                    <div class="item-six leftfix">栏目六div>
                div>
            div>
            <div class="rightbox rightfix">
                <div class="item-seven">栏目七div>
                <div class="item-eight">栏目八div>
                <div class="item-nine">栏目九div>
            div>
        div>
        <div class="footdiv">页脚div>
    div>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116

5、定位position

相对定位

绝对定位

固定定位

粘性定位

定位的层级

特殊定位的应用

6、布局

1、版心

2、常用的布局名称

3、重置默认样式

2、HTML5

2、新增标签

视频标签：

音频标签：

3、新增全局属性

3、兼容性处理

3、CSS3

1、新增css属性

2、新增文本属性

3、新增渐变

4、web字体

5、字体图标

6、2D变换

缩放：

旋转：

2D旋转

扭曲:

多重变换

7、3D转换

8、过渡

过渡的高级使用：

复合属性：

9、动画

动画的复合属性

过渡和动画的区别：

过渡需要触发条件，动画不需要。 动画可以指定关键帧。

10、多列布局

多列布局案例：

图片展示瀑布流

"outer">
	"...."/>
	"...."/>
	"...."/>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

11、伸缩盒模型

主轴方向

主轴换行方式

主轴的项目对齐方式

默认主轴水平从左到右

侧轴

1、元素的水平垂直居中布局

"outer">
	
"inter">