background

首页 > TAG信息列表 > background

css设置浏览器的滚动条

#scrollbar::-webkit-scrollbar { // 滚动条整体部分，其中的属性有width,height,background,border（就和一个块级元素一样）等。 width: 4px; height: 4px; } #scrollbar::-webkit-scrollbar-button { // 滚动条两端的按钮。可以用display:none让其不

CSS基础(二)

溢出(overflow) - 值解析 - visible: 溢出的值会在容器之外显示(默认) - hidden: 溢出的值会被隐藏 - scroll: 溢出的内容会被提供滚动条,方便用户显示 - auto: 有溢出就提供滚动条,没有就不提供滚动条 - inherit: 继承父容器的overflow属性 - overflow-

微信小程序自定义渐变的tabbar导航栏

做为自己的一个小笔记，以免后面再用到 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

css 行高

文本四线，从上到下分别是顶线，中线，基线，底线。 1. 行高：是指上下文本行的基线见的垂直距离，即途中两条红线间的垂直距离。（途中上下两条同色线间的垂直距离） 2. 行距：是指一行底线到下一行顶线的垂直距离。 3.半行距：行距的一半 1.内容区：　　文本行中的每一个元素都会生成一个内容

webpack基础_5处理图片资源

处理图片资源过去在 Webpack4 时，我们处理图片资源通过 file-loader 和 url-loader 进行处理现在 Webpack5 已经将两个 Loader 功能内置到 Webpack 里了，我们只需要简单配置即可处理图片资源 1. 配置 const path = require("path"); module.exports = { entry: "./src/main.js"

H5C3

标签结构：头、体 <html> <head> <title></title> </head> <body> </body> </html> 页面标签 <html> <head> <meta charset="UTF-8"> <meta name="viewport" content=&qu

css margin负值

margin，外边距，就是设置元素的从边框最外边缘向外（正值）或者向内（负值）的延申的距离。 margin是完全透明的，看不见的。但它是元素之间的边界　　margin的边界线是两个元素之间真正的边界线。　　元素的外部边界线就是元素的margin边界线。元素的内部边界想就是元素的padding边界线（或者

高阶 CSS 技巧在复杂动效中的应用

最近我在 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圆角头像

<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

fixed

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

jquery 操作样式

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="node_modules/jquery/dist/jquery.min.js"></script> <style>

flex常用布局

公共样式： <style> * { margin: 0; padding: 0; } .has-flex { display: flex; } </style> 垂直居中子元素左右分布 css .father-one { width: 100%; heigh

vue2 登录页面跳转包括token部分 $router部分

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+css

第一章 <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

[HTML+CSS] 13.雪碧图与渐变

笔记来源：尚硅谷 Web 前端 HTML5&CSS3 初学者零基础入门全套完整版目录雪碧图与渐变1. 雪碧图2. 线性渐变3. 径向渐变雪碧图与渐变 1. 雪碧图解决图片闪烁的问题：可以将多个小图片统一保存到一个大图片中，然后通过调整background-position来显示响应的图片这样图片会同时加载

body设置背景颜色的问题

给body设置背景色时，即使body设置了最大宽度，若html无背景色，此时背景会填满整个页面。测试如下 <style> body { max-width: 640px; background-color: skyblue; } </style> 此时页面背景如下若给html也置背景 <style> html { background-color: #fff; }

JS Layui table 选中行颜色变化

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

CSS美化网页元素

3.美化网页元素 3.1为什么要美化网页 1.有效的传递页面信息 2.美化网页，页面漂亮才能吸引用户 3.凸显页面的主题 4.提高用户的体验 span标签：重点要突出的字使用span标签套起来 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</t

Vue实现CSDN评论区的抽屉drawer效果,不需要用el-drawer组件。

一、效果预览二、代码思路 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:字体类型，保证本机或服务器存在该字体