06 2021 档案

CSS学习35-CSS3的新特性
摘要：CSS3 的新特性 1. CSS3 的现状 新增的 CSS3 特性有兼容性问题，ie9+才支持 移动端支持优于 PC 端 不断改进中 应用相对广泛 现阶段主要学习：新增选择器和盒子模型以及其他特性 2. CSS3 新增选择器 CSS3 给我们新增了选择器，可以更加便捷，更加自由的选择目标元素。 属性 阅读全文
posted @ 2021-06-18 17:10 Brianxq 阅读(119) 评论(0) 推荐(0)
HTML学习05-HTML5的新特性
摘要：HTML5 的新特性 HTML5的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。 这些新特性都有兼容性问题，基本是IE9+以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性。 声明：新特性增加了很多，但是我们专注于开发常用的新特性。 1. HTML5 阅读全文
posted @ 2021-06-10 17:09 Brianxq 阅读(101) 评论(0) 推荐(0)
CSS学习34-初始化
摘要：CSS 初始化 不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异，照顾浏览器的兼容，我们需要对CSS初始化。 简单理解：CSS初始化是指重设浏览器的样式。 ( 也称为CSS reset ) 每个网页都必须进行CSS初始化。 这里我们以 京东css初始化代码为例。 京东 阅读全文
posted @ 2021-06-08 17:22 Brianxq 阅读(87) 评论(0) 推荐(0)
CSS学习33-常见布局技巧
摘要：CSS 常见布局技巧 1. margin 负值运用 让每个盒子margin 往左侧移动 -1px，正好压住相邻盒子的边框 示例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-U 阅读全文
posted @ 2021-06-08 17:14 Brianxq 阅读(101) 评论(0) 推荐(0)
CSS学习32-溢出的文字省略号显示
摘要：溢出的文字省略号显示 1. 单行文本溢出显示省略号 必须满足三个条件 /* 1. 先强制一行内显示文本 */ white-space: nowrap; ( 默认 normal 自动换行 ) /* 2. 溢出的部分隐藏起来 */ overflow: hidden; /* 3. 文字溢出的时候用省略号来 阅读全文
posted @ 2021-06-07 18:09 Brianxq 阅读(83) 评论(0) 推荐(0)
CSS学习31-vertical-align属性应用
摘要：vertical-align 属性应用 CSS 的 vertical-align 属性使用场景：经常用于设置图片或者表单 ( 行内块元素 ) 和文字垂直对齐。 官方解释：用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。 语法： vertical-align: baselin 阅读全文
posted @ 2021-06-07 17:02 Brianxq 阅读(95) 评论(0) 推荐(0)
CSS学习30-用户界面样式
摘要：CSS 用户界面样式 1. 什么是界面样式 所谓的界面样式，就是更改一些用户操作样式，以便提高更好的用户体验。 更改用户的鼠标样式 表单轮廓 防止表单域拖拽 2. 鼠标样式 cursor 语法： li {cursor: pointer; } 设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形 阅读全文
posted @ 2021-06-07 11:57 Brianxq 阅读(95) 评论(0) 推荐(0)
CSS学习29-CSS三角
摘要：CSS 三角 网页中常见一些三角形，使用 CSS 直接画出来就可以，不必做成图片或者字体图标。 语法： div { width: 0; height: 0; line-height: 0; font-size: 0; border: 50px solid transparent; border-le 阅读全文
posted @ 2021-06-05 17:00 Brianxq 阅读(76) 评论(0) 推荐(0)
CSS学习28-字体图标
摘要：CSS 字体图标 1. 字体图标的产生 字体图标的使用场景：主要用于显示网页中通用、常用的一些小图标。 精灵图是有诸多优点，但是缺点很明显： 图片文件还是比较大的 图片本身放大和缩小会失真 一旦图片制作完毕想要非常复杂 此时，有一种技术的出现很好的解决了以上问题，就是字体图标iconfront。 字 阅读全文
posted @ 2021-06-04 16:39 Brianxq 阅读(194) 评论(0) 推荐(0)
CSS学习27-精灵图
摘要：CSS精灵图 1. 为什么需要精灵图 一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。 因此，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了 CSS精灵技术 ( 也称为 阅读全文
posted @ 2021-06-03 17:20 Brianxq 阅读(224) 评论(2) 推荐(1)
CSS学习26-元素的显示与隐藏
摘要：元素的显示与隐藏 类似网站广告，当我们点关闭就不见了，但是我们重新刷新页面，会重新出现！ 本质：让一个元素在页面中隐藏或者显示出来。 有如下三种方式： display 显示隐藏 visibility 显示隐藏 overflow 溢出显示隐藏 1. display 显示隐藏元素 display属性用于 阅读全文
posted @ 2021-06-03 11:42 Brianxq 阅读(167) 评论(0) 推荐(0)
CSS学习25-网页布局总结
摘要：CSS网页布局总结 通过盒子模型，我们可以清楚地知道大部分HTML标签是一个盒子。 同时，通过CSS浮动、定位可以让每个盒子排列成网页。 一个完整的网页，是标准流、浮动、定位一起完成布局的，它们都有自己的专门用法。 标准流 可以让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准流布局。 浮动 可 阅读全文
posted @ 2021-06-02 12:21 Brianxq 阅读(70) 评论(0) 推荐(0)
CSS学习24-淘宝焦点布局图
摘要：CSS定位综合案例-淘宝焦点布局图 大盒子类名为：tb-promo 淘宝广告 里面先放一张图片 左右两个按钮 用 a链接 就好了。 左箭头 prev 右箭头 next 底侧小圆点用 ul 来做。类名为 promo-nav 示例代码 <!DOCTYPE html> <html lang="en"> < 阅读全文
posted @ 2021-06-02 12:14 Brianxq 阅读(228) 评论(0) 推荐(0)
CSS学习23-定位
摘要：CSS定位 1. 为什么需要定位 浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子。 定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中的某个位置，并且可以压住其他盒子。 2. 定位组成 定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。 定位 = 阅读全文
posted @ 2021-06-01 17:05 Brianxq 阅读(95) 评论(0) 推荐(0)