第四次网页前端培训笔记

2023-11-09 16:42:16

<head>
       <style type="text/css">
       #div1 {
           width: 500px;
           height: 400px;
           background-color: blanchedalmond;
           background-image: url(img/baidu.png);
           background-repeat: no-repeat;（不重复）（背景的重复数，默认无限重复）
           }
       #div2 {
           color: black;
           text-align: left;（文本左对齐）
           text-decoration: line-through overline underline;
           text-indent: 2em;（缩进）
           }
       a {
           text-decoration: none;（无装饰）
       }

       #p1 {
           text-align: justify;
       }
       h2 {
           style="display: none;"（display none不显示元素 block将元素显示为块级元素 inline会被显示为内联元素 inline-block行内块元素 list-item元素会作为列表显示）
       }
       
       #d1 {
           width: 100px;
           height: 100px;
           background-color: #aaaa7f;
           float: left;
       }
       #d2 {
           width: 100px;
           height: 100px;
           background-color: indianred;
           float: left;
       }
       #d3 {
           width: 100px;
           height: 100px;
           background-color: #CD5C5C;
           border: #AAAA7F 5px outset;
           padding: 15px;
           margin: 30px;
       }
       </style>
   </head>
   <body>

       <div id="div1">
           Hello
       </div>
       <hr>
       <div id="div2">
           HelloWorld
       </div>
       <a href="">百度</a>
       <hr />
       <p id="p1">
           超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

           您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。

           在本教程中，您将学习如何使用 HTML 来创建站点。

           HTML 很容易学习！相信您能很快学会它！

       
       <h2>百度2</h2>
       
       <div id="d1"></div><br />
       <div id="d2"></div>
       <div id="d3"></div>
   </body>

盒子从外到内

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
		#div1 {
			width: 500px;
			height: 400px;
			background-color:  blanchedalmond;
			background-image: url(img/baidu.png);
			background-repeat: no-repeat;
			}
		#div2 {
			color: black;
			text-align: left;
			text-decoration: line-through overline underline;
			text-indent: 2em;
			}
		a {
			text-decoration: none;
		}
		
		#p1 {
			text-align: justify;
		}
		h2 {
			 style="display: none;"
		}
		<!-- 浮动 -->
		#d1 {
			width: 100px;
			height: 100px;
			background-color: #aaaa7f;
			float: left;
		}
		#d2 {
			width: 100px;
			height: 100px;
			background-color: indianred;
			float: left;
		}
		#d3 {
			width: 100px;
			height: 100px;
			background-color: #CD5C5C;
			border: #AAAA7F 5px outset;
			padding: 15px;
			margin: 30px;
		}
		</style>
	</head>
	<body>
		
		<div id="div1">
			Hello
		</div>
		<hr>
		<div id="div2">
			HelloWorld
		</div>
		<a href="">百度</a>
		<hr />
		<p id="p1">
			超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
			
			您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。
			
			在本教程中，您将学习如何使用 HTML 来创建站点。
			
			HTML 很容易学习！相信您能很快学会它！
		</p>
		<hr />
		<!-- display none 隐藏，block显示元素 -->
		<h2>百度2</h2>
		<!-- 浮动 -->
		<div id="d1"></div><br />
		<div id="d2"></div>
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<hr />
		<div id="d3"></div>
	</body>
</html>

图片摘录自：【优极限】 HTML+CSS+JavaScript+jQuery前端必学教程，小白教学，前端基础全套完成版_哔哩哔哩_bilibili

码农公寓

相关文章