前端Web
关注
分享
扫一扫
文章平均质量分 89
Web程序设计学习笔记。
月光晒了很凉快
天道酬勤。
展开
-
CSS初始化
不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异，照顾浏览器的兼容，我们需要对CSS初始化。把中文字体的名称用相应的Unicode编码来代替，这样就可以有效的避免浏览器解释CSS代码时候出现乱码的问题。参考视频https//www.bilibili.com/video/BV14J4114768?黑体\9ED1\4F53宋体\5B8B\4F53微软雅黑\5FAE\8F6F\96C5\9ED1。简单理解CSS初始化是指重设浏览器的样式。...原创 2022-07-22 08:34:51 · 432 阅读 · 0 评论 -
CSS常见布局技巧
1.如果盒子没有定位，则鼠标经过添加相对定位即可。/*3.上边框宽度要大，右边框宽度稍小，其余的边框该为0*//*2.如果li都有定位，则利用z-index提高层级;/*1.只保留右边的边框有颜色*//*左边和下边的边框设置为0*//*2.样式都是solid*//*把上边框宽度调高*/...原创 2022-07-22 08:02:08 · 316 阅读 · 0 评论 -
CSS溢出的文字省略号显示
/*1.这个单词的意思是，如果文字显示不开，也必须强制在一行显示*//*这个单词的意思是，如果文字显示不开，自动换行*//*5.设置或检索伸缩盒对象的子元素的排列方式*//*4.限制在一个块元素显示的文本的行数*//*3.文字溢出的时候用省略号来显示*//*2.文字用省略号替代超出的部分*//*2.溢出的部分隐藏起来*//*1.超出的部分隐藏*/......原创 2022-07-21 22:17:51 · 8359 阅读 · 0 评论 -
CSS中vertical-align 属性应用
CSS的属性使用场景经常用于设置图片或者表单(行内块元素）和文字垂直对齐。官方解释用于设置一个元素的，但是它只针对于行内元素或者行内块元素有效。原创 2022-07-21 22:03:50 · 189 阅读 · 0 评论 -
CSS用户界面样式
所谓的界面样式，就是更改一些用户操作样式，以便提高更好的用户体验。更改用户的鼠标样式表单轮廓防止表单域拖拽。原创 2022-07-21 21:40:39 · 96 阅读 · 0 评论 -
CSS三角
网页中常见一些三角形，使用CSS直接画出来就可以，不必做成图片或者字体图标。/*为了照顾兼容性*/原创 2022-07-21 21:21:18 · 92 阅读 · 0 评论 -
CSS字体图标
如果遇到一些结构和样式比较简单的小图标，就用字体图标。如果遇到一些结构和样式复杂一点的小图片，就用精灵图。原创 2022-07-21 21:06:40 · 294 阅读 · 0 评论 -
CSS精灵图
一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称CSSSprites、CSS雪碧）。...原创 2022-07-21 20:24:16 · 131 阅读 · 0 评论 -
CSS元素的显示与隐藏
类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现！本质：让一个元素在页面中隐藏或者显示出来。包括：display显示隐藏visibility显示隐藏overflow溢出显示隐藏1. display属性display 属性用于设置一个元素应如何显示。display: none 隐藏对象 display：block 除了转换为块级元素之外，同时还有显示元素的意思。特点： display 隐藏元素后，不再占有原来的位置。（人没了，钱也没了）后面应用及其广泛，搭配原创 2022-07-21 19:51:50 · 468 阅读 · 0 评论 -
CSS综合案例——淘宝焦点图（轮播图）布局及网页布局总结
文章目录1. 案例2. 网页布局总结1. 案例效果展示：布局分析：大盒子我们类名为：tb-promo 淘宝广告里面先放一张图片左右两个按钮用链接。左箭头 prev，右箭头 next底侧小圆点ul 继续做。类名为 promo-nav代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Com原创 2022-05-02 22:56:36 · 2860 阅读 · 1 评论 -
CSS定位详解
1. 为什么需要定位提问：以下情况使用标准流或者浮动能实现吗？当我们滚动窗口的时候，盒子是固定屏幕某个位置的。某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子。......原创 2022-04-30 18:02:53 · 1346 阅读 · 0 评论 -
CSS利用PS切图+学成在线综合案例
1. 常见的图片格式jpg图像格式：JPEG（JPG）对色彩信息保留较好，高清，颜色较多，我们产品类的图片经常用jpg格式的gif图像格式：GIF格式最多只能储存256色，所以通常用来显示简单图形及字体，但是可以保存透明背景和动画效果，实际经常用于一些小图片动画效果png图像格式是一种新兴的网络图形格式，结合了GIF和JPEG的优点，具有存储形式丰富的特点，能够保持透明背景，如果想要切成背景透明的图片，请选择png格式PSD图像格式：PSD格式是Photoshop的专用格式，里面可以存放图层、通道原创 2022-04-29 10:44:23 · 545 阅读 · 0 评论 -
CSS浮动详解
文章目录1. 浮动1.1 传统网页布局的三种方式1.2 标准流（普通流 / 文档流）1.3 为什么需要浮动？1.4 什么是浮动？1.5 浮动特性1.6 浮动元经常和标准流父级搭配使用2. 常见网页布局2.1 常见网页布局2.2 浮动布局注意点2.3 思考3. 清除浮动3.1 为什么要清除浮动？3.2 清除浮动本质3.3 清除浮动方法(1)额外标签法(2)父级添加overflow(3):after伪元素法(4)双伪元素清除浮动3.4 清除浮动总结1. 浮动1.1 传统网页布局的三种方式网页布局的本质—原创 2022-04-05 17:59:26 · 1826 阅读 · 0 评论 -
CSS圆角边框、盒子阴影及文字阴影详解
文章目录1. 圆角边框2. 盒子阴影3. 文字阴影1. 圆角边框在CSS3 中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。border-radius 属性用于设置元素的外边框圆角。语法：radiu半径（圆的半径）原理：（椭）圆与边框的交集形成圆角效果：注意：参数值可以为数值或百分比的形式如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为50%该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角分开写：border-top-原创 2022-04-05 09:06:27 · 672 阅读 · 0 评论 -
CSS中ps基本操作及盒子模型综合案例
1. PS基本操作因为网页美工大部分效果图都是利用PS（Photoshop）来做的，所以以后我们大部分切图工作都是在PS里面完成。文件 → 打开：可以打开我们要测量的图片Ctrl+R：可以打开标尺，或者视图 → 标尺右击标尺，把里面的单位改为像素Ctrl+加号(+)可以放大视图，Ctrl+减号(-)可以缩小视图按住空格键，鼠标可以变成小手，拖动PS视图用选区拖动可以测量大小Ctrl+D可以取消选区，或者在旁边空白处点击一下也可以取消选区2. 盒子模型综合案例2.1 产品模块我们来原创 2022-04-04 18:39:02 · 847 阅读 · 0 评论 -
CSS盒子模型详解
文章目录1. 看透网页布局的本质2. 盒子模型（Box Model）组成3. 边框（border）4. 表格的细线边框5. 边框会影响盒子实际大小6. 内边距（padding）7. 新浪导航案例：padding影响盒子好处8. padding不会撑开盒子的情况9. 外边距（margin）10. 外边距典型应用11. 外边距合并11.1 相邻块元素垂直外边距的合并11.2 嵌套块元素垂直外边距的塌陷12. 清除内外边距1. 看透网页布局的本质网页布局过程：先准备好相关的网页元素，网页元素基本都是盒子原创 2022-03-25 08:38:02 · 1044 阅读 · 0 评论 -
CSS三大特性详解
文章目录CSS的三大特性1. 层叠性2. 继承性3. 优先级CSS的三大特性CSS有三个非常重要的三个特性：层叠性、继承性、优先级。1. 层叠性相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题。层叠性原则：样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式样式不冲突，不会层叠2. 继承性现实中的继承：我们继承了父亲的姓。CSS中的继承：子标签会继承父标签的某些样式，如文本颜色和字号。简单的理解就是：子承父业。原创 2022-03-18 16:38:18 · 3212 阅读 · 0 评论 -
CSS的元素显示模式+CSS背景相关知识+综合案例：五彩导航
文章目录1. CSS的元素显示模式1.1 什么是元素的显示模式1.2 块元素1.3 行内元素1.4 行内块元素1.5 元素显示模式总结1.6 元素显示模式转换1.7 案例：简洁版小米侧边栏1.8 单行文字垂直居中的原理2. CSS背景2.1 背景颜色2.2 背景图片2.3 背景平铺2.4 背景图片位置(1)参数是方位名词(2)参数是精确单位(3)参数是混合单位2.5 背景图像固定2.6 背景属性复合写法2.7 背景半透明2.8 背景总结3. 综合案例：五彩导航1. CSS的元素显示模式1.1 什么是元原创 2022-03-17 22:42:28 · 1366 阅读 · 0 评论 -
Emmet语法和CSS复合选择器详解
文章目录1. Emmet语法1.1 快速生成HTML结构语法1.2 快速生成CSS样式语法1.3 快速格式化代码2. CSS的复合选择器2.1 什么是复合选择器2.2 后代选择器2.3 子选择器2.4 并集选择器2.5 伪类选择器(1)链接伪类选择器(2):focus伪类选择器2.6 复合选择器总结1. Emmet语法1.1 快速生成HTML结构语法生成标签直接输入标签名按tab键即可比如 div然后tab键，就可以生成<div></div>如果想要生成多个相同标签，加上原创 2022-03-15 09:00:02 · 717 阅读 · 0 评论 -
CSS引入方式及Chrome调试工具的使用（包含综合案例：新闻页面）
文章目录1. CSS的引入方式1.1 内部样式表1.2 行内样式表1.3 外部样式表1.4 CSS引入方式总结2. 综合案例-新闻页面3. Chrome调试工具3.1 打开调试工具3.2 使用调试工具1. CSS的引入方式按照CSS样式书写的位置（或者引入的方式），CSS 样式表可以分为三大类：行内样式表（行内式）内部样式表（嵌入式）外部样式表（链接式）1.1 内部样式表内部样式表（内嵌样式表）是写到html页面内部。是将所有的CSS代码抽取出来，单独放到一个<style>标原创 2022-03-12 13:14:59 · 1128 阅读 · 0 评论 -
CSS字体属性与文本属性详解
文章目录1. CSS字体属性1.1 字体系列1.2 字体大小1.3 字体粗细1.4 字体样式1.5 字体复合属性1.6 字体属性总结2. CSS文本属性2.1 文本颜色2.2 对齐文本2.3 装饰文本2.4 文本缩进2.5 行间距2.6 文本属性总结1. CSS字体属性CSS Fonts (字体)属性用于定义字体系列、大小、粗细、和文字样式（如斜体）。1.1 字体系列CSS 使用font-family属性定义文本的字体系列。使用多个字体时，各种字体之间必须使用英文状态下的逗号隔开（使用多个字原创 2022-03-11 17:11:11 · 1581 阅读 · 0 评论 -
CSS语法规范及基础选择器详解
文章目录1. CSS简介1.1 HTML的局限性1.2 CSS-网页的美容师1.3 CSS语法规范1.4 CSS代码风格2. CSS基础选择器2.1 CSS选择器的作用2.2 选择器分类2.3 标签选择器2.4 类选择器2.5 案例2.6 类选择器-多类名2.7 id选择器2.8 通配符选择器2.9 基础选择器小结1. CSS简介CSS的主要使用场景就是美化网页,布局页面的。1.1 HTML的局限性说起HTML，这其实是个非常单纯的家伙，他只关注内容的语义。比如<h1>表明这是一个大标原创 2022-03-11 10:54:06 · 481 阅读 · 0 评论 -
HTML标签重点总结+案例
文章目录1. HTML 语法规范1.1 基本语法概述1.2 标签关系2. HTML基本结构标签2.1 第一个HTML网页2.2 基本结构标签总结3. 网页开发工具3.1 文档类型声明标签3.2 lang语言种类3.3 字符集4. HTML常用标签4.1 标签语义4.2 标题标签```` - ````4.3 段落和换行标签4.4 文本格式化标签4.5 ````和````标签4.6 图像标签和路径(1)图像标签(2)路径4.7 超链接标签(1)链接的语法格式(2)链接分类5. HTML中的注释和特殊字符5.1原创 2022-03-09 10:43:22 · 905 阅读 · 0 评论 -
Echarts快速入门
Echarts快速入门。原创 2021-11-17 08:51:01 · 1624 阅读 · 2 评论