学习了边框,外边距,内边距,了解了标签的优先级,同时学习了margin的用法。练习了标题标签,段落标签,换行标签的用法。
笔记:
优先级:特指的优先级大于泛指的优先级,优先唯一性,例如id>class>div优先级关系
border 边框
margin 外边距
padding 内边距
外边距设置顺序为从上开始顺时针,不设置距离的话默认距离为对边的宽度
或者使用margin-top margin-right margin-bottom margin-left来设置
margin:0 auto表示居中
设置多个div可以先建立一个大的div,使他们成为一个整体,再移动
border-radius改变圆角可以做出圆
inde.html代表网站的首页
<h1></hi>成对出现,标题标签
<p></p>成对出现,段落标签
<br>换行标签
<p>与<br>区别就是使用<p>会多空一行
段落的开头打空格有两种方法:
1.使用text-indent:30px进行缩进,写在<style></style>里面
2.使用html实体,可以查询实体
实现:
1.居中四个方块:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#b{
width: 250px;
height: 250px;
margin: 0 auto;
}
.a{
width: 100px;
height: 100px;
background-color: #ff0000;
float: left;
margin: 10px;
border-radius: 10px;
}
#c{
background-color: #00ff00;
}
#d{
background-color: #0000ff;
}
#e{
background-color: black;
}
</style>
</head>
<body>
<div id="b">
<div class="a"></div>
<div class="a" id="c"></div>
<div class="a" id="d"></div>
<div class="a" id="e"></div>
</div>
</body>
</html>
2.段落,缩进,标题的运用
<!DOCTYPE html>
<html>
<head>
<title>13个三分!库里打破NBA单场三分命中纪录</title>
<style>
div{
width: 700px;
/*background-color: blue;*/
/*color: red;*/
font-size:100%;
}
p{
text-indent: 30px;
}
</style>
</head>
<body>
<div>
<h1>13个三分!库里打破NBA单场三分命中纪录</h1>
<p style="color:yellow">北京时间11月8日消息,斯蒂芬-库里早已被视为历史上最棒的三分投手,所有人都期待着他创造单场三分球命中纪录的时刻。终于这一天到来了,在勇士<br>116比106战胜鹈鹕的比赛中,库里投中13个三分球创造了历史新纪录,他打破了自己、科比和马绍尔三人一同保持的纪录。</p>
<p>上一场做客对阵湖人,库里在三分线外哑火,10投0中,这让他连续157场至少投中一个三分球的纪录作古。或许正是这一纪录被终结给了库里更多动力,他在甲骨文球馆送出了爆发性表现。</p>
</div>
</body>
</html>