目录
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精灵图使用案例
参考代码:
<style>div {display: inline-block;margin-left: 10px;background-repeat: no-repeat;background-image: url(../jpgs/精灵图.png);}.letter1 {width: 110px;height: 115px;background-position: -491px -272px;}.letter2 {width: 61px;height: 113px;background-position: -326px -136px;}.letter3 {width: 123px;height: 118px;background-position: -249px -270px;}.letter4 {width: 109px;height: 116px;background-position: -491px -141px;}</style></head><body><div class="letter1"></div><div class="letter2"></div><div class="letter3"></div><div class="letter4"></div></body>
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';}
参考示例:
<style>/* 字体声明(复制) */@font-face {font-family: 'icomoon';src: url('fonts/icomoon.eot?hugv7x');src: url('fonts/icomoon.eot?hugv7x#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?hugv7x') format('truetype'), url('fonts/icomoon.woff?hugv7x') format('woff'), url('fonts/icomoon.svg?hugv7x#icomoon') format('svg');font-weight: normal;font-style: normal;font-display: block;}span {/* 给使用文字图标的标签声明字体 */font-family: 'icomoon';font-size: 100px;color: red;}</style></head><body><!-- 复制html文件中想要的文字图标 --><span></span></body>
展示效果:
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居中 且自带距离,方便快捷
参考代码:
<style>.box {text-align: center;}.box a {display: inline-block;width: 50px;height: 50px;background-color: #f7f7f7;border: 1px solid #ccc;text-decoration: none;color: black;line-height: 50px;text-align: center;}.box .last,.box .next {width: 100px;}.box .now {background-color: white;border: none;}.box input {width: 50px;height: 40px;border: 1px solid #ccc;outline: none;}.box button {width: 50px;height: 50px;background-color: #f7f7f7;border: 1px solid #ccc;}</style></head><body><div class="box"><a href="#" class="last"><<上一页</a><a href="#">2</a><a href="#" class="now">3</a><a href="#">4</a><a href="#">5</a><a href="#">6</a><a href="#">7</a><a href="#" class="now">...</a><a href="#" class="next">>>下一页</a> 到第<input type="text">页<button>确定</button></div></body>
效果:
7.4CSS三角强化
7.4.1不同形状三角形的实现:
7.4.2实际案例:
效果:
参考代码:
一个大盒子里面包含小盒子(浮动的左span具有行内块元素特性)右span文字被挤开 跑到右边
再给左span中添加一个<i>设计小三角+利用父相子绝定位实现
<style>.prince {width: 160px;height: 24px;border: 1px solid red;line-height: 24px;margin: 0 auto;}.miaosha {position: relative;float: left;background-color: red;width: 90px;height: 100%;text-align: center;font-weight: 700;color: white;}.miaosha i {position: absolute;top: 0;right: 0;width: 0;height: 0;line-height: 0;font-size: 0;border-color: transparent white transparent transparent;border-style: solid;border-width: 24px 10px 0 0;}.origin {font-size: 14px;color: grey;text-decoration: line-through;}</style></head><body><div class="prince"><span class="miaosha">¥1650<i></i></span><span class="origin">¥5650</span></div></body>
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}
以后写页面的时候可以先复制粘贴