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

本帖只记录学习

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>

运行结果

 

相关文章

Css3如何实现鼠标移上变长特效?(图文+视频)
css3怎么实现鼠标悬停图片时缓慢变大效果?(图文+视频)
jquery如何实现点击网页回到顶部效果?(图文+视频)
css3边框阴影效果怎么做?(图文+视频)
css怎么实现圆角边框和圆形效果?(图文+视频教程)
Css3如何实现旋转移动动画特效