1、建立如图所示列表

代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><ol type='1' start='1'><li>你更喜欢吃那种水果（）</li><ol type='A' start='A'><li>草莓</li><li>香蕉</li><li>苹果</li><li>西瓜</li></ol><li>你平时休闲去的地方是哪里（）</li><ol type='A' start='A'><li>郊外</li><li>商场</li><li>公园</li><li>酒吧</li></ol><li>你认为容易吸引你的是哪类人（）</li><ol type='A' start='A'><li>有才气的人</li><li>依赖你的人</li><li>善良的人</li><li>优雅的人</li></ol><li>如果你可以成为一种动物，你希望可以成为哪种（）</li><ol type='A' start='A'><li>猫</li><li>狗</li><li>猴子</li><li>小鸟</li></ol><li>你最向往的生活是（）</li><ol type='A' start='A'><li>面朝大海，春暖花开</li><li>采菊东篱下，悠然见南山</li><li>空调wifi西瓜，晚上有鱼有虾</li><li>职场达人</li></ol><li>你最喜欢的电影类型（）</li><ol type='A' start='A'><li>动作剧</li><li>喜剧</li><li>爱情</li><li>都一般，没有最喜欢的</li></ol></ol>
</body>
</html>

实现效果如下：

再给其添加CSS样式后，可复原页面。CSS代码如下图所示

 <style>.box {width: 500px;height: 620px;background-color: cyan;}</style>

实现结果如下：

这里采用的策略是：标签嵌套的方法，先将所有的问题用有序列表表示，在将每个问题具体的选项通过无序列表嵌套在问题内部。在设置CSS样式的时候，为了实现部分页面有颜色，添加了一个盒子，将所有的列表包裹在内，再通过给盒子添加背景色、宽高属性来实现效果，最后为了美观，又给盒子加了上下的内边距。

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-scale=1.0"><title>Document</title>
</head>
<body><table><tr>    <td rowspan="5" class='ora'>学生</td><td colspan="6" class='blue'>学生信息表</td></tr><tr class='red'><td>序号</td><td>姓名</td><td>性别</td><td>年龄</td><td>电话</td><td>住址</td></tr><tr class='grey'><td>1</td><td>张三</td><td>男</td><td>23</td><td>110</td><td>雁塔</td></tr><tr class='grey'><td>1</td><td>张三</td><td>男</td><td>23</td><td>110</td><td>雁塔</td></tr><tr class='grey'><td>1</td><td>张三</td><td>男</td><td>23</td><td>110</td><td>雁塔</td></tr></table>
</body>
</html>

CSS实现代码为：

<style>table{border: 1px solid black;text-align: center;}td {width: 100px;height: 30px;border: 1px solid black;}.ora {background-color: orange;}.blue {color: red;background-color: aqua;}.red {background-color: rgb(207, 59, 59);}.grey {background-color: dimgrey;}</style>

最终实现页面为：

这里采用的列表标签。主要考察对表格的跨行和跨列的理解，具体实现过程中，预先写好结构，在进行具体布局，再通过给标签添加类选择器，分别实现每一块区域的效果，刚开始，我给整个table添加了灰色属性，然后再给其他特定区域添加颜色覆盖掉别的部分的颜色，但是在给整个列表添加了灰色属性后，整个页面都能实现效果，但是边框间距也变成了灰色，我又重新给每行元素进行添加属性，最终页面得以实现。

3、通过表单实现如下所示页面

HTML的实现代码为：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><form action=""><table><tr><td colspan='2'>绑定MSN/QQ账号（找到MSN/QQ上的朋友一起玩，或但他们加入关系时，第一时间通知您）</td></tr><tr><td width='150'><label>账号类型:</label></td><td><select><option value="">MSN</option><option value="">QQ</option></select></td></tr><tr><td>MSN账号：</td><td><input type="text"></td></tr><tr><td>MSN密码：</td><td><input type="password"></td></tr><tr><td colspan='2'> <hr></td></tr><tr><td colspan='2'>创建您的雅虎邮箱</td></tr><tr><td>选择您的雅虎邮箱：</td><td><input type="text"><select name="" id=""><option value="">yahoo.cn</option></select></td></tr><tr><td>密码：</td><td><input type="password"></td></tr><tr><td>再次输入密码：</td><td><input type="password"></td></tr><tr><td>真实姓名：</td><td><input type="text"></td></tr><tr><td><label for="">性别：</label></td><td><input type="radio" name='sex' id='s1' checked/><label for="s1">男</label><input type="radio" name='sex' id='s2'/><label for="s2">女</label></td></tr><tr><td><label>居住城市：</label></td><td><select name="" id=""><option value="">--请选择--</option><option value="">陕西省</option><option value="">山西省</option><option value="">北京市</option></select><select><option value="">--请选择城市--</option><option value="">西安市</option><option value="">商洛市</option><option value="">咸阳市</option><option value="">渭南市</option></select></td></tr><tr><td>隐私设置：</td><td><select name="" id=""><option value="">我想和熟人以及他们的好友一起玩</option></select></td></tr><tr><td colspan='2'> <hr></td></tr><tr><td colspan='2'>密码保护信息（以下信息用于取回密码以及处理其他账户问题，请您慎重填写并牢记）</td></tr><tr><td><label>密码保护问题：</label></td><td><select name="" id=""><option value="">-请选择一个问题-</option></select></td></tr><tr><td><label>答案：</label></td><td><input type="input"></td></tr><tr><td>生日：</td><td><input type="date"> <label for=""><input type="checkbox" checked>保密年龄</label></td></tr><tr><td><label>备用邮箱：</label></td><td><input type="input"></td></tr><tr><td colspan='2'> <hr></td></tr><tr><td colspan='2'>注册检验</td></tr><tr><td>输入校验码：</td><td><input type="input"></td></tr></table></form></body>
</html>

这里综合使用了表格和表单两部分的知识，在表单域通过表格进行布局，具体实现过程中，用到了很多input表单控件以及表格的跨行跨列处理。

HTML+CSS系列实战之表格相关推荐

HTML+CSS系列实战之超链接、音视频
实现一个自我介绍页面,要求用到页面的跳转.音频.视频等综合属性. 主页面的代码为:(intrudiction.html) <!DOCTYPE html> <html lang=&qu ...
JS组件系列——Bootstrap Table 表格行拖拽
JS组件系列--Bootstrap Table 表格行拖拽原文:JS组件系列--Bootstrap Table 表格行拖拽前言:之前一直在研究DDD相关知识,好久没更新JS系列文章了.这两天做了一 ...
css揭秘实战技巧 - 形状 [二]
全目录本系列文章,主要是围绕css3属性,实现我们常见的各种效果,这些效果都是我们实战开发中经常可以用到的效果: css揭秘实战技巧- 背景与边框 [一] css揭秘实战技巧- 形状 [二] css ...
css揭秘实战技巧- 背景与边框 [一]
前言这段时间,一直觉得css这块感觉每次写代码都是常用的那些基本属性,觉得始终没有对css有一个更深层次的掌握,所以,最近开始学习css相关进阶知识,首先第一关就是攻克 "css揭秘&qu ...
css表格文本居中的指令,CSS似乎无法在表格单元中居中文本
我使用所有此代码,因为它正在更改现有网站的行为和外观,所以我无法触及代码结构(请参阅HTML).我所能碰到的只有CSS(也就是为什么你看到这么多!重要,覆盖) 现在我遇到的问题是我似乎无法将tabe- ...
[你必须知道的css系列]第一回：丰富的利器2：CSS选择符之子选择符、相邻选择符...
对了,接下来要讲的属性选择符,相邻选择符,子对象选择符可能大家稍微有点陌生了,这当然也是有原因的,因为IE6及以下的浏览器并不支持这几个选择符,而大多数从事这方面工作的技术人员,多数时候还是主要考虑 ...
HTML CSS JavaScript 从一个表格到一个灰阶颜色表（目录）
HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 01 HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 02 HT ...
CSS 3实战：开发与设计迷你书
2019独角兽企业重金招聘Python工程师标准>>> CSS 3实战:开发与设计迷你书 CSS 3 是近两年在Web开发技术领域最热门的关键词之一,我们完全有理由从现在起就以拥抱的 ...
html 让表格在右侧显示不出来,css中怎么解决表格边框不显示的问题？
css中怎么解决表格边框不显示的问题? html中的表格默认是不显示边框的,可以设置表格的border属性来添加边框,设置cellspacing属性为0来将边框合并,显示单一边框. css中也可以设置 ...
JS组件系列——Bootstrap Table 表格行拖拽（二：多行拖拽）
原文:JS组件系列--Bootstrap Table 表格行拖拽(二:多行拖拽) 前言:前天刚写了篇JS组件系列--Bootstrap Table 表格行拖拽,今天接到新的需要,需要在之前表格行拖拽的 ...

HTML+CSS系列实战之表格

1、建立如图所示列表

2、创建一个表格，要求实现如下图所示的页面。

3、通过表单实现如下所示页面

HTML+CSS系列实战之表格相关推荐

最新文章

热门文章