Html+CSS下溢出文字处理、背景图片处理

最新推荐文章于 2022-12-07 21:30:53 发布

Clearfix_Xia

最新推荐文章于 2022-12-07 21:30:53 发布

阅读量1.3k

点赞数 1

文章标签： Html CSS

本文链接：https://blog.csdn.net/csdnxmj/article/details/80270930

版权

Html+CSS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

直接放练习代码，方便以后查阅

<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;	
}