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>