随笔分类 -  CSS

1 2 下一页
flex布局
摘要：阮一峰flex布局教程 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 上面链接访问不了的话可以看下面这个，内容一样的 https://www.runoob.com/w3cnote/flex-grammar.html 一篇文章带你掌握 阅读全文
posted @ 2023-05-24 11:41 GHNSL 阅读(21) 评论(0) 推荐(0)
常见问题
摘要：1. 本应该在左侧的文字跑到右侧去了 可能是上面的盒子有浮动且超出来一点导致的,文字都是围绕着浮动的盒子 2. 鼠标放到盒子上的hover效果导致盒子会'抖一下',例如下面的鼠标放到li上面显示红色边框,可以将原来的边框颜色设置为透明 transparent,这样hover效果之后就是边框颜色变成红 阅读全文
posted @ 2020-11-07 21:02 GHNSL 阅读(74) 评论(0) 推荐(0)
26 CSS3过渡
摘要：过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。过渡动画： 是从一个状态 渐渐的过渡到另外一个状态可以让我们页面更好看，更动感十足，虽然 低版本浏览器不支持（ie9以 阅读全文
posted @ 2020-10-21 23:23 GHNSL 阅读(114) 评论(0) 推荐(0)
25 CSS3盒子模型
摘要：CSS3 中可以通过 box-sizing 来指定盒模型，有2个值：即可指定为 content-box、border-box，这样我们计算盒子大小的方式就发生了改变。可以分成两种情况：1.box-sizing: content-box 盒子大小为 width + padding + border （ 阅读全文
posted @ 2020-10-21 07:48 GHNSL 阅读(73) 评论(0) 推荐(0)
24 CSS3新增选择器
摘要：CSS3 给我们新增了选择器，可以更加便捷，更加自由的选择目标元素。1.属性选择器2.结构伪类选择器3.伪元素选择器 1.属性选择器 属性选择器可以根据元素特定属性的来选择元素。 这样就可以不用借助于类或者id选择器。 注意：类选择器、属性选择器、伪类选择器，权重为 10。 <!DOCTYPE ht 阅读全文
posted @ 2020-10-18 15:39 GHNSL 阅读(127) 评论(0) 推荐(0)
23 html5新特性
摘要：1.HTML5新特性 HTML5 的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。 这些新特性都有兼容性问题，基本是 IE9+ 以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性。 1.1 HTML5 新增的语义化标签 <header>：头部标签 阅读全文
posted @ 2020-10-14 07:38 GHNSL 阅读(334) 评论(0) 推荐(0)
22 css初始化
摘要：不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异，照顾浏览器的兼容，我们需要对CSS 初始化简单理解： CSS初始化是指重设浏览器的样式。 (也称为CSS reset）每个网页都必须首先进行 CSS初始化。这里我们以 京东CSS初始化代码为例。 进入京东首页: 查看网 阅读全文
posted @ 2020-10-13 23:04 GHNSL 阅读(112) 评论(0) 推荐(0)
21 布局技巧
摘要：1. margin负值运用 让右边框是一样的粗细而且鼠标划过盒子的时候边框高亮 1.让每个盒子margin 往左侧移动 -1px 正好压住相邻盒子边框2.鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有有定位，则加相对定位（保留位置），如果有定位，则加z-index） <!DOCTYPE h 阅读全文
posted @ 2020-10-13 22:50 GHNSL 阅读(197) 评论(0) 推荐(0)
20 溢出的文字显示省略号
摘要：1. 单行文本溢出显示省略号--必须满足三个条件 /*1. 先强制一行内显示文本*/ white-space: nowrap; （ 默认 normal 自动换行） /*2. 超出的部分隐藏*/ overflow: hidden; /*3. 文字用省略号替代超出的部分*/ text-overflow: 阅读全文
posted @ 2020-10-10 16:55 GHNSL 阅读(245) 评论(0) 推荐(0)
19 vertical-align 属性应用
摘要：CSS 的 vertical-align 属性使用场景： 经常用于设置图片或者表单(行内块元素）和文字垂直对齐。官方解释： 用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。 语法：vertical-align : baseline | top | middle | bott 阅读全文
posted @ 2020-10-09 22:42 GHNSL 阅读(122) 评论(0) 推荐(0)
18 CSS三角 用户界面样式
摘要：CSS三角 网页中常见一些三角形，使用 CSS 直接画出来就可以，不必做成图片或者字体图标。一张图， 你就知道 CSS 三角是怎么来的了, 做法如下： div { width: 0; height: 0; line-height: 0; font-size: 0; border: 50px soli 阅读全文
posted @ 2020-10-09 22:35 GHNSL 阅读(125) 评论(0) 推荐(0)
17 字体图标
摘要：1 字体图标的产生 字体图标使用场景： 主要用于显示网页中通用、常用的一些小图标。 精灵图是有诸多优点的，但是缺点很明显。1.图片文件还是比较大的。2.图片本身放大和缩小会失真。3.一旦图片制作完毕想要更换非常复杂。 此时，有一种技术的出现很好的解决了以上问题，就是字体图标 iconfont。字体图 阅读全文
posted @ 2020-10-08 19:00 GHNSL 阅读(203) 评论(0) 推荐(0)
16 精灵图
摘要：1 为什么需要精灵图 一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。因此，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了 CSS 精灵技术（也称 CSS Sprites 阅读全文
posted @ 2020-10-08 15:57 GHNSL 阅读(129) 评论(0) 推荐(0)
15 元素的显示与隐藏
摘要：类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现！本质：让一个元素在页面中隐藏或者显示出来。 1.display 显示隐藏2.visibility 显示隐藏3.overflow 溢出显示隐藏 1 display 属性display 属性用于设置一个元素应如何显示。 displ 阅读全文
posted @ 2020-10-08 15:49 GHNSL 阅读(131) 评论(0) 推荐(0)
14 网页布局总结
摘要：通过盒子模型，清楚知道大部分html标签是一个盒子。 通过CSS浮动、定位 可以让每个盒子排列成为网页。 一个完整的网页，是标准流、浮动、定位一起完成布局的，每个都有自己的专门用法。 1. 标准流可以让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准流布局。 2. 浮动可以让多个块级元素一行显示 阅读全文
posted @ 2020-10-08 12:22 GHNSL 阅读(133) 评论(0) 推荐(0)
13 定位
摘要：1.为什么需要定位 提问： 以下情况使用标准流或者浮动能实现吗？1. 某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子. 2. 当我们滚动窗口的时候，盒子是固定屏幕某个位置的。 以上效果，标准流或浮动都无法快速实现，此时需要定位来实现。所以：1.浮动可以让多个块级盒子一行没有缝隙排列显示， 阅读全文
posted @ 2020-09-23 23:21 GHNSL 阅读(149) 评论(0) 推荐(0)
12.页面设计思路
摘要：1.准备工作 采取结构与样式相分离思想：1. 创建 目录文件夹 (用于存放我们这个页面的相关内容),例如study目录。2. study 目录内新建 images 文件夹，用于保存图片。3. 新建首页文件 index.html（以后我们的网站首页统一规定为 index.html )。4. 新建 st 阅读全文
posted @ 2020-09-18 07:28 GHNSL 阅读(767) 评论(0) 推荐(0)
11. PS切图
摘要：常见的图片格式 PS 有很多的切图方式：图层切图、切片切图、PS 插件切图等。 1 图层切图最简单的切图方式：右击图层 ->导出 PNG 切片。 下的ps不好使，以后再说吧 阅读全文
posted @ 2020-09-16 23:21 GHNSL 阅读(114) 评论(0) 推荐(0)
10. 清除浮动
摘要：1. 为什么要清除浮动 由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为 0 时，就会影响下面的标准流盒子。  由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响 2 .清除浮动本质 清除浮动的本质是清除浮动元素造成的影响 如果父盒子本身有 阅读全文
posted @ 2020-09-14 22:49 GHNSL 阅读(153) 评论(0) 推荐(0)
7.圆角边框,盒子阴影,文字阴影
摘要：1. 圆角边框 在 CSS3 中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。 border-radius 属性用于设置元素的外边框圆角。 语法： border-radius:length; 参数值可以为数值或百分比的形式 如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可 阅读全文
posted @ 2020-09-11 22:43 GHNSL 阅读(272) 评论(0) 推荐(0)

1 2 下一页