引入外部图标，文字

Posted 2021-02-28 111wdh

<link rel="stylesheet" type="" href="css/02.css"/>
<p>diwjkdfjdjfjdskjfkdjfjdfkjddkfjoijefkjdklfjdhfoiehoihghkwh</p>

p{ 
width: 50px;
white-space: normal;/* 文字不换行 */
overflow:hidden;/* 超出的时候隐藏 */
text-overflow: ellipsis;/* 文本超出之后显示省略号 */    三条语句连用文本超出后显示省略号
font-family: "microsoft yahei";/* 字体,微软雅黑 */

}

 

<span>
hyyy
</span>

@font-face {
font-family:myfont;
src: url(../img/Americratika.ttf);}      引入外部字体
span{
font-family: myfont;
font-size: 20px;
}

 

<div id="wan">
&#xe627;              图标上复制代码，放在html中
</div>

@font-face {
font-family: ‘iconfont‘; /* project id 1756572 */
src: url(‘//at.alicdn.com/t/font_1756572_quylxqg7zz.eot‘);
src: url(‘//at.alicdn.com/t/font_1756572_quylxqg7zz.eot?#iefix‘) format(‘embedded-opentype‘),         阿里巴巴矢量图标库，图标加购物车后添加至项目，我的项目                                                                                                                                                           中点击Unicode，复制代码粘贴到css中  
url(‘//at.alicdn.com/t/font_1756572_quylxqg7zz.woff2‘) format(‘woff2‘),
url(‘//at.alicdn.com/t/font_1756572_quylxqg7zz.woff‘) format(‘woff‘),
url(‘//at.alicdn.com/t/font_1756572_quylxqg7zz.ttf‘) format(‘truetype‘),
url(‘//at.alicdn.com/t/font_1756572_quylxqg7zz.svg#iconfont‘) format(‘svg‘);

}
#wan{
font-family: ‘iconfont‘ ;        font-family的值与复制项目中font-family的值相等
color: #00FFFF;
font-size: 30px;
}

 

盒模型
<div class="hm">
</div>
<div class="hn">
</div>

.hm{
background-color: #00FFFF;
border: #0000FF solid 10px;/* 边框 */
padding: 30px ;/* 内边距 */
margin: 20px dotted;/* 外边距 按照上右下左的顺序,dotted点线,dashed虚线,double双线,solid实线, */
}/* 垂直方向时,两个外边距会合并成一个 */