CSS

分类下相关文章

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

阅读全文...

微信小程序使用 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"> & ...

阅读全文...

页面图片加上阴影和圆角之后,好看多了

什么情况需要加上阴影和圆角 当很多产品图片没有色调规范,就会出现许多白底的图片,可能被背景色融为一体。容易分不清边界。 加上阴影和圆角之后,就能凸显对齐的效果。 另外,文章内部加上阴影和圆角之后,效果也非常好。 效果对比 加上阴影和圆角前 加上阴影和圆角后 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 ...

阅读全文...

提取 Ant Design 的 CSS 样式文件

我在自己的项目中,不想使用 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 ...

阅读全文...

使用 rem 解决 vantui 在 ipad 上的字体大小自适应问题

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

阅读全文...

英文网站下 CSS 属性 word-break 的设置

我发现新建的英文网站,单词在行尾会被强行拆分换行,非常影响阅读。 word-break 的三种模式 normal:使用默认的断行规则。 break-all:对于英文单词,会在行尾强制将单词拆分,进行换行。如果是英文网站,这种体验会非常不好。 keep-all:即便是中文也不会断行。 word-wrap 作为补充 normal break-word: 对特别长的单词有效。特别长是指,自己独占一行时都装不下的情况。这种情况会强制换行,而默认的 normal 模式不会换行。 结论 英文网站应该采用: word-break: normal; word-wrap: break-word; 参考 ...

阅读全文...

css 中 first-of-type 与 first-child 的区别

举个直观的例子: <div class="main"> <h1>Languages</h1> <!-- h1:first-child, h1:first-of-type --> <div>Javascript</div> <!-- div:nth-child(2), div:first-of-type --> <div>Golang</div> <div>PHP</div> </div> first-ch ...

阅读全文...

鼠标 hover 上去的动态提升效果

参考 ant design 的卡片 hover 效果 .feature7-block-group:hover { -webkit-transform: translateY(-5px); -ms-transform: translateY(-5px); transform: translateY(-5px); -webkit-box-shadow: 0 6px 16px rgba(0,0,0,0.12); box-shadow: 0 6px 16px rgba(0,0,0,0.12); } ...

阅读全文...

去掉网页 type 为 number 的 Input 输入框的右侧箭头

去掉 input 输入框右侧的箭头 禁用的原因是,在空间有限的情况下,这个箭头太浪费空间。 input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; } input[type="number"]{ -moz-appearance: textfield; } 禁用鼠标滚轮上下滑动更改 禁用的原因是,页面较长时,向下滚动浏览,容易引起误操作,导致无意间修改了数值。 <input type="number" on ...

阅读全文...

Bluma - 一个简洁易用的 css 框架

前段时间偶然发现了 bluma 这个前端样式框架,看起来比 bootstrap 要清晰简洁的多。 https://bulma.io/ 正好我有个个人股票小工具的开发需求,所以决定尝试并了解一下 bluma. demo 效果,股价计算器 container container 用来限制宽度,居中。例如: desktop 为 960 widescreen 1152 fullhd 1344 如果要全屏要加上 class is-fluid。 https://bulma.io/documentation/layout/container/ hero 英文翻译为主角,即,页面顶部的全屏 banner ...

阅读全文...

修改 Android 下 Chrome 浏览器的顶部地址栏颜色

我看到很多网站在 Android 手机的 Chrome 浏览器里,可以更改顶部的地址栏及 status bar 的颜色。 而我目前的网站就没有这个效果。说明不是 Chrome 默认的行为。 查了一下,原来在 Android 5.0 以上, Chrome 版本 39 以上,可以通过设置 <meta name="theme-color" content="#SOME_COLOR"> 来实现此效果。 例如,我设置的颜色是 <meta name="theme-color" content="#375680&qu ...

阅读全文...

近期节日

2019年11月29日 黑色星期五
2019年12月01日 世界艾滋病日
2019年12月03日 国际残疾人日
2019年12月07日 大雪
2019年12月09日 "一二九"运动纪念日
2019年12月09日 世界足球日
2019年12月10日 世界人权日
2019年12月12日 西安事变纪念日
2019年12月13日 南京大屠杀
2019年12月20日 澳门回归日
2019年12月21日 国际篮球日
2019年12月22日 冬至
查看更多节日