20170927自己做的第一个网页

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了20170927自己做的第一个网页相关的知识,希望对你有一定的参考价值。

 

技术分享
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>作业</title>
</head>
<body>
    <table border="0" cellspacing="0" cellpadding="0" width="100%"><!-- 网页采用5行3列,头、身、脚的布局 -->
        <thead><!-- 表格头部,第1行 -->
            <tr bgcolor="e1f2f9"><!-- 顶部 -->
            <td width="15%">
                <img src="images/logo.png" alt="慕课网"/>
            </td>    
            <td align="center" valign="middle" width="70%">
                <b>学校概括&nbsp;机构设置&nbsp;师资队伍&nbsp;科学研究&nbsp;招生就业&nbsp;图书馆&nbsp;校长信箱&nbsp;校园导航</b></td>    
            <td align="left" valign="middle" width="15">快速通道
                <select><!-- 选项 -->
                    <option>Volvo</option>
                    <option>baidu</option>
                    <option>yahoo</option>
                </select>
            </td>    
            </tr>
        </thead>
        <tbody><!-- 页面主体 -->
            <tr><!-- banner区,第2行 -->
                <td colspan="3"><!-- 三列并一列,插图 -->
                    <img src="images/banner.jpg" width="100%" height="350px"/>
                </td>
            </tr>
            <tr><!-- 新闻区,第3行 -->
                <td colspan="3"><!-- 三列并一列,嵌套表格三行三列 -->
                    <table align="center" cellspacing="20px">
                        <tr><!-- 嵌套第一行 -->
                            <td>
                                <h3>慕课快讯&nbsp;基层风采&nbsp;媒体聚焦&nbsp;慕课视频&nbsp;&gt;&gt;</h3>
                                <p>&gt; 慕课平台课程扩容 涵盖拖得领域 12-30</p>
                                <p>&gt; 李克强主持座谈会 葛优刘国梁被邀请进中南海 12-30</p>
                                <p>&gt; 太君演习“歼灭”解放军 专家:自欺欺人 12-30</p>
                                <p>&gt; 气象局停发霾预警?回应:正协商联合发布机制 12-30</p>
                                <p>&gt; 独家:小米影业解散宣发部门 宣布成立一年后刹车 12-30</p>
                                <p>&gt; “哑巴群众”开口说话 是稿件有误还是新闻造价? 12-30</p>
                                <p>&gt; 要置业,看看2017全球楼市掘金路线图 12-30</p>
                                <p>&gt; 王健林与房地产越来越远?贾跃亭与房地产越来越近 12-30</p>
                            </td>
                            <td>
                                <h3>慕课快讯&nbsp;基层风采&nbsp;媒体聚焦&nbsp;慕课视频&nbsp;&gt;&gt;</h3>
                                <p>&gt; 慕课平台课程扩容 涵盖拖得领域 12-30</p>
                                <p>&gt; 李克强主持座谈会 葛优刘国梁被邀请进中南海 12-30</p>
                                <p>&gt; 太君演习“歼灭”解放军 专家:自欺欺人 12-30</p>
                                <p>&gt; 气象局停发霾预警?回应:正协商联合发布机制 12-30</p>
                                <p>&gt; “哑巴群众”开口说话 是稿件有误还是新闻造价? 12-30</p>
                                <p>&gt; 独家:小米影业解散宣发部门 宣布成立一年后刹车 12-30</p>
                                <p>&gt; 要置业,看看2017全球楼市掘金路线图 12-30</p>
                                <p>&gt; 王健林与房地产越来越远?贾跃亭与房地产越来越近 12-30</p>
                            </td>
                            <td valign="middle" align="left">
                                <img src="images/weixin.png"/>
                            </td>
                        </tr>
                        <tr><!-- 嵌套第二行 -->
                            <td><b>近期专题</b></td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr align="center"><!-- 嵌套第三行,底部三图 -->
                            <td>
                                <img src="images/1.png"><br/>教育发展基金专题
                            </td>
                            <td>
                                <img src="images/2.png"><br/>教育发展基金专题
                            </td>
                            <td>
                                <img src="images/3.png"><br/>教育发展基金专题
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr><!-- 友情链接区,第4行-->
                <td colspan="3" bgcolor="e1f2f9" align="center" valign="middle" height="60px"><!-- 三列并一列 -->
                    文化站点&nbsp; 信息服务&nbsp; 校友会&nbsp; OA系统&nbsp; 教务管理系统&nbsp; 网络教学平台&nbsp; vpn服务&nbsp; acm/oj&nbsp; 旧版入口&nbsp; 站群系统
                </td>
            </tr>
        </tbody>
        <tfoot><!-- 页脚部分,,第5行 -->
            <tr align="center" valign="middle" bgcolor="#89a9bd" ><!-- 商标等 -->
                <td colspan="3" height="100px"><!-- 三列并一列 -->
                    Copyrigth &copy; 2017 imooc.com All   Rights Reserved | 京ICP备 13046642号-2
                </td>
            </tr>    
        </tfoot>
    </table>
</body>
</html>
View Code

 

从开始学习web前端,到现在已经是第七天,按照慕课网的课程流程,自己做了第一个网页(单纯的只使用html标签做的网页)。看到成果,这对于现在情绪处于人生低谷的我来说是一种莫大的鼓励!这也坚定了继续学习的信心!加油!

 

发现的问题和解决方法:

1.用table表格制作网页布局,发现表格和网页头部、左右都有一定的空白距离,于是查看图片------没有问题,测试cellspacing.cellpadding等等其他属性,发现没有卵用。于是不得不百度一下,发现了解决方法在所学知识之外,通过新标签的添加,发现问题解决了。目前并没有加入网页里。

2.在制作网页的过程中,对于table、tr、td的标签属性有了进一步的了解。align、valign、width、height、color等等等等,这些标签并不是通用的。比如tr标签貌似并没有width和height标签(也可能是我学的不全),等所有初级课程学完之后再回头去学习w3school的知识,届时再做补充和修改。

 

注:我发现我的性格真适合做web,发现了问题就要刨根问题去解决,这样解决可以那么那样解决行不行,页面布局不协调就想着做的更好,标签就要码的整整齐齐,这样看的才舒服嘛,哈哈哈哈哈,love it!

以上是关于20170927自己做的第一个网页的主要内容,如果未能解决你的问题,请参考以下文章

20170927-构建之法:现代软件工程-阅读笔记

渣渣HTML外加javascript做的第一个同乡会网页(好多功能都没写,只弄出来一个框架)

自己做的一个网页的布局实例

怎么制作手机网页 如何制作一个手机html页面

浅谈我的第一个看得见的项目

学习两个星期后做的第一个网页