css
关注
分享
扫一扫
肖肖肖丽珠
学习学习。写博客是为了积累和总结。如果写的有错欢迎大家指正点拨。努力成为技术小牛~~加油
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
css怎样设置文本格式两端对齐
css怎样设置文本格式两端对齐原创 2022-09-28 12:00:07 · 426 阅读 · 0 评论 -
postcss是什么？
Postcss本身不会对你的css做任何事物，你可以把postcss当做一个壳，伴随着postcss的生态，衍生出更多postcss插件，能够帮你解决95%以上的css疑问，如果你需要自定义一个属于自己业务需求的css编写规范，那么你也可以为此开发一个特定的postcss plugin.1.支持未来的css: 使用cssnext书写未来的css(postcss-cssnext plugin)Postcss属于css后处理器，动态编译css，也就是说，在运行的时候进行编译。3.丰富的插件系统，解放你的双手。原创 2022-08-19 11:31:12 · 1444 阅读 · 0 评论 -
css 背景色透明但是内容图片不透明
解决办法是background-color:rgba(0,0,0,0.7)就行啦。前面是rgb的色值，后面是透明度。我是右边样式，本来只想要背景透明，结果背景上面的img图片也透明了。原创 2022-08-12 15:53:33 · 1042 阅读 · 0 评论 -
css设置文字的颜色为渐变色
.rank .course-list .num.yellow{ background-image:linear-gradient(90deg, #FAA500 6.4%, #FF7A00 94.09%); -webkit-background-clip:text; -webkit-text-fill-color:transparent;}原创 2022-05-06 15:00:04 · 587 阅读 · 0 评论 -
页面突然有了滚动条导致页面抖动了一下，内容宽度变小
overflow-y: overlay;原创 2022-03-23 18:21:39 · 1174 阅读 · 1 评论 -
css英语不换行
overflow-wrap: break-word; word-wrap: break-word; word-break: break-word;原创 2022-03-23 18:08:53 · 207 阅读 · 0 评论 -
scss的calc计算表达式。没有起作用是怎么回事
width:calc(100%-100px)看起来也没有什么问题。但是浏览器里面查看这是因为减号左右两端都要加上空格啊。width:calc(100% - 100px)加上空格再看一下上面每家空格的实效。下面加上空格就对啦。...原创 2022-02-15 16:50:06 · 962 阅读 · 0 评论 -
修改svg的颜色
<svg class="hamburger" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="64" height="64" > <path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-...原创 2022-02-15 16:45:36 · 2125 阅读 · 0 评论 -
文字绕圆排列：vue
<template> <div class="container"> <div class="emblem"> <div class="text" v-for="(text, index) in emblemText" :key="index" :style="'transform: rotateZ('+ getDeg(index) +')'"> {{text}} ...原创 2021-09-11 17:44:31 · 1513 阅读 · 0 评论 -
css span标签有白边
有时候span标签换行了导致span之间就有白边父元素加上font-size：0；子元素也就是span标签按照正常的font-size写就可以了原创 2021-06-02 18:03:36 · 399 阅读 · 0 评论 -
一维数组根据某个属性值变成二维的
//一维数组根据tlnum变成二维的var arr=[{name:"lalalala";tlnum:1},{name:"wewew";tlnum:1},{name:"122323";tlnum:2},]; function arrayTwo(arr){ var map1 = {}; while(arr.length) { ...原创 2021-04-20 16:09:57 · 330 阅读 · 0 评论 -
点击菜单通过iframe的src改变来显示不同的页面。iframe能高度自适应，iframe滚动但是不显示滚动条
当我们不使用任何的框架来写官网，把几个不同的页面怎么能在菜单改变的时候放在一起呢？顶部菜单和底部的一般是不变的。变得是中间的内容，那么我们考虑一个总的页面，含有不变的元素，然后变得内容通过iframe的src改变来实现。那么需要考虑下面的两个问题：1.怎么让iframe能高度自适应，宽度占据100%；页面的布局是这样的<div class="head"> <ul class="nav"> <li class="layui-nav-i...原创 2021-01-21 15:41:01 · 968 阅读 · 0 评论 -
flex实现居中对齐
超级简单就是给想要居中的元素添加样式display:flex;justify-content:center原创 2020-12-30 16:38:10 · 440 阅读 · 0 评论 -
如何引入iconfont的字体图标
首先在阿里巴巴矢量字体图标库。把你想要的图标加入购物车。然后点击进入购物车的界面。看到有个下载代码。然后我们就会得到一个文件夹。我们把文件夹里的css。svg。ttf。woff。woff2复制出来放在我们想要的地方我们这里把需要的文件放在了fonts的目录下。然后修改iconfont.css里面文件路径的引入地址。然后使用是 class的值就是iconfont 加视你使用的图标的class就行了。<span class="iconfont icon-footba...原创 2020-11-10 17:46:49 · 469 阅读 · 0 评论 -
网站内容少。底部的信息没有在最底部，出现了空白
shang上面就是页面的效果。我不可能把底部的写成固定的position:fixed ;bottom:0;这样的。因为当页面内容多的时候。就一直悬浮在底部怪怪的。肯定是靠页面的内容撑开的。现在我们可以利用flex布局来写<div id="container"> <header>HEADER</header> <section class="main">MAIN</section> <footer>F..原创 2020-10-31 14:45:54 · 641 阅读 · 0 评论 -
css利用content属性显示一个特殊符号①
<div class="step"></div>.step{width:20px;height:0px;position:relative;}.step:before{content:'①';display:inline-block;position:absolute;left:0px;top:-35px;font-size:17px;}...原创 2020-09-22 10:46:02 · 602 阅读 · 0 评论 -
如何利用css写出左边是标签右边内容，并且内容换行不能在标签的下面
实现的效果是这样的。这样第一感觉是给左边的内容加个高度。然后右边就不会换行到左边了。但是在内容的高度不确定的情况下是没办法写高度的啊。<div class="analysis"><em>[分析]</em><div ><p>[分析][分析][分析][分析][分析][分析][分析][分析][分析][分析][分析][分析][分析][分析][分析][分析][分析][分析][分析][分析][分析][分析][分析][分析][分析][分析]..原创 2020-09-10 10:55:35 · 664 阅读 · 0 评论 -
移动端自适应屏幕的方法,使用vh和vw
vh是相对设备的高度 1vh=视窗高度1%；如果视窗高度是520px.你的2vh就是520px*2%=10.4px;实际上他的高度是10.4px。如果知道设计图的px尺寸和视窗px尺寸，如何求他的vh高度呢？vh=100*设计图的px尺寸/视窗px尺寸vw相对于设备的宽度 1vw=视窗宽度的1%因此我们可以写个编辑器来计算你想要换算的vh和vw吧标识的<!DOCTYPE html><html><head> <me...原创 2020-05-22 16:52:35 · 1402 阅读 · 0 评论 -
mui css 多行文本的溢出显示省略号(移动端)
一行超出就溢出隐藏div{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} 两行超出溢出隐藏div{ overflow:hidden; //前两个不变 text-overflow:ellipsis; white-space:normal ！import...原创 2017-03-29 09:50:04 · 12470 阅读 · 1 评论 -
css绘制三角形的原理
<div class="triangle"></div>.triangle{width:0px;height:100px;border:100px solid;border-color:red green blue yellow;}效果就是下面这张图所以我们把其中的三种颜色设置成transparent 透明的，就是一个三角形了...原创 2019-07-31 10:03:06 · 204 阅读 · 0 评论 -
css 多列等高等宽布局
左右间距都是一样的。然后两个sibling也是均分。使用display:table 和display:table-cell就可以啦<div class="table"> <p>Sibling 1</p> <p>Sibling 2</p></div>...原创 2019-07-31 10:37:43 · 772 阅读 · 0 评论 -
css 让一个图片在固定的尺寸中上下左右居中object-fit
高度是设置的高度。宽度是原始图片根据高度拉伸的原始比例的宽度。不受你设置的图片的宽度影响img{ width:1000px; height:300px; object-fit:contain;//保持原有尺寸比例}...原创 2019-07-31 14:24:14 · 533 阅读 · 0 评论 -
css 实现文字左右两边有一条线
效果是上面这样的，其实很简单就是在文字的伪类里面加横线就行了<div class="title"> 这里标题内容</div>.title{ width:200px; height:50px; line-height:50px; text-align:ce...原创 2019-08-20 10:09:37 · 3199 阅读 · 0 评论 -
对隐藏的内容添加点击事件
{ display: none; /* 不占据空间，无法点击 */ }{ visibility: hidden; /* 占据空间，无法点击 */ }{ position: absolute; clip:rect(1px 1px 1px 1px); /* 不占据空间，无法点击 */ }{ position: absolute; top: -999em; /* 不占据空间，无法点击 */ }{...原创 2019-09-17 17:36:59 · 375 阅读 · 0 评论 -
css+html 在文字下面加点。
效果代码：通过伪类的方式在content里面加点。然后定位在文字的下面。<head> <style> .wavy { position: relative; } .wavy:before { content: "."; position: absolute...原创 2019-04-26 17:46:11 · 6062 阅读 · 0 评论 -
CSS实现文字下面波浪线
方法1.使用径向渐变绘制我们的波浪线效果一个波浪线循环段是有一个朝上的半个圆弧和一个朝下的半个圆弧组合而成的。所以，我们只要使用径向渐变绘制圆弧，再通过background-position控制两个圆弧的位置，让其前后拼接在一起就可以实现波浪线效果。.flow-wave { background: radial-gradient(circle at 10px -7px,...原创 2019-04-26 14:21:35 · 4726 阅读 · 0 评论 -
团队合作的代码规范
基本准则代码缩进严格统一，要么都是2空格，要么都是4空格，禁止一切空格交叉使用导致代码不对齐，看着头痛的情况出现 禁止代码断层（完整代码块内出现多余的空行） 注释必须写 非工程化项目中css禁止在html代码中书写 注销无用的代码一律删掉 便于开发的代码，例如console.log()或alert()在开发完成后一律删掉 标签合理使用 <!-- 头部 --> ...原创 2019-02-14 14:09:48 · 674 阅读 · 0 评论 -
如何使用自定义字体？@font-face
@font-face { font-family: pictos; //给这个字体自己命名一个名字 src:url('pictos/pictos-web.woff'), //注意这里是逗号啊 url('pictos/pictos-web.ttf'), url('pictos/pictos-web.eot'); /* IE9 */原创 2017-10-18 11:21:49 · 900 阅读 · 0 评论 -
CSS Shapes实现元素滚动自动环绕
浏览器支持目前只有Webkit Nightly和Chrome Canary支持CSS Shape，但是它的Model Level 1已经是Candidate Recommendation（候选推荐）了，因此在规范中定义的属性和语法已经很稳定了。看来要不了多久其他浏览器也会实现CSS Shape。本Level的规范主要聚焦在几个Shape属性，这些属性主要规定了形状周围的内容该如何环绕。更具体地原创 2017-09-25 10:47:41 · 876 阅读 · 1 评论 -
Javascript Hoisting（ 变量提升）
Javascript Hoisting（ 变量提升）先理解Javascript Hoisting的概念。Javascript Hoisting：In javascript, every variable declaration is hoisted to the top of its declaration context.我的理解就是在Javascript语言中，变量的声明(原创 2017-08-30 18:26:30 · 357 阅读 · 0 评论 -
offsetTop 与 style.top 的差别
offsetTop 与 style.top 的差别我们知道 offsetTop 可以获得 HTML 元素间隔上方或外层元素的地位，style.top 也是可以的，二者的差别是：一、offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。二、offsetTop 只读，而 style.top 可读写。三、若是没有给 HTML原创 2017-08-30 14:28:00 · 1460 阅读 · 0 评论 -
document和window的区别。一个简单的举例
从这个我们可以看出document是页面的所有内容，包括不出现在一个屏幕中的其他需要下拉才能看到的内容。而window就是当前的屏幕的大小。原创 2017-09-05 11:37:30 · 347 阅读 · 0 评论 -
css3的一些总结
渐变颜色：background-image：linear-gradient(to left ,#ccc , #eee.....)1,参数是渐变的方向。第一个是to不变。方向是它的指向to left是从这右向左。to right是从左向右。to top left是从右下向左上。totop right是从左下向右上。2，3,4....，#ccc是颜色的开始到原创 2017-04-22 15:21:44 · 411 阅读 · 0 评论 -
有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度。
<divclass="content"><divclass="top"><divclass="bottom">//方法1，绝对布局*{ margin:0; padding:0;}.content{ width:auto; height:200px;//演示方便，所以设置了一个高度 border: 5px solid原创 2017-07-29 17:51:09 · 4279 阅读 · 0 评论 -
边框距离上下都是有距离的
效果图如上：代码 我要下单 下单有好礼原创 2017-05-17 18:42:12 · 1690 阅读 · 0 评论 -
根据手机屏幕来调节图片的高度
var thisheight=window.innerWidth*30/64; $("img").css("height",thisheight);原创 2017-06-14 20:23:50 · 548 阅读 · 0 评论 -
改变input框光标的颜色
input{color:white; //可以通过设置字体的颜色来设置光标的颜色。字体和光标颜色是一样的。}原创 2017-07-04 11:46:39 · 3391 阅读 · 0 评论 -
css3的新属性遮罩蒙版mask
效果我们可以看出其实他是有两个图片拼成的。+这个是剪切的一个图片让他成蒙版的形状。你也可以用文字来实现。原创 2017-10-18 10:03:06 · 8252 阅读 · 0 评论 -
雪花飘落的效果。animate的使用
animate(css样式，速度，运动方式，运动后执行的函数)改变多个css的样式：$("p").css({"background-color":"blue","font-size":"14px"});或者$("p").css({backgroundColor:"blue",fontSize:"14px"});例如：$(".a").click(funct原创 2017-04-12 15:43:46 · 1778 阅读 · 0 评论 -
利用css的content来实现自动在a标签后面加上href属性设置的链接地址
上面是实现效果。下面是html内容。可以看到我并没有写http://www.runoob.com。但是却能显示出来。<a href="http://www.runoob.com" id="a">菜鸟教程</a>那是因为css里面设置了content。#a:after{content:"("attr(href)")";}...原创 2019-02-14 09:40:40 · 1470 阅读 · 0 评论