#scrollbar::-webkit-scrollbar { // 滚动条整体部分，其中的属性有width,height,background,border（就和一个块级元素一样）等。 width: 4px; height: 4px; } #scrollbar::-webkit-scrollbar-button { // 滚动条两端的按钮。可以用display:none让其不
溢出(overflow) - 值解析 - visible: 溢出的值会在容器之外显示(默认) - hidden: 溢出的值会被隐藏 - scroll: 溢出的内容会被提供滚动条,方便用户显示 - auto: 有溢出就提供滚动条,没有就不提供滚动条 - inherit: 继承父容器的overflow属性 - overflow-
做为自己的一个小笔记，以免后面再用到 1，在需要自定义的界面的json文件中加入下面代码 "navigationStyle": "custom" ，隐藏系统导航栏 { "navigationBarTitleText": "", "navigationBarBackgroundColor": "#000", "navigationBarTextStyle":
/*simplememory*/ #google_ad_c1, #google_ad_c2 {display:none;} .syntaxhighlighter a, .syntaxhighlighter div, .syntaxhighlighter code, .syntaxhighlighter table, .syntaxhighlighter table td, .syntaxhighlighter table tr, .syntaxhighlighter table t
文本四线，从上到下分别是顶线，中线，基线，底线。 1. 行高：是指上下文本行的基线见的垂直距离，即途中两条红线间的垂直距离。（途中上下两条同色线间的垂直距离） 2. 行距：是指一行底线到下一行顶线的垂直距离。 3.半行距：行距的一半 1.内容区： 文本行中的每一个元素都会生成一个内容
处理图片资源 过去在 Webpack4 时，我们处理图片资源通过 file-loader 和 url-loader 进行处理 现在 Webpack5 已经将两个 Loader 功能内置到 Webpack 里了，我们只需要简单配置即可处理图片资源 1. 配置 const path = require("path"); module.exports = { entry: "./src/main.js"
标签 结构：头 、 体 <html> <head> <title></title> </head> <body> </body> </html> 页面标签 <html> <head> <meta charset="UTF-8"> <meta name="viewport" content=&qu
margin，外边距，就是设置元素的从边框最外边缘向外（正值）或者向内（负值）的延申的距离。 margin是完全透明的，看不见的。但它是元素之间的边界 margin的边界线是两个元素之间真正的边界线。 元素的外部边界线就是元素的margin边界线。元素的内部边界想就是元素的padding边界线（或者
最近我在 CodePen 上看到了这样一个有意思的动画： 整个动画效果是在一个标签内，借助了 SVG PATH 实现。其核心在于对渐变（Gradient）的究极利用。 完整的代码你可以看看这里 -- CodePen DEMO -- to the future
Examples <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>背景图像完全覆盖元素区域</title> <style> div{ margin:2px; float:left; border:1px solid red; background:url(https://www.baidu.com/
<div class="avator" style="background: url({:format_person_photo($vo[person_photo],$vo[person_sex])});" ></div> .avator { width: 60px; height: 60px; border-radius: 50%; overflow: hidden; display: block; margin: 10p
CSS .mobile{ position:fixed; bottom:20px; right:20px; width:50px; height:50px; background-size:cover; z-index:999; background:darkblue; border-radius:50%; padding:8px; opacity:0.6; } HTML <a class="mobile" href="tel:xxxxxxxxx
body { width: 100%; height: 100vh; background: url('./img/bg.jpg') no-repeat; background-size: cover; background-position: center center; background-attachment: fixed; display: flex; } .layui-form { margin: auto; width: 360px; backgro
一、页面设置CSS 上传图片 上传图片后查看图片-->查看原图-->复制{图片链接} 链接复制到css代码中 body{ background-image: url(图片链接); background-attachment: fixed; background-repeat: no-repeat; background-size: cover; opacity:0.7
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="node_modules/jquery/dist/jquery.min.js"></script> <style>
公共样式： <style> * { margin: 0; padding: 0; } .has-flex { display: flex; } </style> 垂直居中 子元素左右分布 css .father-one { width: 100%; heigh
js文件内 import request from "@/utils/request"; export function login(data) { return request({ url: "/auth/login", method: "post", data, }); } 登录 vue <template> <div class="login-page page"
第一章 <html> <!--解释器--> <!DOCTYPE html> <head> <!--字符集--> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <!--刷新跳转--> <meta http-equiv="Refresh" Content="
一行大小不一样的文字上下居中对齐 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content=&q
笔记来源：尚硅谷 Web 前端 HTML5&CSS3 初学者零基础入门全套完整版 目录雪碧图与渐变1. 雪碧图2. 线性渐变3. 径向渐变 雪碧图与渐变 1. 雪碧图 解决图片闪烁的问题： 可以将多个小图片统一保存到一个大图片中，然后通过调整background-position来显示响应的图片 这样图片会同时加载
给body设置背景色时，即使body设置了最大宽度，若html无背景色，此时背景会填满整个页面。 测试如下 <style> body { max-width: 640px; background-color: skyblue; } </style> 此时页面背景如下 若给html也置背景 <style> html { background-color: #fff; }
table设置lay-filter属性 <table id="dataList" lay-filter="dataList"></table> 监听单击行事件 layui.table.on("row(dataList)",function(obj){ $(".layui-table-body .layui-table tr").attr({"style":"b
3.美化网页元素 3.1为什么要美化网页 1.有效的传递页面信息 2.美化网页，页面漂亮才能吸引用户 3.凸显页面的主题 4.提高用户的体验 span标签：重点要突出的字使用span标签套起来 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</t
一、效果预览 二、代码思路 1、思路：在当前页面添加一个浮动的div组件，用v-if绑定显示与否，点击评论图标的时候，显示该div <!--评论弹窗--> <div v-if="drawer" class="commentDrawer"> <span>评论区</span> <span @click="drawer = false" style=&quo
display: block;转化为块状元素 inline是行内元素 inline-block是行内块状元素 文字属性： font-size: 单位：em是原字体大小的倍数 %是原字体大小的百分比 font-family:字体类型，保证本机或服务器存在该字体
