第四次网页前端培训笔记（CSS常用属性和盒子模型）

2022-02-07 23:30:57 阅读：171 来源： 互联网

本帖只记录学习

1，CSS常用属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>常用属性</title>
		<style type="text/css">
		#div1{
			height: 37.5rem;
			/* 背景颜色 */
			background-color: antiquewhite;
			/* 背景图片 */
			background-image: url(img/1.png);
			/* 是否重复 */
			background-repeat: no-repeat;
		}
		#div2{
			/* 字体颜色 */
			color: #FF0000;
			/* 对齐方式 */
			text-align: left;
			/* 文本修饰 */
			text-decoration: line-through overline underline;
			/* 首行缩进 */
			text-indent: 2em;
		}
		a{
			/* 去除超链接下划线 */
			text-decoration: none;
		}
		#p1{
			/* 对齐方式 */
			text-align: justify;
		}
		/* 浮动 */
		#d1{
			width: 6.25rem;
			height: 6.25rem;
			background-color: #00FFFF;
			/* 浮动 左浮动 */
			float: left;
		}
		#d2{
			width: 6.25rem;
			height: 6.25rem;
			background-color: black;
			/* 浮动 左浮动 */
			float: left;
		}
		</style>
	</head>
	<body>
		<div id="div1">
			Hello
		</div>
		<br>
		<hr>
		<div id="div2">
			Hello World
		</div>
		<a href="http://www.baidu.com">百度</a>
		<hr />
		<p id="p1">asdasdasdasd
			图片：冰雪为媒 共赴冬奥之约
			冰雪为媒 共赴冬奥之约
			在“双奥之城”北京，街头随处可见的冬奥元素为年味增添了运动“风味”。盛会举世瞩目，世界翘首以待。冰雪为媒，让我们... 详细 >
			央视新闻1月25日
			热冬奥主会场
			 资讯 
			
			我在冬奥现场丨冰雪为媒,共赴冬奥之约
			冰雪为媒共赴冬奥之约。 现场见证 北京三中院组宣处 刘青青 暑往寒来,立春与冬奥,不约而遇;冰晶雪华,世界与中国,未来可期。 ...
			澎湃新闻昨天20:15
			
			冰雪为媒共赴冬奥之约|肩并肩参赛 手牵手前行
			#冰雪为媒共赴冬奥之约#北京冬奥会是向世界展示中国的一个窗口。“冬奥村里什么都有”“比赛场馆令人惊叹”“可以带动更多人参...
			东北网11小时前
			冰雪为媒共赴冬奥之约丨多国运动员表白北京冬奥超燃开幕式
			【冰雪为媒共赴冬奥之约丨多国运动员表白北京冬奥超燃开幕式】 2月4日晚,举
		</p>
		<h2 style="display: block;">Hello</h2><br />
		<h2 style="display: none;">Hello</h2>
		<div id="d1"></div>
		<div id="d2"></div>
	</body>
</html>

运行结果

2，盒子模型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒子模型</title>
		<style>
		#d1{
			width: 6.25rem;
			height: 6.25rem;
			background-color: #00FFFF;
			/* 设置边框 */
			border: #000000 0.3125rem outset;
			/* 内边距 */
			padding: 0.9375rem;
			/* 外边距 */
			margin-top: 6.25rem;
			margin-left: 6.25rem;
		</style>
	</head>
	<body>
		<div id="d1"></div>
	</body>
</html>

运行结果

标签：冬奥,盒子,共赴,6.25,CSS,rem,网页,为媒,之约
来源： https://blog.csdn.net/giaolala/article/details/122816350

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

第四次网页前端培训笔记（CSS常用属性和盒子模型）