CSS
关注
分享
扫一扫
文章平均质量分 58
Rudon滨海渔村
我就是我，简单的我。
展开
-
【css】width:100%；padding:20px；造成超出100%宽度的解决办法 - box-sizing的使用方法 - CSS布局
可选box-sizing: border-box;下，width = border + padding + 内容的宽度width >> 不包括marginheight = border + padding + 内容的高度height >> 不包括margin原创 2025-02-14 11:18:08 · 662 阅读 · 0 评论 -
vue2项目启用tailwindcss - 开启class=“w-[190px] mr-[20px]“ - 修复tailwindcss无效的问题
Tailwind CSS是utility-first(功能类优先)的CSS框架，功能类优先是指在一组受约束的原始功能类的基础上构建复杂的组件，Tailwind CSS内置了很多CSS类，直接放在HTML class属性中，以代替CSS。 项目中安装配置Tailwind CSS很简单，这里不再赘述，看官网文档即可。使用Tailwind CSS后，我们不再去写内联样式或者css文件，而是在html标签的class属性中写一连串类名就行了。原创 2024-11-11 14:39:34 · 1115 阅读 · 0 评论 -
CSS3自定义滚动条的颜色等样式 - hover显示切换 - 伪类::-webkit-scrollbar的样式控制
默认不显示横向的滚动条：鼠标hover时，显示浅色、带圆角的滚动条： HTMLCSSCSS3自定义滚动条-轩枫阁https://www.xuanfengge.com/demo/201311/scroll/css3-scroll.htmlcss scrollbar样式设置 - SegmentFault 思否当块级内容区域超出块级元素范围的时候，就会以滚动条的形式展示，你可以滚动里面的内容，里面的内容不会超出块级区域范围。有时候我们需要自定义滚动条的样...https://segmentfault原创 2022-06-25 09:45:15 · 2294 阅读 · 0 评论 -
css（背景）画出纵向的一条线 - 纯css3纵向时间轴
效果图核心代码.oneBoxForRecord { padding-top: 10rpx; /* #e5e5e5是页面背景色，#CCC是纵向线条的灰色 */ background: linear-gradient(to right, #e5e5e5 0%, #e5e5e5 23px, #CCC 24px, #e5e5e5 25px, #e5e5e5 100%); background-size: 100% 100%; background-repeat: no-re原创 2022-04-11 20:55:10 · 1356 阅读 · 0 评论 -
CSS3如何横向居中+纵向居中 in grid container
效果图横向：三个子元素均匀分布flex-direction: row; justify-content: space-between;纵向：三个子元素垂直居中align-items: center;核心代码 .heng { display: flex; flex-direction: row; justify-content: space-between; } .heng > view { display: flex; flex-direction: ...原创 2022-02-21 17:00:02 · 1217 阅读 · 0 评论 -
CSS3弹性布局中的justify-content、flex-direction的有机组合
[1] 定义1. 先看个大概：/* 对齐方式 */justify-content: center; /* 居中排列 */justify-content: start; /* 从行首开始排列 */justify-content: end; /* 从行尾开始排列 */justify-content: flex-start; /* 从行首起始位置开始排列 */justify-content: flex-end; /* 从行尾位置开始排列 */justify原创 2022-02-21 11:35:05 · 1616 阅读 · 0 评论 -
CSS设置不可选中 - select 文字不可选中
.noselect { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}原创 2022-01-19 23:56:06 · 699 阅读 · 0 评论 -
CSS强制换行 - 英文单词换行
.xxx { word-wrap: break-word; word-break: break-all;}原创 2021-10-22 17:09:20 · 242 阅读 · 0 评论 -
如何css设置div页面100%高度， body页面全高
效果图div高度=全屏高度，背景色为渐变核心代码html, body { height: 100%;}div.anyClassName { height: 100%;}单纯的div {height: 100%;}是不行的，因为div的父级body的父级html默认高度是随内容变化。完整方法<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"> ...原创 2021-10-17 17:41:28 · 4312 阅读 · 0 评论 -
优雅的网页CSS渐变背景色实例收藏 - 持续更新ing
苹果MacOS介绍页面https://help.apple.com/macOS/high-sierra/whats-new/#/safari-tracking-zh_CNbackground: linear-gradient(tobottom,#E4EFE00%,#FFFFFF90%);https://help.apple.com/macOS/high-sierra/whats-new/#/facetimebackground: linear-gradien...原创 2021-10-12 10:09:57 · 559 阅读 · 0 评论 -
精简 - bootstrap响应式自定义屏宽限制 - css - @media screen and ( max-width: 767px) {}
@media screen and ( min-width: 1200px) {}@media screen and ( max-width: 1199px) {}@media screen and ( max-width: 991px) {}@media screen and ( max-width: 974px) {}@media screen and ( max-width: 767px) {}@media screen and ( max-width: 32.原创 2021-10-11 18:56:55 · 1100 阅读 · 0 评论 -
CSS3设置div在屏幕中间位置（水平居中+垂直居中）
.center-and-middle { position: fixed; top:50%; left:50%; transform: translate(-50%,-50%); width: 500px; // 自行修改 height: 350px; // 自行修改 background: gray; // 自行修改}原创 2020-06-12 10:34:09 · 1275 阅读 · 0 评论 -
36种漂亮的CSS3网页按钮Button样式 - 改进版
效果图源代码<!DOCTYPE HTML><html lang="en-US"> <head> <meta charset="UTF-8"> <title>36种漂亮的CSS3网页按钮Button样式</title> <style type="...转载 2020-03-14 13:11:54 · 3139 阅读 · 0 评论 -
Laravel 6.10.1 引入前端框架Bootstrap日记 - & jQuery
1）官方方法cd /path/of/your/projectcomposer require laravel/ui --devphp artisan ui bootstrapphp artisan ui bootstrap --authnpm installnpm run dev使用方法在视图引入以下两句即可生效：<link rel="styleshee...原创 2020-01-09 18:00:25 · 1918 阅读 · 0 评论 -
CSS渐变实例 - Linear Gradients、radius等的应用 - 背景色、按钮渐变色
css3渐变模拟器https://www.colorzilla.com/gradient-editor/例子：background: rgb(30,87,153); /* Old browsers */background: -moz-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(41,137,216,1) 5...原创 2019-12-16 19:30:29 · 397 阅读 · 0 评论 -
Chrome不能显示小于12px的字体的解决办法，同时解决-webkit-transform: scale不支持行内标签的问题
解决方案让指定文字使用自定义的class，如forcefontsize10<a> Products <sup class="forcefontsize10"> 88 </sup></a>并在css中自定义以下类：.forcefo...原创 2018-05-07 18:31:33 · 6456 阅读 · 0 评论