任务01-02-标签+浮动+图文组合

最新推荐文章于 2024-04-11 15:07:41 发布

weixin_46137837

最新推荐文章于 2024-04-11 15:07:41 发布

阅读量66

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/weixin_46137837/article/details/118991389

版权

文章目录

前言
一、标签
二、浮动及常见样式
三、图文组合考核任务

前言

提示：这里可以添加本文要记录的大概内容：
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

一、标签

在这里插入图片描述

二、浮动及常见样式

display:inline-block属性将div排成一行时出现图片之间出现空隙或者对不齐的状况.

在这里插入图片描述

采用float的形式,可以解决此类问题

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
				background-color: aqua;
				/* 让行属性元素支持宽高 */
				 /*display: inline-block; */
				/* 
				浮动：left、right
				让块属性元素排成一行的时候使用浮动
				碰到父元素边缘会停下来
				 */
				float: left;
			}
			.one{
				/* 字体大小 默认16px 最小8px */
				font-size: 20px;
				/* margin-top: 100px; */
			}
		</style>
	</head>
	<body>
		<div class="one">1</div>
		<div>2</div>	
	</body>
</html>

在这里插入图片描述

浮动会让行属性元素支持设置宽高
当父元素不设置高度高度由子元素撑开的时候一旦子元素浮动就会脱离父元素父元素就会失去高度进而影响后面元素布局
解决：
1. 给父元素设置overflow:hidden;
2. 在父元素最后加一个设置了clear:both;块属性元素

伪元素 :

设置颜色 :

<font color="blue" size="3">  
				
	 透明度 0-1（默认是1）
	 透明度会继承给子元素
	 设置透明度为0.5 : pacity: 0.5;

背景图的使用

<font color="blue" size="3">  
				
	- 背景图片大小 :
		background-size: 100px;
			一个值 横向固定 纵向自适应
			两个值 横向和纵向大小
			cover 等比例平铺 会切掉一部分
			contain 宽度或者高度等比例自适应 可能撑不满
	- 背景是否重复: 
		background-repeat: no-repeat;
	- 背景图片位置:
		background-position: center;
			左上角是0,0点 x向右正方向 y向下正方向
			两个值 x轴方向偏移量 y方向偏移量
			x轴 left right center
			y轴 top bottom center

三、图文组合考核任务

<!DOCTYPE html>
<html>
<head>
	<title>图文案例1</title>
	<style type="text/css">
		div{
			width: 100%;
		}
		img{
			width: 100px;
			float: left;
			margin: 20px;
			margin-right: 10px;
		}
		.ddd{
			width: 20px;
			background-color: #D2D6DC;
			color:white;
			border-radius: 10%;
			font-size: 13px;
			position: center;

		}
		.c1,.c2{
			float: left;
		}
		p,span{
			color:#7A8084; 
		}
		h4,.ddd{
			display: inline-block;
		}
		.grade{
			color: #FFD694;
		}
	</style>
</head>
<body>
	
		
		<div class="c1">
			<img src="../img/1.jpg">
			<h4>白蛇2:青蛇劫起</h4>
			<p class="ddd">3D</p>
			
			<p>
				主演:黄家康 唐小喜 张福正 魏超 赵铭洲
			</p>
			<p>中国大陆 | 0分钟</p>
		</div>
		<div class="c2">
			<hr>
		</div>	
		<div class="c1">
			<img src="../img/2.jpg">
			<h4>狂野少年的天空</h4>
			<p class="ddd">2D</p>
			<br>
			<span>观众评分</span>
			<span class="grade">7.8</span>
			<p>
				主演:张一白 韩琰 彭昱畅 许恩怡 张宥浩
			</p>
			<p>中国大陆 | 0分钟</p>
		</div>
		<div class="c2">
			<hr>
		</div>
		<div class="c1">
			<img src="../img/3.jpg">
			<h4>1921</h4>
			<p class="ddd">2D</p>
			<br>
			<span>观众评分</span>
			<span class="grade">7.2</span>
			<p>
				主演:黄建新 郑大圣 黄轩 倪妮 王仁君
			</p>
			<p>中国大陆 | 0分钟</p>
		</div>
	
</body>
</html>

- - 效果图 :

在这里插入图片描述

weixin_46137837

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
任务01-02-标签+浮动+图文组合

文章目录前言一、标签二、浮动及常见样式伪元素 :设置颜色 :背景图的使用三、图文组合考核任务前言提示：这里可以添加本文要记录的大概内容：例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。一、标签二、浮动及常见样式display:inline-block属性将div排成一行时出现图片之间出现空隙或者对不齐的状况.采用float的形式,可以解决此类问题<!DOCTYPE html><ht
复制链接

扫一扫