第四次网页前端培训笔记（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>运行结果
标签：冬奥,盒子,共赴,6.25,CSS,rem,网页,为媒,之约 来源： https://blog.csdn.net/giaolala/article/details/122816350