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
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
|
常用标签: h1-h6 span div p i b pre
图片:img(src,width,height,alt,title)
超链接:a(href,target[_self,_blank])
锚标记:<a href="#id"> <div id="id">
列表:
无序:<ul> <li></li> </ul>
有序:<ol> <li></li> </ol>
自定义:<dl> <dt>标题</dt> <dd></dd> </dl>
多媒体标签:<audio src="" controls loop autoplay></audio>
视频:video
属性:src(路径),controls(显示播放控制栏)
loop:视频循环播放,autoplay(自动播放<移动端>)
音频:audio 属性和视频一样
边框线div{border:1px solid red;} 单条边框线:border-left:1px solid red;
none无边框（默认值）solid实线 dashed虚线 dotted点状线 double双实线
边框圆角 div{ border-radius:50%(20px); }
单个圆角 border-top-raidius:20px;
内边距padding 百分比：10%（基于父级的宽度） 外边距margin 注意边框合并
当上下相邻的两个元素，在相邻的面同时拥有外边距时( 只会取大的,不会叠加)
盒子模型: 从内到外为 内容<内边距<边框<外边距 共同组成一个盒子总大小
不改变盒子总大小( 默认content-box ):
box-sizing:border-box; (盒子的实际大小)
盒子阴影：div{ box-shadow:5px 5px 10px 0px red inset; }
x轴偏移量 y轴偏移量 模糊度 模糊面积增量 阴影颜色 阴影风格(默认outset)；
多层阴影 逗号隔开;
过渡:
div{ transition:all 2s 5s linear; }
过渡的属性 时间 延迟时间 运动曲线(默认ease,加速ease-in)；
多个属性不同的设置: transition:width 2s,height 4s;
样式初始化:兼容问题.
body,dl,ol,ul,dd,dt,p,h1,h2,h3,h4,h5,h6{margin:0;padding:0;}
body{font:12px/1.5 'Microsoft yahei';}
i,em {font-style:normal;} b ,strong{font-weight:normal;}
ol,ul{ list-style:none; }
a{ text-decoration:none; color:inherit;}
img{ border:0; vertical-align:bottom; }
标签包含: 段落不能含div 行块级 有默认3px空白 基线对齐方式造成
字体样式
风格:a{ font-style:italic; }normal默认 italic斜体字体 oblique倾斜字体
类型:a{ font-family:"Microsoft yahei/宋体/楷体.."; }
粗细:a{ font-weight:bold; } bold加粗 数字100-900;
行高:a{ line-height:22px; }
复合样式:font:bold italic 16px/1.5 'Microsoft yahei' ; 字体大小/类型必须要
文本样式:
水平对齐方式:a{text-align:center;} 值：left/right/center
文本修饰:a{text-decoration:none;} underline（下划线）、overline（上划线）、line-through（删除线）
首行缩进:a{text-indent:10px;} 允许使用负值
溢出处理:a{text-overflow:clip;} 值：clip（超出裁剪）、ellipsis（超出出现省略号）hidden(隐藏)
字母处理:a{text-transform:none;} 值：capitalize（单词首字母大写）、uppercase/lowercase（全部小写）
字间距:a{letter-spacing:10px;} 词间距:a{word-spacing:10px;}
换行方式a{ white-space:pre ; } 保留空格、缩进、换行，但是文本不会自动换行）
单词换行方式:a{word-break:break-all;} break-all（允许在单词内换行 keep-all( 不允许在单词内换行 )
内容溢出处理:div{ overflow:hidden; } 溢出隐藏（hidden） 溢出出现滚动条（auto）
指针样式（cursor:） pointer 一只手 move 可被移动 text 指示文本 wait 沙漏 help 问号
引用指针样式 li{ cursor:url('pointer.cur'),pointer; } 第二个值 备用样式，且为必须值
css样式的继承
1、部分常见继承样式：字体,行高等......
2、继承注意点 a标签不会被继承字体颜色 继承属性的优先级较低
css特性:
层叠性(在同一个标签同种属性后面会覆盖前面属性)
继承性:嵌套关系中,字体,颜色等会被子元素继承
优先级:标签选择器 < 类选择器 < ID选择器 < 行内样式 < !important
转义字符 空格   大/小余号 >%lt 人民币 ¥
元素处理
元素显示分类: 块级(block), 行级inline(不支持宽高), 行内块(块级并排显示)
元素转化: display:inline-block;
元素显示状态
visibility:hidden / visible **占位隐藏
display:none / block **整个消失,不能过渡了
overflow:hidden / visible(默认) / auto / scroll; **超出部分处理
元素透明度 div{ opacity:0.5; } 0~1 ：
rgba(文字不会透明) opacity(整个元素透明)
行块元素对齐方式 vertical-align:top / bottom / middle中对齐 浮动 / 定位元素无效
浮动:div{ float:left; } left/right 从右到左排列
不再支持 margin:auto; 行级元素可以设置宽高了
支持margin,padding 不能撑起父级的高度
清除浮动: 解决父级高度塌陷
清除浮动的属性元素的本身必须为块级特性
.clearFixed:after{ content:''; display:block; clear:both; }
.clearFixed{ zoom:1; }
定位: div{ position 大专栏 HTML笔记总结:relative; left:1px; top:1px; } 百分比 right:50%
相对 relative 绝对 absolute 静态定位(默认) static
固定定位：fixed 相对浏览器窗口移动
定位层级:z-index 优先父级比较
精灵图: 背景定位 给负值; 二倍图: 需要时缩小一半
阿里矢量图标库 图标官网地址：http:
2. 下载至本地引用 1. 在线引用图标
加入购物车--下载源代码--引人css--font-class方式--
css选择器
类: .p id器: #p 标签: p 通配符: *
群组(并集): a , p 子代: .a > p 后代 .a p
伪类选择器:
1、未被点击时a:link{ color:red; }
2、鼠标悬停时a:hover{ color:red; }
3、鼠标按下时a:active{ color:red; }
4、点击过后时a:visited{ color:red; }
属性选择器: [type="tetx"]{}
选中属性中包含某个值 [type*="t"]; 某个值开始: ^= 结束 :&=
结构伪类:
:first-child{} :last-child{}
span:nth-child(n){从第一个子元素计算}
焦点伪类(元素获得焦点) :focus{}
伪元素(模拟标签): a::after{}
a::before{ content:'内容'; } 元素前面插入内容
content 为必须的属性
h5新标签(语义标签)
nav header footer section article aside 等
表单元素 input type="url"
邮箱:email 网址:url 取色器:color
数字:number(step="2" 设置每次增加的值)
日历:date week(一年中的第几周)
选择器的优先级: 选择器作用的范围越大优先级越低
1.行内 > ID > class > 标签名 > 通配符 > 默认样式
背景属性
background-color(颜色)/image(图片)/size(大小)/repeat(重复方式:none不重复,-x/y延x/y轴)/position(定位)
关键字：center、top、right、bottom、left 固定的数值1px、百分比10%
背景大小:div{ background-size: cover}
cover：等比缩放铺满整个元素 contain：等比缩放到遇到第一条元素边缘
背景依附:div{ background-attachment:fixed; }
scroll：随界面的滚动而移动（默认值） fixed：不会随界面的滚动而移动
复合属性:background:url(“”) no-repeat center/cover fixed;
表单
input: valid 验证 required 必填项 placeholder 设置提醒
maxlength:输入的最大长度 value:框中默认值
构成 <form action=“提交地址”method=“提交方式(get普通/post加密)”>
文本:text; 密码:password;
单选:radio; 多选: checkbox;
提交按钮:submit; 普通按钮:button; 重置:reset;
文件上传: file 隐藏输入框: hidden
多行文本输入框
<textarea></textarea>
resize:none; 禁止改变大小 cols=“50” 一行最大字节 rows=“10” 最大行数
下拉列表
size="1" 可见的数目 selected 默认选中 multiple:可选择多个选项
disabled:禁止输入
<select name=“date”>
<optgroup lable="组名">
<option></option>
</optgroup>
<option value=“1”>一月</option>
</select>
关联控件(label）通过for属性关联某些表单元素，使用户在使用鼠标操作时更加方便
<label for=“textID”>帐号:</label><input id=“textID” />
表格
行-单元行（tr） 列-单元格（ td 上下居中 左对齐显示 th 默认加粗并且左右上下居中 ） <table> th,td设置margin时没有效果
<caption>设置表头占一行</caption>
<tr> <th> </th> </tr>
<tr> <td> </td> </tr>
</table>
属性/样式 caption标题 th首行 tr行 td内容
1、表格边框 大小 <table border='1'></table>
2、边框合并 table{ border-collapse:collapse; }
3、单元格合并行属性<td rowspan='2'><td>
4、单元格合并列属性<td colspan='3'><td>
内联框架: 定义一个区域，并在这个区域直接加载一个外部网页
<iframe src='连接路径' width='出现宽' height='出现高度'
frameborder='1显示边框 0不显示' scrolling='(是否显示滚动条)yes no auto(自动显示)'>
</iframe>
transform 2d属性 只对 block 级元素生效
perspective: 800; 视距,由远及近效果
位置: transform:translate(x,y);
x水平方向 百分比,按照自己宽度移动, y垂直方向
旋转:rotateX/Y(20deg) **正负表示方向
缩放:scale(x,y); **表示宽,高倍数 *一个值,宽高一样 ,小数表示缩
倾斜:skewX/Y
.box{width: 100px;height: 100px ; transition: all 2s;}
.box:hover{ width: 2px;height: 2px; transform: rotate(180deg) translateX(100px); }
css3动画 兼容前缀 @-webkit- @-moz- @-ms- @-o-keyframes
@keyframes move{
from{ transform: rotateY(0deg);}
to{ transform: rotateY(‐180deg);}}
li{animation: move 3s linear 2s infinite alternate;}
定义动画名 播放时间、速率、延迟、次数、反向 轮播。
一个元素调用多个动画 animation: move 1s,move2 1s;
3D属性 : 有3d 可不加视距
视距(给父级):perspective:1000px;
坐标轴:
**x轴: 水平从左向右为正方向 **y轴: 垂直从上到下为正方向 **z轴: 从内向外为正方向
位移: translateX/Y/Z;
旋转: rotateX/Y/Z
缩放: scaleX/Y/Z(Z立体图形中表示厚度)
ul{ transform‐style: preserve‐3d;}
li{
transform-origin: top center; 旋转点
transform: scaleY(0) rotateY(-180deg);
transition: all 0.5s;
}
2d旋转以点为中心(两个值构成坐标) 3d旋转以线为中心
半圆:宽高1:2,圆角改变两个角 ;
三角形: 宽高为0,边框加大,颜色透明,其中一条边框加颜色;
目标伪类选择器 :target{ 与锚链接配合使用 }
#w{ color: red;}
<p id="w">9</p> <a href="#w">去w</a>
渐变:(图片背景属性)
线性: background-image: linear-gradient(to top, red,green);
开始位置,开始颜色,结束颜色
90deg, red 20%,green 占整个元素的20%
径向: background-image: radial-gradient(red, yellow);
圆点位置和半径（范围） 默认中心
50px at 0px 0px, red, yellow
过度运动曲线( 两边 展开)
transition:all .5s cubic-bezier(0.61,-0.19, 0.7,-0.11);
=============移动端
移动web页面开发：核心在与解决页面适配
【页面中水平方向不能出现滚动条，页面中不能出现缩放效果】
第一种页面适配解决方案：
流式布局（百分比布局） + 视口设置（meta标签）
1. 给父元素设置宽度为100%;
2. 不能让页面中的内容缩放（通过设置meta标签【视口实现】）
<meta name="viewport" content="width=device-width,
initial-scale=1" user-scalable=0 />
initial-scale=1 ： 禁止页面出现缩放
width=device-width ： 让盒子等于当前设备宽度（避免页面中出现滚动条）
user-scalable=0 : 禁止用户缩放
最小/大宽/高度(会跟随设备 达到峰值则不会再改变)
max-width min-width
分辨率：
屏幕分辨率： 衡量移动设备在显示画质方面的一个标准。
物理分辨率： 设备的大小（设备的宽度 + 设备高度）
像素密度（PPI）：
每英寸面积中所能容纳的像素点个数。
像素密度作用：在移动设备中像素越高，渲染出来的画质越好（细腻）
px单位是一个相对单位 **1px在不同设备大小不一样
设备独立像素（dpr）:
每台设备中都有一个固定的比例值。 实现了一个页面适配。
2倍图： 将默认图片大小设置为原来的2倍（图片在不同设备中正常预览）。
需要时将背景图缩小一半(size),再去定位位置
多行多字出现省略号
文本换行方式(一行末尾换行) word-break:keep-all;
高度固定 height:30px;
溢出隐藏 overflow:hidden;
文本溢出出现方式 text-overflow:ellipsis;
用来控制显示行数 -webkit-line-clamp: 2;
文字显示方式,默认水平 -webkit-box-orient: vertical;
将盒子转为弹性盒子 display: -webkit-box;
伸缩布局 (子元素默认会一行显示)
盒子中有主轴(默认水平显示),侧轴(始终垂直主轴)
给父级设置: display:flex;
1.设置主轴方向(父级加)
flex-direction:row(默认,一行显示) column(独占一行);
2.元素在主轴(水平)的对齐方式(位置)
justify-content:flex-start(左上位置) flex-end(右上位置)
center(盒子居中) space-between(两边无间隙 中间盒子居中)
space-around(子元素中间有间隙)
3.元素垂直对齐方式();
align-items:flex-start(左上) flex-end(左下)
center(中间对齐) stretch(默认值,占满整个高度： 拉伸)
4.伸缩盒超出父级宽度自动换行
flex-wrap:wrap; nowrap(默认);
5.文字水平垂直居中(本身要变成伸缩盒):
align-items :center; justify-content:center;
6.设置子元素(需要父元素为伸缩盒)
align-self:center; 单独控制对齐方式:
flex:1; 设置等分,不等分 单份2,3..
order:1; 子元素排序(值越小越在前面)
less(预处理器 维护和管理css代码)
依然是css语法,但嵌入变量等功能,简化css编写, 常见的有less,sass,stylus等
创建.less文件,会自动生产css文件
1.定义变量
@名称: 值;
p{width: @名称}
2.嵌套写法
.box{
width:100px;
.box1{
属性:值
a{ }
}
}
3.支持数字运算 + - * /
width:100px + @num;
4.公共样式书写
.test(可带参数 / 或变量 ){属性:值;}
.box{ .test(); }
rem + 媒体查询(页面精细化的适配)
用户缩放时,设备不同,显示的px也不同,固定大小需要适配;
媒体类型:
1. all(所有设备) 2. print(打印设备) 3. screen(带有屏幕的设备 pc浏览器,移动设备)
媒体特性: (设备的宽高,横屏还是竖屏)
width(最小/最大) height
orientation: portrait(竖屏) | landscape(横屏)
语法: 媒体特性(width:100px | orientation:landscape)
@media only screen and (媒体特性){ css代码 }
rem 相对单位( 相对于根标签,html文字大小的两倍 12px 2em=24px)
em 相对单位 (当前标签文字大小)
rem适配 常用稿件640px(20份) 750px(25份)
@d:20;
@dx:640px/@d;
height: 16rem/@dx;
@media only screen and (min-width:320px){
html{
font-size:320px/@d;
}
}
外联引入:
<link rel="stylesheet" href="01.css"
media="only screen and (max-width: 420px)">
响应式布局:
根据设备差异，网页布局会发生对应的改变
核心技术点： 媒体查询 + 流式布局 | 伸缩布局
通过媒体查询实现相应式布局
分析是PC设备
@media only screen and (min-width: 1025px) { }
分析是中等设备
@media only screen and (max-width: 1024px) { }
分析移动设备
@media only screen and (max-width: 768px) { }
|