![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
HTMLandCSS
第一阶段
·港岛妹妹
专注前端开发二十四年
展开
-
CSS实现loading动画
<template> <view class="container" v-show="loadingShow"> <view class="load"> <text></text> <text></text> <text></text> <text></text> <text></text> <text&g原创 2021-11-11 10:21:12 · 752 阅读 · 0 评论 -
css伪元素修改单选框及复选框样式
单选框重要提示:要将input框用display:none隐藏,用label将元素包起来html <div class="selectRadio"> <p class="title">1.最近身体病情状况如何?(单选)</p> <label><input type="radio" name="one" value="正常"><span></span> <p>正常</p>原创 2021-09-02 14:48:41 · 1105 阅读 · 0 评论 -
使文字平均铺满容器的css属性
给盒子宽度 加上text-align-last: justify;属性即可效果图:原创 2021-07-29 13:24:20 · 3355 阅读 · 0 评论 -
易忘CSS样式整理
1、文字超出部分显示省略号单行文本的溢出显示省略号(一定要有宽度) p{ width:200rpx; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; }多行文本溢出显示省略号 p{ width:200rpx; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; }2、文字阴影原创 2021-07-26 13:05:43 · 116 阅读 · 0 评论 -
css修改浏览器默认滚动条样式
/*滚动条样式*/::-webkit-scrollbar { width: 4px; /*height: 4px;*/}::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background: rgba(0, 0, 0, 0.2);}::-webkit-scrollbar-track { -webkit-box-s.原创 2021-05-25 17:49:16 · 1032 阅读 · 0 评论 -
左右滚动
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <style>原创 2021-02-24 14:46:33 · 216 阅读 · 0 评论 -
浏览器兼容问题
1.下划线属性过滤器当在一个属性前面增加了一个下划线后,由于符合标准的浏览器不能识别带有下划线的属性而忽略了这个声明,但是在IE6及更低版本浏览器中会继续解析这个规则。 语法:选择符{_属性:属性值;}2. !important关键字过滤器 (增加当前属性的权重,具有最高优先级)它表示所附加的声明具有最高优先级的意思。但由于IE6及更低版本不能识别它,我们可以利用IE6的这个Bug作为过滤器来兼容IE6和其它标准浏览器。语法:选择符{属性:属性值 !important;}3. *属性过滤器在原创 2020-08-06 19:09:30 · 110 阅读 · 0 评论 -
2D transform
1、定义:transform翻译成汉语具有"变换"或者"改变"的意思。通过此属性具有非常强大的功能,比如可以实现元素的位移、拉伸或者旋转等效果最能体现transform 属性强大实力的是实现元素的3D变换效果。2、 2D功能函数: (1)2D位移 translate()说明:translate(tx) 当参数设置一个值的时候,代表水平方向的位移;translate(tx,ty) 第一个值代表水平方向的距离,第二个值垂直方向的距离;translate(tx,ty, tz) 第一原创 2020-08-06 14:26:36 · 150 阅读 · 0 评论 -
两栏布局和三栏布局
两栏布局(左边固定,中间自适应).left{ width:100px; height:100px; float:left; }.right{ width:calc(100%-100px) } 三栏布局(左右固定,中间自适应)双飞翼布局,圣杯布局.left{ position:absolute; left:0; top:0; width:100px; }.middle{ margin:0 100px; }.right{ position:absolute; rig原创 2020-08-06 14:08:46 · 119 阅读 · 0 评论 -
高度塌陷解决方法
(1)可以个固定高度去解决解决高度塌陷问题,弊端:但是不能让元素高度自适应了(2)overflow:hidden;解决高度塌陷并能实现高度自适应的方法一;(遵循BFC的显示原则) 弊端:只要里面的内容或者元素超出父元素以外,就会被隐藏;(3)在浮动元素的下方添加一个空元素,并且给他设置一下属性: 空标记:clear:both;height:0;overflow:hidden;弊端:会添加很多空标记,增加结构负担,产生代码冗余;(4)display:table;原创 2020-08-05 21:15:42 · 4470 阅读 · 0 评论 -
移动端基本三栏布局css
*{margin: 0;padding: 0;}html,body{ height: 100%;}html{ font-size: 31.25vw;}body{ background: #eeeeee; font-size: 16px; display: flex; flex-direction: column;}headersection{ overflow:auto; flex:1;}footer原创 2020-08-05 21:06:13 · 313 阅读 · 0 评论 -
水平垂直居中
第一种通过display:inline-block;和vertical-align:middle;实现元素垂直居中的方法:1、给他的父元素text-align:center;2、先设置当前元素的元素类型设置为inline-block和vertical-align: middle;3、给他添加vertical-align: middle; 让他实现垂直居中对齐;4、添加“标尺”,也就是给他添加一个同辈的元素并且和你这个p标签之间是不能有空格和回车的,在给设置这个元素的类型为 vertica原创 2020-08-05 20:22:09 · 111 阅读 · 0 评论 -
溢出属性,空余空间属性
1. 溢出属性: (重要)overflow :visible/hidden/scroll/auto/inherit 值 描述visible 默认值。内容不会被修剪,会呈现在元素框之外。hidden 内容会被修剪,并且其余内容是不可见的。scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。inherit 规定应该.原创 2020-08-05 19:18:20 · 430 阅读 · 0 评论 -
css单行文本显示省略号必要条件
省略号相关设置;a、单行文本显示省略号:text-overflow:ellipsis 溢出内容被裁减,显示省略号/clip溢出内容被裁减,不显示省略号b、省略号设置:text-overflow属性仅是:当文本溢出时是否显示省略标记,并不具备其它的样式属性定义,要实现溢出时产生省略号的效果还需定义:1、容器宽度:width:value;(px、%,都可以)2、强制文本在一行内显示:white-space:nowrap;3、溢出内容为隐藏:overflow:hidden;4、溢出文本显示省略号:原创 2020-08-05 17:50:53 · 217 阅读 · 0 评论 -
全局样式案例
/* {margin: 0; padding: 0;} */html,body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,dl,dt,dd,form,input,img,select,textarea{ margin: 0; padding: 0;}li{list-style: none;}a,u,ins{text-decoration: none;}b,strong,h1,h2,h3,h4,h5,h6{font-weight: normal;}em,i{font-style:原创 2020-08-02 16:54:53 · 121 阅读 · 0 评论