css
关注
分享
扫一扫
文章平均质量分 89
Dontla
这个作者很懒，什么都没留下…
展开
-
Sass介绍（CSS预处理器，为CSS提供了编程能力，是目前最流行的CSS扩展语言之一）（Syntactically Awesome Style Sheets）SaaS
创建可重用的函数进行值计算。原创 2025-03-20 14:45:56 · 803 阅读 · 0 评论 -
【css教程】web前端入门学习 css（10）移动端布局（学到DPG格式图片与webp格式图片停了）
https://www.bilibili.com/video/BV14J4114768?p=390代码：https://gitee.com/xiaoqiang001/html_css_material浏览器现状手机屏幕现状常见移动端屏幕尺寸移动端调试方法视口 viewport（布局视口 layout viewport 视觉视口 visual viewport 理想视口 ideal viewport）meta 视口标签<!DOCTYPE html><原创 2021-04-27 16:57:50 · 565 阅读 · 2 评论 -
【css教程】web前端入门学习 css（9）广义的html5 品优购项目（html+css基础完结，js开始，移动端布局开始）
文章目录广义的html5品优购项目导读网站制作流程原型图项目规划项目整体介绍项目规划项目搭建网站favicon图标网站TDK三大标签SEO优化品优购首页制作常用模块类名命名快捷导航shortcut制作header制作logo制作搜索模块制作导航制作footer 底部制作main主体模块制作推荐模块制作楼层区floor制作tab栏切换布局需求列表页制作列表页header和nav修改列表页主题sk-container注册页面的制作注册页类名命名注册页布局web服务器本地服务器远程服务器将自己网站上传到远程服务器原创 2021-04-02 10:46:35 · 405 阅读 · 0 评论 -
hover如何改变子元素或其他同级元素？（用不了怎么回事？）
背景鼠标移到A，使B、C、D出现动画，纯用css。此时此刻，需要使用hoverhover的一般用法hover的最原始用法是：a:hover{ background-color:yellow;}鼠标移动到 a标签上，改变a的背景颜色。初学的时候都是这么学习的，导致很多人以为只有a标签才有hover。错了，hover是针对所有元素的。hover的进阶用法鼠标指在A元素上，使A元素的子元素B改变了样式。代码如下：<div class="face"> <!-- 嘴巴转载 2021-04-01 11:27:21 · 3484 阅读 · 0 评论 -
【css教程】web前端入门学习 css（7）精灵图、字体图标、css三角、鼠标样式、表单轮廓线、文本框拖拽、垂直对齐、图底空白缝隙、margin负值、溢出文字省略号、文字环绕、css初始化
文章目录精灵图为什么需要精灵图？精灵图的使用精灵图课堂案例用精灵图拼出自己的名字字体图标字体图标的下载字体图标的引入字体图标的追加css三角（用边框border制作）案例：京东三角css用户界面样式更改用户鼠标样式cursor取消表单轮廓线input{outline:none;} textarea{outline:none;}取消文本框拖拽textarea{resize:none;}vertical-align垂直对齐属性（垂直居中：vertical-align:middle;）解决图片底部默认空白缝隙问.原创 2021-03-29 10:13:38 · 387 阅读 · 0 评论 -
【css教程】web前端入门学习 css（6）（定位position）（元素的显示与隐藏display、可见性visibility、溢出overflow）（案例：土豆播放页）
文章目录什么是定位？定位组成（定位模式+边偏移）定位模式static relative absolute fixed边偏移定位模式——静态定位static（平时用不到）就是标准流定位模式——相对定位relative（重要）定位模式——绝对定位absolute绝对定位（父级无定位）绝对定位（父级或父级的父级有定位【相对定位、绝对定位、固定定位】）绝对定位脱离标准流，不再占有之前位置子绝父相（子元素用绝对定位，父元素用相对定位）定位模式——固定定位fixed（不随页面滚动移动）固定定位（以版心位置定位）定位模式原创 2021-03-27 19:01:34 · 871 阅读 · 0 评论 -
margin和padding分别适合什么场景使用？
margin是元素边框外部的空白区域，它可以影响元素周围的元素。padding是元素边框内部的空白区域，它可以影响元素内部的内容。转载 2021-03-21 23:07:14 · 890 阅读 · 0 评论 -
【css教程】web前端入门学习 css（5）（浮动）（ps切图）（css属性书写顺序）（学成在线网站案例）
文章目录传统网页布局的三种方式标准流（普通流、文档流）浮动（为什么需要浮动？）传统网页布局的三种方式标准流（普通流、文档流）浮动（为什么需要浮动？）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2021-03-19 15:58:33 · 1176 阅读 · 0 评论 -
css设置元素的宽高为整数，为什么有的浏览器解析出来的宽高是小数？
如图：因为把当前的标签页缩放显示了，所以浏览器会渲染出非整数的盒子尺寸。原创 2021-03-18 17:19:53 · 2204 阅读 · 0 评论 -
【css教程】web前端入门学习 css（4）（盒子模型）
文章目录盒子模型（box model）盒子模型的组成边框 border边框的简写，边框的分开写法（分别写上下左右边框）利用边框的层叠性简化书写代码给表格table和单元格td和表头th加边框https://www.bilibili.com/video/BV1pE411q7FU?p=135&spm_id_from=pageDriver盒子模型（box model）盒子模型的组成边框 border<!DOCTYPE html><html lang="en"&g原创 2021-03-16 14:40:14 · 1255 阅读 · 0 评论 -
【css教程】web前端入门学习 css（8）新增语义化标签、video/audio、input类型、表单属性、属性选择器、结构伪类选择器、伪元素选择器、css3盒子模型、模糊、calc函数、过渡
https://www.bilibili.com/video/BV1pE411q7FU?p=276视频video标签（支持格式、语法、常见属性）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="view原创 2021-03-16 14:38:10 · 623 阅读 · 0 评论 -
【css教程】web前端入门学习 css（3）（背景相关）
文章目录css背景颜色（backgroud-color、transparent）css背景图片 background-image背景平铺 background-repeat背景图片位置 background-positioncss背景颜色（backgroud-color、transparent）例：css背景图片 background-image例：<!doctype html><html lang="en"><head> <meta原创 2021-03-15 17:19:35 · 2014 阅读 · 0 评论 -
【css教程】web前端入门学习 css（2）
https://www.bilibili.com/video/BV1pE411q7FU?p=85&spm_id_from=pageDriver文章目录css引入方式总结综合案例：新闻页面chrome调试工具的使用Emmet语法（快速生成class、id等）Emmet语法（快速生成css样式）vscode快速格式化文档（alt+shift+f）如何设置保存时自动格式化代码？复合选择器（更方便选择元素进行修改）后代选择器（重要）（后级包含的全选）子选择器（亲儿子选择器）（只选择后一级）（重要）并集选择原创 2021-03-14 17:51:27 · 323 阅读 · 0 评论 -
【css教程】web前端入门学习 css（1）（类选择器、id选择器、css引入方式：行内式、嵌入式、链接式）
黑马程序员Web前端入门教程，零基础前端视频教程pink老师_html5+css3文章目录原创 2021-03-09 17:32:46 · 252 阅读 · 0 评论