网页设计综合题（含解析）

都不会的鲨

已于 2022-06-10 13:27:25 修改

阅读量2.1k

点赞数 6

分类专栏：复习题文章标签： html css

于 2022-06-10 00:12:28 首次发布

本文链接：https://blog.csdn.net/weixin_64345054/article/details/125205071

版权

复习题专栏收录该内容

9 篇文章 1 订阅

订阅专栏

1.定义<p>标签的样式：首行缩进2个字符、左对齐、字体颜色红色、无下划线、黑体。

2.定义<h2>标签的样式：字体间距为3倍间距、水平居中、字体颜色红色、有下划线、宋体。

3. 有一a元素结构为<ahref="#"><b>首页</b></a>,它的CSS样式如下,请在下划线处填写代码注释: a {

font-size:14px; 1:      */

text-decoration:none; /* 2:      */

background-image:url(xx/wlzx);

height:32px; 3:      */

padding-left:24px; 4:      */

display:block; /* 5:     */

float:left; /*6:    */

line-height:32px; /* 7:    */

}

b {

background-image:url(xxwlzx/;

background-position:right top; /*8:     */

display:block; 9:      */

width:60px；10:      */

}

4.用html插入一个表单，要求表单中有姓名用文本框实现、密码用密码框实现、性别用单选按钮实现，出发地用下拉列表实现，地名任写3个、个人简历用文本域实现、提交和重置按钮。

5.下面的代码都有错误，请改错？

① <img "birthday.jpg " />

② <checkbox name="color" value="teal" />

③ <input type="password" value="pwd" />

„<p>This is a new paragraph<\p>

…< li>The list item< /li>

6.下拉菜单采用二级列表结构，第一级放导航项，第二级放下拉菜单项。,它的CSS样式如下,请填写下划线处的代码注释。

ul#nav{

padding: 0;

margin: 0;

list-style: none;} 1:        */

li {

float: left; /* 2:        */

width: 160px;

position:relative; } 3:        */

li ul {

display: none; * 4:        */

position: absolute; top: 21px;/*5        */

li:hover ul {

display: block;} /*6        */

ul li a{

display:block; 7:        */

font-size:12px; 8:        */

border: 1px solid #ccc;9:        */

padding:3px; /*10:        */

7.利用盒子模型制作无需表格的竖直菜单。包含首页、中心简介、政策法规、常用下载、技术支持和服务，都设置为空链接。字体颜色为黑色，14px,无下划线;背景颜色为红色；填充为6px；边框为1px黑色细线边框；宽度140px;间距2px;鼠标放到超链接上时字体颜色为白色。

8.制作图文混排和首字下沉效果

9.制作中英文导航栏。

10.制作纯CSS下拉菜单。

第一题

1.定义<p>标签的样式：首行缩进2个字符、左对齐、字体颜色红色、无下划线、黑体。

定义<p>的标签样式，就是对<p>标签进行css修饰，其中左对齐可以直接用text-align:left来体现

<p align:left>。。。。。。。。。。。。</p>/*左对齐格式*/

其余的属性要用css样式进行体现

p {
	font-family: "黑体";//字体格式为黑体
	color: #F00;       //颜色为红色
	text-decoration: none;//无下划线
	text-indent: 2em;  //首行缩进两个字符
}

第二题

2.定义<h2>标签的样式：字体间距为3倍间距、水平居中、字体颜色红色、有下划线、宋体。

定义<h2>的的标签样式，和定义<p>的类似，主要还是用css来修饰，在定义<h2>的标签中，设置为水平居中也可以用align来体现

<h2 align:center>.................</h2>//定义水平居中

字体间距属性，字体颜色，下划线，字体都是用css样式来修饰

h2 {
	letter-spacing: 3ex;//字体间距是3倍间距
	font-family: "宋体";//字体为宋体
	text-decoration: underline;//下划线
	color: #F00;//颜色
}

第三题

3. 有一a元素结构为<a href="#"><b>首页</b></a>,它的CSS样式如下,请在下划线处填写代码注释: a {

font-size:14px;/* 1:      */

text-decoration:none; /* 2:      */

background-image:url(xx/wlzx);

height:32px;/* 3:      */

padding-left:24px;/* 4:      */

display:block; /* 5:     */

float:left; /*6:    */

line-height:32px; /* 7:    */

}

b {

background-image:url(xxwlzx/;

background-position:right top; /*8:     */

display:block; /*9:      */

width:60px；/*10:      */

}

根据代码写注释，可以上机自己一行行代码添加，看看样式变化

1.字体大小为14px//font-size字符大小

2.没有下划线//text-decoration关于下划线

3.高度为32px

4.填充左边距为32px//padding填充边距

5.显示格式为块级格式//display显示格式

6.左侧浮动//float设置浮动格式

7.设置行高为32px

8.背景格式为右侧顶部//在父元素的方位

9.同5

10.宽度为60px

第四题

4.用html插入一个表单，要求表单中有姓名用文本框实现、密码用密码框实现、性别用单选按钮实现，出发地用下拉列表实现，地名任写3个、个人简历用文本域实现、提交和重置按钮。

直接上代码

<form action="" method="get">
  <p>姓名
    <input name="" type="text" />
  </p>
  <p>密码
    <input name="" type="password" />
  </p>
  <p>性别
    
    <label>
      <input type="radio" name="性别" value="单选" id="性别_0" />
      男</label>
    
    <label>
      <input type="radio" name="性别" value="单选" id="性别_1" />
      女</label>
  </p>
  <p>
    <label for="select">出发地</label>
    <select name="select" id="select">
      <option>济南</option>
      <option>济宁</option>
      <option>潍坊</option>
      <option>日照</option>
      <option>青岛</option>
    </select>
  </p>
  <p>个人简历
    <label for="textarea"></label>
    <textarea name="textarea" id="textarea" cols="45" rows="5"></textarea>
  </p>
  <p>&nbsp;
    <input type="submit" name="button" id="button" value="提交" />
     <input type="reset" name="button2" id="button2" value="重置" />
     <br />
  </p>
</form>

第五题

5.下面的代码都有错误，请改错？

① <img "birthday.jpg " />

② <checkbox name="color" value="teal" />

③ <input type="password" value="pwd" />

„<p>This is a new paragraph<\p>

…< li>The list item< /li>

直接改答案

<img src="birthday.jpg " />

<checkbox name="color" value="teal" />

<input type="checkbox" name="color" value="teal"/>

<input type="password" name="color" value="pwd" />

<p>This is a new paragraph</p>

<li>The list item</li>

第六题

6.下拉菜单采用二级列表结构，第一级放导航项，第二级放下拉菜单项。,它的CSS样式如下,请填写下划线处的代码注释。

ul#nav{

padding: 0;

margin: 0;

list-style: none;} 1:        */

li {

float: left; /* 2:        */

width: 160px;

position:relative; } 3:        */

li ul {

display: none; * 4:        */

position: absolute; top: 21px;/*5        */

li:hover ul {

display: block;} /*6        */

ul li a{

display:block; 7:        */

font-size:12px; 8:        */

border: 1px solid #ccc;9:        */

padding:3px; /*10:        */

跟第三题一样

1.无序列表中不含有格式

2.左侧浮动

3.相对定位

4.无显示格式

5.绝对定位

6.块级显示

7.块级显示

8.字体大小

9.实现边框，边框宽度为1px 颜色为灰色

10.内边距为3px

第七题

7.利用盒子模型制作无需表格的竖直菜单。包含首页、中心简介、政策法规、常用下载、技术支持和服务，都设置为空链接。字体颜色为黑色，14px,无下划线;背景颜色为红色；填充为6px；边框为1px黑色细线边框；宽度140px;间距2px;鼠标放到超链接上时字体颜色为白色。

css样式如下：


#nav a {
	font-size: 14px;
	color: #000;
	text-decoration: none;
	background-color: #F00;
	padding: 6px;
	width: 140px;
	display: block;
	margin: 2px;
	border: 1px solid #000;
}

#nav a:hover {
	color: #FFF;
}

HTML如下

<div id="nav">
<a href="#">首页</a>&nbsp; 
<a href="#">中心简介</a>&nbsp; 
<a href="#">政策法规</a>&nbsp; 
<a href="#">常用下载</a>&nbsp; 
<a href="#">技术支持和服务</a>

</div>

效果图如下

第八题

8.制作图文混排和首字下沉效果

参考我的另一篇博客，链接如下：

https://blog.csdn.net/weixin_64345054/article/details/124994151?spm=1001.2014.3001.5501https://blog.csdn.net/weixin_64345054/article/details/124994151?spm=1001.2014.3001.5501

第九题

9.制作中英文导航栏。

css样式如下

#nav4 a {
	font-size: 14px;
	text-decoration: none;
	text-align: center;
	float: left;
	width: 90px;
	margin:0 2px;
	position:relative;
}
#nav4 a b {
	display: none;
	position: absolute;
}
#nav4 a:hover {
	color: #cc0000;
	border-bottom-color:#cf3;
}
#nav4 a:hover b {
	display: block;
	left:0;
	top:0;
	padding:6px 10px 4px;
	width:90px;
	background:#ffd111;
}

HTML代码如下

<div id="nav4">
<a href="#"><b>hall</b>游戏大厅</a> 
<a href="#"><b>hero</b>英雄</a> 
<a href="#"><b>weapons</b>武器</a> 
<a href="#"><b>warehouse</b>仓库</a> 
<a href="#"><b>list</b>排行榜</a> 
<a href="#"><b>season</b>赛季</a>
</div>

效果如下

第十题

10.制作纯CSS下拉菜单。

css样式

#mav {
	list-style:none;
	padding:0;
	margin:0;
}

#mav ul {
	margin: 0px;
	padding: 0px;
	list-style-image: none;
	list-style-type: none;
}
li{
	
	float:left;
	width:160px;
	position:relative;
	}
li ul {
	display: none;
	position: absolute;
	top:21px;
}
li:hover ul {
	display: block;
}

HTML如下

<ul id="mav">
<li><a href="#">英雄</a>
	<ul>
     <li><a href="#">宁红夜</a></li>
     <li><a href="#">武田信忠</a></li>
     <li><a href="#">顾清寒</a></li>
     <li><a href="#">无尘</a></li>
     <li><a href="#">季沧海</a></li>
     <li><a href="#">妖刀姬</a></li>
     <li><a href="#">火男</a></li>
    </ul>
</li>
<li><a href="#">武器</a>
	<ul>
     <li><a href="#">阔刀</a></li>
     <li><a href="#">双节棍</a></li>
     <li><a href="#">长剑</a></li>
     <li><a href="#">太刀</a></li>
     <li><a href="#">匕首</a></li>
     <li><a href="#">万刃轮</a></li>
     <li><a href="#">一窝蜂</a></li>
    </ul>
</li>
</ul>

效果图如下