CSS

分类下相关文章

CSS 实现 DIV 弧形底部

见过两种实现方式,但是只有第一种的效果更平滑。 以微信小程序模板代码为例: <view class="person_info"> </view> 第一种,两个 div 拼接 实现的逻辑是,利用 after 创建一个相对大的底部圆形的 view,露出下面的部分。 需要注意的是,height 一定要比父级元素高,left 按比例对称调节。 .person_info { width: 100%; height: 400rpx; background-image: linear-gradient(180deg, #66ccff 0%, #41b ...

阅读全文...

flex 布局实现垂直居中和水平居中

在微信小程序中可以放心地使用 flex 布局,所以尝试了一下 flex 的居中布局。 示例模板代码 <view class="nav_icon_wrapper"> <image src="../../images/phone.png" mode="widthFix"></image> </view> <view class="nav_text_wrapper"> <text>手机认证</text> </view> ...

阅读全文...

flex 水平分割布局

例如,我在微信小程序中想使用 flex 布局来实现如下的一行布局: | 功能图标 | 功能名称 | 引导箭头| 即,水平分割一行。 实现效果 模板代码 <view class="nav"> <view class="nav_icon_wrapper"> <image src="../../images/phone.png" mode="widthFix"></image> </view> <view class="n ...

阅读全文...

CSS 覆盖 inline style 样式

内联非 !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 ...

阅读全文...

Hover DIV 区域,背景图片拉近放大显示效果

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

阅读全文...

CSS 实现自适应的正方形 DIV

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

阅读全文...

Flex 布局

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

阅读全文...

中文颜色名与颜色 HTML 代码对照表

金色 #FFD700 ...

阅读全文...

HTML 网页弹出的遮罩层

例如,点击页面中的一个按钮,弹出一个 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( ...

阅读全文...

CSS opacity .70 带小数点是什么意思

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。 ...

阅读全文...

微信小程序使用 flex 布局实现底部文字居中

尝试用 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 轴。 ...

阅读全文...

360 浏览器极速模式下缩放至 80% 搜索框宽度有排版问题

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

阅读全文...

对最后一个元素采用特定的 CSS 样式

例如,网站正常的文章内图片,上下都有间距。 但是,对于文章最后的是一张图片的情况,图片下间距,加上 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 ...

阅读全文...

bootstrap 4 的新增组件

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 ...

阅读全文...

Bootstrap 4 的布局系统 Grid System

最近又在纠结前端 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"> & ...

阅读全文...

近期节日

2020年04月01日 愚人节
2020年04月02日 国际儿童图书日
2020年04月03日 寒食节
2020年04月04日 清明节
2020年04月07日 世界卫生日
2020年04月11日 世界帕金森病日
2020年04月19日 谷雨
2020年04月21日 复活节
2020年04月22日 世界地球日
2020年04月23日 世界读书日
2020年04月26日 知识产权日
2020年04月30日 佛诞
查看更多节日