1500字范文 > CSS 6 精灵图字体图标 CSS三角用户界面样式 vertical-align 溢出文字省略号常见布局技巧

CSS 6 精灵图字体图标 CSS三角用户界面样式 vertical-align 溢出文字省略号常见布局技巧

时间：2024-03-18 22:26:22

1.精灵图

1.1为什么需要精灵图

1.2精灵图（sprites）的使用

1.3精灵图使用案例

2.字体图标

2.1字体图标的产生

2.2字体图标的优点

2.3字体图标的下载

2.4字体图标的引用（以icomoon为例）

2.5字体图标的追加（以icomoon为例）

3.CSS三角

3.1三角的实现

3.2京东三角

4.CSS用户界面样式

4.1什么时界面样式

4.2鼠标样式

4.3轮廓线outline

4.4防止拖拽文本域resize

5.vertical-align 属性应用

5.1图片、表单和文字对齐

5.2解决图片底部默认空白缝隙问题

6.溢出的文字省略号显示

6.1单行文本溢出显示省略号

6.2多行文本溢出显示省略号

7.常见布局技巧

7.1margin负值的运用

7.2文字围绕浮动元素

7.3行内块巧妙运用

7.4CSS三角强化

7.4.1不同形状三角形的实现：

7.4.2实际案例：

8.CSS初始化

1.精灵图

1.1为什么需要精灵图

精灵技术目的：

为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度。

1.2精灵图（sprites）的使用

1.3精灵图使用案例

参考代码：

2.字体图标

2.1字体图标的产生

2.2字体图标的优点

2.3字体图标的下载

2.4字体图标的引用（以icomoon为例）

第一步：

下载压缩文件后把fonts文件夹放在页面根目(建议把全部文件放在页面根目录下面，否则可能demo.html页面出错)

录下

font文件中的4个字体文件：

第二步：

字体文件引入到CSS样式中

以上样式可以在压缩文件中style.css记事文本中复制

第三步：

打开压缩文件中的demo.html复制想要的图标到html标签中

第四步：

css中给使用文字图标的标签声明字体(复制上面)

span {font-family: 'icomoon';}

参考示例：

展示效果：

2.5字体图标的追加（以icomoon为例）

替换：把新的fonts文件夹在原根目录地址更换，以前的压缩包可以删除

3.CSS三角

3.1三角的实现

div {width: 0;height: 0;/* 下两行代码为照顾低版本浏览器 */line-height: 0;font-size: 0;border: 50px solid transparent;border-left-color: pink;}

3.2京东三角

三角+子绝父相定位

<style>.sanjiao {position: absolute;top: -10px;right: 10px;width: 0;height: 0;/* 下两行代码为照顾低版本浏览器 */line-height: 0;font-size: 0;border: 5px solid transparent;border-bottom-color: pink;}.jd {position: relative;width: 120px;height: 249px;background-color: pink;}</style></head><body><div class="jd"><div class="sanjiao"></div></div></body>

4.CSS用户界面样式

4.1什么时界面样式

4.2鼠标样式

4.3轮廓线outline

4.4防止拖拽文本域resize

5.vertical-align 属性应用

5.1图片、表单和文字对齐

5.2解决图片底部默认空白缝隙问题

例：

6.溢出的文字省略号显示

6.1单行文本溢出显示省略号

6.2多行文本溢出显示省略号

前端用此技巧需要考虑文字数目、盒子宽度、高度、通过f12调整因此更推荐让后台写

7.常见布局技巧

巧妙利用一个技术更好更快的布局：

1.margin负值的运用

2.文字围绕浮动元素

3.行内块的巧妙运用

4.css三角强化

7.1margin负值的运用

如上案例，每个盒子间有细线边框，但如如果直接加，会导致重合处边框叠加变粗

因此，我们可以利用margin负值让重叠的边框结合

例：

<style>ul li {/*代码会先执行浮动再向左移1px,因此能实现对齐同时结合边框*/float: left;list-style: none;width: 150px;height: 200px;border: 1px solid red;margin-left: -1px;}</style></head><body><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul></body>

2.如何实现让鼠标经过此边框时改变样式（若是直接hover 会导致旁边盒子边框压住了一边的样式鼠标经过时只有3边变成蓝色）

若是此时盒子没有定位，添加定位relative（相对于当前位置，不会脱标）定位会压住标准流和浮动

若是盒子已经有浮动了，就加z-index：1；（定位没有指定z-index的话为默认）

参考示例：

<style>ul li {position: relative;float: left;list-style: none;width: 150px;height: 200px;border: 1px solid red;margin-left: -1px;}/* ul li:hover {position: relative;border: 1px solid blue;} */ul li:hover {z-index: 1;border: 1px solid blue;}</style></head><body><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul></body>

7.2文字围绕浮动元素

示例：在一个大盒子里面放一个div.pic装图片 p装文字利用div.pic的浮动使文字围绕，通过边距的调整达到上图效果。

7.3行内块巧妙运用

如上红框内示例，该部分需要居中且每个页数之间有小距离

而行内块元素可以设置text-align：center居中且自带距离，方便快捷

参考代码：

效果：

7.4CSS三角强化

7.4.1不同形状三角形的实现：

7.4.2实际案例：

效果：

参考代码：

一个大盒子里面包含小盒子（浮动的左span具有行内块元素特性）右span文字被挤开跑到右边

再给左span中添加一个<i>设计小三角+利用父相子绝定位实现

8.CSS初始化

以京东初始化为例：

/* 所有标签的内外边距清零 */* {margin: 0;padding: 0}/* em 和 i 斜体的文字不倾斜 */em,i {font-style: normal}/* 去掉 li 的小圆点 */li {list-style: none}img {/* border 0 照顾低版本浏览器如果图片外面包含了链接会有边框的问题 */border: 0;/* 取消图片底侧有空白缝隙的问题 */vertical-align: middle}button {/* 当鼠标经过button 按钮的时候,鼠标变成小手 */cursor: pointer}a {color: #666;text-decoration: none}a:hover {color: #c81623}button,input {/* "\5B8B\4F53" 就是宋体的意思这样浏览器兼容性比较好 */font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif}body {/* 抗锯齿形让文字显示的更加清晰 */-webkit-font-smoothing: antialiased;background-color: #fff;font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;color: #666}.hide,.none {display: none}/* 清除浮动 */.clearfix:after {visibility: hidden;clear: both;display: block;content: ".";height: 0}.clearfix {*zoom: 1}

以后写页面的时候可以先复制粘贴

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。