CSS-高级技巧

精灵图

精灵技术:为了有效地减少服务器接收和发送请求的次数,提高页面的加载速度
核心原理:将网页中的一些小背景图像整合到一张大图中,这样服务器只需要一次请求就可以了

1.精灵图的使用


字体图标

1.字体图标的产生和优点

2.字体图标的下载

icomoon字库    Icon Font & SVG Icon Sets ❍ IcoMoon   

阿里iconfont字库    iconfont-阿里巴巴矢量图标库

3.字体图标的引入

>扩展 文件字体格式

 4.字体图标的追加


CSS三角

->

由上可知,只需将其余三条边的边框改成透明色,其他不变,即可做成三角形

->


 CSS用户界面样式

 1.更改用户的鼠标样式 cursor

 

2.取消表单轮廓 outline

 

 3.防止拖拽文本域 resize


 vertical-align属性应用

 1.图片、表单和文字对齐

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

空白缝隙存在:若有文字就能看得更清楚(是基线和底线距离的空白)


溢出文字省略号显示

1.单行文本溢出省略号

2.多行文本溢出省略号


 常见布局技巧

 1.margin负值的应用

 2.文字围绕浮动元素

3.行内块巧妙运用

4.CSS三角的强化应用


CSS初始化

/* 把我们所有标签的内外边距清零 */
*{
    margin:0;
    padding:0;
}
/* i和em斜体的文字不倾斜 */
i,
em{
    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;
}

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值