16-11-08

 今天的學習內容大致分兩部分:1.田字格的製作 2.文章段落的編輯  期間接觸到的一些新命令包括:<border>邊框、<margin>外邊框、<padding>內邊距、<h>字體大小、<p>段落標籤、<br>打斷、<&nbsp>空格、<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>。

  但是這種形式的創建段落,並不能生成段前的空格縮進,需在段前輸入<&nbsp>命令這代表一個空格,也可以在<head>中編輯<style>命令輸入<text-indent>然後給出段前縮進的像素值即可。

  

  今天的學習個人感覺比較輕鬆有趣,要學會在操作中的舉一反三,將會有很大提升,希望在接下來的學習中,繼續保持良好的狀態。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章