随笔分类 - CSS
摘要：代码： <!-- * @Description: 一个博客页面布局，加上一些CSS和JS样式 * @Author: zhangyh * @Date: 2024-06-29 15:25:16 * @LastEditTime: 2024-06-29 23:06:12 * @LastEditors: zh
阅读全文
摘要：.tuijian_2:hover{ transform: scale(1.3); transition: all 1s; }
阅读全文
摘要：z-index使用方法: 1、首先要把position设置为 absolute 或 relative 或 fixed，z-index才能生效 2、设置z-index的值(整数) # 值越大代表越置前，例如：z-index:9999 # 若定义为-1，代表为最底层 # 如果要div1不被div2遮挡，
阅读全文
摘要：<!-- 引入jQuery.js --> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script> <!-- 准备一个将要展示的<div>，它的默认状态为隐藏（display: none） -->
阅读全文
摘要：<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0" /> <title>用户登
阅读全文
摘要：@keyframes 规则 要创建 CSS 动画，您首先需要了解 @keyframes 规则，@keyframes 规则用来定义动画各个阶段的属性值，类似于 flash 动画中的关键帧，语法格式如下： @keyframes animationName { from { properties: val
阅读全文
摘要：<!DOCTYPE html> <html> <head> <style> p.one { text-shadow: 3px 5px 5px #FF0000; } p.two { color: white; text-shadow: 1px 1px 2px black, 0 0 25px blue,
阅读全文
摘要：<!DOCTYPE html> <html> <head> <style> div { width: 210px; height: 50px; float: left; margin: 10px; } .one { background: linear-gradient(to right botto
阅读全文
摘要：例子1： <!DOCTYPE html> <html lang="en"> <head> <style> div { width: 350px; height: 100px; padding: 15px 0px 0px 25px; } .one { border-top-left-radius: 2
阅读全文
摘要：CSS 中提供了一个 opacity 属性用来设置元素的透明度，它不仅对颜色有效，对图像或者页面中其它的元素也有效。 其语法格式如下： opacity: number; 其中 number 为一个 0~1 之间的浮点数（小数），用来表示元素的透明度，值越小则越透明（0 表示完全透明，1 表示完全不透
阅读全文
摘要：在浏览网页的过程中，当我们将鼠标移动到一些元素上时，鼠标的样式会发生相应的改变，例如当鼠标指向文本时，鼠标的样式会变成类似大写字母I的样子；当鼠标指向链接时，鼠标会变成一个小手的形状等。 除了这些默认的变化外，您还可以通过 CSS 中的 cursor 属性来改变网页中鼠标（光标）的样式，下表中列举了
阅读全文
摘要：就像photoshop中的图层功能会把一整张图片分层一个个图层一样，网页布局中的每一个元素也可以看成是一个个类似图层的层模型。层布局模型就是把网页中的每一个元素看成是一层一层的，然后通过定位属性position对元素进行定位摆放，最终实现网页的布局。 定位属性position有4个值，分别是静态定位
阅读全文
摘要：流动布局 流动模型（Flow），即文档流，浏览器打开HTML网页时，从上往下，从左往右，逐一加载。 在正常情况下，HTML元素都会根据文档流来分布网页内容的。 文档流有2大特征： ① 块状元素会随着浏览器读取文档的顺序，自上而下垂直分布，一行一个的形式占据页面位置。 ② 行内元素会随着浏览器区队文档
阅读全文
摘要：盒模型是CSS的核心知识点之一，它指定元素如何显示以及如何相互交互。HTML页面上的每个元素都可以看成一个个方盒子，这些盒子由元素的content（内容）、padding（内边距）、border（边框）、margin（外边距）组成。 padding（内边距及其缩写） 内边距，也叫“内补白”，表示页面
阅读全文
摘要：display可以指定元素的显示模式，它可以把行内元素修改成块状元素，也可以把别的模式的元素改成行内元素。diisplay常用的值有四个。 语法： /* display: block; // 声明当前元素的显示模式为块状元素 display: inline; // 声明当前元素的显示模式为行内元素
阅读全文
摘要：CSS中提供了一些列表属性可以用来： (1)、设置不同的列表项标记为有序列表 (2)、设置不同的列表项标记为无序列表 (3)、设置列表项标记为图像 list-style-type（系统提供的列表项目符号） list-style-image（自定义的列表项目符号）
阅读全文
摘要：1、border-style（边框风格） 定义边框的风格，值可以有： /* none：没有边框，当border的值为none的时候，系统将会忽略[border-color] hidden：隐藏边框，低版本浏览器不支持。 dotted：点状边框。 dashed：虚线边框。 solid：实线边框。 do
阅读全文
摘要：1、background-color（背景颜色） 页面的背景颜色有四种属性值表示，分别是transparent（透明），RGB十进制颜色表示，十六进制颜色表示和颜色单词表示。 属性使用： /* background-color: transparent; // 透明 background-color
阅读全文
