当前栏目: [前端开发基础]您现在的位置是:成都seo > 前端学习 > 前端开发基础 > 正文

前端基础学习第十八天

2020-04-18 23:48前端开发基础 人已围观文章来源:未知文章作者:admin

简介字体图片使用; 字体图标的使用 -------------------精灵图使用效果-------------------------------- -------------------精灵图使用源...

字体图片使用;
 
字体图标的使用

-------------------精灵图使用效果--------------------------------
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  







-------------------精灵图使用源码----------------------------
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>01.字体使用</title>
    <style>
    * {
        margin: 0;
        padding: 0;
    }
    ul {
        list-style: none;
    }
    .sprited {
        position: relative;
        width: 300px;   
        height: 300px;
        background: rgb(255, 249, 249);
        margin: 10% auto;
        /* left:-150px; */
    }
    li {
        float: left;
        width: 64px;
        height: 64px;
        margin-top: 30px;
        margin-left:20px;
        border-radius: 50%;
        border: 2px solid #ccc;
        background: url(imgs/jinglingtu.png) no-repeat;
        
    }
    
    .no1 {
        background-position: 0 0 ;
    }
    .no2 {
        background: url(imgs/jinglingtu.png) no-repeat;
        background-position: -199px 1px;
    }
    </style>
</head>
<body>
    <div class="sprited">
        <ul>
            <li class="no1"></li>
            <li class="no2"></li>
            <li class="no3"></li>
            <li class="no4"></li>
            <li class="no5"></li>
            <li class="no6"></li>
            <li class="no7"></li>
            <li class="no8"></li>
            <li class="no9"></li>
        </ul>
    </div>
</body>
</html>

-----------------------字体图标使用效果-------------------

-----------------字体图标使用源码-----------------------
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>02.字体图标引用</title>
    <style>
    /* 字体声明 */
    @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;
}
 
span {
    font-family: "icomoon";
    font-size: 18px;
    color: rgb(7, 36, 204);
    font-weight: 700;
}
    
    </style>
</head>
<body>
    <span></span>
</body>
</html>

----------------------------------------------------------------
字体图标的使用
 
@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;
}
 
span {
    font-family: "icomoon";
    font-size: 18px;
    color: rgb(7, 36, 204);
    font-weight: 700;
}
 
    <span></span>
 
 
精灵图代码多复用
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>01.字体使用</title>
    <style>
    * {
        margin: 0;
        padding: 0;
    }
    ul {
        list-style: none;
    }
    .sprited {
        position: relative;
        width: 300px;   
        height: 300px;
        background: rgb(255, 249, 249);
        margin: 10% auto;
        /* left:-150px; */
    }
    li {
        float: left;
        width: 64px;
        height: 64px;
        margin-top: 30px;
        margin-left:20px;
        border-radius: 50%;
        border: 2px solid #ccc;
        background: url(imgs/jinglingtu.png) no-repeat;
        
    }
    
    .no1 {
        background-position: 0 0 ;
    }
    .no2 {
        background: url(imgs/jinglingtu.png) no-repeat;
        background-position: -199px 1px;
    }
    </style>
</head>
<body>
    <div class="sprited">
        <ul>
            <li class="no1"></li>
            <li class="no2"></li>
            <li class="no3"></li>
            <li class="no4"></li>
            <li class="no5"></li>
            <li class="no6"></li>
            <li class="no7"></li>
            <li class="no8"></li>
            <li class="no9"></li>
        </ul>
    </div>
</body>
</html>
 
 
1.字体图标下载
 
2.字体图标的引入
下载网站:
 
icmoon字库 http://icomoon.io
 
阿里iconfont 字库 http://www.iconfont.cn/
 
 
3.字体图标
 
 
 
 
 
----------------------------------------------------
用户界面-鼠标样式
 
鼠标样式:
 
cursor: default; 箭头
 
cursor: pointer; 小手
 
cursor: move; 移动  竖杠
 
cursor:  not-allowed;禁止
 
 
 
------------------------------------------
表单轮廓线
 
outline: none; 表单轮廓线
 
文本域:
 
textarea : resize; 禁止拖拽
 
-------------------------------
 
文字和图片 对齐
 
注意:用行内元素或者行内块元素使用
vertical-align : middle;
 
文本域
 
文字垂直居中。
textarea 
 
vertical-align : middle;
 
-----------------------------------------
解决图片底部缝隙空白
 
1.vertical-align : bottom ||  top || middle;
 
2.把图片转换为块级元素;
 
-----------------------------
 
文字溢出 用省略号表示
 
 
1.单行文本溢出显示
 
文字显示不开,自动换行
 
white-space: normal;
 
强制文字一行内显示
 
white-space: nowrap;
 
溢出部分隐藏
 
overflow: hidden;
 
文字溢出用省略号
 
text-overflow: ellipsis;
---------------------------------
2.多行文本溢出显示
overflow: hidden;
 
text-overflow: ellipsis;
 
/*弹性伸缩盒子模型显示 */
 
display: -webkit-box;
 
/*限制在一个块级元素显示的文本的行数 */
 
-webkit-line-clamp: 2;
 
/*让所有子元素盒子模型垂直居中  */
 
-webkit-box-rient: vertical;
 
------------------------------------
常见布局技巧
 
1.margin 负值:应用边框合并
 
边框合并 为1px;
 
margin-left: -1px;
 
---------------------------------
当前鼠标经过提升当前层级显示
1.如果盒子没有定位,则鼠标经过添加相对定位即可
 
2.如果当前元素都有定位, 则利用z-index提升层级
 
----------------------------------
文字围绕浮动元素
 
1.盒子确定宽高度,浮动,内外边距
 
2.文字标准流
 
即可完成图片文字布局
 
 
 
 
 


Tags:

说点什么吧
  • 全部评论(0
    还没有评论,快来抢沙发吧!

上一篇:前端基础学习第十七天

下一篇:没有了

本栏推荐

标签云

站点信息

  • 文章统计96篇文章
  • 标签管理标签云
  • 微信公众号:扫描二维码,关注我们