码迷,mamicode.com
首页 > Web开发 > 详细

HTML——传统布局的使用

时间:2018-06-03 19:34:35      阅读:238      评论:0      收藏:0      [点我收藏+]

标签:效果   动物   背景   img   技术   姓名   .com   bsp   pac   

传统布局:使用table来做整体页面的布局

总结:这种方式来制作页面现在也不是很多了,感觉并不是很高效。

需要先用photoshop量出页面布局具体的尺寸位置,再将其划分为表格,对每个格子进行编辑。

每个格子可以嵌套表格,这样有时候写着写着还有点迷糊,要重新找到编辑位置属于哪一个表格的哪个位置,通常会将表格的border设置为1,方便检查

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简历</title>
</head>
<body>
    <table width="800" height="800" border="0" cellpadding="0" cellspacing="0" align="center">
        <tr>
            <td width="260" valign="top" bgcolor="#f2f2f2">
                <table width="260" border="0">
                    <tr height="100">
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td width="230"align="right"><img src="images/0032.jpg" alt="小动物"></td>
                        <td width="30"></td>
                    </tr>
                    <tr>
                        <td align="right">高圈圈</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td align="right">17612341234</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td align="right">18812341234@163.com</td>
                        <td></td>
                    </tr>
                </table>

            </td>

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

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

                </table>
                
                <hr />
                
                <table border="0" cellspacing="0" cellpadding="=0" width="480" height="180">
                    <tr>
                        <td colspan="2"><b>个人基本情况</b></td>
                    </tr>
                    <tr height="10">
                        <td></td>
                    </tr>
                    <tr>
                        <td width="50%">姓名:高圈圈</td>
                        <td width="50%">籍贯:外太空</td>
                    </tr>
                    <tr>
                        <td>性别:女</td>
                        <td>民族:汉族</td>
                    </tr>
                    <tr>
                        <td>身高:168</td>
                        <td>体重:100</td>
                    </tr>
                    <tr>
                        <td>出生日期:2017.1.1</td>
                        <td>电话:17610101010</td>
                    </tr>
                    <tr>
                        <td>专业:啥都学!</td>
                        <td>现居住地:北京</td>
                    </tr>
                </table>
                
                <br />
                
                <table border="0" cellspacing="0" cellpadding="=0" width="480" height="100">
                    <tr>
                        <td><b>教育背景及工作经历</b></td></tr>
                    <tr>
                        <td>2013-2017 吉林大学 光通信专业</td>
                    </tr>
                    <tr>
                        <td>2017-至今 北京邮电大学 电子科学与技术专业</td>
                    </tr>
                </table>
                
                <br />
                
                <table>
                    <tr>
                        <td><b>专业技能</b></td>
                    </tr>
                    <tr>
                        <td>小仙女都是有超能力的!我啥都可能会哦!</td>
                    </tr>
                </table>
                
                <br />
                
                <table>
                    <tr>
                        <td><b>获奖情况</b></td>
                    </tr>
                    <tr>
                        <td>2013—2014 学年度:二等奖学金</td>
                    </tr>
                    <tr>
                        <td>2014—2015 学年度:二等奖学金、院优秀学生干部</td>
                    </tr>
                    <tr>
                        <td>2015—2016 学年度:二等奖学金</td>
                    </tr>
                </table>
            </td>
            
            <td width="30"></td>
        </tr>
    </table>

</body>
</html>

 贴一张效果图:

技术分享图片

还没学样式,所以这个页面的样式还很朴素!

要继续学!不能这么朴素!

HTML——传统布局的使用

标签:效果   动物   背景   img   技术   姓名   .com   bsp   pac   

原文地址:https://www.cnblogs.com/gaoquanquan/p/9129723.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!