学习了边框,外边距,内边距,了解了标签的优先级,同时学习了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>