css
关注
分享
扫一扫
X Dou
这个作者很懒，什么都没留下…
展开
-
css3实现变大变小的点
<p class="spot"></p> *{ margin: 0; padding: 0; } body{ position: relative; height: 100vh; display: flex; justify-content: center; align-items: center; background-color: #000; } .原创 2022-03-16 11:20:06 · 432 阅读 · 0 评论 -
:root
:root相当于<html>元素,除了优先级更高，别的和HTML一样/* 定义*/:root{ --Color:green; --fontSize:14px;}/*使用*/ div{color:var(Color);font-size:var(fontSize)}/*此时div的颜色是green，字体大小是14px*/...原创 2020-05-08 10:04:38 · 683 阅读 · 0 评论 -
003-矩形旋转
<div> <span></span> <span></span> <span></span> </div> html, body { margin: 0; height: 100%; display: flex; ...原创 2019-09-10 15:18:34 · 156 阅读 · 0 评论 -
001-按钮文本交错滑动效果
<div class="box"> <span data-text="b">b</span> <span data-text="u">u</span> <span data-text="t">t</span> <span data-text="t">t</...原创 2019-09-10 09:22:45 · 226 阅读 · 0 评论 -
002-css渐变色
<p></p>body { margin: 0; height: 100vh; background-color: #000000; display: flex; justify-content: center; align-items: center; } p ...原创 2019-06-18 15:59:47 · 667 阅读 · 0 评论 -
样式预设
样式一@charset"utf-8";/* CSS Document */body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;}body, button, input, s...转载 2018-07-24 08:52:43 · 502 阅读 · 0 评论 -
grid布局-demo
<div class="auto_fill"> <div class="auto_fill_item">1</div> <div class="auto_fill_item">2</div> <div class="auto_fill_item">3</div> <div...原创 2019-12-06 16:15:38 · 735 阅读 · 0 评论 -
元素水平垂直居中的方案
元素水平垂直居中的方案1.绝对定位和marginposition：absolute;left:0;right:0;bottom:0;top:0;margin:auto;2.块元素 height=line-height //高度等于行高 垂直居中 text-algin:center //水平居中3.flex-box布局 display:flex; justify-conet...原创 2019-12-06 13:45:06 · 184 阅读 · 0 评论 -
css强制换行
对于没有空格的中文或英文文本 在设置了固定宽度后还是不换行时；使用word-wrap:break-word;强制换行原创 2019-06-28 15:30:52 · 1450 阅读 · 0 评论 -
em和rem
em：基于父级元素的字体大小；rem：基于html的字体大小由于浏览器的字体大小一般默认是16px；1rem=16px;在设置rem时；html{font-size:62.5%;/*10 ÷ 16 × 100% = 62.5%*/}...原创 2019-06-21 15:59:38 · 2577 阅读 · 0 评论 -
伪元素after实现三角形
空心三角箭头.triangle::after { position: absolute; content: ''; width: 100px; height: 100px; border-right: 1px solid #f00; border-bottom: 1px solid #f00; tr...原创 2018-12-27 15:45:17 · 4347 阅读 · 0 评论 -
纯CSS设置下拉菜单
<div class="nav"> <ul> <li> <a href="">nav item</a> <ul> <li><a href="">nav it...原创 2018-12-27 18:20:54 · 1434 阅读 · 1 评论 -
@import和link的区别
区别加载顺序link引入的css在加载页面时同时加载，而@import中的css要在页面加载完毕后加载从属关系link是HTML提供的标签@import是css的语法规则，只能加载在style标签内和css文件中兼容性@import是css2.1时提出的，只能用于IE5+，而link不受兼容影响DOM可控性link支持js控制DOM改变样式，而@import...原创 2019-06-20 14:50:59 · 2488 阅读 · 2 评论 -
css3动画
transition的四个属性 transition-property:css的属性name trasnsition-duration:transiton效果完成所用的时间 transiton-timing-function:transiton效果的方式 ease:先快后慢 最后非常慢 linear:匀速 ea...原创 2019-06-03 09:51:11 · 170 阅读 · 0 评论 -
纯CSS设置动态导航栏
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0 "> <meta http-equiv=...原创 2019-05-05 15:43:50 · 1679 阅读 · 1 评论