1.HTML練習（二）

時間 2019-12-18

標籤 1.html html 練習欄目 HTML 简体版

原文原文鏈接

一.表格練習：css

一、<table>標籤：聲明一個表格，它的經常使用屬性以下：前端

border屬性定義表格的邊框，設置值是數值
cellpadding屬性定義單元格內容與邊框的距離，設置值是數值
cellspacing屬性定義單元格與單元格之間的距離，設置值是數值
align屬性設置總體表格相對於瀏覽器窗口的水平對齊方式,設置值有：left | center | right

二、<tr>標籤：定義表格中的一行編程

三、<td>和<th>標籤：定義一行中的一個單元格，td表明普通單元格，th表示表頭單元格，它們的經常使用屬性以下：瀏覽器

align 設置單元格中內容的水平對齊方式,設置值有：left | center | right
valign 設置單元格中內容的垂直對齊方式 top | middle | bottom
colspan 設置單元格水平合併，設置值是數值
rowspan 設置單元格垂直合併，設置值是數值

　　練習：前端工程師

<!-- border="1"表格邊框爲1pt；width="300"寬度爲300pt，height="200"高度爲200pt -->
    <!-- align="center"相對於瀏覽器居中顯示 -->
    <table border="1" width="300" height="200" align="center"> 
        <tr>
            <th>1</th>
            <th>2</th>
            <th>3</th>
        </tr>

        <tr>
            <td align="center">1</td>    <!-- align="center"水平居中對齊 -->
            <td align="center">2</td>
            <td align="center">3</td>
        </tr>

        <tr>
            <td valign="top">1</td>        <!-- valign="top"垂直靠上對齊 -->
            <td>2</td>
            <td>3</td>
        </tr>

        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
    </table>

<!-- table>(tr>td*5)*6 建立表格的快速輸入寫法-->
<table border="1" width="700" height="300" align="center">
    <tr>
        <th colspan="5" align="left">基本狀況</th>    <!-- 表頭 -->
    </tr>

    <tr>
        <td width="18%">姓名</td>    <!-- 寬度也可按百分比設置 -->
        <td width="25%"></td>
        <td width="18%">性別</td>
        <td width="25%"></td>
        <td rowspan="5"><img src="images/mm.jpg" height="260" width="194"alt="照片"></td>
    </tr>

    <tr>
        <td>民族</td>
        <td></td>
        <td>出生日期</td>
        <td></td>
    </tr>

    <tr>
        <td>政治面貌</td>
        <td></td>
        <td>健康狀況</td>
        <td></td>
    </tr>

    <tr>
        <td>籍貫</td>
        <td></td>
        <td>學歷</td>
        <td></td>
    </tr>

    <tr>
        <td>email</td>
        <td></td>
        <td>練習電話</td>
        <td></td>
    </tr>
</table>

2、頁面佈局：佈局

佈局也能夠叫作排版，它指的是把文字和圖片等元素按照咱們的意願有機地排列在頁面上，佈局的方式分爲兩種：spa

一、table佈局：經過table元素將頁面空間劃分紅若干個單元格，將文字或圖片等元素放入單元格中，隱藏表格的邊框，從而實現佈局。這種佈局方式也叫傳統佈局，目前主要使用在EDM(廣告郵件中的頁面)中，主流的佈局方式不用這種。設計

二、HTML+CSS佈局(DIV+CSS)：主要經過CSS樣式設置來佈局文字或圖片等元素，須要用到CSS盒子模型、盒子類型、CSS浮動、CSS定位、CSS背景圖定位等知識來佈局，它比傳統佈局要複雜，目前是主流的佈局方式。code

table來作總體頁面的佈局，佈局的技巧概括爲以下幾點：blog

一、按照設計圖的尺寸設置表格的寬高以及單元格的寬高。

二、將表格border、cellpadding、cellspacing所有設置爲0，表格的邊框和間距就不佔有頁面空間，它只起到劃分空間的做用。

三、針對局部複雜的佈局，能夠在單元格里面再嵌套表格，嵌套表格劃分局部的空間。

四、單元格中的元素或者嵌套的表格用align和valign設置對齊方式

五、經過屬性或者css樣式設置單元格中元素的樣式

　　練習：

<body topmargin=50> <!-- topmargin=50 設置body與頁面上邊距的距離 -->
    
    <!-- table>tr>td*4 快捷寫法-->
    <!-- cellpadding="0"文字距離單元格的距離；    cellspacing="0"單元格之間的距離 -->
    <table width="800" height="800" border="0" cellpadding="0" cellspacing="0" align="center">
        <tr>
            <td width="260" valign="top" bgcolor="#f2f2f2"> <!-- bgcolor="#f2f2f2"設置背景顏色 -->

                <!-- table>(tr>td)*4 -->
                <table width="200" border="0" cellpadding="0" cellspacing="0" align="center">
                    <tr height="100">
                    </tr>
                    <tr>
                        <td align="right"><img src="images/person.png" height="158" width="158"></td>
                    </tr>
                    <tr>
                        <td align="right">張大山</td>
                    </tr>
                    <tr>
                        <td align="right">1839573623</td>
                    </tr>
                    <tr>
                        <td align="right">zhangdasan@163.com</td>
                    </tr>
                </table>

            </td>


            <td width="30"></td>


            <td width="480" valign="top">
                <table width="480" border="0" cellpadding="0" cellspacing="0">
                    <tr>
                        <td height="80"></td>
                    </tr>
                    <tr>
                        <td align="right"><img src="images/resume.png" height="92" width="238"></td>
                    </tr>
                </table>

                <br>    <!-- 換行 -->
                <hr>    <!-- 畫一條線 -->
                <br>    <!-- 換行 -->
            
                <!-- table>(tr>td*2)*6 快捷寫法-->
                <table width="480" height="200" border="0" cellpadding="0" cellspacing="0">
                    <tr>
                        <td colspan="2"><b>我的基本狀況</b></td>
                    </tr>
                    <tr>
                        <td><b>姓 名：</b>張大山</td>
                        <td><b>籍 貫：</b>上海</td>
                    </tr>
                    <tr>
                        <td><b>性 別：</b>男</td>
                        <td><b>身 高：</b>168cm</td>
                    </tr>
                    <tr>
                        <td><b>民 族：</b>漢</td>
                        <td><b>體 重：</b>65kg</td>
                    </tr>
                    <tr>
                        <td><b>出生日期：</b>1990.08.23</td>
                        <td><b>電 話：</b>13498673422</td>
                    </tr>
                    <tr>
                        <td><b>現居住地：</b>上海</td>
                        <td><b>專 業：</b>軟件工程</td>
                    </tr>
                </table>

                <br>
                <br>

                <table width="480" height="100" border="0" cellpadding="0" cellspacing="0">
                    <tr>
                        <td><b>教育背景及工做經歷</b></td>
                    </tr>
                    <tr>
                        <td><b>2008.09-2011.06</b> 北京大學 軟件工程專業</td>
                    </tr>
                    <tr>
                        <td><b>2011.06-2015.06</b> 微型計算機軟件公司 前端工程師</td>
                    </tr>
                </table>

                <br>
                <br>

                <table width="480" height="100" border="0" cellpadding="0" cellspacing="0">
                    <tr>
                        <td><b>所獲證書</b></td>
                    </tr>
                    <tr>
                        <td><b>2010.06</b> 榮獲「中國編程大賽」 一等獎</td>
                    </tr>
                    <tr>
                        <td><b>2014.06</b> 榮獲「世界編程大賽」 一等獎</td>
                    </tr>
                </table>

            </td>
        
            <td width="30"></td>
        </tr>
    </table>

</body>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。