![](https://img-blog.csdnimg.cn/20190918140145169.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
CSS/CSS3
CSS/CSS3实战开发总结
追逐梦想之路_随笔
这个作者很懒,什么都没留下…
展开
-
scss开发常见基本用法总结
scss开发总结原创 2022-06-15 15:31:00 · 217 阅读 · 0 评论 -
css3的transform(translate、rotate、scale、skew属性基本简单使用)
style <style> .box-move { background: rgb(158, 152, 152); width: 100px; height: 100px; /* border-radius: 50px; */ } .box-move1 { /* animation: my3d 5s; */ background-color: aqua; .原创 2022-05-21 21:43:57 · 489 阅读 · 0 评论 -
transform实现简单3D立体正方体旋转
初始效果图html <div class="box-parent"> <span class="box-children">1</span> <span class="box-children">2</span> <span class="box-children">3</span> <span class="box-children">4</span&原创 2021-11-28 17:42:12 · 996 阅读 · 0 评论 -
css3简单音频播放音波动画图
波纹上下波动效果html<div class="box"> <ul > <p></p> <p></p> <p></p> <p></p> </ul> </div>css3样式<style> .box{ width: 500px.原创 2022-05-25 22:17:21 · 2343 阅读 · 0 评论 -
css3使用animation动画实现无限滚动轮播图
css3动画学习原创 2022-11-29 11:11:49 · 2596 阅读 · 0 评论 -
h5深色模式快速适配背景和字体颜色
开发总结原创 2022-08-22 16:50:56 · 1069 阅读 · 0 评论 -
less开发常见基本用法总结
开发总结原创 2022-06-15 15:26:50 · 171 阅读 · 0 评论 -
自定义字体的引入和使用
自定义字体操作:全局安装2个依赖npm install -g ttf2woffnpm install font-spider -g打开font-pl包在index.html添加需要补充的字体添加完成执行以下命令:切到文件夹然后执行命令:1.执行命令:font-spider index.html(生成对对应字体)2.执行命令:ttf2woff HeiTiFont.TTF new.woff //(生成字体的格式,最终直接使用该字体格式)css引入格式示例:@font-face {fon原创 2021-10-28 12:01:43 · 329 阅读 · 0 评论 -
使用text-align: justify解决文本未到末端提前换行的问题
text-align: justify这个属性开发中一般都不是特别常用,但是为了解决文本未到行末而自动换行的问题,则可以使用它轻松解决。这个text-align: justify到底怎么使用,可以看看w3c的标准:w3c标准指出:text-align主要是解决文本的水平对齐方式,该属性通过指定行框与哪个点对齐,从而设置块级元素内文本的水平对齐方式。通过允许用户代理调整行内容中字母和字之间的间隔,可以支持值 justify;不同用户代理可能会得到不同的结果。样式布局中可以使用文本水平对齐方式的属性:1原创 2021-09-16 00:12:29 · 474 阅读 · 0 评论 -
如何去掉外部滚动条和设置滚动条,使得自动适应浏览器宽高?
如何去掉滚动条以及设置滚动条,使得自动适应浏览器宽高?(Vue开发)在template里面<div class="Form-scroll" :style="{height:Height}">在Vue的生命周期里面mounted() {// 计算高度var toHeight = document.documentElement.clientHeight //获取浏览器可视...原创 2019-05-30 22:58:40 · 2328 阅读 · 0 评论 -
css3相对于css新增的特性
CSS3新增特性:在css的基础上新增的特性,css3能够兼容css的所有特性,具有向前兼容性。1.CSS3圆角边框:border-radius(解决了原有圆角边框需要截图的问题)2.CSS3文本阴影与盒阴影:text-shadow、box-shadow(可以用于实现标签边框或阴影)3.CSS3背景尺寸、背景切割和背景原点:background-clip background-origin ...原创 2020-04-05 11:10:50 · 180 阅读 · 0 评论 -
CSS/CSS3语义化命名规范
语义化命名规范的意义:在开发过程中可以更好更快速得修改/维护代码,阅读代码更简单快捷,容易读懂代码。(1)页面结构容器: container页头:header内容:content/container页面主体:main页尾:footer导航:nav侧栏:sidebar栏目:column页面外围控制整体佈局宽度:wrapper左右中:left right center(2...原创 2020-04-05 11:39:29 · 229 阅读 · 0 评论 -
两栏自适应布局三种简单的实现方式
1.使用float+margin-left <style> *{ margin:0;padding: 0 } html,body{ height: 100%; } .item1{ height:100%; ...原创 2019-05-11 16:07:16 · 679 阅读 · 0 评论