x 的取值范围为:-(容器宽度的一半 + outline宽度的一半) < x < -(容器宽度的一半 + outline宽度) ---- 在这个例子后，我又想，CSS 属性可以取负值的地方有很多。...那还有没有其他一些有意思的负值使用技巧呢？ 下文就再介绍一些 CSS 负值有意思的使用场景。...transition-delay 及 animation-delay 的负值使用，立刻开始动画 我们知道，CSS 动画及过渡提供了一个 delay 属性，可以延迟动画的进行。 考虑下面这个动画： ?...CodePen Demo -- 使用负值 animation-delay 提前执行动画 负值 margin 负值 margin 在 CSS 中算是运用的比较多的，元素的外边距可以设置为负值。...，虽然 CSS 负值的一些使用场景的确有有用之处，但是与此同时有可能带来的是代码可读性的下降。
div { /* 浮动元素紧贴在一起 */ float: left; /* 盒子模型尺寸 200x200 像素 */ width: 100px; height: 100px...---- 使用外边距负值实现边框重叠 , 设置左侧 -1 像素外边距 , 由于 浮动元素 都是紧贴在一起的 , 设置 -1 像素外边距 就会在紧贴的基础上 向左 1 像素 ; 同理 , 设置上方 -1...div { /* 浮动元素紧贴在一起 */ float: left; /* 盒子模型尺寸 200x200 像素 */ width: 100px; height: 100px...div { /* 浮动元素紧贴在一起 */ float: left; /* 盒子模型尺寸 200x200 像素 */ width: 100px; height: 100px...大部分盒子都有该要求*/ position: relative; /* 浮动元素紧贴在一起 */ float: left; /* 盒子模型尺寸 200x200
x 的取值范围为: -(容器宽度的一半 + outline宽度的一半) < x < -(容器宽度的一半 + outline宽度) ---- 在这个例子后，我又想，CSS 属性可以取负值的地方有很多。...那还有没有其他一些有意思的负值使用技巧呢？ 下文就再介绍一些 CSS 负值有意思的使用场景。...transition-delay 及 animation-delay 的负值使用，立刻开始动画 我们知道，CSS 动画及过渡提供了一个 delay 属性，可以延迟动画的进行。...CodePen Demo -- 使用负值 animation-delay 提前执行动画 负值 margin 负值 margin 在 CSS 中算是运用的比较多的，元素的外边距可以设置为负值。...，虽然 CSS 负值的一些使用场景的确有有用之处，但是与此同时有可能带来的是代码可读性的下降。
x 的取值范围为: -(容器宽度的一半 + outline宽度的一半) < x < -(容器宽度的一半 + outline宽度) ---- 在这个例子后，我又想，CSS 属性可以取负值的地方有很多。...那还有没有其他一些有意思的负值使用技巧呢？ 下文就再介绍一些 CSS 负值有意思的使用场景。...&& [ ? ? ?...transition-delay 及 animation-delay 的负值使用，立刻开始动画 我们知道，CSS 动画及过渡提供了一个 delay 属性，可以延迟动画的进行。 考虑下面这个动画： ?...CodePen: https://codepen.io/Chokcoco/pen/QeQXpW 负值 margin 负值 margin 在 CSS 中算是运用的比较多的，元素的外边距可以设置为负值。
切换盒模型 如果想要切换盒模型也很简单，这里需要修改 css3 的 box-sizing 属性。...； margin-botom 元素自身不会位移，但是会减少自身供css读取的高度，从而影响下方的元素会向上移动。...margin-left 元素自身会向左移动，同时会影响其它元素； margin-right 元素自身不会位移，但是会减少自身供css读取的宽度，从而影响右侧的元素会向左移动； 我们先初始化几个盒子，然后分别给它们设置一下不同的...margin 负值，看看和上面的结论一不一致。...margin-right 我们给绿色的盒子设置一个 margin-right。
文章目录 一、背景半透明设置 1、语法说明 2、代码示例 一、背景半透明设置 ---- 1、语法说明 背景半透明设置 可以 使用 rgba 颜色值设置半透明背景 ; 下面的 CSS 样式中 , 就是...设置黑色背景 , 透明度为 20% ; background: rgba(0, 0, 0, 0.2); 颜色的透明度 alpha 取值范围是 0 ~ 1 之间 , 在使用时 , 可以 省略 0.x 前面的...0 , 直接使用 .x 作为透明度值 , 如 : background: rgba(0, 0, 0, .2); 背景半透明 指的是 盒子的背景设置为半透明 , 可以看到下面的内容 , 盒子里面显示的内容不受背景影响..., 照常显示 ; 2、代码示例 在第一个盒子中 设置背景颜色 : background: rgba(0, 0, 0, .2); 在第二个盒子中 设置背景颜色 : background: rgb(0,... 背景半透明设置对照组 展示效果 :
文章目录 一、背景附着 1、HTML 标签结构 2、设置 div 盒子内容水平居中显示 3、设置链接标签默认显示样式 4、设置鼠标经过样式 二、完整代码示例 1、代码示例 2、效果展示 一、背景附着...3、设置链接标签默认显示样式 在 div 盒子中的 a 标签是 行内元素 , 为其设置宽高是无效的 , 首先要将其转为 行内块样式 ; display: inline-block; 标签背景图片大小为...120 x 50 像素 , 这里将 标签 也设置成 120x50 大小 ; width: 120px; height: 50px; 文字水平居中 , 通过设置 text-align: center;...即可 ; 文字垂直居中 , 需要将行高与文本高度设置成一致即可 , 之前设置的 标签 的高度为 50 像素 , 这里将行高设置成 50 像素即可 ; line-height: 50px; 图片背景设置...images/bg_bt_orange.png) no-repeat; } 4、设置鼠标经过样式 鼠标经过时 , 文本颜色变为白色 , 背景图片变为其它背景 , 这里只需要设置需要变化的元素即可 ,
: repeat; #默认值，在垂直和水平方向都重复background-repeat: no-repeat; #不重复，背景图片将仅显示一次background-repeat: repeat-x; #...background-attachment: fixed; #不会随着滚动条的滚动而滚动 background-position 前端的坐标系"： -------------------->x轴...单位是像素 (0px 0px) 或任何其他的 CSS 单位。 如果只设置了一个值，另一个值就是50%。 可以混合使用%和position值。...height: 50px; background-image: url("dht.png"); background-repeat: repeat-x;...CSS显示模式转换 属性 描述 值 display 可以通过标签的display属性设置显示模式 block 块级inline 行内inline-block 行内块级 4、div与span 布局都是用块级元素
文章目录 一、背景简写 1、语法说明 2、代码示例 一、背景简写 ---- 1、语法说明 使用 CSS 样式设置 盒子 背景时 , 需要 设置多个 CSS 样式 , 设置 背景图片 , 平铺模式 ,...定位方式 , 附着方式 等 , 下面是一个完整的图片背景设置的代码 , 代码很繁琐 ; body { /* 设置一个足够高的高度, 让页面滚动起来 */ height: 2000px;.../* 设置背景图片 */ background-image: url(images/bg.jpg); /* 设置图片背景平铺模式 */ background-repeat...scroll; } 类似于 文本样式的字样样式综合写法 方式 , 选择器 { font:font-style font-weight font-size/line-height font-family;} CSS..., 让页面滚动起来 */ height: 2000px; /* 设置背景图片 */ /*background-image: url(images/bg.jpg);*/
图片 位置是 左上角 ; 设置背景位置的 CSS 语法如下 : background-position : length length background-position : position position...方位属性值 , 设置的是 x 坐标的方位 和 y 坐标的方位 , 二者使用空格隔开 ; 顺序无关 : 如果指定了两个方位值 , 则 自动匹配顺序 , 先后顺序无关 , left top 与 top...则水平方向居中对齐 ; 坐标设置 : 如果 设置的是 length 长度坐标 , 则 第一个数值是 x 坐标 , 第二个数值是 y 坐标 ; 设置了一个值 : 如果 只设置了一个坐标值 , 那么该设置为...x 坐标设置 , 垂直方向默认居中设置 ; 同时设置放位和坐标 : 第一个值默认是 x 坐标 , 第二个值为 y 坐标 ; 二、背景位置-方位值设置 ---- 1、效果展示 效果展示 : 设置背景位置为...*/ /*background-repeat: repeat-x;*/ /* y 轴平铺 */ /*background-repeat: repeat-y;*/ /*
场景举例 如何实现 在线课程 字体下方的 短横线 样式效果 思考过程 1.常规方案 看到这样的样式效果，大多数人首先想到的一定是 border-bottom 吧，但是真正写在 css 中，你会发现，...效果是这样的 实现了，却又好像没实现，无法设置长度，那么下面我们试着换一种思路去实现这个效果 2.优化方案 我们不要把这个短横线看做 border ，使用 伪元素 实现，可以随意更改大小、宽度、长度等...，非常的方便 伪元素 用于设置元素指定部分的样式，可用于设置元素的首字母、首行的样式，在元素的内容之前或之后插入内容等 selector::pseudo-element { property: value...; } 代码实现 .box h1::after { /* 必须设置 content 属性才能生效 */ content: ''; /* border 宽度 */ width:
由于公司的IOS离职，侥幸获得其Mac Pro的使用权，因此特地总结了下小白使用Mac OS X的初始配置。...1、系统首选项（system preeferences） 我拿到电脑确认没问题之后，选择了重装Mac OS X，然后进行系统升级等操作，系统重装完成之后，自定义相关配置，修改账号密码，登录apple...iterm官网：http://www.iterm2.com/ 使用brew安装iterm # 颜色和字体设置 设置打开和关闭终端的快捷键位：command + option + i 下载iTerm...alias envconfig="subl ~/Projects/config/env.sh" 8、Git和GitHub # Git安装≈ brew install git # Git设置...它作为'vi'包含在大多数UNIX系统和Apple OS X中。
CSS设置背景颜色透明 将背景颜色设置为透明，两种方法： 方法一：通过background-color和opacity来设置 opacity属性参数的不透明度是以数字表示的，从0.0到1.0，完全透明是...方法二：通过rgba方式设置背景颜色透明 rgba颜色，就是RGB三原色加ALPHA，在给背景添加颜色的同时，提供透明度特性。
字体样式 (双标签)：没有任何语义的标签，通常和CSS结合使用。 font-family 设置字体类型 <!...24px;} 我是SPAN标签 浏览器显示 font-style 设置字体风格...font-style:italic; font-weight:bold; } 浏览器显示 这样设置嫌麻烦还可以在一个声明中设置所有字体属性 浏览器显示 字体属性的顺序...：字体风格→字体粗细→字体大小→字体类型； 总结 font-family——设置字体类型——font-family:"宋体"; font-size——设置字体大小——font-size:12px; font-style...——设置字体风格——font-style:italic; font-weight——设置字体的粗细——font-weight:bold; font——一个声明中设置所有字体属性——font:italic
<style type="text/<em>css</em>
/* 设置背景位置 - x 轴方向 50 像素 , y 轴方向 10 像素 */ background-position: 50px 10px; 设置背景位置为具体值 50px : 粉色区域是盒子的区域..., 图片背景位于盒子位置 x 轴方向 50 像素 , y 轴方向没有设置 , 则在垂直方向上默认为居中 ; /* 设置背景位置 - x 轴方向 50 像素 , y 轴方向垂直居中 */ background-position...: 50px; 二、背景位置-长度值方位值同时设置 ---- 长度值方位值同时设置 效果展示 : 设置背景位置为具体值 center 50px : 粉色区域是盒子的区域 , 图片背景位于盒子位置 x...50px center : 粉色区域是盒子的区域 , 图片背景位于盒子位置 x 轴方向 50 像素 , y 轴方向 垂直居中 ; /* 设置背景位置 - x 轴方向 50 像素 , y 轴方向 垂直居中...设置背景位置 - x 轴方向 50 像素 , y 轴方向 10 像素 */ /*background-position: 50px 10px;*/ /* 设置背景位置 - x 轴方向 50
该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状（不过 CSS2.1 没有定义由哪个边界确定这个范围）。...默认值： auto 继承性： yes 版本： CSS2 JavaScript 语法： object.style.cursor=”crosshair” 可能的值 值 描述 default 默认光标（通常是一个箭头...浏览器设置的光标。 crosshair 光标呈现为十字线。 pointer 光标呈现为指示链接的指针（一只手） move 此光标指示某对象可被移动。
ip： DEVICE=eth0 #如果是第二块刚为eth1 BOOTPROTO=static #网卡获得ip地址的方式，static和dhcp两种方式 IPADDR=192.168.1.122 #改成要设置的...NETMASK=255.255.255.0 #子网掩码 GATEWAY=192.168.1.1 #网关地址 HWADDR=08:00:27:42:8C:AD #网卡物理地址 ONBOOT=yes #系统启动时是否设置此网络接口...，设置为yes时，系统启动时激活此设备。...默认设置为yes 然后重启生效： service network restart IP地址生效，重启系统后不变 如果是临时修改IP重启系统后恢复原始IP则用以下命令 ifconfig 网卡设备 IP地址...linux网卡配置arp检查导致的，把这个关掉即可 解决方法： #在网卡配置文件里面添加 vi /etc/sysconfig/network-scripts/ifcfg-eth0 ARPCHECK=no #设置好之后
文章目录 一、盒子中图片对齐操作 1、设置 div 盒子 2、设置背景图片 3、设置图片平铺 4、设置图片平铺 二、完整代码示例 1、代码示例 2、显示效果 一、盒子中图片对齐操作 ---- 实现博客中的如下效果...: 图片在 div 盒子中靠左 垂直居中的样式 ; 1、设置 div 盒子 首先 , 设置 div 盒子 , 设置宽高 , 以及背景颜色 , 用于显示 div 范围 ; .item...{ width: 800px; height: 150px; background-color: pink; } 2、设置背景图片 通过设置 background-image...: pink; background-image: url(images/div_bg.jpg); } 3、设置图片平铺 设置 background-repeat: no-repeat...设置图片背景位置 , background-position: 30px center; , 将图片放置在左侧 30 px 位置 , 垂直方向居中对齐 ; .item {
文章目录 一、背景附着 1、语法说明 2、背景固定效果展示 代码示例 效果展示 3、背景滚动效果展示 代码示例 效果展示 一、背景附着 ---- 1、语法说明 背景附着 用于设置 背景图片 是...可滚动的 还是 固定的 ; 使用 背景附着 的前提也是必须 提前设置 背景图片 , 背景图片设置语法如下 : background-image: url(images/xxx.jpg); 背景附着 语法如下...: background-attachment : scroll | fixed background-attachment 属性值设置 : scroll 或 fixed 二选一 ; scroll..., 让页面滚动起来 */ height: 2000px; /* 设置背景图片 */ background-image: url(images/bg.jpg); /...* 设置图片背景平铺模式 */ background-repeat: no-repeat; /* 超大背景图片定位 */ background-position: center
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
云直播
