CSS高级技巧——精灵图 字体图标 CSS三角 CSS用户界面样式 Vertical-align属性应用 溢出文字省略号显示 常见的布局技巧

CSS高级技巧——精灵图 字体图标 CSS三角 CSS用户界面样式 Vertical-align属性应用 溢出文字省略号显示 常见的布局技巧

  • 1.精灵图
  • 2.字体图标
  • 3.CSS三角(案例中也有字体图标)
  • 4.溢出文字省略号显示
  • 5.常见的布局技巧
    • 1》margin负值得巧妙应用
    • 2》文字围绕浮动元素显示
    • 3》行内块元素妙用
    • 4》CSS三角妙用(直角三角形)
    • 案例

1.精灵图

1.为什么需要精灵图

   为了有效减轻服务器接收和发送请求的次数,提高页面的加载技术,出现了CSS精灵技术

核心原理:将网页一些小背景图片整合的一张大图上,这样服务器只需要一次请求就ok了

2.精灵图的使用

3.精灵图拼出自己的名字(需要准备一张图(abcd.png))

Title

2.字体图标

    1》使用场景

         

    2》字体图标下载

           icomoon字库  网站: http://icomoon.io

           阿里iconfont字库 网站:http://www.iconfont.cn/

   3》字体图标的使用

          以icomoon字库为例:点击

         

            下载完成后解压文件

          1.字体图标引入(将Fonts文件夹,移动到项目的根目录中)

           

           

        2.在style中加入            

    @font-face {
     font-family: 'icomoon';
     src:  url('fonts/icomoon.eot?qop2mz');
     src:  url('fonts/icomoon.eot?qop2mz#iefix') format('embedded-opentype'),
     url('fonts/icomoon.ttf?qop2mz') format('truetype'),
     url('fonts/icomoon.woff?qop2mz') format('woff'),
     url('fonts/icomoon.svg?qop2mz#icomoon') format('svg');
     font-weight: normal;
     font-style: normal;
     font-display: block;
    }
      3.用的时候将标签的字体设置为

         font-family: 'icomoon';

     4.如果需要在加入图标(也可以重新下载)

3.CSS三角(案例中也有字体图标)

Title 
 CSS用户界面样式 1》鼠标样式
  • 小白 默认
  • 小手
  • 移动
  • 文本
  • 禁止
2》轮廓线(outline) ,可拖动大小(resize) /*表单*/

Vertical-align属性应用
1》实现行内块文字垂直居中(只针对行元素和行内块元素)

      图片和表单都属于行内块元素,默认的vertical-align是基线对齐(会让图片下方有一定空隙)  

      

     

    lishi 

    BUG 图片底侧会有空白缝隙(默认的vertical-align是基线对齐)(会让图片下方有一定空隙)

     1.设置vertical-align:middle

     2.转换为块级元素

4.溢出文字省略号显示

     1》单行文本溢出省略号显示

 /*1强制一行内显示,不换行 默认为normal*/
   white-space: nowrap;
 /*2.溢出部分隐藏*/
   overflow: hidden;
 /*3.溢出文不省略号显示*/
   text-overflow: ellipsis;
     2》多行文本溢出省略号显示

5.常见的布局技巧

1》margin负值得巧妙应用

 ul li{
  position: relative;
  float: left;
  list-style: none;
  height: 200px;
  width: 200px;
  background-color: royalblue;
  border: 1px solid red;
  margin: -1px;
}
li:hover{
  z-index: 1;
  border: 1px solid pink;
}

2》文字围绕浮动元素显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
     
            height: 638px;
            width: 1078px;
            background-color: pink;
            margin: 0 auto;
        }
        .box .img1 {
     
            float: left;
            padding-right: 20px;
        }

        .box .img1 img {
     
            height: 638px;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="img1">
        <img src="img/abcd.jpg" alt="">
    </div>
    <p>x你色if都是覅值US发布值四儿UR大V纳斯入党聚四百度v
        x你色if都是覅值US发布值四儿UR大V纳斯入党聚四百度v
        x你色if都是覅值US发布值四儿UR大V纳斯入党聚四百度v
        x你色if都是覅值US发布值四儿UR大V纳斯入党聚四百度v
        x你色if都是覅值US发布值四儿UR大V纳斯入党聚四百度v x
        你色if都是覅值US发布值四儿UR大V纳斯入党聚四百度v
        x你色if都是覅值US发布值四儿UR大V纳斯入党聚四百度v
        x你色if都是覅值US发布值四儿UR大V纳斯入党聚四百度v
        x你色if都是覅值US发布值四儿UR大V纳斯入党聚四百度v </p>
</div>
</body>
</html>
        盒子加浮动后,文字会围绕边缘显示

3》行内块元素妙用

  1.行内块元素之间会自动有缝隙

  2.给父元素添加center,行内元素变回居中

4》CSS三角妙用(直角三角形)

.box {
position: absolute;
height: 0;
width: 0;
border-color: transparent red transparent transparent ;
border-style: solid;
border-width: 60px 20px 0 0 ;

}

案例


     

  代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
     
            margin: 0;
            padding: 0;
        }
        .box {
     

            height: 60px;
            width: 200px;
            border: 1px solid red;
            margin:  auto;
        }

        .box .box1 {
     
            position: relative;
            float: left;
            height: 60px;
            line-height: 60px;
            text-indent: 2em;
            padding-right: 20px;
            background-color: red;
        }
        .box .box1 i{
     
            position: absolute;
            height: 0;
            width: 0;
            border-color:  transparent white transparent transparent ;
            border-style: solid;
            border-width: 60px 20px 0 0  ;
        
        }
        .box .box2 {
     
            line-height: 60px;
            text-decoration: line-through;
            color: gainsboro;
            text-blink: 700;
        }
    </style>
</head>
<body>
<div class="box">
    <span class="box1">
         ¥ 1799<i></i>
    </span>
    <span class="box2">
       ¥ 1399
    </span>
</div>
</body>
</html>

CSS:初始化

你可能感兴趣的:(JAVA,css)