HTML&CSS Favorite
1.基础知识
1.HTML
1.1基本结构标签
1.骨架
2.排版标签
标题标签 标题文本
h1> h1~h6
段落标签 段落文本内容
水平线标签
水平线
换行标签
换行
布局标签 这是一个区域 division
今日价格
3.文本格式化标签
文字粗体 粗体字
文字斜体 斜体字
文字加删除线 加删除线
文字加下划线 加下划线
4.标签属性
<标签名 属性1=“属性值1” 属性2="属性值2">内容
5.图像标签
src="URL" 图形的路径,必填
alt="文本" 图像不能显示时的替换文本
title="文本" 鼠标悬停时显示的内容
width/height="数字" 设置图像的宽高
border="数字" 边框的厚度
6.链接标签
文本或图像
href="外部链接/内部链接/空连接/超链接"
target="self/blank/" self为默认值,blank为新窗口打开
把所有的连接都默认添加target,写在里
text-decoration: none;
7.注释标签
8.锚点
第二集
创建链接锚点
跳转到第二集 跳转接口
1.2进阶组件标签
1.表格 --多用来展示数据
tr - th
tr - td
tr - td
表格顶部大标题
标题行01
标题行02
标题行03
第一行单元格01
第一行单元格02
第一行单元格03,跨行合并下边一格
第二行单元格01
第二行单元格02
第二行单元格03,被跨行合并应删除
第三行单元格01
第三行单元格02
第三行单元格03
底部单元格01
底部单元格02
底部单元格03
border 设置表格的边框,默认border="0"无边框
align 设置表格在网页中的水平对齐方式,left center right
cellspacing 设置单元格与单元格边框之间的空白距离
cellpadding 设置单元格内容与单元格边框之间的空白距离
rowspan 跨行合并,合并上下 rowspan="合并单元格的个数"
colspan 跨列合并,合并左右 colspan="合并单元格的个数"
2.列表 --多用来布局
ul - li /无序列表
ol - li /顺序列表
dl - dt /标题列表
- dd
- 列表项01
* 无序列表列表项01
- 列表项01
* 无序列表列表项01
- 列表项01
* 无序列表列表项01
- 列表项01
1.有序列表列表行项01
- 列表项01
2.有序列表列表行项01
- 列表项01
3.有序列表列表行项01
- 中国
- 北京
- 上海
- 深圳
list-style:none; //取消列表样式
3.表单
action 用于指定接收并处理表单数据的服务器程序的url地址
method 用于设置表单数据的提交方式,其取值为get或post
name 用于指定表单的名称,以区分同一个页面中的多个表单
4.input控件
男
女
type="text/password/radio/checkbox/button/submit/reset/image/file"
5.label标签
作用:用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点
-用法一,label直接包含表单
-用法二,通过for 和 id来控制
6.textares文本域控件
文本内容
7.下拉菜单列表
请选择:
1.3 HTML用例
//字体布局
JavaScript,CSS, HTML,Java,C##,Android,
¥5800 ¥4900
1.4 Emmet快捷键语法
1. div+tab键
2. div*3
3. ul>li
4. div+p
5. .className
6. #idName
7. .className$*3 //生成有顺序的自增的类名
1.5 HTML5新增
1. 新增语义化标签
头部
内容标签
块级标签
2. 新增多媒体标签
-src:播放文件的路径
-controls:音频播放器的控制器面板
-autoplay:自动播放
-loop:循环播放
-poster:指定视频还没有完全下载完毕,或者用户没有点击播放前显示的封面
-width:视频的宽度
3. 新增input表单属性
4. 新增type属性
- type= text/password/email/tel/url/number/range/color/time/date/
datetime-local/month/week
-常用 type= 'email/url/date/time/number/tel/search/color'
5. 进度条
6. 内嵌入边框线的文字
2.CSS
2.1 CSS基础
2.1.0 CSS基础
建议书写顺序:定位/盒子/文本
文本:(颜色,水平位置,垂直位置,首行缩进,下划线)
字体:(大小,字体,粗细,倾斜)
背景:(背景颜色,背景图片,背景透明,背景平铺,背景位置,背景滚动)
盒子模型:(宽高,边框线,外边距,内边距)
定位与浮动
显示与隐藏
1.文本:(颜色,水平位置,垂直位置,首行缩进,下划线)
color: black //前景色(文字颜色)
text-align:center;/left;right;center;justify; //设置文本内容水平对齐方式
height: 50px; //搭配使用,行高等于高度,垂直居中
line-height: 50px/24px;//行高,设置文本的最小行高,元素中每一行文字所占据的高度,两行文字基线(baseline)之间的间距
vertical-align: middle;//设置元素的垂直对齐方式,只针对行内元素或行内块元素(img)
baseline;bottom;text-bottom;top;
text-indent: 2em; //首行缩进,设置第一行内容的缩进,1em就是一个汉字的宽度
text-decoration:none;underline;overline;line-through //设置文字的装饰线
text-shadow: //给文字添加阴影效果
direction:
letter-spacing
word-spacing:
text-transform:
white-space:
2.字体:(大小,字体,粗细,倾斜)
font: font-style font-variant font-weight font-size/line-height font-family
font-size: 16px;2em(200%) //文字大小,16px为默认
font-family: “宋体”;/Arial,“Microsoft YaHei”,“黑体”; // 设置字体,多个字体
font-weight:normal(400);bold(700) //用于设置文字的粗细(重量)
font-style: normal;italic;oblique //设置文字的常规、斜体显示
font-variant: normal;small-caps; //影响小写字母的显示形式.small-caps将小写字母替换为缩小过的大写字母
3.背景:(背景颜色,背景图片,背景透明,背景平铺,背景位置,背景滚动)
background: url(“images/beer.png”) center center/150px 250px no-repeat #f00
image position/size repeat attachment color
background: rgba(0,0,0,0.3) //背景半透明,最后一个参数Alpha透明度,取值0~1之间
background-color: #000000;transparent;//透明色
background-image: url(“bg001.png”);
background-repeat: repeat;no-repeat;repeat-x;repeat-y; //设置背景图片是否要平铺
background-size: auto;cover;contain;150px 180px; //设置背景图片的大小
background-attachment: scroll;fixed; //背景图片跟随元素关系,滚动/固定
background-position: 60px 80px; //设置背景图片在水平、垂直方向上的具体位置
: left;center;right;
: top;center;bottom;
: center top; //常用定位
background: linear-gradient(起始方向,颜色1,颜色2, …);
background: linear-gradient(left,red,blue); //背景颜色线性渐变
background: -webkit-linear-gradient(left,red,blue);
cursor:auto;default;pointer;text;none; //设置鼠标指针(光标)在元素上面时的显示样式
opacity: 0.2; /盒子半透明/
4.盒子模型:(宽高,边框线,外边距,内边距)
width: min-width;max-width;
height: min-height;max-height;
border: 1px solid #f00;1px solid transparent; //透明边框
border-width:1px;
border-style:none;dotted;dashed;soild;double;groove;ridge;inset;outset;
border-color: #fff;
border-radius: 50%; // 缩写属性,50%一个圆
border-radius: 15px 0 0 15px; //左上角 右上角 右下角 左下角
border-top-left-radius: 20px; //上左
border-top-right-radius: 20px; //上右
border-bottom-right-radius: 20px; //底右
border-bottom-left-radius: 20px; //底左
border-collapse:collapse; //相邻边框合并在一起
margin: //外边距, margin一般是用来设置兄弟元素之间的间距,左右外边距
padding: //内边距, padding一般是用来设置父子元素之间的间距
margin: 0 auto; //块级盒子水平居中,盒子须有宽度
text-align: center; //文字,行内元素,行内块水平居中
box-shadow: 64px 64px 12px 40px rgba(0,0,0,0.4) inset //可以设置一个或者多个阴影
box-shadow: 2px 2px 2px rgba(0, 0, 0, .3);
outline: none; //表示元素的外轮廓,不占用空间,默认显示在border的外面
outline-width:
outline-style:
outline-color:
5.定位与浮动:
–浮动-- (脱标,无位,类行内块)
float: none;left;right; //浮动,文字四周环绕图片,不能与行内级内容层叠,浮动元素之间不能层叠
clear: //一般就只用在非浮动元素上,可以让非浮动元素与浮动元素不层叠,清除浮动
left //要求元素的顶部低于之前生成的所有左浮动元素的底部
right //要求元素的顶部低于之前生成的所有右浮动元素的底部
both //要求元素的顶部低于之前生成的所有浮动元素的底部
none //默认值,无特殊要求
–定位–
z-index: 10; //用来设置定位元素的层叠顺序
2.1.0 CSS基础
6.列表:
list-style: none; outside url("images/dot.png"); //缩写属性
list-style-type: none;disc;circle;square;decimal;lower-roman;upper-roman;lower-alpha;upper-alpha; //设置li元素前面标记的样式
list-style-image: //设置某张图片为li元素前面的标记,会覆盖list-style-type的设置
list-style-position: outside;inside; //设置li元素前面标记的位置
7.表格:
border-collapse:collapse;
border-spacing:10px 20px;0; //设置单元格之间的水平、垂直间距
8.显示与隐藏:
display: block; //让元素显示为块级元素
inline; //让元素显示为行内级元素,不会占着任何位置
none; //隐藏元素,不占位子
inline-block; //让元素同时具备行内级、块级元素的特征
// 让a、span能够随时设置宽高,让div、p能够跟其他元素在同一行显示
visibility:visible;hidden; //能控制元素的可见性,还会占着原来的位置
overflow:visible;hidden;scroll;auto; //控制内容溢出时的行为,设置overflow为auto触发BFC
resize: none; //禁止缩放
resize: horizontal; //水平缩放
resize: vertical; //垂直缩放
resize: both; //水平垂直缩放
opacity
ilter
9.选择器
a:link //未访问的链接
a:visited //已访问的链接
a:hover //鼠标移动到链接上
a:active //选定的链接
a:link {
color: #333;
text-decoration: none;
}
.nav a:hover {
color: red; //鼠标放到nav里边的链接才会变色
}
2.1.1 知识基础
//块级元素
2.1.2 CSS用例
//盒子浮动使用 .one { float: left; width: 200px; height: 200px; background-color: red; } //清除默认内外边距 * { margin:0; padding:0; } // 导航栏布局
.nav { //父给宽高,子浮动 width: 760px; height: 32px; margin: 0 auto; } .nav ul li { float: left } .nav ul li a{ display: block; width: 80px; //给a宽高扩充点击范围 height: 32px; line-height: 32px; text-align: center; font-size: 12px; background: url(images/button1.jpg) no-repeat; } .nav ul li a:hover{ background: url(images/button2.jpg) no-repeat; } //文字省略处理 { white-space: nowrap; //强制一行内显示文本 overflow: hidden; //超出的部分隐藏 text-overflow: ellipsis; //文字用省略号替代超出的部分 } //版心 (但子盒子可以比父盒子宽) .w{ width:1200px; margin: 0 auto; } //去除图片底部的空白空隙 { vertical-align: middel;/top;/bottom; } // 盒子外边框重叠,压住盒子相邻边框 { float: left margin-left: -1px; margin-top: -1px; } //CSS伪元素和边框造小三角图标 .more::after{ content: ""; position: absolute; top: 9px; right: 9px; width: 7px; height: 7px; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg); }
2.2 清除浮动
//after双伪元素法清除浮动,给父元素增加::after伪元素的方式清除浮动
.clearfix::after{
content: "";
display: block; /*能设宽高,看不见,高为零*/
visibility: hidden; /* 兼容旧浏览 */
height: 0; /* 兼容旧浏览器 */
clear: both;
}
.clearfix {
*zoom: 1; /* 兼容IE6~7浏览 */
}
//父元素添加overflow清除浮动
overflow: hidden
2.3. flex布局
2.3.1 Flex容器的属性
//使用 display: flex
//定方向 flex-direction
//主轴 justify-content
//交叉轴 align-items
//换行 flex-wrap
//方向XY行
// flex-flow
// align-content
//开启flex布局
display: flex, 块级元素,flex container以block-level的形式存在
display: inline-flex 行内元素,flex contaier以inline-level形式存在
//设置容器内部元素的主轴排列方向
flex-direction:
row //水平排序,从左向右,主轴为横向
row-reverse //从右向左
column //垂直排序,从上到下,主轴为竖向
column-reverse //从下到上
//设置使容器内的元素换行
flex-wrap:
nowrap // 元素不换行,元素会缩放
wrap // 换行,宽度不够自动换行至第二行
wrap-reverse // 逆向换行
补充:
white-space: nowrap; /*规定段落中的文本不进行换行*/
text-overflow: ellipsis; /*显示省略符号来代表被修剪的文本*/
overflow: hidden;
//设置元素在主轴上的对齐方式,元素在主轴方向上如何排列以处理空白部分
justify-content:
flex-start //左对齐,空白在右
flex-end //右对齐,空白在左
center //居中,空白在两边
space-between //两端对齐,元素之间保留空白区间,空白间隔等比划分
space-around //两边对齐,两端边上也保留空白,两边空白小于中间
space-evenly //两边对齐,中间和两边空白均分
//设置元素在交叉轴上的对齐方式
align-items:
stretch //当元素高度没有设置,则元素的高度会拉伸至容器高度一致
flex-start //在交叉轴上向起点位置(向上/向左)对齐
flex-end //在交叉轴上向结束 位置(向下/向右)对齐
center //在交叉轴上居中对齐
baseline // 基准线,保证元素中的文字在同一条基准
// 是flex-direction方向 || flex-wrap换行 的简写
flex-flow: row npwrap,
// 多行flex items在交叉轴上的对齐方式,用法与justify-content类似
align-content:
2.3.2 Flex 元素的属性
// flex
// flex-grow 放大元素,控制均分比例
// flex-basis
// flex-shrink 缩放元素,
// order 控制元素顺序
// align-self 重写self-align属性
//flex 是flex-grow || flex-shrink || flex-basis 的简写,
//flex属性可以指定1个,2个或3个值
flex: 1; //占父元素的一份
flex: 20%; //占父元素20%
//控制元素顺序,设置flex容器内部的每个元素的
//排列顺序,默认是0,值越小排序越靠前
order: 0/1/2/3
// 用于设置元素的放大比例,默认为0,为0则不放大
flex-grow:1
// 所有元素都设置为1,则元素平分剩余空间,等分
flex-grow:1
//用于定义属性的缩放比例,默认为1,为0则不缩放
flex-shrink: 1
//设置元素固定或自动空间的占比,优先级高于width
flex-basis: 300px
补充: 决定flex items 最终 base size的因素,从优先级高到低
max-width/max-height/min-width/min-height
flex-basis
width/height
item本身size
//重写父元素align-items的属性
self-align:
auto
stretch
flex-start
flex-end
center
baseline
2.4 CSS3新增
新的选择器
转换 transform
动画 animation
浏览器私有前缀
结构伪类选择器
li:first-child
li:last-child
li:nth-child(3)
li:nth-child(even)
li:nth-child(odd)
li:nth-child(2n)
li:nth-child(2n+1)
属性选择器,权重为10
div[class] { }
div[class=demo] { }
div[class^=test] { } // ^ 以test开头的类名
div[class$=test] { } // $ 以test结尾的类名
input[type=“text”]{ }
button[disabled]
伪元素选择器,权重为1,必须有content属性
p::first-letter { }
p::first-line { }
p::selection { }
span::before { }
span::after { }
div::before{ } /是一个能插入元素的选择器/
div::after { }
过渡
transition: all 0.5s; /过渡写到本身上 谁做过渡动画,写到谁身上
/ :hover 指定过度后样式
transition: width 0.5s ease 0s, height 0.3s; /多组属性用逗号分隔
变形-2D转换
-位移
transform:translate(100px,100px) /位移
-缩放/扩大
transform: scale(0.8, 0.5); /缩放,宽度变为了原来的 80% 高度变为了原来的 50%
transform: scale(2, 4); /不会影响其他的盒子,中心点默认是中心
-旋转
transform: rotate(360deg); /旋转
- transform-origin: right bottom; /设置旋转/缩放中心点,写在旋转本体上/
- transform-origin: 50px 50px;
- transform-origin: 50% 50%;
transform: rotateX(360deg); / 旋转
transform: rotateY(360deg);
- backface-visibility: hidden; / 定义当图片不面向屏幕时是否可见
-综合
transform: translate(100px, 100px) rotate(45deg) scale(0.3); /先位移后旋转缩放
-变形-倾斜
transform: skew(30deg); /变形-倾斜
-阴影
box-shadow: 0 10px 20px rgba(0,0,0,0.5); / 鼠标经过显示阴影
6.动画
animation:名称 花费时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或结束状态;
animation: move 2s ease 0s infinite alternate forwards;
animation: move 5s linear 2s infinite alternate forwards;
@keyframs 规定动画
animation 所有动画属性的简写属性,除了 animation-play-state 属性
animation-name 规定@keyframes 动画的名称
animation-duration 规定动画完成一个周期所花费的秒或毫秒
animation-timing-function 规定动画的速度曲线,默认是‘ease’,
linear匀速,ease-in低速开始 ease-out低速结束
ease-in-out低速开始和结束 step()指定时间函数中的间隔数量(步长),类进度条迟钝效果
animation-delay 规定动画何时开始,默认是0
animation-iteration-count 规定动画播放的次数,默认是1,还有 infinie无限重复
animation-direction 规定动画是否在下一个周期逆向播放,默认是‘normal’,alternate逆播放动画
animation-play-state 规定动画是否正在运行或暂停,默认是 running,还有pause
animation-fill-mode 规定动画结束后的状态,保持forwards 回到起始 backwards
-3D位移
translate3d(x,y,x)
transform: translateX(100px);
transform: translateY(100px);
transform: translateZ(100px);
transform: translate3d(x,y,z);
-3D旋转
rotate3d(x,y,z)
transform: rotateX(45deg); //沿着X轴正方向旋转45度
transform: rotateY(45deg); //沿着Y轴正方向旋转45度
transform: rotateZ(45deg); //沿着Z轴正方向旋转45度
transform: rotate3d(x,y,z,deg); //沿着自定义轴正方向旋转n度
transform: rotate3d(1,0,0,45deg) // xyz表示旋转的矢量,标示希望沿着该轴旋转,最后标识角度
-透视
-透视也称视距,就是人的眼睛到屏幕的距离,越近成像越大,越远成像越小
-透视的单位是px
perspective
body:{
perspective: 500px; //透视属性写在被观察元素的父盒子上面
}
-3D呈现
transfrom-style
-控制子元素是否开启三维立体环境, 该属性写给父级
transform-style: flat; 子元素不开启3d立体空间,默认
transform-style: preserve-3d; 子元素开启立体空间
2.4.1 CSS3实例
//案例,小三角 div{ width: 249px; height: 35px; border: 1px solid #000; } div::after{ content:''; position: absolute; top: 8px; right: 15px; width: 10px; height: 10px; border-right: 1px solid #000; border-bottom: 1px solid #000; transform: rotate(45deg); transition: all 0.6s; //动画的过渡 } //鼠标经过div,里面的三角旋转 div:hover::after{ transform: rotate(225deg); } //hover旋转体动画案例 div{ overflow: hidden; width: 200px; height: 200px; border: 1px solid #black; } div::before{ content: '旋转体'; display: block; width: 100%; height: 100%; background-color: #000; transform: rotate(180deg); transform-origin: left bottom; transition: all 0.4s; } div:hover::before{ transform: rotate(0deg); } //hover放大案例 div{ float: left; margin: 10px; overflow:hidden; } div img { transition: all 0.4s; } div img:hover{ transform: scale(1.2); } //并排按钮hover放大 li { float: left; width: 30px; height: 30px; line-height: 30px; border: 1px solid #fff; margin: 10px; text-align: center; list-style: none; border-radious: 50%; cursor: pointer; transition: all .4s; } li:hover{ transform: scale(1.2) } //动画基本使用 //一个盒子从左边走到右边 1. 定义动画 @keyframes move{ /* 开始状态 */ 0%{ transform: translateX(0px); } /* 结束状态 */ 100%{ transform: translateX(1000px); } } div{ width: 200px; height: 200px; background-color: black; /* 2.使用动画 */ animation-name: move; animation-duration: 2s; //持续时间 } //动画序列 @keyframs sround{ 0% { transform: translate(0,0); } 25% { transform: translate(1000px,0); } 50% { transform: translate(1000px,500px); } 75% { transform: translate(0,500px); } 100% { transform: translate(0,0); } } div{ width: 200px; height: 200px; background-color: black; animation-name: sround; animation-duration: 10s; //持续时间 animation: move 5s linear 2s infinite alternate; //属性简写 } div:hover { /* 鼠标经过div 让div停止动画,鼠标离开就继续动画*/ animation-play-state: paused; } //热点图 //背景地图为一张中国地图
body{ background-color: #333; } .map { position: relative; width: 747px; height: 616px; background: url(media/map.png) no-repeat; marin: 0 auto; } .city{ position: absolute; top: 227px; //定位到北京 right: 196px; color: #fff; } .dotted{ height: 8px; width: 8px; background-color: #09f; border-radius: 50%; } .city div[class^='pause']{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 8px; height: 8px; box-shadow: 0 0 12px #009dfd; border-radius: 50%; animation: pause 1.2s linear infinite; } .pause2{ animation-delay: 0.4s !important; } .pause3{ animation-delay: 0.8s !important; } @keyframs pause { 0%{ } 70%{ /*transform: scale(5) 不用scale,会让阴影变大 */ width: 40px; hight: 40px; opacity: 1; } 100%{ width: 70px; height: 70px; opacity: 0; } } //奔跑的动画效果 step() //背景图片是8个奔跑动作串 div{ position: absolute; width: 200px; height: 200px; background: url(media/bear.bng) no-repeat; animation:bear 1s step(8) infinite,move 3s forwards; //添加两个动画,用逗号隔开。第二个动画控制跑到位置后的定位 } @keyframs bear { 0% { background-position: 0 0; } 100% { background-position: -1600px 0; } } @keyframs move { 0% { left: 0; } 100% { left: 50%; transform: translate(-50%); } } //hover两面翻转的盒子/*中间小点*/ /*小圆圈*/.box{ width: 300px; height: 300px; margin: 100px auto; transition: all .4s; transform-style: preserve-3d; } .box:hover{ transform: rotateY(180deg); } .front .back{ position: absolute; top:0; left; 0; width: 100%; height: 100%; border-radius: 50%; font-size: 30px; text-align: center; line-height: 300px; } .front { background-color: black; z-index: 1; } .back { background-color: #fff; transform: ratateY(180deg); } //hover 翻转导航栏后面前面* { margin: 0; padding: 0; } ul { margin: 100px; } ul li { width: 120px; height: 35px; list-style: none; perspective: 500px; //需要给box旋转 } .box{ position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: all .3s; } .box:hover{ transform: rotateX(90deg); } .front,.bottom { position: absolute; left: 0; top: 0; } .front{ backround-color: black; z-index: 1; transform: translateZ(17.5px); } .bottom{ backround-color: #fff; //反向旋转,向下移动 transform: translate(17.5px) ratateX(-90deg) } //旋转木马
A面B面 A面B面 A面B面
body{ perspective: 1000px; } section { position: relative; width: 300px; height: 200px; margin: 50px auto; transform-style: preserve-3d; animation: rotate 10s linear infinite; background: url(media/pig) no-repeat; } section:hover{ /*鼠标放入section 停止动画*/ animation-play-state: paused; } @keyframes rotate { 0% { transform: rotateY(0); } 100%{ transform: rotateY(360deg); } } section div{ position: absolute; top:0; left:0; width: 100%; height: 100%; background: url(media/dog.jpg) no-repeat; } section div:nth-child(1) { transform: translateZ(300px); } section div:nth-child(2) { //先旋转,后移动 transform: rotateY(60deg) translateZ(300px); } section div:nth-child(3) { //先旋转,后移动 transform: rotateY(120deg) translateZ(300px); } section div:nth-child(4) { //先旋转,后移动 transform: rotateY(180deg) translateZ(300px); } section div:nth-child(5) { //先旋转,后移动 transform: rotateY(240deg) translateZ(300px); } section div:nth-child(6) { //先旋转,后移动 transform: rotateY(300deg) translateZ(300px); }
2.5 私有浏览器前缀
-浏览器私有前缀是为了兼容老版本的写法,新版本浏览器无需添加
-moz- 代表 firefox 浏览器私有属性
-ms- 代表 ie 浏览器的私有前缀
-webkit- 代表 safari chrome 私有属性
-o- 代表Opera 私有属性
//提倡的写法
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
3.常用CSS
3.1移动端常用
//一级容器
.container {
//在container中定/方向/给宽高 width > padding > margin
display:
flex-direction:
justify-content:
align-items:
height: 100rpx; 100%/50px;120rpx ipone6: 375*667
width: 690rpx; 48%/345px; 750rpx
margin:
padding:
margin-right:
margin-top:
border:
border-top: 1px solid black;
border-radius:50px; 50%;
box-shadow: 2px 2px 3px #e3e3e3;
box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4);
background-color:
}
//二级容器
.container {
position: relative; //(脱标)absolute;fixed
top:
bottom:
right:
left:
height: 80%;
width: 48%;
}
//组件
.plus{
}
//文字
.text{
font-size: 38rpx;
line-height: 38rpx;
font-weight: 600;
text-indent: 2em;
}
//图片
.image {
width: 32rpx;160rpx;
height: 28rpx;160rpx;
}
4.在页面使用字体图标
1. 下载图标,将挑选的代码添加至项目,下载至本地
2. 将解压文件夹中iconfont.css文件复制到项目css文件夹中(待定)
3. 这4个图标文件.eot/.svg/.ttf/.woff复制到项目fonts文件夹中
4. 在css中声明并定义
@font-face {
font-family: 'iconfont';
src: url("../fonts/iconfont.eot");
src: url("../fonts/iconfont.eot?#iefix") format('embedded-opentype'),
url("../fonts/iconfont.woff") format('woff'),
url("../fonts/iconfont.ttf") format('truetype'),
url("../fonts/iconfont.svg#iconfont") format('svg');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
5. 使用时引入,打开demo_index.html网页文件,复制代码使用
-
移动端开发
- 视口 viewport (理想视口)
width=device-width -宽度设置的是viewport宽度,可以设置device-width特殊值
initial-scale=1.0 -初始缩放比,大于零的数字
maximum-scale=1.0 -最大缩放比,大于零的数字
minimum-scale=1.0 -最小缩放比,大于零的数字
user-scalable=no -用户是否可以缩放,yes或no(1或0)
- 二倍图
-插入图片
准备的图为100*100 使用时设置为 image{width:50px;height:50px;}
-背景图片
background-size: 50px,50px;
-
内减盒子模型
box-sizing: border-box;
-
特殊样式
box-sizing: border-box;
-webkit-box-sizing: border-box;
-webkit-tap-highlight-color: transparent; /清除点击高亮,设置为transparent透明/
-webkit-appearance: none; /在IOS上加上该属性才能给按钮和输入框自定义样式/
img,a{ -webkit-touch-callout: none;} /禁用长按页面时的弹出菜单/
-
技术选型
-1. 单独制作移动端页面(主流)
-流式布局
-flex弹性布局
-less+rem+媒体查询布局
-flexible.js + rem 混合布局 (较方便)
-2. 响应式页面兼容移动端
-媒体查询 + bootstarp
总结
flex弹性布局 (推荐)
rem适配布局 (推荐) flexible.js + rem
5.6 流式布局(百分比布局)
* 通过盒子的宽度设置成百分比来根据屏幕的宽度进行伸缩,不受固定像素的限制,内容向两侧填充。
* max-width 最大宽度 (max-height 最大高度)
* min-width 最小宽度 (min-height 最小高度)
-常用初始化样式
body {
width:100%; /*页面布局中行内子的宽度都为百分比,高度为确定值*/
min-width: 320px;
max-width: 640px;
margin: 0 auto;
background: #fff;
font-size: 14px;
font-family: -apple-system, Helvetica, sans-serid;
line-height: 1.5;
color: #666; /*灰色*/
}
5.8 rem适配布局
1. rem适配基础
* rem(root em)是一个相对单位,基准是相对与html元素的字体大小
* rem可以通过修改html里面的文字大小来改变页面中元素的大小,进行整体控制
2. 媒体查询
* 语法规范
@media mediatype and|not|only (media feature){
CSS-Code;
}
* mediatype 媒体类型 all print scree
* media feature 媒体特性 width min-width max-width
*媒体查询根据不同的屏幕尺寸改变不同的样式
3. 媒体查询+rem实现元素变化
4. rem适配方案
* 让一些不能等比自适应的元素,达到当设备尺寸发生改变的时候,等比例适配当前设备。
* 使用媒体查询根据不同的设备按比例设置html的字体大小,然后页面元素使用rem做尺寸单位,当html字体大小发生变化元素尺寸也发生变化,从而达到等比例缩放的适配。
* 按照设计稿与设备的宽度比例,动态计算并设置html根标签的font-size大小;
* CSS 中,设计稿元素的宽,高相对位置的取值,按照同等比例换算为rem为单位的值;
5. 实际适配方案
* 方案一
less + mediatype + rem
* 设计稿宽度基本以750px
* 页面元素的rem值 = 页面元素值(px) / (屏幕宽度 / 划分的份数)
* 或者:页面元素的rem值 = 页面元素在750像素下的px值 / html font-size字体大小
-常用初始化样式
* 方案二 (较方便)
flexible.js + rem
-安装
npm i -S amfe-flexible
-常用初始化样式
-插件vscode里边cssrem插件自动转换
并修改设置为75 Cssrem: Root Font Size
5.8 Less
1. Less介绍
Less 是一门CSS预处理语言,它扩展了CSS的动态特性。
2. 安装
npm install -g less
lessc -v
3.使用
4.嵌套
5. 运算
@border: 5px + 5;
div {
width: 200px - 50; /*运算符左右需要有空格 */
height: 200px * 2;
border: @border solid red;
}
img {
width: 82 / 50rem;
height: 82 / 50rem;
}
5.9 响应式布局
1. 响应式开发设备划分
超小屏幕(手机) <768px 设置宽度为100%
小屏设备(平板) >=768px ~ 992px 设置宽度为750px
中等屏幕(桌面显示器) >= 992px ~ 1200px 设置宽度为970px
宽屏设备(大桌面显示器) >= 1200px 设置宽度为1170px
2. 原理
* 在不同屏幕下,通过媒体查询来改变这个布局容器的大小,在改变里面子元素的排列方式和大小,从而实现不同屏幕下,看到不同的页面布局和样式变化
3. 使用bootstrap开发
* 创建文件夹结构
* 创建html骨架结构
* 引入样式类文件
* 书写内容
4. 使用策略
* 先布局md以上的pc端布局,然后再根据实际需求修改小屏幕和超小屏幕的特殊布局样式
//媒体查询用例
/*当进入小屏幕和超小屏幕时,让nav里边的里浮动起来,且宽度为20% */
@media screen and (max-width: 991px){
.nav li {
float: left;
width: 20%;
}
}
/* 当进入超小屏幕时,nav里边的文字会变成14px */
@media screen and (max-width: 767px){
.nav li a {
font-size: 14px;
}
}
5.10 Bootstrap
1.基础CSS样式 (class = "")
- 预置排版样式
- 统一预制标签样式
- lead
- text-left text-center text-right text-justify text-nowrap
- text-lowercase text-uppercase text-capitalize
- attribute
- container-fluid 自适应屏幕宽度,即满屏显示100% 宽度的布局,占据全部视口
- container 响应式布局容器,固定宽度
- 按钮样式
- btn btn-default btn-primary btn-success btn-info btn-warning btn-danger btn-link
- btn-lg btn-default btn-sm btn-xs
- btn-block
- 表格样式
- table table-striped table-bordered table-hover table-condensed
- active success warning danger info
- table-responsive
- 表单样式
- form-group form-inline
- form-horizontal
- form-control form-control-static
- has-success has-warning has-error
- has-feedback
- form-group-lg form-group-sm
- 图片样式
- img-responsive
- img-rounded img-circle img-thumbnail
- 辅助工具类
- text-muted text-primary text-success text-info text-warning text-danger
- bg-primary bg-success bg-info bg-warning bg-danger
- type="button" class="close" aria-label="Close" 关闭按钮
- caret
- pull-left pull-right 快速浮动
- center-block 让内容块居中
- clearfix 清除浮动
- show hidden sr-only
- text-hide 图片替换
- 栅格系统
- xs : 超小屏幕 手机 (<768px)
- sm : 小屏幕 平板 (≥768px)
- md : 中等屏幕 桌面显示器 (≥992px)
- lg : 大屏幕 大桌面显示器 (≥1200px)
- col-xs-4
- col-xs-12 col-sm-6 col-md-8
- col-lg-3 col-md-4 col-sm-6 col-xs-12
- col-md-offset-2 列偏移
- col-md-push-* col-md-pull-* 列排序,推拉
- 如果份数小于12,则占不满整个container
- 如果份数大于12,则多余的会另起一行
- 响应式工具类
- hidden-xx : 在某种屏幕下隐藏
- visible-xx : 在某种屏幕尺寸下显示
- hidden-xs /hidden-sm /hidden-md /hidden-lg
2.预置界面组件
- 导航
- nav nav-tabs nav-pills
- nav-justified nav-stacked
- tab-content
- tab-pane
- 导航条
- navbar navbar-default
- navbar-header navbar-toggle collapsed
- navbar-brand
- navbar-nav navbar-form
- navber-left navber-right
- navber-fixed-top navber-fixed-bottom nav-bar-static-top
- navbar-inverse
- navbar-btn navber-text navbar-link
-
- 面包屑导航
- 下拉菜单
- dropdown drop-menu dropdown-menu-right
- dropdown-header sparator
-
- 按钮式下拉菜单
- btn btn-default dropdown-toggle
- 按钮组
- btn-group btn-group-lg btn-group-sm btn-group-xs
- btn-toolbar
- btn-group-vertical btn-group-justified
- btn-lg btn-sm
- 输入框组
- input-group
- input-group-addon
- 警告框
- 页头
- 分页
- 列表组
- 面板
- panel panel-default
- panel-body panel-heading panel-title panel-footer
-
- 媒体对象
- media media-left media-middle media-heading media-object media-body
- 进度条
- Glyphicons
- 标签
- label
- 徽章
- badge
- 缩略图
- 大屏幕
- 嵌入内容
- 内嵌
3.JavaScript插件
- data-toggle modal,popover,tooltips,collapse,dropdown //指以什么事件触发
- data-target #id //触发的事件的目标
- aria-controls
- role
- data-title
- 内置组件
- 模态对话框
- modal fade
- modal-dialog
- modal-content
- modal-header modal-body modal-footer
- data-target=".bs-example-modal-lg
- data-target=".bs-example-modal-sm
- 下拉菜单
- 滚动监听
- 标签页
- 工具提示
- tooltip
- 弹出框
- 警告框
- 按钮
- 折叠面板
- 轮播图
- carousel slide
- 吸顶效果
- data-spy="affix"
- data-offset-top="什么位置出现 60"
- data-offset-bottom="什么位置消失 200 "
4. 自定义 Bootstrap
- 自定义navbar-mybar
- 在源码里复制出navbar-default到main.css中
- 修改源码里所有的 navbar-default 为 navbar-mybar
- 修改详细样式
5. --Tips
-
- section nav
- container
- row
- col-xx-x
- a
-i span img p div h4
- #header>#header>.topbar>.container
- #header .mobile-link
- #header a
- 经典布局代码
2.1 圣杯布局
//圣杯布局 --两端固定图标,中间可长度伸缩,多用作中间搜索框