HTML+CSS+Less+Bootstrap
文章平均质量分 75
记录学习CSS特效、Flex布局、Less语法、Bootstrap框架的过程和心得。
1997花季
这个作者很懒,什么都没留下…
展开
-
bootstrap的概念&使用方法
bootstrap的概念&使用方法使用CDN引入boostrap:<!-- Bootstrap 核心 CSS 文件 --><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l原创 2022-03-11 12:23:38 · 703 阅读 · 0 评论 -
综合运用 vw + Flex + Less 实现B站移动端页面
综合运用 vw + Flex + Less 实现B站移动端页面目前市面上有两种适配方案比较流行,一是rem,二是vw(未来趋势)。vw的核心概念是将屏幕平分为100份,若屏幕宽度750px,1vw则等于7.5px。VS Code提供了vw相关的插件,意味着不用手动去计算。下面这个案例的宽高值,全部用vw单位。原插件的setting.json默认数值为750,我这里改成了375,以方便适应B站页面的制作。最终效果如图所示:在这里插入代码片主要分为四个部分,header、nav、content、o原创 2022-03-09 19:58:16 · 854 阅读 · 0 评论 -
Flex布局-实现网上商城-个人中心页面
Flex布局-网上商城-个人中心页面运用flex知识,可以快速实现弹性功能的页面。无论是排列方式还是横竖居中,flex都能轻松搞定,并具备弹性功能,可随屏幕变化而伸缩。下面这个网上商城-个人中心页面,综合运用了flex知识来实现,效果如图:具体代码如下:.main { display: flex; width: 1240px; margin: 0 auto;}.left { width: 232px; margin-right: 20px;}.ri原创 2022-03-06 18:10:45 · 4055 阅读 · 3 评论 -
使用Flex布局,实现移动端商品支付页面
Flex布局关键知识点1.display:flex要加在父元素上。2.justify-content设置主轴内容的对齐方式。3.flex-direction可更改主轴的方向。4.align-items设置侧轴内容的对齐方式。5.主轴的方向默认是水平方向,可以通过设置flex-direction:column为垂直方向。需要注意,如果主轴方向变了,那么justify-content属性的值就是相对于更改后的主轴方向而言的。使用Flex布局,实现移动端商品支付页面效果图如下:具体代码:先引入在原创 2022-03-05 20:40:30 · 1060 阅读 · 0 评论 -
使用CSS动画实现 时钟转动效果
使用CSS动画实现 时钟转动效果此案例主要运用到了css动画的功能。先将外圆画好,时钟的时间轴先画正中间那一根,绝对定位到中间,然后复制时间轴类名,并依次添加旋转30度的css代码,需要注意的是,后面使用transform:rotate()会覆盖掉前面的transform:translate()属性,因此都要加上translate。然后画一个白色的遮罩层,放在外圆的正中间,以圆形挡住后面的大部分时间轴。接着开始画时、分、秒指针,依然是绝对定位到中间,但是指针的旋转点是自身中底部,因此transform属原创 2022-03-04 19:58:09 · 3986 阅读 · 0 评论