H5常用标签(语义化标签,常用7类标签)
1,语义化标签:头部,导航,区段,文章,页面内容外的东西例如侧边栏,对话框,底部。
2,列表,布局,表格,表单,文章,字体,多媒体标签。
列表:有序列表,无序列表,列表项。
布局:div,span。
表格:表格,表主体,表头,行,列。
表单:表单,输入框(属性:提示文字,最大长度,必填?display),按钮(button,submit,reset)。
文章:标题,段落,换行,分割线。
字体:斜体,粗体,小号,大号,强调。
多媒体:图,音频,视频。
CSS3(选择器,样式)
1,选择器
类名.,id#,属性[ ]
","群组选择器,后代 ,层级>
a:link,a:visited,a:hover,a:active
伪类(第一个,最后一个,第几个,奇数2n,偶数2n-1/2n+1)
2,圆角边框,元素阴影
图片边框:boder-image,图像边框。
圆角边框:boder-radius,50%画圆形。
元素阴影:text-shadow,box-shadow。
四个值:水平位移,垂直位移,模糊程度,颜色。多个阴影逗号隔开。
h-shadow v-shadow blur spread(尺寸) color insect(内阴影)
3,transtion过渡
transition: css属性名 时间;
例:transition: width 2s, height 2s, transform 2s;
4,anmation关键帧
@keyframes 动画名 {
0%{
//可以设置,opacity透明度,transform
}
50%{
}
100%{
}
}
div{
//简写
animtion:*动画名 *周期时间毫秒 速度曲线 开始时间 次数 下一周期是否逆向 结束后状态
}
animation属性:(名称,周期时间必要。可以设置7个属性)
animation-name:动画名称
-duration:一周期所用时间,单位毫秒
-timing-function:linear匀速,ease快-慢,steps步长
-delay:开始时间
-iteration-count:播放次数
-direction:(下一周期是否逆向,播放次数要大于2)
nomor正常,reverse终点=>起点
alternate起点=>终点=>起点,alternate-reverse终点=>起点=>终点
-fill-mode:结束时保持 forwards,回到起始 backwards
5,transfrom
2D转换平移,旋转,缩放,倾斜。
transform: translate(120px, 50%),平移。x轴,y轴
transform: rotate(30deg),旋转
transform: scale(2, 0.5),缩放
transform: skew(30deg, 20deg):倾斜
3D转换,右为x轴正方向,上为y轴正方向,z轴从屏幕出来为正方向。
6,渐变
- 线性渐变(向下/向上/向左/向右/对角线/deg角度)
- (to bottom、to top、to right、to left、to bottom right)
- 角度:角度是指水平线和渐变线之间的角度。0deg是向上,180deg是向下,90deg是向右。
background:linear-gradient(方向,初始颜色,结束颜色)
- 径向渐变(由其中心定义)
background:radial-gradient(center[中心点],形状,size,颜色);
7,flex布局
display:flex,子元素默认横向排列
主轴,主轴对齐方式,垂直轴,垂直轴对齐方式,项目对齐方式。
order调整顺序,flex占比。
1,flex-direction
属性决定主轴的方向(即项目的排列方向)。
flex-direction: row | row-reverse | column | column-reverse;
2,flex-wrap属性,换行设置
flex-wrap: nowrap | wrap | wrap-reverse;
3,justify-content
属性定义了项目在主轴上的对齐方式
左对齐,右对齐,居中对齐,两端对齐中间间隔相等,项目间隔相等
justify-content: flex-start | flex-end | center | space-between | space-around;
4,align-items
属性定义项目在交叉轴上如何对齐
baseline
: 项目的第一行文字的基线对齐。stretch
(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
align-items: flex-start | flex-end | center | baseline | stretch;
5,align-content
属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
项目属性:
6,order
属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。
7,flex-grow
属性定义项目的放大比例,默认为0
,即如果存在剩余空间,也不放大
如果所有项目的flex-grow
属性都为1,则它们将等分剩余空间,都为数字按比例。
8,flex-shrink
属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
9,align-self
属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items
属性。默认值为auto
,表示继承父元素的align-items
属性。
align-self: auto | flex-start | flex-end | center | baseline | stretch;
8,媒体查询,响应式布局,自适应
//文档宽度小于1366px时修改背景色
@media screen and (max-width: 1366px) {
body
{ background-color:lightblue; }
}
//如果屏幕宽度在400像素到600像素之间,则加载smallScreen.css文件。
<link rel="stylesheet" type="text/css" media="screen and (min-width: 400px) and (max-device-width: 600px)" href="smallScreen.css" />
设备
@media all{ }
print(打印),
screen(屏幕),
speech
not(排除某种设备) only(限定)
朝向,竖放(portrait),横放(landscape)。
//纵向
@media (orientation: landscape) {
body {
color: sky blue;
}
}
与或非
and,逗号,,not
css预处理工具sass,less
变量,嵌套,伪类嵌套,mixin混入,引入,计算加减乘除,if,for
sass:
1,定义变量$
$dark: #000;
.box {
color: $dark;
}
2,嵌套,大括号包裹大括号
{ { } }
3,伪类嵌套,&调用父选择器
a {
&:hover {
color: red;
}
}
4,mixin混入
@mixin name ($param1,$param2, ...) {
css样式
}
使用: @include name(样式1,样式2,…);
5,导入 import
@import “css1”
6,加减乘除,if,for循环,while循环
less
1,定义变量,选择器,属性,地址
@dark: #000;
.box {
color: @dark;
}
//选择器和属性名可以均作为变量
@Mycontain:width;
.@{Mycontain}{//选择器
height:300rpx;
@{Mycontain}:200rpx;//属性名
}
2,延迟加载(#)
变量是延迟加载的,在使用前不一定要预先声明。
语法:@变量1:@变量2;
@变量2:9%;
3,mixins混入
1,普通混入
//1.普通混合
.bor{
background-color: aqua;
width: 32rpx;
}
.poop{
color:white;
//混入.bor
.bor;
}
.boom{
height:200rpx;
.bor;
}
2,定义混入的内容在css中不显示,类的名字后面加上括号,不会到css样式中显示!
// 2.不带输出的混合
.mymix{
color:black;
}
//css样式中不显示
.mymix-echa(){
background-color: white;
}
.dad{
width: 30rpx;
height:30rpx;
}
编译后
.mymix {
color: black;
}
.dad {
width: 30rpx;
height: 30rpx;
}
:extend继承
p1{
width: 100px;
height: 200px;
}
// extend对当前选择器扩展指定选择器的样式(选择器分组)
.p2:extend(.p1){
color: red;
}
---------------------------------------------------------------
.p3{
// 直接对指定的样式进行引用,这里就相当于将p1的样式在这里进行了复制
//mixin混合
.p1();
}
// 使用类选择器时可以在选择器后添加一个括号,这时实际上我们就创建了一个mixins
.p4(){
width: 100px;
height: 100px;
}
.p5{
.p4();
}
.p5{
.p4;
}
————————————————
版权声明:本文为CSDN博主「二九君」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_44019523/article/details/109593535
4,嵌套
花括号包裹花括号
伪类嵌套,需要在:前加&号,&表示外层父元素
div{
font-size: 14px;
&:hover{
font-size: 20px;
}
}
5,运算
- 在less中可以直接用运算符来计算,加(+)、减(-)、乘(*)、除(/)
- 注意:使用除法计算时,需要使用括号将表达式括起来;例如(25 / 2)
6,@import导入
- @import url(abc.less);
- @import 'abc.less'
7,混合函数
// 混合函数 混合函数中可以直接设置变量
.test(@w:100px,@h:200px,@bg-color:red){
width: @w;
height:@h;
border: 1px solid red;
background-color: @bg-color;
}
div{
// 调用混合函数按顺序传递
// .test(200px,300px,#bfa);
// .test(@bg-color:red, @h:100px, @w:200px)
.test(300px);
}
浏览器调试工具使用
断点,网络请求,替换js文件。
1,打上断点:在F12源代码中点击代码序号红点,打上断点,F10
下一步、F8
全部执行。
2,网络(Network),查看网络请求数据。
3,切换移动端,切换手机型号,网络状况。
4,Vue devtools插件
5,替换js文件
控制台命令
console.table,表格形式打印