CSS
文章平均质量分 80
CSS的相关知识点整理
阿蓬2023
这个作者很懒,什么都没留下…
展开
-
CSS实现图片自适应缩放,填满容器
在项目中插入图片,想按照图片比例自适应宽高缩放,填满容器使用 object-fit: cover;即可实现.goods_img { width: 100%; height: 100%; object-fit: cover;}<el-carousel v-if="details.picNums > 0" :interval="5000" arrow="always"> <el-carousel-item v-for="item in details原创 2021-07-26 17:14:27 · 4106 阅读 · 0 评论 -
Javascript 实现无缝切换/自动播放轮播图
一、功能需求鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮。点击右侧按钮一次,图片往左播放一张,以此类推, 左侧按钮同理。图片播放的同时,下面小圆圈模块跟随一起变化。点击小圆圈,可以播放相应图片。鼠标不经过轮播图, 轮播图也会自动播放图片。鼠标经过,轮播图模块, 自动播放停止。二、实现思路1.整体分析因为js较多,我们单独新建js文件夹,再新建js文件,引入页面中。此时需要添加 load 事件。鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮。显示隐藏 display 按原创 2021-03-13 12:26:30 · 3656 阅读 · 0 评论 -
CSS三大特性/盒子模型/浮动/定位/高级技巧
一、VS code 快捷键shift + Alt + down: 向下复制一行Alt + z: 切换换行显示方式shift + Alt + F: 格式化代码shift + Alt: 选中多行ctrl + g: 快速定位到某一行二、Emmet 语法! + Tab.demo$*5 + Tabp{内容} + Tab生成标签 直接输入标签名 按tab键即可 比如 div 然后tab 键, 就可以生成<div></div>如果想要生成多个相同标签 加原创 2021-03-04 21:09:11 · 555 阅读 · 1 评论 -
响应式网页设计实战
1.设计思路在本程序设计中,<header> 或 <footer> 元素不论在哪一种情况下,宽度总时浏览窗口宽度的100%,当浏览窗口宽度小于480px为手机端,大于480px小于768px为opad端,大于768px为桌面端。2.网页截图:桌面端:ipad端:手机端:3.代码实现:test.html<!DOCTYPE html><html><head> <meta charset="utf-8">原创 2020-11-17 22:20:39 · 4223 阅读 · 6 评论 -
CSS3笔记(4)——鼠标指针形状|响应式网页设计
一、设置鼠标指针形状使用 cursor 属性可以更改鼠标指针样式。语法cursor: value;二、媒体查询1. 媒体类型下列是CSS中定义的媒体类型(media types).all 用于所有的媒体设备。aural 用于语音和音频合成器。braille 用于盲人用点字法触觉回馈设备。embossed 用于分页的盲人用点字法打印机。handheld 用于小的手持的设备。print 用于打印机。projection 用于方案展示,比如幻灯片。screen 用于电脑显示器。原创 2020-11-08 22:34:09 · 431 阅读 · 0 评论 -
CSS3笔记(3)——过渡效果|动画|变形
一、过渡效果1. 过渡时间 transition-duration 属性transition-duration: time;time: 规定完成过渡效果需要花费的时间(以秒或毫秒计)。 默认值是 0,意味着不会有效果。2. 过渡效果 transition-property 属性transition-property: none | all | property;none: 没有属性会获得过渡效果。all: 所有属性都将获得过渡效果。property: 定义应用过渡效果的 CSS 属原创 2020-11-08 20:11:09 · 515 阅读 · 1 评论 -
CSS3笔记(2)——盒子模型|多栏|定位|弹性容器
一、盒子模型1. 构成盒子模型由内容盒、内边距、边框和外边距构成二、多栏布局1. CSS3基本语法一、定位与网页排版1. CSS3基本语法一、弹性容器1. CSS3基本语法原创 2020-11-05 21:44:31 · 1322 阅读 · 0 评论 -
CSS3笔记(1)——基础|段落文字|项目列表|背景|表格|渐变
一、CSS3基础知识1. CSS3基本语法selector { property1:value1; proterty2:value2; }/*或*/selector { property1:value1; proterty2:value2;}/*多个选择器使用相同的声明区块*/selector1, selector2 { property1:value1; proterty2:value2;}2. CSS引入方式行内样式 <div style="原创 2020-11-03 22:46:38 · 437 阅读 · 1 评论 -
CSS基础总结
CSS入门摘要一、CSS引入方式行间样式 <div style=" width:100px; height:100px; background-color: red; "></div>页面级css<!DOCTYPE html><html lang="en"><head> ...原创 2020-02-19 23:52:22 · 414 阅读 · 0 评论