直接放练习代码,方便以后查阅
<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; }