页面中有一个元素A，假设需求如下： 元素A在页面内水平、垂直居中；元素A距离页面左右的间距为10px，元素A的宽度随页面宽度变大而变大；设置元素A的高度始终为宽度的一半； 方式一（利用calc和vw）： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewpor
/***滚动条样式**/ /*滚动条整体部分*/ ::-webkit-scrollbar { width: 10px; height: 10px; } /*滚动条的轨道*/ ::-webkit-scrollbar-track { background: #f9fafb; } /*滚动条里面的小方块，能向上向下移动*/ ::-webkit-scrollbar-thumb { border-radius:
效果图： HTML部分： <div class="tankuangClass" v-show="true" style="width:400px;height:300px;top:20%;left:60%;"> <div class="bigtitle"> <span class="lefttitle">门禁控制</span>
建议遵循以下顺序： 布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式） 自身属性：width / height / margin / padding / border / background 文本属性：color / font / text-decoration / text-align / vertical-alig
4.1、什么是盒子模型 所有的HTML元素，我们都可以看成一个四边形，即一个盒子。 用css来设置元素盒子的内边距、边框 和 外边距 的样式的方式， 相当于设置盒子的样式，所以我们将其称之为 盒子模型 边框有四个属性可以设置： border-top：上边框 border-right：右边框 border-bottom：下边框
例子1： <!DOCTYPE html> <html lang="en"> <head> <style> div { width: 350px; height: 100px; padding: 15px 0px 0px 25px; } .one { border-top-lef
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <style> .content{ margin-left: 20px; } .circledot{ width: 10px; height: 10px; border-radiu
请求文件 txt { "Rows":[ { "id":"118", "name":"北欧客厅套餐", "imgPath":"https://img1.baidu.com/it/u=3600272149,3083784625&fm=26&fmt=auto"
选择主题，自定义背景css 背景url 借用随机图片api： https://api.yimian.xyz/img 代码 /*simplememory*/ #google_ad_c1, #google_ad_c2 { display: none; } .syntaxhighlighter a, .syntaxhighlighter div, .syntaxhighlighter code, .syntaxhighlighter table, .syn
CSS 1.概述：CSS全称(Casading Style Sheets)层底样式表，在html基础上引入css样式，css就是相当于在给“房子”装修 2.引入CSS样式 //行内写法： <h1 style = "color:red ; font-size:20px;">hello</h1> //内嵌：body列表看起来相对整洁 <head> <style> h1{ color: deeppink; f
代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 500px; height: 500px; border-
javascript实现购物车效果的方法：1、使用table来进行界面布局；2、自行封装getClasses函数；3、通过js实现选中和全选商品，以及商品数量的增减等功能即可。 本文操作环境：windows7系统、javascript1.8.5版，DELL G3电脑javascript怎么实现购物车效果？用javascript实现的购物车实例基于
在弹性布局下， 如果父元素是display:flex，那么子元素文本超出后，无法做到自动换行。 .content { display: flex; padding: 10px; width: 350px; } 这是因为父元素的样式，影响了子元素。 解决方式是在父元素上加上 white-space: normal; .content{ display: flex;
别人的博客文章的代码块经常能看到Mac风格，很好看，于是找到了这种方法 效果图: 实现： 1.打开Vs Code,随便新建一个.md文件 (markdown文件) 2.在该文件添加以下代码，右键预览效果即可。 3.mac风格的代码块就实现啦 <html> <style> .mac { width:10px; height:10px
6、定位 6.1、相对定位 相对于原来的位置，进行偏移，相对定位的话，它任然在标准文档流中，原来的位置会被保留 position:relative top:-10px left:-10px buttom:-10px right-10px 练习题： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>练
<!-- html部分 --> <div class="a"> <!-- a这个大卡片里边分上下两个卡片，对应上边灰色和下边白色部分 --> <div class="b"></div> <div class="c"></div> </div> /* css部分 */ body{ background:#F0AE80 } .a{
GatewayWorker介绍： GatewayWorker基于Workerman开发的一个项目框架，用于快速开发TCP长连接应用，例如app推送服务端、即时IM服务端、游戏服务端、物联网、智能家居等等 GatewayWorker使用经典的Gateway和Worker进程模型。Gateway进程负责维持客户端连接，并转发客户端的数据给Busines
背景设计 CSS3支持rgb、hsl、hex、rgba、hsla 为body元素指定背景图片 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta
精灵图（sprites） 使用核心： 1.精灵技术主要针对于背景图片的使用，就是把多个小背景图片整合到一张大图片中 2.移动背景图片位置，可以使用background-position 3,移动的距离就是这个目标图片的x、y坐标 4.一般情况都是往上往左移动，数值是负值 5.使用精灵图时需要精确测量，每个小背景图片
乘法表 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title&
这是一个会计算的属性，特别适合对于自适应还不是很熟练的童鞋 calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。 以前我们可以使用box-sizing:border-box;来设置盒子的属性为不加
效果图： 1、输入汉字 2、输入数字或英文 3、汉字数字混合 完整代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta txt="viewport" content="width=device-width, initial-scale=1.0"> <m
内联元素和块级元素的区别是新手必须要掌握的知识点。大家可能平时注意块级元素比较多。所以这里重点让我们来讲讲常见的width height margin padding 对inline元素的影响。 测试代码（在谷歌浏览器运行版本 49.0.2623.87 m，火狐效果同谷歌） 1 <style type="text/css"> 2
前言 Hello！小伙伴！ 非常感谢您阅读海轰的文章，倘若文中有错误的地方，欢迎您指出～ 自我介绍 ଘ(੭ˊᵕˋ)੭ 昵称：海轰 标签：程序猿｜C++选手｜学生 简介：因C语言结识编程，随后转入计算机专业，有幸拿过国奖、省奖等，已保研。目前正在学习C++/Linux（真的真的太难了～） 学习经验：扎实基础 + 多做笔记
1. 概念 浮动(英语:float) 是指元素设置float属性时的状态,特征 通过浮动可以使一个元素向其父元素的左侧或者右侧移动。 2. 设置浮动 可以使用float属性来设置元素的浮动 格式: float: [可选值] ; 实例: float: left ; 可选值有: none: 默认值,元素不浮动 left: 元素向左浮动
