HTML-浮动、设置颜色、伪元素

最新推荐文章于 2023-10-26 22:11:17 发布

16115

最新推荐文章于 2023-10-26 22:11:17 发布

阅读量250

点赞数 1

文章标签： css html html5

本文链接：https://blog.csdn.net/weixin_44398517/article/details/121394271

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			span{
				color: black;
				background-color: aquamarine;
				width: 200px;
				height: 200px;
				/* 
				浮动可以让行属性标签设置宽高 
				在需要对块属性标签进行水平对其（横），使用disp：inline-block两个标签之间会有空格
				*/
				float: right;
			}
			div{
				border: 5px #FF0000 solid;
				overflow: hidden;
			}
			p{
				display: inline-block;
				color: red;
				background-color: cornflowerblue;
				width: 200px;
				height: 200px;
				float: left;
			}
			
			p::before{
				content: "~~~";
				color: aqua;
			}
			p::after{
				content: "!!!";
				color: aqua;
			}
		</style>
	</head>
	<body>
		<!-- 字体像素默认是16px、字体最小的像素是8px,设置更小像素的字体依然是8px -->
		<div>
			<p>华为</p>
			<p>小米</p>
		</div>
		
		<span>oppo</span>
		<span>vivo</span>
		<!-- <div class="father ">
			<div class="son">三伏天来了</div>
		</div> -->
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.father{
			/* 	height: 100px; */
				background-color: aqua;
				/* 解决子元素浮动，影响后面元素布局的办法
				 给父元素设置overflow:hidden*/
				/* overflow: hidden; */
			}
			.father::after{
				content: "";
				clear: both;
				display: block
			}
			.son{
				width: 200px;
				height: 200px;
				background-color: coral;
				float: left;
			}
			.nb{
				width: 300px;
				height: 300px;
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<!-- 当父元素不设置高度 高度被子元素撑开的时候
		 一旦子元素浮动 就会脱离父元素 父元素就会失去高度影响之后的元素的布局
		 解决办法：
		 1.给父元素设置overflow:hidden:
		 2.给父元素加一个设置了clear：both;的块属性元素
		 -->
		<div class="father ">
			<div class="son">三伏天来了</div>
			<!-- <div style="clear: both;"></div> -->
		</div>
		<div class="nb"></div>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width: 200px;
				height: 200px;
				/* 设置颜色的三种 方式*/
				/* 单词 */
				/* background-color: blue; */
				/* 16进制 */
				/* background-color: #000000; */
				/* rgb值 */
				/* background-color: rgb(30,100,60); */
				/* 透明度0~1（默认是1）、透明度会继承给子元素 */
				/* opacity: 0.5; */
				/* 透明色 */
				background-color: rgba(30,100,60,0.3);
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

伪元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div::before{
				content: "$";
			}
			div::after{
				content: "$";
			}
		</style>
	</head>
	<body>
		<div>王力宏</div>
		<div>周杰伦</div>
		<div>李宗盛</div>
		<div>张学友</div>
	</body>
</html>

https://www.w3school.com.cn/css/css_pseudo_elements.asp

16115

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML-浮动、设置颜色、伪元素

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> span{ color: black; background-color: aquamarine; width: 200px; height: 200px; /* 浮动可.
复制链接

扫一扫