HTML+CSS系列实战之表格

• 郊外
• 商场
• 公园
• 酒吧
• 你认为容易吸引你的是哪类人（）
• 有才气的人
• 依赖你的人
• 善良的人
• 优雅的人
• 如果你可以成为一种动物，你希望可以成为哪种（）
• 猫
• 狗
• 猴子
• 小鸟
• 你最向往的生活是（）
• 面朝大海，春暖花开
• 采菊东篱下，悠然见南山
• 空调wifi西瓜，晚上有鱼有虾
• 职场达人
• 你最喜欢的电影类型（）
• 动作剧
• 喜剧
• 爱情
• 都一般，没有最喜欢的

• 实现效果如下：

  

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

  实现结果如下：

  

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

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

  =====================================================================================

  

  HTML的实现代码如下：

  学生 学生信息表 序号 姓名 性别 年龄 电话 住址 1 张三 男 23 110 雁塔 1 张三 男 23 110 雁塔 1 张三 男 23 110 雁塔

  CSS实现代码为：

  最终实现页面为：

  

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

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

  =============================================================================

  

  HTML的实现代码为：

  绑定MSN/QQ账号（找到MSN/QQ上的朋友一起玩，或但他们加入关系时，第一时间通知您）

  账号类型: MSN QQ MSN账号： MSN密码：

  文末

  篇幅有限没有列举更多的前端面试题，小编把整理的前端大厂面试题PDF分享出来，一共有269页

  

  

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】