CSS - 随笔分类 - huangchun0121

摘要：实现代码：https://codepen.io/huangchun/pen/rNvYBwa 阅读全文

posted @ 2022-09-25 11:15 huangchun0121 阅读(92) 评论(0) 推荐(0) 编辑

摘要：html代码： <div class="panel">  <div class="panel-foot"> </div> </div> CSS代码： .panel {  position: relative; height: 3.875rem; border 阅读全文

posted @ 2022-09-06 10:12 huangchun0121 阅读(581) 评论(0) 推荐(0) 编辑

transform 属性例子

摘要：transform属性： scale(number)：等比例方大number倍。课用于导航栏鼠标悬浮在导航项上时使得导航项等比方大。 rotate(*deg):旋转。360deg=1turn=400grad。 skew(*deg):倾斜。 translate（X,Y）:移动。 transform-o 阅读全文

posted @ 2022-09-06 09:47 huangchun0121 阅读(53) 评论(0) 推荐(0) 编辑

CSS实现table单边框

摘要：table直接加边效果： table,table td{ border: 1px solid #000; } table td{ padding: 10px 30px; } table单边效果： table { width: 200px; border-top: 1px solid #999; bo 阅读全文

posted @ 2022-09-06 09:42 huangchun0121 阅读(349) 评论(0) 推荐(0) 编辑

CSS实现加载页面动画效果

摘要：CSS实现一个旋转的加载页面静态效果图： html代码： <body> <div class="loading"> <span>loading.....</span> </div> </body> CSS代码： <style> body{ margin: 0; padding: 0; height 阅读全文

posted @ 2022-09-06 09:38 huangchun0121 阅读(1662) 评论(0) 推荐(0) 编辑

CSS实现梯形例子

摘要：实现效果： position:absolute; display: block;//不占据地方 width: 100%; height: 575px; background-color: orangered; transform-origin:0 0 ;//使得倾斜点为右上角 transform: 阅读全文

posted @ 2022-09-06 09:35 huangchun0121 阅读(110) 评论(0) 推荐(0) 编辑

CSS3中display属性的flex布局用法

摘要：Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。它即可以应用于容器中，也可以应用于行内元素。常用例子子元素在容器中心位置（垂直居中、水平居中） display 阅读全文

posted @ 2022-09-06 09:30 huangchun0121 阅读(581) 评论(0) 推荐(0) 编辑

CSS实现图片或文字溢出隐藏效果

摘要：2、溢出隐藏文字溢出操作效果图：单行+溢出隐藏 .nameBox { // 文字不允许换行（单行文本） white-space: nowrap; // 溢出部分隐藏 overflow: hidden; // 文本溢出后，使用 ... 代替 text-overflow: ellipsis; mar 阅读全文

posted @ 2022-09-05 23:15 huangchun0121 阅读(410) 评论(0) 推荐(0) 编辑

CSS实现背景图片响应式覆盖效果

摘要：/* 背景图片 */ background-image:url('../images/bg2.jpg'); /* 背景图片位置固定 */ background-attachment:fixed; /* 背景不重复 */ background-repeat:no-repeat; /* 背景位置居中 * 阅读全文

posted @ 2022-09-05 22:58 huangchun0121 阅读(665) 评论(0) 推荐(0) 编辑

huangchun

随笔分类 - CSS

公告