web- 作业（表单2）

最新推荐文章于 2024-03-24 22:19:48 发布
最新推荐文章于 2024-03-24 22:19:48 发布
阅读量203 收藏
点赞数 1
分类专栏： html 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45323349/article/details/115264644
版权

网页实现样本：
在这里插入图片描述

  1. 设计好网页框架表格
    理想：
    在这里插入图片描述

现实：
在这里插入图片描述
很明显看出来12这一行是没有全部填满的23 24也是，此时的代码如下：
这里我没有用跨行或者跨列。

<html>
    <head>
        <title></title>
    </head>
    <body>
        <form>
            <table border="1px">
                <tbody>
                    <tr>
                        <td>
                            1
                            <table border="1px" align="right" width = 90%>
                                <tbody>
                                    <tr>
                                        <td>2</td>
                                        <td>3</td>
                                        <td>4</td>
                                        <td>5</td>
                                        <td>6</td>
                                        <td>7</td>
                                        <td>8</td>
                                        <td>9</td>
                                        <td>10</td>
                                        <td>11</td>
                                    </tr>
                                </tbody>
                            </table>
                        </td>
                   
                    </tr>
                    <tr>
                        <td width = 98%>12</td>
                    </tr>
                    <tr>
                        <td width = 40%>13</td>
                        <td width = 60%>14</td>
                    </tr>
                    <tr>
                        <td width = 40%>15</td>
                        <td width = 60%>16</td>
                    </tr>
                    <tr>
                        <td width = 40%>17</td>
                        <td width = 60%>18</td>
                    </tr>
                    <tr>
                        <td width = 40%>19</td>
                        <td width = 60%>20</td>
                    </tr>
                    <tr>
                        <td width = 40%>21</td>
                        <td width = 60%>22</td>
                    </tr>
                    <tr>
                        <td width = 98%>
                            23
                        </td>
                    </tr>
                    
                    
                </tbody>
                <tfoot>
                    <tr>
                        <td>24</td>
                    </tr>
                </tfoot>
            </table>
        </form>
       
    </body>
</html>

修改：
增加上该有的跨列。
如图所示：
在这里插入图片描述
在这里插入图片描述
还有两行就不放上来，和以上操作相同。

修改结果如下
在这里插入图片描述
调整比例之后：
在这里插入图片描述
最终结果：
在这里插入图片描述
最新的代码在下面。
总结：
其实不难发现，有很多细节问题还是没办法做到
比如：
1.（未解决）在这里插入图片描述
这段文字做不到向上对齐，我只做到了放在中间。
2. （解决）
控制最外层的表格大小（治标不治本，具体设置位置还不会）
在这里插入图片描述
这一段是向上对齐， 不是靠中间的。
3. （解决）
同上治标不治本
在这里插入图片描述
这里也是，有对齐的问题，不是在正中间的。
4. （解决）
<style="float: right;"> 在这里插入图片描述
上面这张图，所画线的地方都是没有做到的。
还有就是字体的改变，换字体，没有换相对应的。

上述问题，还需慢慢摸索来解决，目前先这样了~

总结（不太会用的几个知识点）：
1.<font size = 1 color = "white">
用于设置字体的大小以及颜色
2.style 是用于设置边框属性 type用于设置表单中便签的类型
3.当表格不规则，例如左边一列和右边一列行数不相符时，需要利用跨行或者跨列来实现。
4.关于设置图片的大小以及表格的大小最好是使用具体的像素值来定义，利用百分比，不好控制大小，容易出现偏差。

改版：
在这里插入图片描述
代码：

<!--修改 4.1-->
<!--网页细节增加-->
<html>
    <head>
        <title></title>
    </head>
    <body style = "background-color: rgb(134, 136, 156);">
        <form>
            <table align ="center" style = "background-color: floralwhite;" width = 778px height = 800px  >
                <tbody>
                    <tr>
                        <td colspan="2" height = 50px>
                            <img src="img/0.png" width= 15% height = 32px>
                            <table align="right"  width = 85% height = 30px>
                                <tbody>
                                    <tr align="center" cellpadding = 0>
                                        <td style="background-color: #666688";"><font size = 1 color = white><b>设计动态</b></font></td>
                                        <td style="background-color:#8C8EA3"><font size = 1 color = white>技术文档</font></td>
                                        <td style="background-color: #8C8EA3;"><font size = 1 color = white>艺术设计</font></td>
                                        <td style="background-color: #8C8EA3;"><font size = 1 color = white>摄影摄像</font></td>
                                        <td style="background-color: #8C8EA3;"><font size = 1 color = white>计算机技术</font></td>
                                        <td style="background-color: #8C8EA3;"><font size = 1 color = white>资源下载</font></td>
                                        <td style="background-color: #8C8EA3;"><font size = 1 color = white>个人专栏</font></td>
                                        <td style="background-color: #8C8EA3;"><font size = 1 color = white>CG绘画</font></td>
                                        <td style="background-color: #8C8EA3;"><font size = 1 color = white>专题</font></td>
                                        <td style="background-color: #8C8EA3;"><font size = 1 color = white>论坛</font></td>
                                    </tr>
                                </tbody>
                            </table>
                        </td>
                   
                    </tr>
                    <tr>
                        <td width = 98% colspan="2" height = 25px style="background-color: silver;"><font size = 1>您所在的位置：<a href="">首页</a> &gt; <a href="">业界动态</a></font></td>
                        
                    </tr>
                    <tr height = 15%>
                        <td width = 25% height = 15%>
                            <img src="img/1.png" width = 250px height = 120px >
                        </td>
                        <td width = 75%>
                            <img src="img/2.png" width = 750px height = 120px>
                        </td>
                    </tr>
                    <tr height = 25px>
                        <td width = 25% style="background-color: silver;">
                            <font size = 2>&nbsp; <b> 最新消息</b></font>
                            
                        </td>
                        <td width = 75% style="background-color: silver;" >
                            <font size = 2>&nbsp; <b>其他信息</b></font>
                            <!--同一行文字一部分左对齐一部分右对齐-->
                            <font size = 1 style="float: right;">更多内容&nbsp;</font>
                        </td>
                    </tr>
                    <tr height = 25%>
                        <td width = 25% style="background-color: rgb(226, 225, 225);">
                            <!--list-style用于取消圆点标志 -->
                            <ul style="list-style: none;padding:0px;margin:0px">
                                <li><a href="https://blog.csdn.net/"><font size = 3>谈交互设计的经验积累</font></a></li>
                                <li><a href="https://blog.csdn.net/"><font size = 3>视觉中国锐店第二波设计风波</font></a></li>
                                <li><a href="https://blog.csdn.net/"><font size = 3>7天精通PS CSS平面视觉设计</font></a></li>
                                <li><a href="https://blog.csdn.net/"><font size = 3>触动人心-设计优秀的iPhone应用</font></a></li>
                                <li><a href="https://blog.csdn.net/"><font size = 3>不卖东西，反而卖的好</font></a></li>
                                <li><a href="https://blog.csdn.net/"><font size = 3>论应届毕业生的职业发展</font></a></li>
                                <li><a href="https://blog.csdn.net/"><font size = 3>网恋组织内幕：培训员工谈恋爱</font></a></li>
                                <li><a href="https://blog.csdn.net/"><font size = 3>为创意工作者打造高效的工作环境</font></a></li>
                                <li><a href="https://blog.csdn.net/"><font size = 3>视觉设计师原创iPhone4保护壳</font></a></li>   
                            </ul>
                            
                        </td>
                        <td width = 75% style="background-color: rgb(226, 225, 225);">
                            <table  width = 600px>
                                <tbody>
                                    <tr>
                                        <td>
                                            <img src="img/3.png"width = 265px height = 230px>
                                        </td>
                                        <td>
                                            <a href="https://blog.csdn.net/"><font size = 3>谈交互设计的经验积累</font></a>
                                            <br/>
                                            <a href="https://blog.csdn.net/"><font size = 3>视觉中国锐店第二波设计风波</font></a>
                                            <br/>
                                            <a href="https://blog.csdn.net/"><font size = 3>7天精通PS CSS平面视觉设计</font></a>
                                            <br/>
                                            <a href="https://blog.csdn.net/"><font size = 3>触动人心-设计优秀的iPhone应用</font></a>
                                            <br/>
                                            <a href="https://blog.csdn.net/"><font size = 3>不卖东西，反而卖的好</font></a>
                                            <br/>
                                            <a href="https://blog.csdn.net/"><font size = 3>论应届毕业生的职业发展</font></a>
                                            <br/>
                                            <a href="https://blog.csdn.net/"><font size = 3>网恋组织内幕：培训员工谈恋爱</font></a>
                                            <br/>
                                            <a href="https://blog.csdn.net/"><font size = 3>为创意工作者打造高效的工作环境</font></a>
                                            <br/>
                                            <a href="https://blog.csdn.net/"><font size = 3>视觉设计师原创iPhone4保护壳</font></a>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            
                        </td>
                    </tr>
                    <tr height = 25px>
                        <td width = 25% style="background-color: rgb(192, 202, 174);">
                            <img src="img/4.png" width = 60px height = 20px align = "left">
                            <input name = "class"type ="radio" align = "right"> <font size = 2>全网</font>
                            <input name = "class" type ="radio" align = "right"> <font size = 2>本站</font>
                            <input name = "class" type ="radio" align = "right"> <font size = 2>论坛</font>
                        </td>
                        <td width = 75% style="background-color: silver;">
                            <font size = 2>&nbsp;<b>软件信息</b></font>
                            <font size = 2 style="float: right;">更多内容&nbsp;</font>
                        </td>
                    </tr>
                    <tr height = 23%>
                        <td width = 25% style="background-color: rgb(192, 202, 174);">
                            <table  height = 184px>
                                <tbody>
                                    <tr height = 19px>
                                        <td>
                                            <input type="search"> <input type="button" value="搜索">
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <h align = "right"><font size = 2>热门搜索：CSS Fireworks 设计比赛 网页制作 web标准 用户体验 UE photoshop Dreamweaver Studio8 Flash 手绘 CG</font></h>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            
                        </td>
                        <td width = 75% style="background-color: rgb(226, 225, 225);">
                            <table width = "600px">
                            <tbody>
                                <tr>
                                    <td>
                                        <img src="img/5.png"width = 265px height = 230px>
                                    </td>
                                    <td>
                                        <a href="https://blog.csdn.net/"><font size = 3>谈交互设计的经验积累</font></a>
                                        <br/>
                                        <a href="https://blog.csdn.net/"><font size = 3>视觉中国锐店第二波设计风波</font></a>
                                        <br/>
                                        <a href="https://blog.csdn.net/"><font size = 3>7天精通PS CSS平面视觉设计</font></a>
                                        <br/>
                                        <a href="https://blog.csdn.net/"><font size = 3>触动人心-设计优秀的iPhone应用</font></a>
                                        <br/>
                                        <a href="https://blog.csdn.net/"><font size = 3>不卖东西，反而卖的好</font></a>
                                        <br/>
                                        <a href="https://blog.csdn.net/"><font size = 3>论应届毕业生的职业发展</font></a>
                                        <br/>
                                        <a href="https://blog.csdn.net/"><font size = 3>网恋组织内幕：培训员工谈恋爱</font></a>
                                        <br/>
                                        <a href="https://blog.csdn.net/"><font size = 3>为创意工作者打造高效的工作环境</font></a>
                                        <br/>
                                        <a href="https://blog.csdn.net/"><font size = 3>视觉设计师原创iPhone4保护壳</font></a>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        </td>
                    </tr>
                    <tr height = 15px style="background-color: silver;">
                        <td  colspan="2">
                            
                        </td>
                    </tr>
                    
                    
                </tbody>
                <tfoot >
                    <tr height = 55px>
                        <td colspan="2" style="background-color: steelblue;">
                            <h><font color = "white">关于站点 | 免责声明 | 联系站长 | 版权隐私 | 友情链接 | 网站地图 | 京ICP备05002321      </font></h>
                            <h ><font color = "white" style="float: right;"> ©1999-2013 Blueidea.com.版权所有</font></h>
                        </td>
                    </tr>
                </tfoot>
            </table>
        </form>
       
    </body>
</html>

问题：
1.cellpadding，cellspacing失效问题，
2.无序列表，取消圆点并且与单元格有间隙
3.如何控制嵌套表格在母表格中的位置

扎刺
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【web】--表单与表格
博客
09-22 126
如何点击图片或文字获得表单焦点 label标签中的for属性的属性值和表单中id属性的属性值保持一致
web网页制作期末大作业
11-17
总的来说，这个"web网页制作期末大作业"旨在考察学生对Web前端基础知识的掌握程度，以及实际应用这些知识解决问题的能力。通过这个项目，学生不仅能提升技术技能，还能培养良好的项目管理和团队协作习惯。
4.11web作业-----表单标签
kelouze06的博客
04-11 383
登录界面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <titl
表单标签(web作业)
Stwemh的博客
09-17 896
web课程的表单作业 在网页中打开： 代码如下： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;web作业&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;form&gt; &lt;label for
【Web前端】课后作业（表单标签）
weixin_66216073的博客
03-24 225
【Web前端】课后作业（表单标签）
【Web动态网页设计作业】简单的JavaScript验证表单
小二笙的博客
12-27 7889
编写一个JavaScript程序验证表单，其中，表单中有四个元素，分别是姓名，年龄，email，以及一个专业的复选框，其中专业选项为“计算机科学与技术”“通信工程”，“英语”。要求在表单提交的时候做如下判断： （1）姓名年龄和email三个元素的内容均不能为空； （2）年龄必须为数字； （3）email中必须有一个@符号。完全满足上述三个条件时方可提交，否则弹出给用户提示信息。 （4）在此基础上，...
web-期末大作业合集
04-07
【标题】"web-期末大作业合集"揭示了这个压缩包主要包含的是与Web开发相关的学习项目，尤其是针对学期末的大作业。这些作业可能涵盖了前端开发的各种技术，旨在检验学生对HTML、CSS以及JavaScript等基础技能的掌握...
web前端大作业-多种表单合集网页模板-界面适配移动设备-HTML源码.zip
05-28
现在，我们为你带来一份精心制作的Web前端大作业源码——多种表单合集网页模板。 功能亮点 多表单集成：一次下载，拥有多种常见表单模板，满足不同项目需求。 移动设备适配：无论手机还是平板，都能获得流畅、舒适...
Web-Project:作业 WEB KIIT
05-29
【标题】"Web-Project:作业 WEB KIIT" 是一个关于网络开发的项目作业，主要涉及WEB技术的学习与实践。这个项目可能是为KIIT（Kalinga Institute of Industrial Technology）或其他类似的教育机构的学生设计的，旨在...
web期末作业设计网页aWeb-mast开发笔记
最新发布
06-18
在本项目"web期末作业设计网页aWeb-mast开发笔记"中，我们聚焦于Web开发领域，特别是针对K12教育阶段的学习者。这个作业旨在帮助学生深入理解Web开发的基本概念，包括HTML、CSS和JavaScript等核心技术。下面将详细...
纯html的form表单实操练习
m0_64336780的博客
04-05 9210
纯html的form表单实操练习
Web构建表单——form表单元素
Braveyjc的博客
12-27 874
HTML构建表单的基本结构、基本元素、表单的处理
web前端（HTML表单加强练习作业）
miss_copper的博客
07-23 137
【代码】web前端（HTML表单加强练习作业）
Web:学生课程表表格/用户注册表单
ZzzWClock的博客
06-18 2879
一.学生课程表 1.课程表模样 2.课程表html代码块 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial
web学习一：简单的写一个填写信息的表单
weixin_44814698的博客
09-05 1103
简单的写一个表单 代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <style> table{ border: 1px solid beige; }
web表单作业
weixin_30596165的博客
09-17 324
<!DOCTYPE html> <html> <head> <title>web表单作业</title> </head> <body> <form action="" method="get"> <label for="zhanghu">账户:</...
web前端作业
programmer_wbb
03-19 8414
【任务2-1】实现Q-Walking E&amp;S购物模块首页的设计&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999...
web网页前端学习 案例一之制作网页表格
程序员小白的博客
09-02 5626
web 前端学习 案例一1. 制作网页表格2. 表格合并 1. 制作网页表格 <!<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- table>tr*4>td*d + tab --> <!-- border 边框宽度，border
2021-07-09-web作业
tubulvxing1的博客
07-10 142
web前端作业：表单练习-相识相知，就在真爱页面 我是表单里面嵌套表格，因为表单元素需要设置css样式使其中的控件进行对齐，表格的话就不用这么麻烦，算是偷懒吧。写的一般，只供借鉴。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <me
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值