hooyantsing's Blog

第22次课程

字数统计: 1.2k阅读时长: 6 min
2019/06/02

源辰74班

第22次课程

06.02.2019

**内容    **

CSS

1.position(定位)

**position : absolute(绝对定位)****relative(相对定位)**\fixed(固定定位) ;

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
<!DOCTYPE html>
<html>
      <head>
            <meta charset="UTF-8">
            <title></title>
            <style>
            div{
                  height: 100px;
                  width: 100px;
            }
                  /*position:absolute 绝对定位*/
                  /*脱离文档流,不占用原来位置(相当于float),可定位任意位置*/
                  #absolute{
                        position: absolute;
                        top:200px;
                        left: 200px;
                        background: red;
                        
                  }
                  /*position:relative 相对定位*/
                  /*脱离文档流,占用原来位置,可定位任意位置*/
                  #relative{
                        position: relative;
                        top:300px;
                        left: 300px;
                        background: blue;
                  }
                  /*position:fixed 固定定位*/
                  /*脱离文档流,一直存在于屏幕的某个位置*/
                  #fixed{
                        position:fixed;
                        top:400px;
                        left: 400px;
                        background: green;
                  }
            </style>
      </head>
      <body>
            <div id="absolute"></div>
            <div id="relative"></div>
            <div id="fixed"></div>
      </body>
</html>

2.子绝父相

子标签绝对位置,父标签相对位置

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
<!DOCTYPE html>
<html>
      <head>
            <meta charset="UTF-8">
            <title></title>
            <style>
            /*子绝父相*/
                  #father{
                        height: 200px;
                        width: 200px;
                        margin: 500px auto;
                        background: red;
                        position: relative;
                  }
                  #son{
                        height: 100px;
                        width: 100px;
                        background: blue;
                        position: absolute;
                        top: 10px;
                        left: 10px;
                  }
            </style>
      </head>
      <body>
            <div id="father">
                  <div id="son"></div>
            </div>
      </body>
</html>

3.[项目]Win8,web版本

效果图:

**ab443f1e8b46370b9437d5159657c21f.png

**

CSS     CSS.css

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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
*{
      padding: 0;
      margin: 0;
}
body{
      font-family: "微软雅黑";
      background: url(../img/1.png) no-repeat;
      background-size: cover; /*背景最大化*/
}
header,footer{                      /*群选择器*/
      width: 100%;
      height: 40px;
      background: #999;       /*背景颜色*/
      position: fixed;        /*固定定位*/
      color: #fff;                  /*字体颜色*/
      line-height: 40px;            /*文字上下居中*/
      text-align: center;           /*文字左右居中*/
      opacity: 0.8;                 /*半透明:80%*/
      letter-spacing: 4px;    /*文字间距*/
}
header{
      left: 0;
      top:0;                              /*距离顶部*/
}
footer{
      left: 0;
      bottom: 0;                    /*距离底部*/
}
ul li{
      list-style: none;       /*去掉小圆点*/
      position: relative;           /*“父标签”,相对位置*/
      float: left;
      overflow: hidden;       /*区域外的部分隐藏*/
}
ul li div{
      width: 100%;
      height: 100%;
      color: #fff;
      font-size: 20px;
      text-align: center;
      line-height: 155px;
      position: absolute;           /*“子标签”,绝对位置*/
      transition: all .3s ease-in;  /*过渡动画:所有方向 播放时长 由慢到快*/
}
article{
      margin-top: 100px;
      margin-left: 80px;
      width: 95%;
      height: 640px;    
}
@-webkit-keyframes start{           /*开场动画*/
      0%{transform: translateX(400px); opacity: 0;}   /*过渡动画:X轴方向  不透明度*/
      100%{transform: translateX(0); opacity: 1;}
}
article #coll{
      height: 100%;
      width: 400px;
      float: left;
      -webkit-animation: start 2s ease-out 1 normal;  /*开场动画开关:动画名称 播放时长 由快到慢 播放次数 正常播放*/
}
article #coll ul{             /*后代选择器*/
      width: 100%;
      height: 100%;
}
.li1{
      width: 100%;
      height: 24%;
      margin-bottom: 2%;
      background: red;
}
.li1 div:first-child{
      background: url(../img/blue.jpg);
}
.li1 div:last-child{
      background:url(../img/summer.jpg);
      top:100%;
}
.li1:hover div{                     /*将鼠标放在li1上时,触发伪类,div变化*/
      transform: translateY(-100%);
}
.li2{
      width: 49%;
      height: 24%;
      background: blue;
}
.li2 div:first-child{
      background: blue;
}
.li2 div:last-child{
      background: orchid;
      left: -100%;
}
.li2:hover div{
      transform: translateX(100%);
}
.li3{
      width: 49%;
      height: 24%;
      margin-left: 2%;
      background:purple;
}
.li3 div:first-child{
      background: purple;
}
.li3 div:last-child{
      background: gold;
      left: 100%;
}
.li3:hover div{
      transform: translateX(-100%);
}
.li4{
      width: 49%;
      height: 24%;
      margin-top: 2%;
      background: yellow;
}
.li4 div:first-child{
      background: yellow;
}
.li4 div:last-child{
      background: olive;
      left: -100%;
}
.li4:hover div{
      transform: translateX(100%);
}
.li5{
      width: 49%;
      height: 24%;
      margin-top: 2%;
      margin-left: 2%;
      background: pink;
}
.li5 div:first-child{
      background: pink;
}
.li5 div:last-child{
      background: deeppink;
      left: 100%;
}
.li5:hover div{
      transform: translateX(-100%);
}
.li6{
      width: 100%;
      height: 24%;
      margin-top: 2%;
      background: orange;
}
.li6 div:first-child{
      background: url(../img/summer.jpg);
}
.li6 div:last-child{
      background: url(../img/blue.jpg);
      top:-100%;
}
.li6:hover div{
      transform: translateY(100%);
}

HTML GuanWang.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
<!DOCTYPE html>
<html>
      <head>
            <meta charset="UTF-8">
            <title></title>
            <link rel="stylesheet" href="css/CSS.css" />
      </head>
      <body>
        <header>欢迎使用Win8操作系统</header>
        <article>
             <div id="coll">
                   <ul>
                         <li class="li1">
                               <div>你好</div>
                               <div>中国</div>
                         </li>
                         <li class="li2">
                               <div>你好</div>
                               <div>中国</div>
                         </li>
                         <li class="li3">
                               <div>你好</div>
                               <div>中国</div>
                         </li>
                         <li class="li4">
                               <div>你好</div>
                               <div>中国</div>
                         </li>
                         <li class="li5">
                               <div>你好</div>
                               <div>中国</div>
                         </li>
                         <li class="li6">
                               <div>你好</div>
                               <div>中国</div>
                         </li>
                   </ul>
             </div>
        </article>
        <footer>湖南衡阳源辰信息科技有限公司&copy;版权所有2014-01-01</footer>
      </body>
</html>
CATALOG