css
weixin_45773069
这个作者很懒,什么都没留下…
展开
-
CSS媒体查询
媒体查询能使页面在不同的终端设备下达到不同的效果,会根据设备的大小自动识别加载不同的样式,bootstrap里面也有这个功能设置meta标签媒体查询语法原创 2022-07-03 04:44:31 · 66 阅读 · 0 评论 -
CSS动画
动画是使元素从一种样式逐渐变为另一种样式的效果,可以改变任意多的样式任意多的次数,用百分比或者关键词from to来规定变化的时间@keyframes创建动画 name为动画名称,自己可以随意更改percent为百分比,可以添加多个animation执行动画animation:name 等等...原创 2022-07-03 04:35:20 · 47 阅读 · 0 评论 -
弹性盒模型
老师的第七章的第二个PPT也有很详细提供一种有效的方式来对一个容器中的子元素进行排列、对齐和分配通过设置display属性值为flex将其定义为弹性容器容器设置display:flex;成为弹性盒,下面的属性也都是设置在这个弹性盒上的,而不是它的子盒子flex-direction:row||row-reverse||column等等设置弹性盒里面的子元素横向、从后往前的横向、纵向等待justify-content:flex-start||flex-end||center设置在垂直方向上靠上、中间、靠下摆放设原创 2022-07-03 03:45:16 · 69 阅读 · 0 评论 -
CSS高级技巧
精灵图针对背景图片使用,就是把很多小的图片整合到一张大图片中,减少浏览器请求次数,提高速度主要借助于背景位置来实现——background-position,一般情况下都是负值,因为坐标原点在盒子的左上角,而x轴右边是正,y轴下面是正,所以要把图片放到盒子里面,通常都是往上、左移动。字体图标本质是文字,样式比较简单,可以改变颜色大小等字体图标是一些网页比较常见的小图标,我们直接从网上下载即可http://icomoom.iohttp://www.iconfont.cn/然后引入到页面中(具体见pink ht原创 2022-07-03 01:43:48 · 90 阅读 · 0 评论 -
元素的显示与隐藏
本质:让一个元素在页面中隐藏或者显示出来display属性display:none;隐藏对象display:block;除了能转换为块级元素外,同时还有显示元素的意思display隐藏元素后,不再占有原来的位置原创 2022-07-02 00:47:00 · 52 阅读 · 0 评论 -
CSS定位
定位=定位模式+边偏移定位模式:static静态定位relative相对定位absolute绝对定位fixed固定定位边偏移:有top,bottom,left,right 例如:top : 80px(距离顶部80px)相对定位元素移动位置的时候,是相对于它原来的位置来说的语法:选择器 {position:relative;}没有脱标(脱离标准流)绝对定位元素移动位置的时候,是相对于它的祖先元素来说的语法:选择器 {position:absolute;}1.如果没有祖先元素或者祖先元素没有定位,则以浏览器为准原创 2022-07-01 23:24:56 · 101 阅读 · 0 评论 -
CSS浮动
pc端网页布局的三种方式:普通流,浮动,定位移动端的布局在后面会专门学习,就看后面模块的笔记叭,俺还没写float属性用于创建浮动框,将其移动到一边,直到左边缘或右边缘触及包含块或者是另一个浮动框边缘float: left || right || none(默认不浮动);浮动特性:1.浮动元素会脱离标准流,不再保留原先的位置,原先的位置会被标准流盒子占有2.浮动元素会一行内显示并且元素顶部对齐,放不下时另起一行顶端对齐3.任何元素都可以加浮动,浮动元素会自动具有行内块元素的特征4.如果块级盒子没有设置宽度,原创 2022-07-01 10:34:39 · 62 阅读 · 0 评论 -
CSS盒子模型
页面布局三大核心,盒子模型,浮动,定位magin是盒子与盒子之间的距离padding是内容和边框的距离border是边框content是盒子里面的内容border:border-width || borer-style || border-color分别设置边框粗细、样式、颜色border-top只设置上边框border-collapse:collapse;合并相邻的边框边框会让盒子变得更大padding-top:上内边距;padding-left:左内边距padding复合写法:padding:5px;1原创 2022-07-01 00:32:38 · 102 阅读 · 0 评论 -
CSS三大特性层叠、继承、优先级
层叠性样式冲突时,遵循就近原则继承性子标签会继承父标签里面的某些样式,如文本颜色,字号行高的继承font:12px/20px;字号12px,行高20px,也可不带单位,那就代表倍数优先级行内样式>id选择器>类选择器,伪类选择器>标签选择器>继承,*>外部样式外部样式不用style包裹...原创 2022-06-30 19:30:51 · 49 阅读 · 0 评论 -
CSS背景设置
垂直居中:文字行高=盒子高度背景颜色background-color:颜色|transparent(透明);背景图片background-image:none|url(url);背景平铺background-repeat:repeat|no-repeat|repeat-x|repeat-y;默认平铺,图片没有盒子大时,默认x,y方向上都把图片进行复制背景位置background-position:x y;x,y可以是方位名词top,bottom,left,center,right,也可以是精确单位百分数浮点原创 2022-06-30 19:06:13 · 55 阅读 · 0 评论 -
CSS元素显示模式
块元素独占一行高度、宽度、内外边距都可以调整行内元素一行可以显示多个元素高宽不能直接设置,无效行内元素只能容纳文本或者其他行内元素行内块元素同时具有块元素和行内元素的特点一行可以显示多个高度、宽度、内外边距都可以设置显示模式的转换转换为块级元素:display:block;转换为行内元素:display:inline;转换为行内块元素:display:inline-block;......原创 2022-06-30 07:17:26 · 67 阅读 · 0 评论 -
CSS复合选择器
后代选择器元素1 元素2{样式声明}选择元素1里面的所有元素2(后代元素),后代包括孙子子选择器元素1>元素2{样式声明}只能选择最近一级子元素,也就是只能选择亲儿子并集选择器选择多组标签,选择了元素1和元素2元素1,元素2{样式声明}伪类选择器最大的特点是冒号:链接伪类:a:link,选择所有未被访问的链接a:visited,选择所有已经被访问的链接a:hover,选择鼠标指针位于其上的链接a:active,选择鼠标按下但未抬起的链接顺序不能颠倒:focus伪类选择器用于选取获得焦点的表单元素input:原创 2022-06-30 07:02:28 · 50 阅读 · 0 评论 -
Emment语法
生成html标签生成css样式简写原创 2022-06-30 05:03:36 · 52 阅读 · 0 评论 -
css字体、文本属性以及引入方式
字体属性font-family:"宋体";设置多个字体用逗号隔开font-size:20px;字体大小,单位像素font-weight:bold;字体粗细,加粗,bold等价于700font-style:italic;斜体复合写法:font:style weight size/line-height family;不能随意更换顺序,必须有style和size文本属性color:red;可以是16进制的,rgb(255,0,0)text-align:center/left/right;水平居中对齐/左对齐/右原创 2022-06-30 01:13:40 · 124 阅读 · 0 评论 -
CSS基础选择器
标签选择器 把同一标签名的选择出来类选择器 把同一个类名的选择出来,类class p既是red类又是big类,中间用空格隔开id选择器原创 2022-06-30 00:40:39 · 66 阅读 · 0 评论