CSS之路
关注
分享
扫一扫
文章平均质量分 85
分享学习CSS的经验ヾ(•ω•`)o
FeverTwice
Stay hungry, stay foolish！
(╹ڡ╹ )
展开
-
HTML(Basic) Chapter8(Pink) CSS属性过度
文章目录格式1.过渡效果源代码最终效果2.过度练习最终效果写在最后格式transition: 变化的属性 花费时间 运动曲线 何时开始如果需要写多个属性，需要用逗号进行分割如果所有的属性都要变化，属性写all谁要过度给谁加1.过渡效果源代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA.原创 2021-07-23 10:36:23 · 186 阅读 · 1 评论 -
总结CSS3的新特性
文章目录新特性1.新增的选择器源代码最终效果2.nth选择器源代码最终效果3.新增伪类选择器源代码最终效果4.加border不撑开盒子的大小源代码最终效果写在最后新特性在移动端优于PC端不断改进中应用相对广泛1.新增的选择器图片来自黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+web前端视频教程 275集源代码<!DOCTYPE html><html lang="en"><head> <me.原创 2021-07-23 10:14:53 · 178 阅读 · 0 评论 -
总结HTML5的新特性
文章目录新特性1.新增的语义化标签源代码最终效果2.新增的多媒体标签2.1视频标签2.2音频标签源代码最终效果3.新增的input类型源代码最终效果4.新增的表单属性源代码最终效果写在最后新特性针对以前的不足增加了一些心得标签，新的表单属性但这些新增的属性都有一定的版本兼容性的问题，基本上是IE9+的版本才能支持div对于搜索引擎来说，是没有语义的1.新增的语义化标签图片来自黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+web前端视频教程 275集.原创 2021-07-23 07:47:58 · 288 阅读 · 1 评论 -
HTML(Basic) Chapter7(Pink) CSS初始化
文章目录CSS初始化源代码写在最后CSS初始化为了消除不同浏览器对HTML文本呈现的差异，照顾浏览器的兼容性，我们需要对CSS进行初始化每个网页都必须进行初始化源代码/* 把所有的内外边距清零 */* { margin: 0; padding: 0}/* em和i的斜体的文字不倾斜 */em,i { font-style: normal}li { list-style: none}img { /* border 0 照顾低版本.原创 2021-07-23 06:43:06 · 337 阅读 · 1 评论 -
HTML(Basic) Chapter7(Pink) CSS常见布局技巧
文章目录几个布局技巧1.margin负值的运用源代码最终效果2.文字围绕浮动元素巧妙运用源代码最终结果写在最后几个布局技巧margin负值的运用文字围绕浮动元素行内块的巧妙运用css的三角强化1.margin负值的运用源代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible.原创 2021-07-23 06:26:12 · 455 阅读 · 2 评论 -
HTML(Basic) Chapter7(Pink) CSS高级技巧2
文章目录1.CSS三角案例一(CSS三角.html)最终效果2.用户样式1.鼠标样式2.去掉表单轮廓线3. vertical-align属性4.单行文本溢出使用省略号显示4.1单行文本溢出省略号源代码最终结果4.2多行文本溢出省略号源代码（多行.html）最终效果写在最后1.CSS三角为什么使用CSS三角？除了使用字体图标以外，还可以使用CSS三角可以通过使用border巧妙达到三角形的效果案例一(CSS三角.html)<!DOCTYPE html><html la.原创 2021-07-20 21:25:19 · 237 阅读 · 1 评论 -
HTML(Basic) 字体图标的添加
文章目录1.字体图标的添加添加步骤详细步骤1.点击右上角导入2.点击import3.选择字体包里面的json文件4. 点击yes5.重新选择并下载写在最后1.字体图标的添加如果工作中，原来的字体图标不够用了，我们需要将心得字体添加到原来的字体文件夹中添加步骤找到压缩包的selection.json重新上传然后选中自己要的图标，重新下载压缩包即可详细步骤1.点击右上角导入2.点击import3.选择字体包里面的json文件4. 点击yes5.重新选择并下载写在最后.原创 2021-07-20 17:37:28 · 357 阅读 · 0 评论 -
HTML(Basic) Chapter7(Pink) CSS高级技巧1
文章目录1.CSS精灵图案例一(网页图标.html)最终效果案例二（英文找字母.html）字体图标的下载字体图标的使用源代码（overflow_1.html）最终效果写在最后1.CSS精灵图为什么使用精灵图？网页有许多图片，但网页的图像过多时候，服务器就会频繁发送和接收信息请求，使得服务器的压力过大将网页中的许多小图片整合到一张大的图片中，使得浏览器一次请求就足够了精灵图使用的核心针对于一些小的背景图片使用，就是把多个小的背景图片整合到一张大的图片中这个大的图片也称为sprites .原创 2021-07-20 17:23:14 · 185 阅读 · 1 评论 -
HTML(Basic) Chapter6(Pink) 综合案例土豆网遮罩层的制作
文章目录基础知识总结HTML源代码（轮播图.html）最终效果写在最后基础知识总结标准流：可以让盒子上下排列或者左右排列，垂直的会计盒子显示就使用标准流布局使用浮动可以让块级盒子放在一行显示如果需要某个模块在网页中固定在页面中的某个位置，或者压住某个盒子，则需要定位HTML源代码（轮播图.html）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> .原创 2021-07-20 16:16:44 · 480 阅读 · 1 评论 -
HTML(Basic) Chapter6(Pink)元素的显示与隐藏
文章目录1.基础知识2.display和visibility最终效果display效果visibility效果2.OVERFLOW隐藏源代码（overflow_1.html）最终效果写在最后1.基础知识为什么要使用隐藏类似网站上的一些广告，当我们点击关闭的时候就突然不见了（点击关闭），但是我们重新刷新的时候页面将会再次出现本质就是让一个元素在页面中隐藏或者显示出来display属性display:none 隐藏对象display:block除了块级元素之外还有显示元素的意思di.原创 2021-07-20 15:59:55 · 391 阅读 · 0 评论 -
HTML(Basic) Chapter6(Pink) 综合案例淘宝焦点图的制作
文章目录HTML源代码（轮播图.html）最终效果写在最后HTML源代码（轮播图.html）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device.原创 2021-07-20 12:01:54 · 751 阅读 · 0 评论 -
HTML(Basic) Chapter6(Pink)定位
文章目录1.基础知识1.1为什么需要定位技术1.2什么是定位2.定位的方法1.静态定位（元素默认）2.相对定位源代码（相对.html）最终效果3.绝对定位源代码（绝对.html）最终效果4.固定定位源代码（固定.html）最终效果5.子绝父相5.粘性定位源代码（粘性.html）最终结果写在最后1.基础知识1.1为什么需要定位技术使用标准流以及浮动难以完成让盒子自由地在某个盒子内部移动位置或者固定在屏幕中的某个位置，并可以压住其他盒子1.2什么是定位定位=定位模式+边偏移分为：静态定位、.原创 2021-07-19 17:00:29 · 447 阅读 · 0 评论 -
Photoshop 前端切图使用的快捷键以及注意事项一览（自用，持续更新）
文章目录快捷键设置1.使用选择工具时的设置写在最后快捷键PS取消选区 Crtl+D（如果不取消选择区，可能会导致使用cuttman导出选择图片的时候会导出一个选择区域大小的黑色背景）设置1.使用选择工具时的设置轻点PS中的元素，然后观看右下角对应的元素，点对应元素的小眼睛，可观察自己选中的元素是否正确写在最后各位看官，都看到这里了，麻烦动动手指头给博主来个点赞8，您的支持作者最大的创作动力哟！ ＜（＾－＾）＞才疏学浅，若有纰漏，恳请斧正本文章仅用于各位同志作为学习交流之用，原创 2021-07-18 23:51:47 · 177 阅读 · 0 评论 -
HTML(Basic) Chapter5(Pink)清除浮动 clear
文章目录1.基础知识2.清除浮动的方法1.额外标签法（额外标签法.html）最终效果2.父级添加OVERFLOW在div的父结点上(.box)添加overflow:auto3.使用after伪元素（大厂常用）HTML源代码（伪元素.html）写在最后1.基础知识为什么要清除浮动由于父盒子在动态情况下不方便给高度，但是盒子浮动在不占位置的情况下会使得父盒子高度变为0，就会影响下面的标准流盒子清除浮动的方法额外标签法父级添加overflow属性父级添加after属性父级添加双伪元素.原创 2021-07-17 21:17:54 · 193 阅读 · 1 评论 -
HTML(Basic) Chapter5(Pink)网页浮动以及几种常用的布局方式
文章目录1.基础知识HTML源代码（导航栏.html）导航栏最终效果2.综合案例 圆角边框、阴影的使用最终效果写在最后1.基础知识一个网页通常由三种方式进行布局分别是：普通流（标准流）、浮动、定位标准流分为块级元素、行内元素和行内块元素组成（以前学习的知识）HTML源代码（导航栏.html）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <.原创 2021-07-17 18:08:06 · 314 阅读 · 2 评论 -
HTML(Basic) Chapter5(Pink) 综合案例品优购小导航栏 & 圆角边框、阴影的使用
文章目录1.综合案例 品优购小导航栏HTML源代码（导航栏.html）导航栏最终效果2.综合案例 圆角边框、阴影的使用最终效果写在最后1.综合案例 品优购小导航栏注意小导航栏的空白处padding还是使用margin首先使用*把所有的案例的边框都设置为无padding再使用list-style: none去掉li前面的小圆点HTML源代码（导航栏.html）<!DOCTYPE html><html lang="en"><head> &l.原创 2021-07-16 20:38:40 · 246 阅读 · 1 评论 -
HTML(Basic) Chapter4(Pink) 综合案例小米商城产品模块
文章目录综合案例小米商城产品模块HTML源代码（小米商城.html）最终效果写在最后综合案例小米商城产品模块一般来说，产品名字，类别名字都用h标题来做，而产品描述等则用p标签来做写多点类名，可以维护方便margin和padding各有优缺点，视情况而定HTML源代码（小米商城.html）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <m.原创 2021-07-16 18:12:39 · 1075 阅读 · 0 评论 -
HTML(Basic) Chapter4(Pink) 综合案例新浪导航栏
文章目录HTML图像标签示例HTML源代码（demo.html）最终效果写在最后HTML图像标签示例功能：利用之前所学的所有背景图片以及标签选择器的知识，做一个网站导航栏心得知识点，通过使用padding来左右撑开导航栏的间距已达到最终的效果HTML源代码（demo.html）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http.原创 2021-07-15 16:01:05 · 839 阅读 · 0 评论 -
HTML(Basic) Chapter4(Pink) 综合案例悬浮导航栏
文章目录HTML图像标签示例HTML源代码（demo.html）最终效果写在最后HTML图像标签示例功能：利用之前所学的所有背景图片以及标签选择器的知识，做一个网站导航栏HTML源代码（demo.html）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=.原创 2021-07-15 10:56:00 · 468 阅读 · 0 评论 -
HTML CSS (Basic) Chapter4(Pink) 简洁版小米商城侧边栏的案例
文章目录1. 实现步骤与知识点2. 示例源代码测试效果写在最后1. 实现步骤与知识点先把链接转换为块级元素再经过鼠标经过给a设置背景颜色，使用a:hover筛选器行高等于合资的高度就能垂直居中 （用line-height设置）行高小于盒子的高度会偏上行高大于盒子的高度会偏下2. 示例源代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &.原创 2021-07-14 21:19:12 · 480 阅读 · 0 评论 -
HTML CSS (Basic) Chapter4(Pink) 显示模式
文章目录1. 元素的显示模式块元素行内元素（内联元素）行内块元素2. 示例Eg1: 块元素和行内元素源代码测试效果Eg2: 行内块元素源代码测试效果Eg3: 显示模式的转换源代码测试效果写在最后1. 元素的显示模式元素的显示模式主要分为块元素（按行）和行内元素（一行里面分列）块元素例如div，h1，h6，ul，ol文字类的元素不允许放块元素，如p标签比较霸道，独占一行宽度默认是容器100%是一个容器盒子行内元素（内联元素）span， strong一行的元素中可以放多个行内元素.原创 2021-07-14 20:47:42 · 207 阅读 · 0 评论 -
HTML CSS (Basic) Chapter4(Pink) 复合选择器
文章目录1. CSS复合选择器2. 示例Eg1: CSS后代选择器源代码测试效果Eg2: 子元素选择器源代码测试效果Eg3: 并集选择器源代码测试效果Eg4: 伪类选择器源代码测试效果Eg5: focus伪类选择器源代码测试效果写在最后1. CSS复合选择器后代选择器又称包含选择器，可以选择父元素中的子元素（li是ol的孩子）元素1和元素2之间一定要用空格隔开后代选择器可以是基本选择器的组合子选择器只能选择作为某元素最近的一级子元素，简单理解就是选择亲儿子元素2. 示例Eg1: CSS.原创 2021-07-14 18:02:49 · 217 阅读 · 1 评论 -
HTML CSS (Basic) Chapter4(Pink) Emmet语法
文章目录1. Emmet语法1.快速构建HTML语法2.3.4.5.2. 快速生成CSS样式语法3. 格式化文档4. VScode设置保存并格式化写在最后1. Emmet语法1.快速构建HTML语法生成标签直接输入标签名按tab键即可比如div然后tab 键,就可以生成 如果想要生成多个相同标签加上就可以了比如div3 就可以快速生成3个div(注意不能够有空格)如果有父子级关系的标签,可以用>比如ul > li就可以了如果有兄弟关系的标签,用+就可以了比如div+p如果生成.原创 2021-07-14 17:05:52 · 148 阅读 · 1 评论 -
HTML(Basic) Chapter3(Pink) 综合案例 天气预报新闻网站
文章目录需要用到知识文件内部目录HTML源代码（综合案例.html）CSS源代码（综合案例设置.css）最终效果写在最后需要用到知识首先使用标签样式对整体的body标签的样式进行统一定义标题不加粗 font-weight: 400让h1里面的文字水平居中对齐 text-align: center首行缩进两个字 text-indent: 2em想要图片居中对齐则需要其父亲 p标签添加水平居中对齐的代码在查询语句中嵌套语句格式多用类定义格式文件内部目录HTML源代码（综合案例..原创 2021-07-14 16:23:53 · 1542 阅读 · 0 评论 -
HTML CSS (Basic) Chapter3(Pink)CSS引入方式
文章目录1. CSS引入方式CSS的三种样式表2. 示例Eg1: 内部样式表源代码测试效果Eg2: 行内样式表源代码测试效果Eg3: CSS外部样式表源代码测试效果写在最后1. CSS引入方式CSS的三种样式表按照CSS样式的书写位置（引入方式），CSS样式表主要可以分为以下三大类行内样式表（行内式）内部样式表（嵌入式）外部样式表（链接式）2. 示例Eg1: 内部样式表写到html页面内部，将所有的CSS的代码抽取出来，单独放到style中可以控制整个html的页面代码结构.原创 2021-07-14 12:10:16 · 146 阅读 · 0 评论 -
HTML CSS (Basic) Chapter3(Pink) 文本外观
文章目录1. CSS文本外观知识点字体属性2. 示例Eg1: 字体属性源代码测试效果Eg2: CSS基础选择器源代码测试效果Eg3: CSS类选择器画盒子源代码测试效果Eg4: 类选择器多类名源代码测试效果写在最后1. CSS文本外观知识点字体属性font-size 字体大小，记得单位后面要加上pxfont-family 字体形式，如黑体或者宋体，微软雅黑font-weight 字体的粗细 ，加粗的700不加粗的400，不用加单位line-weight 行高font-style 只有两个.原创 2021-07-14 11:42:47 · 178 阅读 · 0 评论 -
HTML CSS (Basic) Chapter3(Pink) 基础选择器
文章目录1. CSS基础语法及知识点2. 示例Eg1: CSS基本语法规范源代码测试效果Eg2: CSS基础选择器源代码测试效果Eg3: CSS类选择器画盒子源代码测试效果Eg4: 类选择器多类名源代码测试效果写在最后1. CSS基础语法及知识点格式选择器 {样式}给谁修改样式 {改什么样式}代码风格1. 展开式书写2. 样式使用小写3. 属性值前面，冒号后面使用空格4. 选择器后面加上一个空格2. 示例Eg1: CSS基本语法规范源代码<!DOCTYPE html&g.原创 2021-07-13 23:06:35 · 167 阅读 · 0 评论