51
Dev开发社区
首页
文章
问答
工具
搜索
登录
注册
#css
CSS3立体文字最佳实践
前端开发whqet,csdn,王海庆,whqet,前端开发专家上一篇的《纯CSS3文字效果推荐》文章里面推荐了8款纯css实现的文字效果,当中3d文字效果最为流行,限于篇幅只展示了其3D实现原理,没有考虑代码的复用性和可移植性。今天来补充下。顺便领略sass的强大功能,请大家摩摩拳擦擦掌。开工咯!案例效果还是在code...
代码星球
·
2021-02-13
CSS3
立体
文字
最佳
实践
CSS三角形制作样式
.triangle{display:block;height:0;position:absolute;width:0;border:9pxsolid;border-color:transparent#bbb;border-right-width:0;}<divclass="triangle"></di...
代码星球
·
2021-02-13
CSS
三角形
制作
样式
postcss-pxtorem
在vue项目中,使用rem进行布局,如果自己一个一个写样式会很麻烦,接下来介绍这种开发方式,配置rem,即可用px来开发,会自动帮我们转成rem 在public文件中,我们要引入rem.js的插件 然后在项目的根目录下创建 postcss.config.js文件,这样配置一下 module.exp...
代码星球
·
2021-02-12
postcss-pxtorem
响应式css样式
<divclass="a">123</div> @media(orientation:portrait)and(max-width:600px){ .a{ color:red; } } @media(min-width:300px)and(max-...
代码星球
·
2021-02-12
响应
css
样式
Html,Css,JS
css和html的四种结合方式1、 在每个html标签上都有一个属性style,把css和html结合在一起<divstyle=”background-color:red;color:green;”>2、 使用html的一个标签实现<style>标签,...
代码星球
·
2021-02-12
Html
Css
JS
css设置使文字显示2行多余的为省略号...
123456789101112.title{ font-size:.7rem; line-height: 1.5rem; &...
代码星球
·
2021-02-12
css
设置
文字
显示
2行
css如何实现背景透明,文字不透明?
之前做了个半透明弹层,但设置背景半透明时,子元素包含的字体及其它元素也都变成了半透明。对opacity这个属性认识的不透彻,在这里做一些总结,方便以后使用。 背景透明,文字不透明的解决方法: 为元素添加一个绝对定位的子元素,设置大小和该元素一样,把半透明加在绝对定位元素上作为遮罩,z-i...
代码星球
·
2021-02-12
css
如何
实现
背景
透明
css 能改变input type radio和checkbox 圆圈或方框的大小
把input隐藏,外面套label,再里面加个span,样式写在span上,让label覆盖在span上面,js去改active的class <labelfor="remember"class="text-muted"><spanclass="circle-btn"></span...
代码星球
·
2021-02-12
css
能改变
input
type
radio
css文件 如何使背景图片大小适应div的大小
对背景图片设置属性:background-size:cover;可以实现背景图片适应div的大小。background-size有3个属性:auto:当使用该属性的时候,背景图片将保持100%的大小显示,不进行任何缩放。超过div的多余部分将被隐藏。当图片过小时,图片会自动平铺。这种属性通常用来做重复性的背景或者做半透...
代码星球
·
2021-02-12
大小
css
文件
如何
背景图片
css实现元素在div底部显示
#CSS.1{position:relative;}.2{position:absolute;left;0;bottom:0;}#HTML<divclass="1"><divclass="2"></div></div>不影响其他元素的情况下定位最好...如果DIV1里只有...
代码星球
·
2021-02-12
css
实现
元素
div
底部
CSS3与页面布局学习总结(七)——前端预处理技术(Less、Sass、CoffeeScript、TypeScript)
CSS不像其它高级语言一样支持算术运算、变量、流程控制与面向对象特性,所以CSS样式较多时会引起一些问题,如修改复杂,冗余,某些别的语言很简单的功能实现不了等。而javascript则是一种半面向对象的动态语言,有java的影子,有C的味道,中间有比其它语言多的糟粕,使用预处理办法可以解决这些问题。其中Less[les...
代码星球
·
2021-02-12
CSS3
页面
布局
学习
总结
CSS3与页面布局学习总结(五)——Web Font与Sprite
webfont是应用在web中的一种字体技术,在CSS中使用font-face定义新的字体。先了解操作系统中的字体:a)、安装好操作系统后,会默认安装一些字体,这些字体文件描述了每一个文字的形态,一般中文文件大,英文文件小,因为中文字符数多;在控制面板中可以找到文字文件夹,在C:WindowsFonts下也可以直接找到...
代码星球
·
2021-02-12
CSS3
页面
布局
学习
总结
CSS3与页面布局学习总结(三)——BFC、定位、浮动、7种垂直居中方法
BFC(BlockFormattingContext)即“块级格式化上下文”,IFC(InlineFormattingContext)即行内格式化上下文。常规流(也称标准流、普通流)是一个文档在被显示时最常见的布局形态。一个框在常规流中必须属于一个格式化上下文,你可以把BFC想象成一个大箱子,箱子外边的元素将不与箱子内...
代码星球
·
2021-02-12
CSS3
页面
布局
学习
总结
CSS3与页面布局学习总结(二)——Box Model、边距折叠、内联与块标签、CSSReset
盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin)、边框(Border)、内边距(Padding)和内容(Content),其实盒子模型有两种,分别是ie盒子模型和标准w3c盒子模型,加上了doctype声明,让所有浏览器都会...
代码星球
·
2021-02-12
CSS3
页面
布局
学习
总结
CSS3与页面布局学习总结(一)——概要、选择器、特殊性与刻度单位
web前端开发者最最注的内容是三个:HTML、CSS与JavaScript,他们分别在不同方面发挥自己的作用,HTML实现页面结构,CSS完成页面的表现与风格,JavaScript实现一些客户端的功能与业务。当然内容与用户资源也是不能忽视的。尽量不要跨职责范围使用,有点“SRP单一职责”的意思,如字体大小应该是CSS控...
代码星球
·
2021-02-12
CSS3
页面
布局
学习
总结
首页
上一页
...
10
11
12
13
14
...
下一页
尾页
按字母分类:
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z
其他