【单选按钮区域实现三选一】【2018腾讯手游排行榜】【HTML表格标签】【网页设计与网站开发HTML、CSS、JavaScript】【第七章】表单——实验作业题【实验3、4、5】
2024-04-10 09:11:40
以下为本人大一选修课《网页设计与网站开发》的实验作业题，均为本人原创，分享给大家。如有不足之处欢迎指出。
目录
1.实验3
题目
代码
实验效果
2.实验4
题目
代码
实验效果
3.实验5
题目
代码
实验效果
注：
- 图片文件需保存到根目录下
- 网页运行效果以Microsoft Edge为准，其他浏览器可能显示会出问题。
1.实验3
题目
打开“index-template-1.html”，另存为test3.html，完成如下图所示的HTML文档。单选按钮区域实现三选一。
代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test3</title>
<style type="text/css">
<!--
.formtop {width:800px;height:30px;font-size:26px; font-weight:bold;margin:0px auto;
}
.formcontent {width: 800px;margin-top: 10px;margin-right: auto;margin-bottom: 0px;margin-left: auto;
}
.formleft { width:500px; float:left;
}
.formright {width:280px;float:right;
}.mytitle input {width:490px;height:28px;color:#D3D3D3;
}
.mybuttonbg {margin-top:10px;width:490px;height:30px;line-height:30px;background-color:#EEEEEE;
}
.mytextarea {width:490px;
}
.mytextarea textarea {width:484px;height:450px;
}
.myradiobg{width:287px;height:109px;background-image:url(images/2.jpg);
}
.mycheckboxbg {width:287px;height:318px;background-image:url(images/3.jpg);
}.myradio {padding-top: 40px;list-style-type: none;
}
.mycheckbox {padding-top:70px;list-style-type: none;
}
-->
</style>
</head><body>
<div class="formtop">
<span><img src="data:images/write.jpg" width="28" height="28" /></span>撰写新文章
</div>
<div class="formcontent"><form name="myform"><div class="formleft"><div class="mytitle"><!--这里插入文本框--><input name="title" type="text" placeholder="在此输入标题"> </div><div class="mybuttonbg"><!--这里插入button--><input name="b" type="button" value="b" /><input name="i" type="button" value="i" /><input name="link" type="button" value="link" /><input name="img" type="button" value="img" /><input name="ul" type="button" value="ul" /><input name="li" type="button" value="li" /><input name="查询" type="button" value="查询" /><input name="全屏" type="button" value="全屏" /></div><div class="mytextarea"><textarea name="textarea" cols="" rows=""></textarea></div></div><div class="formright"><div><img src="data:images/1.jpg" /></div><div class="myradiobg"><ul class="myradio"><li><label><input type="radio" name="RadioGroup1" value="单选" id="RadioGroup1_0" />标准</label></li><li><label><input type="radio" name="RadioGroup1" value="单选" id="RadioGroup1_1" />日志</label></li><li><label><input type="radio" name="RadioGroup1" value="单选" id="RadioGroup1_2" />相册</label></li></ul></div><div class="mycheckboxbg"><ul class="mycheckbox"><table width="200"><tr><td><label><input type="checkbox" name="CheckboxGroup1" value="复选框" id="CheckboxGroup1_0" />产品中心</label></td></tr><tr><td><label><input type="checkbox" name="CheckboxGroup1" value="复选框" id="CheckboxGroup1_1" />企业中心</label></td></tr><tr><td><label><input type="checkbox" name="CheckboxGroup1" value="复选框" id="CheckboxGroup1_2" />企业概况</label></td></tr></table></ul></div><div><img src="data:images/4.jpg" /></div></div></form>
</div>
</body>
</html>
实验效果
2.实验4
题目
新建html5页面，文件名为“test4.html”，利用HTML和CSS完成如下图所示的HTML表格案例。
代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test4</title>
<style type="text/css">
.td1 {font-weight: bold;
}
</style>
</head><body>
<table width="450" border="3" cellpadding="15" bordercolor="#999900"><caption>2018腾讯手游排行榜</caption><tr class="td1"><td><div align="center">热游榜</div></td><td><div align="center">游戏名</div></td><td><div align="center">类型</div></td><td><div align="center">特征</div></td></tr><tr><td><div align="center">1</div></td><td>王者荣耀</td><td>策略战棋</td><td>3D竞技</td></tr><tr><td><div align="center">2</div></td><td>天龙八部手游</td><td>角色扮演</td><td>3D竞技</td></tr><tr><td><div align="center">3</div></td><td>龙之谷手游</td><td>角色扮演</td><td>3D格斗</td></tr><tr><td><div align="center">4</div></td><td>弹弹堂</td><td>休闲益智</td><td>Q版竞技</td></tr><tr><td><div align="center">5</div></td><td>火影忍者</td><td>角色扮演</td><td>2D格斗</td></tr>
</table>
<p> </p>
</body>
</html>
实验效果
3.实验5
题目
新建html5页面，文件名为“test5.html”，利用HTML和CSS完成如下图所示的HTML表格案例。注意：
- caption、th单独设置
- tr奇数行和偶数行的背景不一样
代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test5</title>
<style type="text/css">caption {font-weight: bold;}th {color: #FFF;text-align: left;}tr{background-color:expression((this.sectionRowIndex%2==0)?"red":"blue")}.biaoQian {color:#2F6B1B;text-decoration: underline;}tr:nth-child(odd){background:#CCC;}tr:nth-child(even){background:#FFF;}div {font-size: 24px;line-height:2;}
</style>
</head><body>
<table cellspacing="0" width="500" border="1" cellpadding="10" bordercolor="#999999"><caption><div align="left">HTML表格标签 </div></caption><tr><th scope="col" bgcolor="#333333">标签</th><th scope="col" bgcolor="#333333">描述</th></tr><tr><td class="biaoQian"><table></td><td>定义表格</td></tr><tr><td class="biaoQian"><th></td><td>定义表格的表头</td></tr><tr><td class="biaoQian"><tr></td><td>定义表格的行</td></tr><tr><td class="biaoQian"><td></td><td>定义表格单元</td></tr><tr><td class="biaoQian"><caption></td><td>定义表格标题</td></tr><tr><td class="biaoQian"><colgroup></td><td>定义表格列的组</td></tr><tr><td class="biaoQian"><col></td><td>定义用于表格列的属性</td></tr><tr><td class="biaoQian"><thead></td><td>定义表格的页眉</td></tr><tr><td class="biaoQian"><tbody></td><td>定义表格的主体</td></tr><tr><td class="biaoQian"><tfoot></td><td>定义表格的页脚</td></tr>
</table>
</body>
</html>
实验效果
《网页设计与网站开发》实验题不定期更新，有需要可以点击右下角《专栏目录》，
也可以点击链接：HTML_秃头小二的博客-CSDN博客
如有帮助可以帮忙点个赞嘛……谢谢啦！
【单选按钮区域实现三选一】【2018腾讯手游排行榜】【HTML表格标签】【网页设计与网站开发HTML、CSS、JavaScript】【第七章】表单——实验作业题【实验3、4、5】相关推荐
- 【艾琪出品】-【网页设计与网站建设 】测试题系列三
[声明]本博客内容,若有侵权请告之,会删除 非商业用途,如有侵权,请告知我,我会删除 如回复不及时,或不懂的请加我 微信 island68 QQ823173334 可以的话注明来自CSDN 很希望 ...
- form左上角有个锁的符号_第三章 表单笔记
attion 此属性指示服务器处理表单输出的程序一般来说,当用户单点击的"提交"按钮后信息发送到Web服务器上,由attion属性所指的程序处理如果action为空则默认提交到本页 ...
- 第三章 表单与表单元素
学习目标 理解表单的作用 理解表单与表单元素的关系 掌握表单标签及其属性 掌握各种表单元素标签及其属性 在Web网页中,浏览者经常需要与Web服务器进行数据交互.当浏览者需要填写数据并将这些数据发送到 ...
- 有关H5的第三章表单介绍
第三章 1.表单元素: (1)文本框:用于输入用户的姓名.用户名和电子邮件等 (2)密码框:用于输入密码,显示为代替字符,如星号"*" (3)单选按钮:在多个项中选择选一个 (4) ...
- 控制元素显示和隐藏的方式及区别、内容溢出处理(区域滚动)、透明性、字体图标、常见字体、自定义字体设计、网站图标、CSS代码分析
元素的显示与隐藏: 常见控制元素的显示和隐藏的属性有display.visibility.overflow,需要清楚的理解三者之间的区别. display显示: 当值为none时为销毁对象,不保留原位 ...
- 魔兽服务器联盟在线,魔兽世界2018联盟服务器 | 手游网游页游攻略大全
发布时间:2016-06-23 根据娱乐联盟论坛的消息,这个新功能将允许玩家与拥有真实身份的朋友组建5人地下城团队,并可以跨服务器运作. 这一服务器将具有相似的随机寻宝特征.虽然文中没有透露具体的发布 ...
- 2018滴水LUA手游脚本制作实战视频教程
1_脚本制作的环境搭建 2_Lua基本语法 3_Lua函数 4_脚本制作的常用函数-findcolor函数 5_脚本开发常用函数-触摸函数讲解 6_Lua运算符介绍 7_Lua流程控制讲解 8_Lua ...
- 剑侠情缘三显示连接服务器超时,剑侠情缘手游进不去怎么办？重连黑屏解决办法攻略...
剑侠情缘手游于今日4月20日开启了安卓限号测试,不过目前好多玩家反馈,游戏无法进入,出现各种问题,不能体验到该游戏.对于游戏进不去到底该怎么办呢?下面小编为大家带来剑侠情缘手游进不去怎么办?重连黑屏解 ...
- ff14服务器最新,ff14 2018年服务器 | 手游网游页游攻略大全
发布时间:2016-06-09 最终幻想14中躲避BOSS技能什么的一直都是小伙伴们不断诟病的方面之一,由于FF14特殊的机制,技能躲避的及时性不能很好的表现.那么现在,我们就一起来看看,到底在最终幻 ...
最新文章
- 在 Linux 和 Windows 下源码安装 Perl
- js中的hasOwnProperty和isPrototypeOf方法
- springBoot整合Listener
- [蓝桥杯2016初赛]冰雹数-模拟
- 牛客网【每日一题】4月24日 子序列
- SSKeychain
- eclipse中Lombok注解无效
- springMVC从上传的Excel文件中读取数据
- [ARC061E]すぬけ君の地下鉄旅行 / Snuke's Subway Trip
- hector与gmapping总结
- WPF DataGrid ListView等控件Binding LINQ数据源
- vue实现php传数据,vue+props传递数据怎样实现
- java写的飞机大战的图片素材_飞机大战图片素材
- apizza开发工具
- 复元奇方饮_谁研制的？治疗什疾病？作用与功效？
- 《霍比特人2》：我靠，洞里有条好大的龙！！！
- 面向对象方式爬取知乎鸡汤
- JavaWeb项目监听数据表变化并通知前台(数据来源于自身)
- [日推荐] 『Streeter』极乐商店邀你一起来尬舞啊！-store.dreawer.com
- windows terminal ssh连接
热门文章
- @Target,@Retention,@Documented 注释的作用
- c# cad 二次开发 类库 netload 图层操作、创建图层、删除图层、设置当前图层等
- 明明apple id 密码 是对的，登陆 iTunes还总提示密码错误
- 2022-2028年全球与中国卫生无纺布行业深度分析
- Sharepoint 2010网站模版WSP定制使用点滴
- 【比赛回顾】2020广工文远知行杯新生程序设计竞赛(初赛)
- 9.0系统登录 服务器,游戏工作室来袭！魔兽9.0经济系统与服务器负荷再次面临考验...
- SpringBoot+MyBatis 基于xml实现多表查询的两种方式
- linux中下载火狐浏览器_在Linux中加速Firefox
- 多张图片合成一张图片(alpha混合)