CSS

2020-03-12 · 阅读 4969 · 字数 73

内联非 !important 样式 <div class="head_b" style="height: 52px; background-color: rgb(195, 195, 195);"> <style> div[style] { background: yellow !important; } </style> 内联 !important 样式 由于内联 !important 样式不可覆盖，所以只能使用 js 替换的方式来解决。 <div class="head_b" st ...

阅读全文...

2022-04-04 · 阅读 5972 · 字数 132

在商品图片列表页，想增加一个交互效果。 当鼠标 Hover DIV 区域，背景图片拉近放大显示。 HTML <div class="portfolio-item-block" style=""> <div class="portfolio-item-block-inside"> <a href="/" target="_self" rel="" title="Pressure Equipment"&gt ...

阅读全文...

2020-03-10 · 阅读 6759 · 字数 163

使用场景 例如，一行显示四张图片，这样每张图片都占屏幕宽度的 25%。 但是纯 CSS 如何实现高度如何跟宽度保持一致，构成一个正方形 DIV 呢？ 方法一 .square { width: 25vw; height: 25vw; } vw: viewport-percentage length，100vw 即整个屏幕的宽度。 例如，你的屏幕分辨率为 1920px，100vw 即为 1920px。 对应的，还有 vh，即高度百分比。 方法二 .square { width: 25%; padding-bottom: 20%; } 这个方法确实有效，但是 pa ...

阅读全文...

2019-12-25 · 阅读 4061 · 字数 297

Flex，全称为 Flexible Box，即“弹性布局”。 浏览器兼容性 IE 10 才支持。 传统布局的局限性 垂直居中不容易实现。 基本使用 指定为 Flex 布局： 行内元素: display: inline-flex; 非行内元素：display: flex; 设置为 flex 布局之后，子元素的 float, clear 和 vertical-align 将失效。 容器的属性 flex-direction 决定子元素的排列方向。值为 row, column 等。 row：默认值。一行一行的排列，可以理解为一行一个。 column：一列一列的排列，可以理解为一列一个。 row- ...

阅读全文...

2019-12-07 · 阅读 4366 · 字数 4

金色 #FFD700 ...

阅读全文...

2019-11-21 · 阅读 10184 · 字数 127

例如，点击页面中的一个按钮，弹出一个 form 框，让用户填写并提交信息。 此时就需要一个遮罩层。 HTML <div class="bg_mask"> </div> CSS .bg_mask { display: none; position: fixed; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index: 1001; -moz-opacity: 0.95; opacity: 0.95; filter: alpha( ...

阅读全文...

2020-01-12 · 阅读 5556 · 字数 99

opacity，单词对应的中文含义是 不透明性 模糊 CSS 中 opacity 用于设置一个元素的透明度。 取值范围 0 ~ 1 半透明 opacity: 0.x; 例如，0.7 不透明 opacity: 1; 透明 opacity: 0; 如何兼容 IE8 及以下 例如，CSS3 中可以直接使用 opacity: 0.95; 如果需要兼容 IE8，需要加上。 filter: alpha(opacity = 95); 注意：filter: alpha 的取值范围为 0~100。 ...

阅读全文...

2019-11-17 · 阅读 9474 · 字数 81

尝试用 flex 布局在微信小程序中实现文本居中。 模板代码 .wxml <view class="company"> <view>by 大象笔记</view> </view> 样式代码 .wxss .company { position: absolute; bottom: 20rpx; width: 100%; display: flex; justify-content: center; } justify-content 子元素在主轴上的排列方式，默认主轴为 X 轴。 ...

阅读全文...

2019-11-01 · 阅读 3989 · 字数 169

form 宽度会随下方 div 宽度变更。 例如，将 div 宽度设置为 400px，form 会相应的变化为 400px 宽度。 360 浏览器极速模式下，12px 的字体大小不会随缩放变化。 360 有个最小的字体，缩小到一定程度时，似乎是 12px，不会继续缩小了。而 Chrome 则会继续缩小，直到肉眼看不为止。 正常的页面布局是： 在缩放到 80% 时，布局出现问题： ...

阅读全文...

2019-10-24 · 阅读 8261 · 字数 125

例如，网站正常的文章内图片，上下都有间距。 但是，对于文章最后的是一张图片的情况，图片下间距，加上 content 本身的底部间距，就会显得很难看。 所以，需要对最后一张图片做特殊处理。 可以使用 :last-child 来实现这个效果。 .content img { max-width: 100%; border-radius: 5px; margin: 30px auto; display: block; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3); } .content img:last-child { margin-bottom: 0 ...

阅读全文...

2019-10-19 · 阅读 5868 · 字数 104

Card https://getbootstrap.com/docs/4.3/components/card/ 更多效果的轮播图 https://getbootstrap.com/docs/4.3/components/carousel/ 漂亮的上传文件 input 效果 https://getbootstrap.com/docs/4.3/components/input-group/ 色调看起来更舒服的导航栏 https://getbootstrap.com/docs/4.3/components/navbar/ CSS 实现的 loading https://getbootstrap.co ...

阅读全文...

2019-10-19 · 阅读 6747 · 字数 347

最近又在纠结前端 CSS 框架的选择，在对比了 And Design，tailwindcss 之后，最终还是选择了 Bootstrap 4。 Bootstrap 4 相对 Bootstrap 3 还是有不少的变化。先记录一下 Grid System 的使用。 不变的风格 依旧是 container - row - col 的模式 col 采用 12 等分 col 自动等分 如果不指定 col 所占的单元格数，Bootstrap 4 会对 col 自动进行等分。 例如，下面代码中，第一列与第二列各占一半。 <div class="container"> & ...

阅读全文...

2019-10-18 · 阅读 5452 · 字数 154

什么情况需要加上阴影和圆角 当很多产品图片没有色调规范，就会出现许多白底的图片，可能被背景色融为一体。容易分不清边界。 加上阴影和圆角之后，就能凸显对齐的效果。 另外，文章内部加上阴影和圆角之后，效果也非常好。 效果对比 加上阴影和圆角前 加上阴影和圆角后 CSS 代码 border-radius: 8px; box-shadow: 0 16px 38px -12px rgba(0,0,0,0.46), 0 4px 25px 0 rgba(0,0,0,0.12), 0 8px 10px -5px rgba(0,0,0,0.2); 参考 https://www.creative-tim.c ...

阅读全文...

2019-10-17 · 阅读 10426 · 字数 127

我在自己的项目中，不想使用 Ant Design 的 React 或者 Vue 组件，但是很想使用 Ant Design 的 CSS 样式，按钮之类的样式确实漂亮大气，比 bootstrap 之类的始祖样式好看太多。 找到对应的 CSS 文件即可。 在 Staticfile CDN http://staticfile.org/ 搜素 antd 可以找到所有的 Ant Design CSS 版本。 例如： https://cdn.staticfile.org/antd/3.23.6/antd.css 对应的压缩版： https://cdn.staticfile.org/antd/3.23.6/a ...

阅读全文...

2019-09-26 · 阅读 11239 · 字数 262

移动设备网页上使用 vantui 开发 form 提交界面，在手机上表现良好，但是到了 ipad 等平板设备上时，就会发现字体非常小，严重影响用户的浏览和操作。 解决方法就是替换 vantui 的默认 font size 。 我们希望得到的效果是，屏幕越大，对应的字体越大。 当然这是针对功能页面而言，对应内容页面来说，其实没有太大的问题。 ipad 上 rem 的使用 html { font-size: calc(100vw/3.75); } .button { font-size: 0.16rem; } 什么是 vw vw 是视窗的宽度 vh 是视窗的高度 视窗是指浏览器窗口，还 ...

阅读全文...