今天的學習內容大致分兩部分:1.田字格的製作 2.文章段落的編輯 期間接觸到的一些新命令包括:<border>邊框、<margin>外邊框、<padding>內邊距、<h>字體大小、<p>段落標籤、<br>打斷、< >空格、<border-radius>圓角、<text-indent>縮進。
1.田字格編碼詳細
<html>
<head>
<title>田字格</title>
<style>
#all{
width: 450px;
height: 450px;
/*外邊距*/
margin: 0px auto;
}
.a{
width: 200px;
height: 200px;
background-color: #00FF00;
float: left;
margin: 10px;
} </style>
<body>
<div id=“all”>
<div class="a" id="first"></div>
<div class="a" id="second"></div>
<div class="a" id="third"></div>
<div class="a" id="fourth"></div>
</div>
</body>
</html>
通過在大的div中創建小div,控制小div在大div中漂浮以此達成田字格形式,再通過調整大div的外邊距<nargin>,便可調整田字格在網頁中的位置。
2.文章段落的編輯
文章段落和文章標題建立在<body>中,可以用不同的字號<h>命令區分開,段落建立在<p></p>中便可分出段落,若想另起一行,可以再要另起一行的文字前輸入<br>命令。背景色設置仍是<background-color>,字體顏色<color>。
但是這種形式的創建段落,並不能生成段前的空格縮進,需在段前輸入< >命令這代表一個空格,也可以在<head>中編輯<style>命令輸入<text-indent>然後給出段前縮進的像素值即可。
今天的學習個人感覺比較輕鬆有趣,要學會在操作中的舉一反三,將會有很大提升,希望在接下來的學習中,繼續保持良好的狀態。