买了域名和空间怎么做网站,现在做网站用的软件,个人网站设计html,做网站代码难么目录
一、css概述
1. 概念#xff1a;
2. 好处#xff1a;
二、css的使用
1. css语法
2. css三种引入方式
3. 选择器类型
4. 浮动
5. 定位
6. 盒模型
7. 弹性盒布局
#xff08;1#xff09;父元素书写属性
#xff08;2#xff09;flex布局子项常见属性
2. 好处
二、css的使用
1. css语法
2. css三种引入方式
3. 选择器类型
4. 浮动
5. 定位
6. 盒模型
7. 弹性盒布局
1父元素书写属性
2flex布局子项常见属性
8. 溢出
9. 转换过渡
10. 动画
11. 背景声明
12. 媒体查询
13. 视口
14. 显示与隐藏
15. 鼠标样式
16. css精灵技术
17 . 滑动门
18. css三角形效果
20. 页面布局
21 .bootstrap前端开发框架
22.浏览器私有前缀兼容老版本浏览器
23.移动端特殊样式
22. 整体页面搭建 一、css概述
1. 概念
Cascading Style Sheets 层叠样式表定义页面如何显示 * 层叠多个样式可以作用在同一个html的元素上同时生效
2. 好处 1功能强大 2将内容展示和样式控制分离 * 降低耦合度。解耦 * 让分工协作更容易 * 提高开发效率
二、css的使用
1. css语法 选择器符{属性名属性值声明;属性名:属性值} (属性名与属性之间用英文冒号连接,属性值后面以英文分号进行结尾。可以书写多个属性当一个属性中有多个属性值属性值与属性值之间用空格隔开) p{cursor: pointer小手/default指针;指向某元素时显示的鼠标指针类型;visibility: hidden;设置元素是否可见或不可见}p{color: green;font-size: 30px;}
2. css三种引入方式
1内联样式表(行内样式表):在html标签中添加一个sytyle属性,在style属性里添加css效果 p stylecolor: blue;/p
2内部样式表:在head标签里添加一对style双标签再css实现效果用css语法 head!-- 头部标签 --stylep {color: green;font-size: 30px;}/style/head
3外部样式表新建css文件在head标签中添加link单标签链接英文输入法书写link单击tab键自动生成链接css文件用css语法 head!-- 头部标签 --link relstylesheet hrefcss/style.css/headrel“告诉浏览器需要链接的文件是样式表的格式” href需要链接的css文件路径div{colorgreen; 颜色font size:36px; 字体大小width:200px; 宽度height: 200px; 高度background-color: skyblue; 背景颜色border: 2px solid red; 边框线条粗细 线形(实线solid/虚线dotteddashed/double双实线 颜色)} 导入外部样式表 headstyle typetext/cssimport url(css/style.css);/* import放在style元素的最前面语句后加分号 *//style/head 页面导入样式时使用 link 和 import 有什么区别 1.从属关系区别
import是 CSS 提供的语法规则只有导入样式表的作用link是HTML提供的标签不仅可以加载 CSS 文件还可以定义 RSS、rel 连接属性等。2.加载顺序区别
加载页面时link标签引入的 CSS 被同时加载import引入的 CSS 将在页面加载完毕后被加载。3.兼容性区别
import是 CSS2.1 才有的语法 IE5 才能识别link标签作为 HTML 元素不存在兼容性问题。4.DOM可控性区别link支持使用Javascript控制DOM去改变样式而import不支持 3. 选择器类型
1元素标签选择器: 以标签名(h / p / img / a / ul / ol / dl / li / form / div...)作为选择的方式添加属性效果 p {color: green;font-size: 30px;}
2class类选择器 a.在html里面添加一个class属性在css中添加相应的属性名添加效果 b.在class名之前要加英文输入法的点用于识别class名 c.一个元素可以有多个class名多个class名之间用空格隔开 d.不同元素之间class名可以重名但展现的效果是一样的
p classbox box2内容/p!-- 多个class名多个class名之间用空格隔开 --h1 classbox2 内容/h1.box{color: green;}.box2 {font-size: 30px;}
3id选择器 a.在html里面添加一个id属性在css中添加相应的属性名添加效果 b.在id名之前要加#用于识别id名 c.id名相当于网页的证件号码具有唯一性体现在js中 div iddemo内容/div#demo{colorred}
通过标签的id属性进行-锚点跳转 设置锚点a idtext1/a 页面内锚点跳转a href#text1/a 跨页面锚点跳转a href网址#text1/a
4群组选择器打组作用不同选择器标签实现相同属性效果不同选择器之间用英文逗号隔开 选择器1选择器2{属性名属性值属性名属性值} div iddemo2内容/divp classbox3内容/p#demo2,.box3{colorpurplefont-size40px}
两个元素同时应用样式!-- 不同选择器之间用英文逗号隔开 --
5包含选择器父级和子级的关系前面的选择器必须是后面选择器的父级标签 子选择器父级与子级选择器之间用空格隔开子元素应用样式 选择器1 选择器2{属性名属性值属性名属性值} div classtext内容p classtt内容/p/div.text .tt {colorpurplefont-size40px} 父选择器 前面的选择器必须是后面选择器的直接父级标签父元素应用样式 选择器1选择器2{属性名属性值属性名属性值} div classtext内容p classtt内容/p/div.text.tt{colorpurplefont-size40px}
6相邻兄弟选择器相邻元素之间用隔开但只有后一个元素应用样式 div iddemo2内容/div p classbox3内容/p #demo2.box3{colorpurplefont-size40px} !-- 只有后一个元素.box3应用样式 --
7 联合选择器 p.c3{元素类选择器} p classc3内容/p
8伪类选择器-鼠标划过效果 选择器:hover{属性名属性值属性名属性值}
a hrefhttps://www.baidu.com/内容/aahover{coloryellow font-size40pxopacity:0.5不透明度0-1 }.menubox ul li ul{backgroundbluedisplaynone -隐藏不显示}.menubox ul lihover ul{displayblock鼠标划过展示}a:link{未被访问状态}a:hover{鼠标划过} 必须置于link和visited之后才有效 a:active{活动状态点击时未松开鼠标} 必须置于hover之后才有效 a:visited{已被访问状态} 结构伪类选择器 p:first-letter{第一段}p:first-line{第一行}Efirst—child 匹配父元素中的第一个子元素EEnth—childn 匹配父元素中的第n个子元素EEnth—childeven/2n 匹配父元素中的第偶数个子元素EEnth—childodd/2n1 匹配父元素中的第奇数个子元素EEnth—child5n 匹配父元素中的第5个之后子元素EEnth—child-5n 匹配父元素中的前5个子元素EEfirst—of-type 指定类型E的第一个Elast—of-type 指定类型E的最后一个Enth—of-typen 指定类型E的第n个Enth—of-typeeven/2n 指定类型E的第偶数个Enth—of-typeodd/2n1 指定类型E的第奇数个 伪元素选择器 ::before 在元素内部的前面插入内容 ::after 在元素内部的后面插入内容 注意before和after必须有content属性 before在内容前面插入一个行内元素after在内容后面插入一个行内元素 before和after创建一个元素但是属于行内元素 因为在dom里看不见创建的元素所以成为伪元素 伪元素和标签选择器一样权重为1
::before 和:after 中双冒号和单冒号的区别
单冒号( : )用于 CSS3 伪类双冒号( :: )用于 CSS3 伪元素 用于区分伪类和伪元素
7通配符选择器 (代表所有元素)--清除元素自带间距 *{属性名属性值属性名属性值} *{padding:0;margin:0;}
8属性选择器 定义属性选择器时方括号“[]”将属性包围住 [title]{带有title属性的所有元素设置样式} p[name*text]{名字中包含text}p[name$selector]{名字中后缀包含selector}p[name^attribute]{名字中以attribute开头}p[name~attribute]{名字中只要含有attribute}p[nameattribute]{名字为attribute} 选择器权重大小 权重越大css显示效果越优先impoertant行内样式权重1000id选择器权重100class选择器(权重10)元素选择器权重1 1元素选择器和伪元素选择器:0001 2class选择器:0010 3伪类选择器: 0010建立在其他选择器的基础上进行效果展示与其他选择器没有可比性 4id选择器:0100 5包含类选择器等于里面每个选择器之和 6群组选择器单独计算打组 7如果权重相同谁写在后面听谁的后来居上 8若果子元素没有规定样式则子元素会继承父元素的样式但继承的样式权重不如后来指定的css样式 9网页编写者设置的css样式优先权高于浏览器默认所设置的样式 10在同一组属性设置中标有“!important”规则的优先级最大无穷大 div{colorpinkimportant}
4. 浮动 定义了浮动的元素在一行之中向左或向右移动会使像素向左或向右移动其周围的元素也会重新排列若浮动的元素父级一行装不下则会另起一行排列相当于将disply属性改为inline-block但元素之间没有空隙
floatleft向左浮动/right向右浮动
1正常情况下父元素不设置高度的话他的高度由子元素撑开
2子元素添加浮动之后父元素高度为0也就是高度塌陷会影响父元素的兄弟级位置自动补齐浮动后留下的空白
3高度塌陷解决办法 a. 给父元素添加一个固定高度缺点需要元素 b. 给父元素添加溢出属性隐藏 overflowhiddenauto/scrool最常用但内容增多时不会换行有些内容可能被隐藏 c. 清除浮动在最后一个浮动元素末尾添加一个空的标签例如
div stylecleal:both/div 缺点增加额外标签clearright元素右边不能有浮动元素left元素左边边不能有浮动元素both元素左右两边都不能有浮动元素 d. 使用after伪类元素清除浮动给浮动元素的父级标签添加 after方式为空元素额外标签升级版即不用单独加标签了 .clearfixafter{content“”displyblockheight0visbilityhiddenclearboth}.clearfix{*zoom1ie6和ie7浏览器不支持需额外加上}} f. 使用双伪元素清除浮动 .clearfixbefore.clearfixafter{content“ ”displytable}.clearfixafter{clearboth} .clearfix{*zoom1ie6和ie7浏览器不支持需额外加上}
5. 定位 元素根据参照物的不同来进行位置的设置同float一样绝对定位和固定定位也会将disply属性默认转换成行内块元素同时给盒子加了浮动和定位就不会出现垂直外边距合并的问题了
absolut生成绝对定位的元素相对于 static 定位以外的第一个父元素进行定位
fixed 生成绝对定位的元素相对于浏览器窗口进行定位
relative生成相对定位的元素相对于其正常位置进行定位
static 默认值。没有定位元素出现在正常的流中
inherit 规定从父元素继承 position 属性的值
position 1relative 相对定位参照自己本身的位置移动移动时原有位置继续保留 作用a.微调元素位置 b.搭配绝对定位使用 方向top上/bottom下/left左/right右 positionrelative left100px向左留出100像素的距离相当于向右移动 2absolute 绝对定位参照第一级父级元素的位置移动若第一级父级元素没有添加定位则参照向上一级父级元素的位置层层递进直至参照浏览器的body位置移动移动时不保留原有的位置 定位原则父相子绝父元素是相对定位子元素是绝对定位 方向top上/bottom下/left左/right右 positionabsolute right0px top0x距自己的父级右上都为0像素的距离 3fixed 固定定位参照浏览器的窗口位置进行定位 作用固定导航栏返回顶部栏小广告 方向top上/bottom下/left左/right右 positionfixed top0x 注意绝对定位和固定定位的盒子不能通过设置marginauto设置水平居中 解决办法首先left50%让盒子左侧移动到父级元素的中心位置然后margin- left- 盒子自身宽度的一半像素让盒子想左移动一半距离 堆叠图层顺序 只能应用与相对定位/绝对定位/固定定位的元素上其他标准流、浮动和静态定位无效 z-index正整数/负整数/0 默认是0数值越大盒子越靠上如果属性值相同则按书写顺序后来居上 positionabsolute z-index1表示在第1层显示 相当于图层顺序数字越大越在上层显示须结合定位使用
6. 盒模型 盒模型CSS把每个元素视为一个盒子每个盒子包括分为内容content、填充padding、边框 border、边界margin四个部分。盒模型是CSS布局的基本单元。
W3C标准盒模型border-box属性widthheight只包含内容content不包含border和padding。 增加padding值和border值不会改变盒子大小即width和height设置了多大就是多大IE盒模型也称怪异盒模型content-box属性widthheight包含content、border和padding如果内边距增大了整个盒子也是增大的那么要保持整个盒子 不变大的话就要减小宽读或者高度即内容区的宽度或者高度
相互转换
1 box-sizingcontent-box 盒子大小为 widthpaddingborder以前默认的2 box-sizingborder-box 盒子大小为width 所有html元素都可以看作盒子在css中盒模型是用来设计和布局时使用的盒子描述了元素及其属性在页面布局中所占的空间大小即规定了页面中元素和元素之间的间距以及元素的内容到边缘之间的间距 组成元素margin外边距border边框box-shadow盒阴影padding内边距/填充和content实际内容 1内容 content宽度和高度 2内边距 padding内容和边框之间的距离改变盒子的大小撑开盒子如果这个盒子没有宽度则padding不会撑开盒子 padding-top/bottom/left/right100px 3边框 border边框粗细 线型 边框颜色
border: 2px solid red;
边框线条粗细 线形(实线solid/虚线dotteddashed/double双实线 颜色)border-top/bottom/left/right 圆角效果
border-radius10px 20px 30px 40px //左上顺时针开始border-radius50%圆 4盒阴影
box-shadow:1px -2px 5px 0px yellow水平阴影 垂直阴影 模糊距离-虚实 阴影尺寸-大小 阴影颜色
左右位移左负右正 上下位移上负下正 阴影粗细 阴影颜色 5外边距 margin盒子边框与盒子边框之间的距离改变盒子内容的位置--同辈元素之间的关系 外边距塌陷现象对于两个嵌套关系的块元素如果父元素没有上内边距或上边框父元素的外边距会和子元素的外边距发生合并合并后取外边距为两者中的较大者即会出现控制子元素的外边距时父元素的外边距会一起跟着变 解决办法 a.为父元素定义上边框 b.为父元素定义上内边距 c.为父元素添加overflowhidden margin-top/bottom/left/right100pxmargin0 auto上下边距为0水平居中必须是块级元素且设置宽高才有效 缩写方式
padding / margin10px / 10px 20px / 10px 20px 30px / 10px 20px 30px 40px
一个值代表四个方向上下左右/两个值第一个值代表上下第二个代表左右/三个值第一个值代表上第二个值代表左右第三个值代表下/四个值内边距顺时针方向分别代表上右下左 注意 1当盒子之间的上下外边距发生冲突时浏览器默认取最大值 2如果添加浮动的盒子之间的左右外边距发生冲突时浏览器会默认相加 行内框、浮动框或绝对定位之间的外边距不会合并 3浏览器body是最大的盒模型 4元素的总大小不包括外边距margin a.元素的总宽度border-leftpadding-leftpadding-rightborder-right b.元素的总高度border-toppadding-toppadding-bottomborder-bottom
7. 弹性盒布局 为父元素书写弹盒属性子元素按照弹盒样式来显示 优点适应性强在做不同屏幕分辨率的时候非常实用 弹性盒布局实现快捷易维护 1父元素书写属性 a.弹盒属性 displayflex --弹盒布局其下子元素浮动效果添加弹性盒属性后它的大小由内容尺寸撑开行内元素和块元素转化为行内块元素可用text-aligncenter实现居中效果子元素的float、clear、vertical-align属性将失效 b.设置主轴 flex-directionrow主轴在水平方向-x轴-起点为左端-默认状态
/row-reverse反向-起点为右端flex-directioncolumn主轴在垂直方向-y轴-起点为上段端-默认状态
/column-reverse反向-起点为下端 c.控制子元素的换行效果
flex-wrapnowrap不换行-弹性盒自带默认效果
/flex-wrapwrap换行换行条件所有子元素的宽和大于父元素的宽 d.对齐方式 主轴x轴对齐 justiify-contentflex-start从行头对齐-默认
/justiify-contentflex-end从尾端对齐
/justiify-contentcenter水平居中
/justiify-contentspace-between水平平均分布各子元素之间的间距相同
/justiify-contentspace-around水平环绕分布左右边距是元素间边距的一半 侧轴y轴对齐 适用于单行排列
align-itemsflex-start从顶部对齐-默认
/align-itemsflex-end从底部对齐
/align-itemscenter垂直居中 多行排列设置侧轴上的子元素多行排列即换行时有效 align-contentflex-start从顶部对齐-默认
/flex-end从底部对齐
/center垂直居中
/space-between水平平均分布各子元素之间的间距相同
/space-around水平环绕分布左右边距是元素间边距的一半
/stretch设置子元素高度平分父元素高度 flex-flowcolumn wrap复合属性相当于同时设置了flex-dection和flex-wrap 2flex布局子项常见属性 a. flex 子项占的份数 .item {flex:1;} 默认为0分配剩余空间 b. align-self 控制子项在自己侧轴的排列方式允许单个项目与其他项目不一样的对齐方式可覆盖align-items属性默认值为auto继承父元素align-items属性如果没有父元素则等同于stretch c. order属性 定义子项的排列顺序 div spannth-child2{order-1 !-- 将第2个span盒子放到第一个盒子前面 --}
8. 溢出 1容器溢出内容纵向溢出元素框时的处理方式 容器添加css属性 overflow hidden隐藏-直接隐藏溢出的内容/scroll隐藏-溢不溢出都出现x轴和y轴滚动条/auto隐藏-若溢出出现y轴滚动条-比较智能 图片元素为了方便排版一般要转换为块级元素 width100% 表示img继承父级元素box的宽 height100% 表示img继承父级元素box的高 .box img{displayblockwidth100%height100%} *正常情况下父元素不设置高度的话他的高度由子元素撑开如果子元素想设置100%满屏状态下的效果就要给父元素设置高度100%若父元素是bodybody的父元素是html则body和HTML都要设置高度100%显示 2文本溢出文字横向发生溢出时的处理方式 a.文本溢出也属于容器溢出 文本容器添加css属性 overflow hidden隐藏-直接隐藏溢出的内容 b.text-overflowellipsis溢出的内容以省略形式省略号出现 /text-overflowclip直接裁剪 溢出条件 a. 明确宽度块级元素默认继承父元素的宽度 b. 限定文本不换行white-spacenowrap
9. 转换过渡 12D转换可以对元素进行移动、缩放、转动、拉长或拉伸。 a. 属性 transform向元素应用2D或3D转换transform-originx y(默认50% 50%或是方位名词 top bottom left right center)转换中心点 2D transform方法: 函数: matrlxnnnnnn定义2D转换使用6个值的矩阵 transform要实现多个效果需进行总写不同转换方法之间用空格隔开否则上面添加的转换会被下面添加的转换效果覆盖 同时使用多个转换其格式为 transformtranslate rotate scale 同时有位移和其他属性的时候位移需放在最前面顺序会改变转换效果先旋转会改变坐标轴方向 a.位移正-右移-下移负数-左移-上移-单位px或百分比50% -web前端里坐标轴 x轴左负右正 y轴上负下正 translate最大的优点不会影响其他盒子的位置 translate百分比单位是相对于自身元素的大小 translate对行内标签没有效果 translatexy定义2D转换沿着x和y轴移动元素translateXn定义2D转换沿着x轴移动元素translateYn定义2D转换沿着y轴移动元素 b.缩放大于1: 放大大于0小于1: 缩小等于0: 不显示等于1: 不变-单位px scalexy定义2D缩放转换改变元素的宽度和高度scaleXn定义2D缩放转换改变元素的宽度scaleYn定义2D缩放转换改变元素的高度 c.旋转-顺时针是正数逆时针是负数-单位deg
rotateangle定义2D旋转在参数中规定角度 d.倾斜-单位deg skewx-angley-angle定义2D倾斜转换沿着x轴和y轴skewXangle定义2D倾斜转换沿着x轴skewYangle定义2D倾斜转换沿着y轴 23d转换:相较2d转换多了一个z轴沿着z轴移动里负外正即正对屏幕越往里值越负越往外值越正 透视perspective 200px 透视写到被观察元素的父级盒子上面呈现出近大远小的视觉效果数值越大透视视距越大眼睛距离盒子越远物体越小 3d呈现transform-styleflat默认不开启/preserve-3d子元素开启立体空间控制子元素是否开启三维立体环境代码写给父级但是影响的是子盒子 3d移动translatez100pxz轴单位一般用pxz轴即物体距离屏幕大 小z轴越大物体越大 3d移动简写transformtranslate3dxyz px3d旋转简写transformrotatate3dxyz px 3过渡元素从一种样式逐渐改变为另一种样式的效果给哪个元素添加了鼠标划过效果就给那个元素添加css过渡属性 属性: transitionall 1s简写属性用于在一个属性中设置四个过渡属性transition-property规定应用过渡的css属性名称transition-duration规定过渡效果花费的时间默认是0transition-timing-function规定过渡效果的时间曲线默认是“ease”transition-delay规定过渡效果何时开始默认是0
10. 动画 属性 keyframes定义规定动画ms.keyframes-IE浏览器webket.keyframes-谷歌浏览器moz.keyframes-火狐浏览器 keyframes 动画帧的名称{ 0%/from{初始样式} 20%/from{中间样式} ...可以书写多个步骤尽量保证每个步骤的跨度相同 100%/to{最终样式} }
keyframes cheng{0%/from{width0%}20%/from{width20%}40%/from{width40%}60%/from{width60%}80%/from{width80%}100%/to{width100%}} animation动画帧的名称 动画的执行时间 动画的执行次数 动画执行的速度曲线前两个属性必须写所有动画的简写属性除了animation-play-state属性多个动画之间用逗号隔开 animationcheng 2s 3/infinite无限循环 linear匀速动画执行的速度曲线ease-由快到慢linear-匀速ease-in-加速ease-out-减速ease-in-out-先加速再减速、steps5指定了时间函数中间断数量步长animation-name规定keyframes动画的名称animation-duration规定一个动画完成一个周期所花费的秒或毫秒默认是0animation--timing-function规定动画的速度曲线默认是“ease”animation-delay规定动画何时开始默认是0animation-iteration-count规定动画被播放的次数默认是1还有infinityanimation-direction规定动画是否在下一周期逆向的播放默认是“normal”反方向就写alternateanimation-play-state规定动画是否正在运行或暂停默认是“running”还有pauseanimation-fill-mode规定对象时间之外的状态保持forwards回到起始backwards
11. 背景声明 css可以通过设置纯色作为背景也可以通过设置图片作为背景(背景图片的前提条件书写背景图片的容器必须有一个确定的尺寸 网页中图片的两种存在形式htmlimg cssbackground css背景属性 1背景颜色 background-colorpink背景颜色/transparent(透明) background:rgb(红色,绿色, 蓝色) background:rgba(红色,绿色, 蓝色,不透明度0-1) 2背景图片 background-imageurl图片路径背景图片 -若图片尺寸小于容器的尺寸时x轴y轴图片自动进行平铺显示 -若图片尺寸大于于容器的尺寸时图片只显示容器大小的尺寸 3背景平铺 background-repeatrepeat-平铺-默认/no-repeat-不平铺/repeat-x-在x轴进行横向平铺/repeat-y-在y轴进行纵向平铺背景图片的平铺设置 4背景位置 background-positionleft top /10px 50px 水平x轴横向位置 垂直y轴纵向位置 背景图片的显示位置-建立在背景图片不平铺的前提下 水平位置包含左中右left center right 水平位置包含上中下top center bottom 单位px距x轴y轴像素的留白/%距x轴y轴百分比的留白 5背景大小 background-size水平位置单位px/% 垂直位置单位px/% /cover -常用图片等比例缩放-当背景图片与容器尺寸宽高不一致时可能会出现某一部分不能显示的现象 /contain图片等比例缩放背景图片的尺寸更改-当背景图片与容器尺寸宽高不一致时可能会出现留白的现象-只要有一个方向铺满里面一个方向就不会发生变化只能贴合一个边 6背景附着 background-attachment: scroll(随页面滚动)/fixed固定; 总写方式不包含尺寸 background背景图片的链接地址 背景图片的平铺设置 背景图片的显示位置 background: url(../img/background_img01.png) no-repeat center top;
12. 媒体查询 针对不同的媒体类型定义不同的样式特别是响应式页面可以针对不同屏幕的大小编写多套样式从而达到自适应的效果 两种网站页面 1响应式网站一套界面同时运行到pc端分辨率1200px平板端980px 分辨率1200px移动端分辨率980px各个不同的视口。通过检测设备的分辨率来对页面做出不同的布局和内容里面内容随浏览器窗口大小实时变化 方法采用多个css样式表 a.新建一个默认效果的css文件再分别新建pc平板和移动端页面显示效果的css文件 b.在html文件中分别链接这四个css样式表 c.分别在链接pc平板和移动端页面css样式表的标签中定义不同的屏幕分辨率大小条件mediascreen and min-width最小宽度 media属性
link relstylesheet hrefcss/style.css 默认
link relstylesheet mediascreen and max-width980px hrefcss/style1.css 移动端link relstylesheet media“screen and min-width980px and max-width1200px”hrefcss/style2.css 平板端link relstylesheet mediascreen and min-width1200px hrefcss/style3.css pc端 2自适应网站为不同类别的设备建立不同的网页检测到设备分辨率大小后调用相应的网页自适应布局主要应用在pc端里面内容在浏览器窗口大小变化到一定时才会更换布局 方法只采用一个css样式表 采用media控件 media 设备类型 and多个媒体类型连接到一起/not排除某个媒体类型/only指定某一个媒体类型 设备尺寸min-width max-width{相应元素的css属性} media screen and min-width980px {.box{background-colorgreen}}media screen and min-width980px and max-width1200px{.box{background-colorblack}}media screen and max-width980px{.box{background-coloryellow}} 13. 视口 meta视口标签 meta nameviewport contentwidthdevice-width,user-scalableno,initial-scale1.0,maximum-scale1.0,minimum-scale1.0 width 宽度设置是viewport宽度可以设置device-width特殊值 initial-scale 初始缩放比大于0的数字 maxmum-scale 最大缩放比大于0的数字 minimum-scale 最小缩放比大于0的数字 user-scalable 用户是否可以缩放yes或no1或0
14. 显示与隐藏 a.displynone隐藏元素且不再保留位置/block除了转换为块级元素同时还有显示元素的效果 b.visbilityhidden对象隐藏但保留位置/visible对象可视
几种隐藏元素的方法
visibility:hidden,这个属性只是简单隐藏但是元素占用的空间任然存在。
opacity:0,一个 CSS3 属性设置 0 为透明它可以被 transition 和 animate。
position:absolute, 元素脱离文档流处于普通文档之上给它设置一个很大的 left 负值定位使元素定位在可见区域之外。
display:none, 元素不可见不占用文档空间。
transform:scale(0), 将一个元素设置无限小这个元素将不可见。、
html5 hidden attribute:hidden, 属性效果和 display:none 一样记录一个元素的状态。height:0;overflow:hidden 将元素在垂直方向上收缩为 0使元素消失。
filter:blur(0), 将一个元素的模糊度设置为 0 15. 鼠标样式 cursorpointerdefault 默认pointer 小手move 移动text 文本not-allowed 禁止 16. css精灵技术 将网页中的一些背景图片整合放到一张大图中精灵图网页中元素通常只需要精灵图中某个位置的某个小图需要的时候只需要精确的定位到某个小图就行这样当用户访问页面时只需向服务器发送一次请求网页中的背景图片即可全部展示出来这样可以减少服务器的访问次数减少负荷. 方法使用background-position0 -107px 属性精确定位
17 . 滑动门 父级盒子的宽度由内容撑开且有背景如导航栏效果 aspan首页/span整个导航栏都是链接所以a包含span/a a.设置左侧背景门 a {disply:inline-block;!-- 由内容撑开盒子 --height:33px; padding-left:15px;background:url(img/220455croynga9dcjohwc8.jpg.jpg) no-repeat;} b.设置右侧背景门 a span {disply:inline-block;height:33px;padding-right:15px; background:url(img/220455croynga9dcjohwc8.jpg.jpg) no-repeat top right; !-- 需要背景图片右对齐 -- } 18. css三角形效果 div /divdiv {width0height0border1px solid transparentborder-top-color #333角朝下} 方法a. 宽度和高度都为0 b. 四个边框只设置一边的边框颜色其他颜色都设为透明
19.字体图标 图片不但增加了总文件大小还增加了额外的http请求这会大大降低网页性能图片缩放时会失真字体图标就是将一个图标改为字体的格式由svg格式转换为ico格式不仅可以做出跟图片一样的效果改变透明度旋转等但是本质上是文字可以随意改变颜色产生阴影透明效果等而且本身体积更小几乎支持所有浏览器移动端常用
20. 页面布局 1单独制作页面 a.流式布局百分比布局通过min-width/max-height限制随页面自由缩放的边界 b.flex弹性布局父元素添加displyflex c.rem适配布局可以通过修改html里面的文字大小来改变页面中元素的大小实现整体控制-通过媒体查询/flexible.js自动分成10等份更改html字体大小 rem单位rem是一个相对单位类似于emem是父元素字体大小vscode里cssrem插件自动将px转化成rem--需根据需要修改默认的16px字体大小 不同的是rem的基准是相对于html元素的字体大小 比如根元素html设置font-size12px非根元素设置width2em则换成px表示非跟元素width24px
px 和 em 都是长度单位区别是px 的值是固定的指定是多少就是多少计算比较容易。em 得值不是固定的并且 em 会继承父级元素的字体大小。
浏览器的默认字体都是 16px。所以未经调整的浏览器都符合:1em16px。那么12px0.75em , 10px0.625em 。 Less Less是一门css扩展语言也称为css预处理器他不但没有减少css功能反而在现有基础上为css引入了 变量、mixin(混入)、运算以及函数等功能大大简化了css的编写降低了css的维护成本Less即用更少的代码做更多的事情常见的预处理器Sass、Less、Stylus less安装步骤安装nodejs——基于nodejs安装Lesscmd命令 cnpm install -g Less Less使用新建一个后缀为.less的文件在文件里书写less语句 less变量比如将css中一些常用的颜色和数值设为变量方便调用变量名自定义但必须为前缀不能包含特殊字符不能以数字开头大小写敏感 变量名值 Less编译需要把less文件编译生成css文件html页面才能使用vscode中使用easyless插件保存less文件自动生成相应css文件 Less嵌套与HTML结构语法相似 .header{ !-- 子代选择器 --.logo{width300px}}.header{!-- 伪类/交集/伪元素选择器--加符号 --.logo{width300pxhover{colorwhite}}} Less运算任何数字、颜色或者变量都可以参与加减乘除运算运算符两侧需加空格--单位以第一个为准 导入less文件important“文件名” 2响应式页面 响应式网站设计(Responsive Web design)是一个网站能够兼容多个终端而不是为每一个终端做一个特定的版本。
基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。
页面头部必须有 meta 声明的 viewport。 响应式布局容器响应式需要一个父级作为布局容器来配合子元素实现变化效果原理就是在不同屏幕下通过媒体查询来改变布局容器的大小再改变里面子元素的排列方式和大小从而实现不同屏幕下不同页面布局 通过媒体查询根据屏幕大小控制父级元素大小 !-- 超小屏幕 --media screen and max-width767px{.container{width:100%;}} !-- 小屏幕 --media screen and min-width768px{.container{width:750px;}} !-- 中等屏幕 --media screen and mmin-width992px{.container{width:970px;}}!-- 大屏幕 --media screen and mmin-width1200px{.container{width:1170px;}} 案例 多种方式实现已知或者未知宽度的垂直水平居中
第一种
.wraper {position: relative;.box {position: absolute;top: 50%;left: 50%;width: 100px;height: 100px;margin: -50px 0 0 -50px;}}第二种.wraper {position: relative;.box {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}}第三种.wraper {.box {display: flex;justify-content: center;align-items: center;height: 100px;}}第四种.wraper {display: table;.box {display: table-cell;vertical-align: middle;}} 21 .bootstrap前端开发框架 使用创建文件夹结构--创建HTML骨架结构布局容器.container--引入相关文件--书写内容 bootstrap栅格系统bootstrap里面container的宽度是固定的container的宽度不同我们再把container划分为12等份 要实现平分12等份每一列默认有15px的padding需要给列添加类前缀.col-xs-超小extra small屏幕、.col-sm-小small屏幕、.col-md-中等medium屏幕、.col-lg大lage屏幕 列小于12则一行留空白列大于12则多余的列另起一行排列 可同时为一列指定多个设备类名以便划分不同份数例如div classcol-md-4 col-sm-6/div bootstrap嵌套列嵌套最好加1个行row 这样可以取消父元素的padding值而且高度自动和父级一样高 div classrowdiv classcol-md-4/divdiv classcol-md-8/div/div 列偏移使用.col-md-offset-类可以将列向右偏移这些类实际是通过使用*选择器为当前元素增加左的边距margin左右各占4份中间4份留空白 div classrowdiv classcol-md-4/divdiv classcol-md-4 col-md-offset-4/div/div 列排序通过使用.col-md-push-左推右和.col-md-pull-右拉左类改变column的顺序 bootstrap响应式工具.hidden-xs超小屏下隐藏、.hidden-sm小屏下隐藏、.hidden-md中屏下隐藏、.hidden-lg大屏下隐藏 .visible-xs超小屏下显示、.visible-sm小屏下显示、.visible-md中屏下显示、.visible-lg大屏下显示
22.浏览器私有前缀兼容老版本浏览器
-moz-firefox浏览器私有属性 -ms-ie浏览器私有属性 -webkit-safari、chrome浏览器私有属性 -o-Opera私有属性
23.移动端特殊样式
css3盒子模型-webkit-box-sizing:border-box; 清除超链接等标签点击时默认的高亮效果-webkit-tap-highlight-color:transparent; 移动端默认浏览器给按钮和输入框自定义样式-webkit-appearance:none; 禁用长按页面时弹出菜单img a{-webkit-touch-callout:none;} 22. 整体页面搭建 页面搭建流程 明确网站类型常规/响应式/自适应 页面逻辑页面与页面之间的跳转关系 页面分块编写头部/bannner/内容/底部 模块内部结构盒子与盒子之间嵌套并列关系
