HTML-8-行/块级元素，背景图片

最新推荐文章于 2024-07-10 16:12:49 发布

只爱故事不爱酒的秃头少女

最新推荐文章于 2024-07-10 16:12:49 发布

阅读量417

点赞数

分类专栏： HTML CSS 文章标签： css html

本文链接：https://blog.csdn.net/Liuhxhhhhh/article/details/106694130

版权

HTML 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

CSS

6 篇文章 0 订阅

订阅专栏

<html lang="en,zh">
<head>
	<meta charset="UTF-8">
	<title>test8</title>
	<link rel="stylesheet" type="text/css" href="test8.css">
</head>
<body>
	<!-- 
	溢出容器，要打点展示

	1.单行文本

	2.多行文本 
-->
     <p>新浪网新闻中心是新浪网最重要的频道之一,24小时滚动报道国内、国际及社会新闻。每日编发新闻数以万计。</p>

     <div class="p1">新浪网新闻中心是新浪网最重要的频道之一,24小时滚动报道国内、国际及社会新闻。每日编发新闻数以万计新浪网新闻中心是新浪网最重要的频道之一,24小时滚动报道国内、国际及社会新闻。每日编发新闻数以万计</div>
     <br><br>


     <!-- 设置背景图片 -->
     <div class="picture"></div>
     <br><br><br>

     <a href="http://www.taobao.com" target="blank">www.taobao.com</a>

     行级元素只能嵌套行级元素
     块级元素可以嵌套任何元素
     
     但是p标签不能嵌套块级元素
     a标签里面不可以嵌套a标签


     凡是带有inline属性的元素都是文本类元素
     inline  inline-block  ---->文本类元素


     position:absolute;
     float:left/right
     设置以上任意一个，系统都会自动设置display：inline-block


     <div class="liubai">
          <div class="content"></div>
     </div>

     <span class="test">1231234354657684543233213213123124124</span>  123
     <div class="serch">
          <div class="left">111</div>
          <div class="right">222</div>          
     </div>

     <div class="subscript">贴吧</div>
     
</body>
</html>

*{
	margin: 0;
	padding: 0;
}
p{
	width: 300px;
	height: 20px;
	line-height: 20px;
	
    /*固定三件套，处理单行文本*/
	white-space: nowrap;       /*设置不允许文本换行*/
	overflow: hidden;          /*溢出的部分隐藏*/
	text-overflow: ellipsis;   /*以圆点展示*/
}
/*处理多行文本时，只做截断，不做展示*/
.p1{
	border: 1px solid black;
	width: 200px;
	height: 40px;   /*高是line-height的几倍就展示几行*/
	line-height: 20px;
	overflow: hidden;
}



/*设置背景图片*/
.picture{
	width: 200px;
	height: 200px;
	border: 1px solid black;   
	background-image: url(wjk.jpg);
	background-size: 100px 100px;   /*设置图片仅的大小*/
	background-repeat: no-repeat;  /*设置图片是否重复*/
	background-position: center center;   /*x，y 设置图片的位置*/
	/*图片位置还可以设置为  left top  或者 top center等等*/
	/*还可以填百分数 0% 0%  或者50% 50%等等*/
}

a{
	display: inline-block;
	text-decoration: none;
	color: #f40;	
	width: 150px;
	/*height: 200px;*/
	background-image: url(https://img.alicdn.com/tfs/TB1_uT8a5ERMeJjSspiXXbZLFXa-143-59.png);
	background-size: 150px 90px;
	background-repeat: no-repeat;

/*   1.
	text-indent: 300px;
	white-space: nowrap;
	overflow: hidden;*/

	/* 2 */
    height: 0px;      
    padding-top: 90px;    
    overflow: hidden;
     

}

.liubai{
	height: 30px;
	background-color: #123;
}
.content{
	margin: 0px auto;
	width: 800px;
	height: 30px;
	background-color: #0f0;
}




/*当行级块元素里面添加了内容时，外面的文本内容会和里面的内容进行底对齐，而不是这个容器的底对齐*/

.test{
	display: inline-block;
	background-color: pink;
	width: 100px;
	height: 100px;
	border: 1px solid pink;
	vertical-align: 10px;      /*设置里外文本对齐*/
	word-wrap: break-word;    /*强制自动换行*/
}
.serch{
	margin: 5px 0px;	
	height: 30px;
	background-color: red;
}

.left{
	float: left;
	width: 100px;
	height: 30px;
	line-height: 30px;
	margin-left:100px;

}
.right{
	float: right;
}

.subscript{
	width: 250px;
	height: 16px;
	padding: 10px 10px;
	font-size: 16px;
	background-color: blue;
	color: rgba(255,255,255,0.8);  /*前面三个设置颜色，最后一个设置透明度*/
	padding-left: 10px;

	
}
.subscript::before{
	content: "";
	display: inline-block;
	width: 25px;
	height: 16px;
	background-image: url(https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1591756150&di=4884d5da3d973884702c6935e088463f&src=http://www.fxunion.com/d/file/c0dbdce1224c0d669b0881c7bda2a119.png);
	background-size: 100% 100%;
	margin-right: 5px;
	

}

.subscript::after{
	content: "";
	display: inline-block;
	float: right;
	width: 12px;
	height: 16px;
	
	margin-right: 5px;
	background-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591766924289&di=a3fec1c49b7194aa1a99038d38fb612f&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F00%2F93%2F90%2F8656f2b0f91b61c.jpg);
    background-size: 100% 100%;

}

只爱故事不爱酒的秃头少女

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML-8-行/块级元素，背景图片

<html lang="en,zh"><head> <meta charset="UTF-8"> <title>test8</title> <link rel="stylesheet" type="text/css" href="test8.css"></head><body>  <p&gt.
复制链接

扫一扫