CSS - 随笔分类 - Brianxq

CSS学习35-CSS3的新特性

摘要：CSS3 的新特性 1. CSS3 的现状新增的 CSS3 特性有兼容性问题，ie9+才支持移动端支持优于 PC 端不断改进中应用相对广泛现阶段主要学习：新增选择器和盒子模型以及其他特性 2. CSS3 新增选择器 CSS3 给我们新增了选择器，可以更加便捷，更加自由的选择目标元素。属性阅读全文

posted @ 2021-06-18 17:10 Brianxq 阅读(119) 评论(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 阅读(229) 评论(0) 推荐(0)

CSS学习23-定位

摘要：CSS定位 1. 为什么需要定位浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子。定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中的某个位置，并且可以压住其他盒子。 2. 定位组成定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。定位 = 阅读全文

posted @ 2021-06-01 17:05 Brianxq 阅读(96) 评论(0) 推荐(0)

CSS学习22-学成在线案例

摘要：学成在线案例 1. 确定版心这个页面的版心是1200像素，每个版心都要水平居中对齐，可以定义版心为公共类： .w { width: 1200px; margin: 0 auto; } 2. 头部制作 1号是版心盒子header 1200 * 42 的盒子水平居中对齐，上下给一个margin值就可以阅读全文

posted @ 2021-05-28 17:40 Brianxq 阅读(166) 评论(0) 推荐(0)

CSS学习21-页面布局整体思路

摘要：页面布局整体思路为了提高网页制作的效率，布局时通常有以下的整体思路：必须确定页面的版心 ( 可视区 ) ，我们测量可得知。分析页面中的行模块，以及每个行模块中的列模块。即页面布局第一准则。一行中的列模块经常浮动布局，先确定每个列的大小，之后确定列的位置。即页面布局第二准则。制作HTML结构阅读全文

posted @ 2021-05-21 12:45 Brianxq 阅读(100) 评论(0) 推荐(0)

CSS学习20-CSS属性书写顺序

摘要：CSS属性书写顺序建议遵循一下顺序：布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）自身属性：width / height / margin / padding 阅读全文

posted @ 2021-05-21 12:38 Brianxq 阅读(63) 评论(0) 推荐(0)

CSS学习19-清除浮动

摘要：清除浮动 1. 为什么要清除浮动？由于父级元素很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父子盒子高度为0时，就会影响下面的标准流盒子。由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响示例代码 <!DOCTYPE html> <html lang="en"> 阅读全文

posted @ 2021-05-20 12:43 Brianxq 阅读(90) 评论(0) 推荐(0)

CSS学习18-常见网页布局

摘要：常见网页布局 1. 常见网页布局示例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name= 阅读全文

posted @ 2021-05-20 12:05 Brianxq 阅读(150) 评论(0) 推荐(0)

CSS学习17-浮动

摘要：浮动 1. 传统网页布局的三种方式网页布局的本质——用CSS来摆放盒子。把盒子摆到相应位置. CSS提供了三种传统布局方式(简单说，就是盒子如何进行排列顺序)：普通留 ( 标准流 ) 浮动定位这三种布局方式都是用来摆放盒子的，盒子摆到合适位置，布局自然就完成了。 **注意：**实际开发中，一阅读全文

posted @ 2021-05-19 16:41 Brianxq 阅读(105) 评论(0) 推荐(0)

CSS学习16-文字阴影

摘要：文字阴影在CSS3中，我们可以使用 text-shadow 属性将阴影应用于文本。语法： text-shadow: h-shadow v-shadow blur color; 值描述 h-shadow 必需。水平阴影的位置。允许负值。 v-shadow 必需。垂直阴影的位置。允许负值。 blu 阅读全文

posted @ 2021-05-18 12:47 Brianxq 阅读(170) 评论(0) 推荐(0)

Brianxq

随笔分类 - CSS

公告