复习题(1)

更新时间：试题数量：购买人数：提供作者：

有效期：个月

章节介绍：共有个章节

收藏

我的练习

我的错题
(0道)

我的收藏
(0道)

我的斩题
(0道)

我的笔记
(0道)

专项练习

顺序练习 练习进度 0 / 0

随机练习 自定义设置练习量

模拟考试 仿真模拟

题型练习 按题型分类练习

易错题 精选高频易错题

学习资料 考试学习相关信息

搜索

题库预览

JavaScript中按钮点击事件的是（）。

在Html文档中引入JavaScript文件的方式主要有：行内式、（）、（）。

综合设置多种过渡效果应使用（）属性。

<input>标签的type属性为（）时，可以创建单选框。

设置元素平移、缩放、旋转等效果应使用（）属性。

按单双标签分类，hr标签属于（）。

类选择器以（）开头，ID选择器以（）开头。

盒子模型的（）属性如果设置为（）属性值，则对于块级元素在水平方向上会自动居中。

CSS中定位元素可能会发生重叠，要想调整重叠定位元素的堆叠顺序，使用（）属性。

在CSS中元素分为两类，一类是块元素，另一类是行内元素，如果需要将span标签转为块元素，则CSS代码为span{（）}。

请编写HTML和CSS代码，加完样式后如下图的效果。要求：（1）大图小图都在images文件夹，大图的图片名称分别是pics1.jpg、pics2.jpg、pics3.jpg，小图的图片名称分别是p1.jpg、p2.jpg、p3.jpg，每一张大图分别放在无序列表的选项中，三张小图都放在段落标签中，且图片存储在相对应位置。（2）小图片的边框粗细为1px，黑色实线，大图片的边框粗细为10px，黑色实线，并且大小图片，在整个网页上居中，在下排小图片区域中单击小图时，就会大图片区域中显示相应的大图片，大图片宽420px，高300px，其它如上图所示。参考代码如下： <html> <head> <meta charset="UTF-8"> <style type="text/css"> body{text-align:center;} ul{ height:300px; width:420px; margin:0 auto; overflow:hidden; } li{ list-style-type:none; height:300px; width:420px; } li img{ border:10px solid black; } p img{ border:1px solid black; margin:0 auto; } </style> </head> <body> <ul> <li><a name="pics1"><img src="images/pics1.jpg" alt="pics1"/></a></li> <li><a name="pics2"><img src="images/pics2.jpg" alt="pics2"/></a></li> <li><a name="pics3"><img src="images/pics3.jpg" alt="pics3"/></a></li> </ul> <p> <a href="#pics1"><img src="images/p1.jpg" alt="p1"/></a> <a href="#pics2"><img src="images/p2.jpg" alt="p2"/></a> <a href="#pics3"><img src="images/p3.jpg" alt="p3"/></a> </p> </body> </html>

请编写HTML和CSS代码，其效果图如下。注：第一行的警告图片是images文件夹中warning.gif，Username和Password输入框分别使用img文件夹中的username.gif图片和password.gif图片。所有标签中的字号大小为12px，且所有元素之间的上下间距为8px，输入框中的文字，只能紧贴图片后输入，“会员登录”提交按钮离网页左边的距离为60px且背景图片为images文件夹中logining.gif。logining.gif图片宽高是70*21像素，username.gif、password.gif、warning.gif图片宽高都是16px，所有图片使用CSS代码设置为对应标签的背景图片。参考代码如下： <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> label{ display: block; font-size: 12px; font-weight: 900; margin:8px ; } h3{ background: url("images/warning.gif") no-repeat; padding-left: 18px; } #username{ background: url("images/username.gif") no-repeat; padding-left: 18px; } #password{ background: url("images/password.gif") no-repeat; padding-left: 18px; } a{ display: block; margin:8px ; text-decoration: none; color:orange; } .submit{ background: url("images/logining.gif") no-repeat; display: block; width:71px; height: 21px; line-height: 13px; cursor: pointer; margin-left:50px; border-radius: 5px; } </style> </head> <body> <div id="sidebar"> <h3>请输入登录的用户名和密码</h3> <form method="post" action="index.html"> <label for="username">Username</label> <input type="text" class="text username" id="username" name="username" /> <label for="password">Password</label> <input type="password" class="text password" id="password" name="password" /> <a href="###">Get your Password?</a> <input type="submit" class="submit" value="###" /> </form> </div> </body> </html>

请使用表格表单完成一套测试题，最终得到下图的效果： <table align="center" width="430" bgcolor="lightgreen" border="1px"> <tr align="center"> <td colspan="2"><h3 style="margin-top:5px">一套测试题</h3></td> </tr> <tr> <td colspan="2"><h4 style="margin:5px 10px">填空</h4></td> </tr> <tr> <td width="100px" style="padding:0px 20px" colspan="2">姓名：<input type="text" name="name"></td> </tr> <tr> <td colspan="2"><h4 style="margin:5px 10px">单选</h4></td> </tr> <tr> <td colspan="2" style="padding:0px 20px">1.花儿为什么这么红</td> </tr> <tr> <td style="padding:0px 30px"> <input type="radio" name="q1">A. 就是这么红<br> <input type="radio" name="q1">B. 绿的是叶子<br> </td> <td style="padding:0px 30px"> <input type="radio" name="q1">C. 我不知道<br> <input type="radio" name="q1">D. 为啥这么红<br> </td> </tr> <tr> <td colspan="2"><h4 style="margin:5px 10px">多选</h4></td> </tr> <tr> <td colspan="2" style="padding:0px 20px">2.树为什么这么高</td> </tr> <tr> <td colspan="2" style="padding:0px 30px"> <input type="checkbox" name="q2">A. 就是这么高<br> <input type="checkbox" name="q2">B. 草就是这么矮<br> <input type="checkbox" name="q2">C. 我不知道<br> <input type="checkbox" name="q2">D. 为啥这么高<br> </td> </tr> <tr align="center"> <td colspan="2"><input type="submit" value="提交"></td> </tr> </table>

请使用HTML和CSS编写一个简单的用户注册表单页面。要求如下： 1. HTML部分要求：使用<form>标签创建表单。包含以下控件：用户名：文本输入框。密码：密码输入框。性别：单选按钮（男、女）。兴趣：复选框（阅读、运动、旅游）。城市：下拉选择框（北京、上海、广州）。注册：提交按钮。所有输入框前必须使用<label>标签标注。 2. CSS部分要求：必须使用外部CSS。必须使用id选择器（至少1个）和class选择器（至少1个）。设置页面背景色为浅灰色（#f0f0f0）。设置输入框（文本、密码、下拉框）的边框为1像素灰色实线。设置提交按钮的背景色为蓝色，并在鼠标悬停时变深。参考代码如下： <!DOCTYPE html> <html> <head> <title>注册页面</title>  <link rel="stylesheet" href="style.css"> </head> <body>  <div id="box"> <h3>会员注册</h3> <form>  <label>用户名：</label> <input type="text" class="input"><br><br> <label>密码：</label> <input type="password" class="input"><br><br> <label>性别：</label> <input type="radio" name="sex">男 <input type="radio" name="sex">女<br><br> <label>兴趣：</label> <input type="checkbox">阅读 <input type="checkbox">运动 <input type="checkbox">旅游<br><br> <label>城市：</label> <select class="input"> <option>北京</option> <option>上海</option> <option>广州</option> </select><br><br>  <input type="submit" id="btn" value="注册"> </form> </div> </body> </html> /* 1. 页面背景（基础选择器）*/ body { background-color: #f0f0f0; } /* 2. id选择器：定义盒子样式 */ #box { width: 300px; margin: 50px auto; padding: 20px; background: white; border: 1px solid #ddd; } /* 3. class选择器：统一输入框样式 */ .input { width: 200px; padding: 5px; border: 1px solid #999; /* 要求的边框样式 */ } /* 4. id选择器：按钮样式 */ #btn { padding: 8px 16px; background-color: #007BFF; /* 蓝色背景 */ color: white; border: none; cursor: pointer; }

请编写一个简单用户信息收集表页面，并通过外部CSS进行样式美化。具体要求如下： 1. HTML结构（10分）：创建一个宽度为300px的表单区域。包含以下表单控件：姓名：文本输入框（<input type="text">）。性别：单选按钮（<input type="radio">），选项为“男”、“女”。课程：复选框（<input type="checkbox">），选项为“HTML”、“CSS”、“JS”。等级：下拉选择框（<select>），选项为“初级”、“中级”、“高级”。提交：提交按钮（<input type="submit">）。有选项前必须使用<label>标签标注。 2. CSS样式（10分）：外部引入：必须使用外部样式表（<link>标签）。Class选择器：定义一个类选择器.item，应用于所有<input>和<select>标签，设置其宽度为100%且底部外边距为10px。Id选择器：定义一个ID选择器#container，应用于包裹表单的<div>，设置其宽度为300px，居中对齐（margin: auto）。参考代码如下： ### 1. HTML代码（index.html）【缺少答案，请补充】