CSS
高级项目经理
不忘初心,砥砺前行
展开
-
响应式网站clamp
用一个CSS属性创建一个响应式网站,让我们来看看它是如何做到的。????以这个模板为例,没有应用css属性。????使用 clamp() CSS函数,我们可以创建仅具有一个属性的响应式网站。现在添加魔术CSSclamp(minimum, preferred, maximum);在这里!你已经完成了✌说明clamp()的工作原理是“夹紧”或限制一个灵活的值,使其处于最小和最大范围之间。使用方法如下:minimum 最小值:例如 16px flexible 弹性值:例如 5原创 2020-11-18 19:47:42 · 360 阅读 · 0 评论 -
行内块之间的缝隙去除、购物车数量图标向右增加方法
设置float浮动就可以了原创 2020-10-12 20:45:12 · 169 阅读 · 0 评论 -
网站SEO优化之【logo设置篇】
1.logo里面首先放一个h1标签,目的是为了提权,告诉搜索引擎,这个地方很重要2.h1里面再放一个链接,可以放回首页的,把logo的背景图片给链接即可。3.为了搜索引擎收录我们,我们链接里面要放文字(网站名称),但文字不要显示出来。方法1:text-index移到盒子外面(text-index:-9999px),然后overflow:hidden,淘宝的做法方法2:直接给font-size:0;就看不到文字了,京东的做法4.最后给链接一个title属性,这样鼠标放到logo上就可...原创 2020-10-12 20:09:48 · 785 阅读 · 0 评论 -
PC端重置reset.css
/* 把我们所有标签的内外边距清零 */* { margin: 0; padding: 0}/* em 和 i 斜体的文字不倾斜 */em,i { font-style: normal}/* 去掉li 的小圆点 */li { list-style: none}img { /* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */ border: 0; /* 取消图片底侧有空白缝隙的问题 */ .原创 2020-10-11 11:32:30 · 869 阅读 · 1 评论 -
布局技巧-CSS三角强化的巧妙运用【梯形价格栏】
.box1 { width: 0; height: 0; /* 把上边框宽度调大 */ /* border-top: 100px solid transparent; border-right: 50px solid skyblue; */ /* 左边和下边的边框宽度设置为0 */ /* border-bottom: 0 solid blu.原创 2020-10-11 11:32:38 · 300 阅读 · 0 评论 -
布局技巧-文字围绕浮动元素的妙用【左图右文字场景】
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>文字.原创 2020-10-10 17:17:28 · 472 阅读 · 0 评论 -
布局技巧-margin负值的巧妙运用【解决ul中多个li边框重叠问题】
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>m.原创 2020-10-10 17:12:26 · 514 阅读 · 1 评论 -
图片底侧空白缝隙解决方案
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>图片.原创 2020-10-10 16:57:31 · 167 阅读 · 0 评论 -
Vertical-align属性应用
官方解释:用户设置一个元素的垂直对齐方式,但是它只针对行内元素或者行内块元素有效语法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compati原创 2020-10-10 16:51:36 · 400 阅读 · 0 评论 -
用户界面样式-表单轮廓和防止拖拽文本域
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>用户.原创 2020-10-10 16:48:12 · 138 阅读 · 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="X-UA-Compatible" content="ie=edge"> <title>用户.原创 2020-10-10 16:46:41 · 256 阅读 · 0 评论 -
字体声明和使用案例
/*字体声明*/@font-face{font-family:'icomoon';src:url('fonts/icomoon.eot?p4ssmb');src:url('fonts/icomoon.eot?p4ssmb#iefix')format('embedded-opentype'),url('fonts/icomoon.ttf?p4ssmb')format('truetype'),ur...原创 2020-10-10 16:09:22 · 329 阅读 · 0 评论 -
精灵图的使用核心
1.精灵技术主要针对于背景图片使用,就是把多个小背景图片整合到一张大图片中。2.这个大图片也成为sprites精灵图或则雪碧图3.移动背景图片位置,此时可以使用background-positon4.移动的距离就是这个目标图片的x和y坐标。注意网页中的坐标有所不同5.因为一般情况都是往上往左移动,所以数值是负值<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">原创 2020-10-10 15:58:08 · 513 阅读 · 0 评论 -
CSS实现播放器Demo样式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>仿.原创 2020-10-10 08:57:37 · 817 阅读 · 1 评论 -
CSS溢出属性overflow:auto溢出的时候才显示滚动条 不溢出不显示滚动条
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>显.原创 2020-10-10 08:47:39 · 2881 阅读 · 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="X-UA-Compatible" content="ie=edge"> <title>淘.原创 2020-10-09 20:42:38 · 592 阅读 · 0 评论 -
CSS取消样式设置【IE不支持】
left: inherit;原创 2020-10-09 20:33:19 · 153 阅读 · 0 评论 -
定位的特殊特性,【绝对定位会使行内元素具有行内元素的特点,行内元素的宽高由内容决定】
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>定位.原创 2020-10-09 09:37:25 · 384 阅读 · 0 评论 -
粘性定位sticky的使用
一、语法position:sticky;top:10px;二、粘性布局的特点1.一浏览器的可视窗口为参照点移动元素(固定定位特点)2.粘性定位占有原来的位置(相对定位特点)3.必须添加top,left,right,bottom其中一个才有效三、Demo<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="vie原创 2020-10-09 08:49:27 · 1865 阅读 · 0 评论 -
PC端布局固定定位到版心的左侧
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>固定.原创 2020-10-05 10:52:15 · 439 阅读 · 0 评论 -
PC端布局之版心设置居中
<style>* { margin: 0; padding: 0;}.w { width: 1200px; margin: auto;}body { background-color: #f3f5f7;}li { list-style: none;}a { text-decoration: none;}</style><div class="header w"> <di.原创 2020-09-30 17:03:41 · 2500 阅读 · 0 评论 -
行内快元素之间有缝隙处理
使用浮动既可以清除行内快间隙<style>.search{ float: left; width: 412px; height: 42px; background-color: skyblue; margin-left: 50px;}.search input{ float: left; width: 345px; height: 40px; border: 1px solid skyblue; bord原创 2020-09-30 16:56:45 · 280 阅读 · 0 评论 -
CSS清除浮动四种方式
<div class="box clearfix"> <div class="damao">大毛</div> <div class="ermao">二毛</div> <div class="ermao">二毛</div> <div class="ermao">二毛</div> <div class="erm...原创 2020-09-29 20:19:20 · 374 阅读 · 0 评论 -
外边距合并-嵌套块级元素垂直外边距塌陷【浮动盒子不会有出现这个问题】
方法:1.给父元素加边框2.给父元素加内边距3.给父元素加overflow:hidden<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-C原创 2020-09-28 19:42:06 · 381 阅读 · 0 评论 -
块级元素和行内样式居中方法
1.块级元素居中两个条件(1)盒子设置宽度(2)盒子的左右外边距都设置auto .header { width: 900px; background-color: pink; margin: 0 auto; }2.行内元素或者行内块元素水平居中一个条件(1)给其父元素添加text-align:center即可 .header { text-align: center..原创 2020-09-28 19:34:29 · 793 阅读 · 0 评论 -
padding不会影响盒子大小的情况
1.不设置height和width就不会营销盒子大小<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=e原创 2020-09-28 19:25:59 · 1043 阅读 · 1 评论 -
移动端固定背景图设置
.VotingActivityHomeBody :before { content: ' '; position: fixed; z-index: -1; top: 0; right: 0; bottom: 0; left: 0; background: url("../../components/common/image/VotingActivityBackgroundBottom.png") center .原创 2020-09-28 15:20:17 · 368 阅读 · 0 评论 -
设置细线表格
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>今日.原创 2020-09-28 08:52:34 · 265 阅读 · 0 评论 -
背景图片的位置设置应用【图片和背景图的组合使用】
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>背.原创 2020-09-26 09:34:25 · 710 阅读 · 0 评论 -
element-ui 固定列 滚动条问题解决
先上BUG解决方案 /* 设置滚动条的样式 */ /deep/::-webkit-scrollbar { width: 10px !important; height:10px !important; background-color: #8487879e; } /deep/ .el-table__fixed::before, .el-table__fixed-right::before { content: ..原创 2020-09-16 09:46:16 · 1636 阅读 · 1 评论 -
CSS旋转动画
/*page1动画*/.page1 .scroll-page1 .bg { opacity: 0; transform-origin: 50% 200%;}.page1 .scroll-page1 .person { opacity: 0; transform-origin: 50% 200%;}.page1 .scroll-page1 .message-container { opacity: 0; transform-origin: right bottom;}.原创 2020-08-26 06:19:56 · 347 阅读 · 0 评论 -
CSS动画保留最后一帧以及js监听动画加载完毕
.loading .progress .step { height: 100%; width: 20%; background-color: #fc2e4d; position: absolute; right: 0;}.loading.animate .step { animation: step 1s linear forwards;}@keyframes step { to { width: 100%; }}原创 2020-08-25 06:22:59 · 941 阅读 · 0 评论 -
处理截屏背景图不清晰问题,设置伪背景图
<style> .calendar-background-image { position: absolute;/* 脱离文档流 */ width: 80%; margin-left: 10%; z-index: 0; } .calendar-content { position: relative;...原创 2020-04-27 17:05:59 · 348 阅读 · 0 评论 -
CSS相邻兄弟选择器
一、相邻兄弟选择器相邻兄弟选择器是用来选取某个元素紧邻的兄弟元素,它的语法是 “选择器 A + 选择器 B”,表示找到与 A 元素相邻的 B 元素。其实就是对选择器 B 加上 “紧邻着选择器 A” 的限制。一下面的代码为例:<!-- HTML --><div class="article"> <p>黑化肥与灰化肥</p> ...原创 2020-04-17 15:15:18 · 1250 阅读 · 0 评论 -
小程序中图片样式设置
.goodsImage{ width: 750rpx; height: auto; }原创 2020-04-05 20:14:50 · 1494 阅读 · 0 评论 -
px2rem中设置px不转换成rem
4、在代码中使用#box { height: 44px //用postcss-px2rem插件配置后相当于0.44rem width: 100% font-size: 24px;/*no*/ //如果不想用插件转换可以用/*no*/标识符}...原创 2020-03-13 17:21:19 · 6216 阅读 · 3 评论 -
CSS多种方法实现div的长度由根据内容的多少来控制
背景块级元素宽度默认值为100%,而不是auto;因此其宽度不会根据子元素内容动态适应。如何实现父级元素宽度动态适应其子元素。方法一 display:inline;给块级元素设置inline-block值。.test{ display: inline-block;}方法二 绝对定位元素给块级元素设置position:absolute/fixed;.tes...原创 2019-12-02 14:25:57 · 2022 阅读 · 0 评论 -
在全页面居中
.redPackets-box { position: absolute; top: 50%; left: 50%; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); ....原创 2019-10-19 14:38:20 · 103 阅读 · 0 评论 -
Vue-cli3中减小css文件大小的插件Purgecss
with Vue CLI 3A Vue.js projectCreated with vue-cliThis example shows how to set up Purgecss with a newly create Vue CLI 3 app. Once you initialized your project withvue create app-name, insta...原创 2019-10-18 14:55:21 · 3079 阅读 · 1 评论 -
图片居中显示
1.方法一 .bannerImgfirst { box-sizing: border-box; width: 100%; height: 80px; position: relative; overflow: h...原创 2019-07-10 20:32:49 · 1079 阅读 · 0 评论