乐趣区

关于css:CSS基础三

jiezi

11、界面款式

常见的界面款式：

  1. 更改用户的鼠标款式
  2. 表单轮廓
  3. 避免表单域的拖拽
  4. 解决图片或表单问题
  5. 溢出操作

11.1 鼠标款式 cursor

li {
    /* 小手款式 */
    cursor: pointer;
}

设置在对象上挪动时的鼠标款式：

  • default：小白（默认）
  • pointer：小手
  • `move：：挪动
  • text：文本
  • not-allowed：禁止

11.2 轮廓线 outline

给表单增加 outline:0 或 outline:onne 款式后，就能够去掉默认的蓝色边框

input 文本框就会这个默认的蓝色边框款式，可用 outline:0 去除掉 

input {outline: 0;}

11.3 避免拖拽文本域 resize

文本域 textarea 默认是能够拖拽的，然而理论开发中，是不容许的，可增加 resize: none;

textarea {resize:none;}

11.4 vertical-align 属性利用

1、设置图片或表单域文字垂直对齐

vertical-align 翻译过去就是垂直对齐，常常用于设置图片表单（行内块元素）与文字垂直对齐 

vertical-align: baseline | top | middle | bottom
  • baseline：元素搁置在父元素的基线上， 默认
  • top：把元素的顶端与行中最高元素的顶端对齐
  • middle：把次元素搁置在父元素的中部
  • bottom：把元素的底端与最低元素的底端对齐 
<style>
    img {
        /* 两头对齐 */
        vertical-align: middle;
    }
</style>
<body>
    <img src="..." alt=""> 我失去过
</body>

2、解决图片底部默认空白间隙问题

Bug：图片底部会有一个空白间隙，起因是行内块元素会和文字的底部基线对齐

解决办法：

  1. 给图片 img 增加：vertical-align: top | middle | bottom（提倡应用）
  2. 把图片转换为块级元素 display: block;

11.5 溢出文字处理

1、单行文本溢出

  1. 强制在一行内显示：white-space: nowrap;（默认是 normal，主动换行）
  2. 超出的局部暗藏：overflow: hidden;
  3. 用省略号代替超出的局部：text-overflow: ellipsis;

2、多行文本溢出 

1. 超出的局部暗藏：overflow: hidden;

2. 用省略号代替超出的局部：text-overflow: ellipsis;

3. 弹性伸缩盒子模型显示：display: -webkit-box;

4. 限度在一个块级元素显示的文本行数：-webkit-line-clamp: 2

5. 设置或检索伸缩盒子的对象的子元素的排序形式：-webkit-box-orient: vertical
  • 多行文本溢出显示省略号，有较大的兼容性问题，适宜 webKit 浏览器或挪动端
  • 更举荐让后盾人员来做这个

12、精灵图

在网页中，往往都会有一些图片来作为润饰，然而有些网站图片过多时（如 电商网页），服务器会频繁地接管和发送图片，造成服务器压力过大，升高页面的加载速度

为了解决这个问题，呈现了 CSS 精灵技术，所谓精灵技术，就是将一些小图片整合到一张大图片上，这样服务器只须要发送一次申请即可

所以，精灵技术的目标就是：为了无效地缩小服务器频繁接管和发送申请的次数，进步页面的加载速度

留神：精灵图针对的是小图片

精灵图的应用

  1. 获取背景图片的带大小，以及坐标
  2. 利用 background-position 挪动到图片的地位
  3. 挪动的间隔就是图片的 x 和 y 坐标；个别都是往左上角挪动，所以数值时负的

具体方法：

  • 用 width 和 height 设置图片的大小（真是的图片大小）
  • 用 background 导入图片，设置具体坐标

栗子：

.sprites {
    width: 60px;
    height: 60px;
    margin: 50px auto;
    /* 背景大图片 不平铺 小图片的坐标 */
    background: url(...) no-repeat -155px -106px;
}

13、字体图标 iconfont

精灵图有诸多长处，然而毛病也显著：图片大、制作麻烦、图片自身放大和放大会失真

所以字体图标就是来补救精灵图的毛病，长处：

  • 轻量级：图片小
  • 灵活性：实质是文字，能够扭转色彩、增加暗影、通明成果、旋转等等
  • 兼容性：简直反对所有浏览器

精灵图和字体图标就是利用在小图片上：

  • 简单的小图片，用精灵图
  • 简略的小图片，用字体图标

实质：是文字

应用：

  1. 字体图片下载
  2. 引入（引入到 html 页面中）
  3. 字体图片的追加

13.1 字体图片下载

  1. icomoon 网站：icomoon 字库：http://icomoon.io
  2. 阿里字库：http：//www.iconfont.cn

13.2 字体图片引入

三个步骤：

  1. 把下载包外面的 fonts 文件夹放入页面根目录里下

  2. 在 CSS 款式中全局申明字体：简略了解吧这些字体文件通过 CSS 引入到咱们页面中 

    @font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?p4ssmb');
  src:  url('fonts/icomoon.eot?p4ssmb#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?p4ssmb') format('truetype'),
    url('fonts/icomoon.woff?p4ssmb') format('woff'),
    url('fonts/icomoon.svg?p4ssmb#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

  3. html 标签内增加小图标（复制小图标到标签中）

    <span>  </span>

14、CSS 三角

css 三角 即用纯 css 做一个三角，不用做成图片或者字体图标

其实是利用了边框

  1. 首先设置 width: 0; height: 0;
  2. 而后给它设置一个边框，留神：色彩为通明
  3. 而后给任意一侧的边框上色就能够了 
.one {
    width: 0;
    height: 0;
    /* 设置边框为通明色 */ 
    border: 100px solid transparent;
    /* 令其上边框为粉色 */
    border-top-color: pink;
}

退出移动版