直接放练习代码,方便以后查阅
<html>
<head>
<meta charset="utf-8">
<title>溢出文字处理、背景图片处理、企业开发经验</title>
<link rel="stylesheet" type="text/css" href="lession8.css">
</head>
</body>
<!-- <div class="Practice1"></div>-->
<!-- <div class="Practice2"></div>-->
<a href="https://www.taobao.com" target="blank">
淘宝网
</a>
</html>
@charset "utf-8";
/* CSS Document */
*{
margin:0;
padding:0;
}
/*1.溢出部分文字处理*/
.Practice1{
border:1px solid black;
width:100px;
white-space:nowrap; /*强制不换行 */
overflow:hidden;
text-overflow:ellipsis; /* 溢出部分文字为省略号*/
}
/*2.背景图片的处理*/
.Practice2{
width:200px;
height:200px;
border:1px solid black;
background-image:url(butterfly.jpg); /*背景图片可以直接像颜色一样填充进去 */
background-size:100px 100px;
background-repeat:no-repeat;
background-position:center center;
}
/*3.企业开发经验:当网页没有CSS样式的情况下,依旧可以正常进行*/
/* 方法一
a{
display:inline-block;
text-decoration:none;
color:#424242;
width:190px;
heigth:90px;
background-image:url(butterfly.jpg);
background-size:190px 90px;
border:1px solid black;
text-indent:100px;
white-space:nowrap;
overflow:hidden;
}
*/
/*方法二*/
a{
display:inline-block;
width:100px;
height:0;
padding-top:100px;
overflow:hidden;
}