CSS
关注
分享
扫一扫
文章平均质量分 60
Alisane
这个作者很懒，什么都没留下…
展开
-
用css实现部分常用样式
<div class="css1">1半透明边框</div><div class="css2">2多重边框</div><div cla原创 2018-07-29 11:15:55 · 357 阅读 · 0 评论 -
css实现环形水波纹和背景水波纹
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ padding: 0; ...转载 2020-12-28 16:55:10 · 1641 阅读 · 1 评论 -
css实现渐变色的百分比进度条
<div class="con-footer"> <div class="con-image-text"><span>1</span><span class="qiti-right">796 正常</span></div> <div class="progress-out"> <...原创 2020-11-16 16:09:08 · 1875 阅读 · 0 评论 -
前端常用工具收集
1.对于制作精灵图有些人感到很麻烦，这里给大家推荐一个自动生成精灵图的工具：https://www.toptal.com/developers/css/sprite-generator，你只需要添加相关资源，他就会自动帮你生成精灵图和对应的css样式....原创 2020-08-24 18:02:21 · 144 阅读 · 0 评论 -
css基本书写规范
1.书写顺序位置：position,z-index,display,float 大小：width,height,padding,margin,border,overflow 文字：font,line-height,letter-spacing,color,text-align 背景：background,border 其他：animation,transition2.书写规范缩写：/* 优 */.text{ padding:0 1em 2em;}/* 劣 */.tex原创 2020-08-06 15:19:17 · 146 阅读 · 0 评论 -
js实现数字验证码和路径取参
function getImgCode() { var s=new Array(0,1,2,3,4,5,6,7,8,9); var v = ''; hiddenCode = ''; for(var i=0;i<4;i++){ var r=Math.floor(10*Math.random()); var a=s[r]; v+=a+' '; ...原创 2020-08-05 11:25:50 · 166 阅读 · 0 评论 -
css实现超出部分显示省略号
/*显示一行，省略号*/ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; word-break: break-all;/*显示两行，省略号*/text-overflow: -o-ellipsis-lastline; overflow: hid...原创 2020-04-23 15:15:57 · 701 阅读 · 0 评论 -
img标签与background的区别
问题描述：在实际开发中，会遇到大图作为背景图片的场景，这时图片的展示方式有两种。第一种是使用<img>标签去显示，第二种是以背景图片显示。img:html中的标签img是网页结构的一部分，会在构建dom结构的时候就去加载图片。background:以css背景图存在的图片会等dom结构加载完成，才开始加载。当使用backgruong设置背景图片的时候 会出现背景图片...原创 2019-12-09 17:02:14 · 862 阅读 · 0 评论 -
<table></table>标签的属性的用法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>表格学习</title> <style> table{ border: 1px solid gainsboro...原创 2019-10-18 15:52:43 · 544 阅读 · 0 评论 -
css消除点击时ios上出现对应的阴影区域
* { -webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-tap-highlight-color: transparent; /* For some Androids */ }原创 2019-09-11 09:40:11 · 738 阅读 · 0 评论 -
文档流
文档流有三种：标准流，浮动流，定位流；标准流的层级最低，浮动流的层级第二，定位流的层级最高(可以使用z-index调整定位盒子的层级)。定位：positionposition：relative相对于自身原始位置进行定位 不脱离文档流position：absolute以定位父级为原点进行定位 脱离文档流，若没有定位父级以document文档定位，绝对定位即使没有初始值，也一定要设置值le...原创 2019-06-24 10:13:15 · 907 阅读 · 0 评论 -
实现单选按钮(radio)组
<input type="radio" name="cheakRadios"><input type="radio" name="cheakRadios"><input type="radio" name="cheakRadios"><input type="radio&qu原创 2019-01-31 16:34:31 · 21413 阅读 · 2 评论 -
css中常用小样式整理
1.用 position: sticky;实现类似Tab吸顶div.sticky { position: -webkit-sticky; position: sticky; top: 0; padding: 5px; background-color: #cae8ca; border: 2px solid #4CAF50;}2.用overflow实现区域滚动条...原创 2018-09-17 14:31:42 · 233 阅读 · 0 评论 -
css隐藏元素的方法及区别
1.opacityopacity:0将元素本身及其子元素都置为不可见的，而元素本身依然占据它自己的位置并对网页的布局起作用，它会响应用户交互2 .visibilityvisibility:hidden将元素本身及其子元素都置为不可见的, 而元素本身依然占据它自己的位置并对网页的布局起作用，它不会响应用户交互.如果想让子元素显示，则设置子元素的visibility：visible;3...原创 2018-09-17 14:04:01 · 1537 阅读 · 2 评论 -
flex布局最常用的几种样式
总结几点我在做项目的时候记不清的样式啊......首先，大家得知道Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。注意1：父元素设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。我们常用的布局方式无非按水平方向排和垂直方向排，那么告诉这个盒子：排列方向(默认...原创 2018-09-16 21:53:07 · 5739 阅读 · 0 评论 -
CSS预处器之Less
一、什么是CSS预处器CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。通俗的说，CSS预处理器用一种专门的编程语言，进行Web页面样式设计，然后再编译成正常的CSS文件，以供项目使用。CSS预处理器为CSS增加一些编程的特性，无需考虑浏览器的兼容性问题，例如你可以在CSS中使...原创 2018-09-03 21:11:44 · 142 阅读 · 0 评论 -
水平居中和垂直居中常用方法总结
水平居中行级元素：为该行级元素的父元素设置text-align:center样式<div style="width: 500px;height: 100px;border: 1px solid green;text-align:center;"> <span>行级元素</span></div>块级元素：为其自身设置margin...原创 2018-09-04 21:15:38 · 9294 阅读 · 0 评论 -
2018秋招之前端面试题自我总结(HTML+CSS部分)
第一题：doctype(文档类型) 的作用是什么？ 声明位于文档中的最前面的位置，处于 标签之前。 声明不是一个 HTML 标签；它是用来告知 Web 浏览器页面使用了哪种 HTML 版本。...原创 2018-08-04 09:58:44 · 344 阅读 · 0 评论