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

1.定义

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

2.定义

标签的样式：字体间距为3倍间距、水平居中、字体颜色红色、有下划线、宋体。

3. 有一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.下面的代码都有错误，请改错？

① 

② 

③ 

„

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.定义

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

定义

的标签样式，就是对

标签进行css修饰，其中左对齐可以直接用text-align:left来体现

。。。。。。。。。。。。
/*左对齐格式*/

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

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

第二题

2.定义

标签的样式：字体间距为3倍间距、水平居中、字体颜色红色、有下划线、宋体。

定义

的的标签样式，和定义

的类似，主要还是用css来修饰，在定义

的标签中，设置为水平居中也可以用align来体现

.................
//定义水平居中

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

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

第三题

3. 有一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个、个人简历用文本域实现、提交和重置按钮。

直接上代码

  
姓名
    
  
  
密码
    
  
  
性别
    
    
      
      男
    
    
      
      女
  
  

    出发地
    
      济南
      济宁
      潍坊
      日照
      青岛
    
  
  
个人简历
    
    
  
  
 
    
     
     

  

第五题

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

① 

② 

③ 

„

This is a new paragraph<\p>

…<  li>The list item<  /li>

直接改答案

This is a new paragraph

The list item

第六题

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如下

首页  
中心简介  
政策法规  
常用下载  
技术支持和服务

效果图如下

第八题

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代码如下

hall游戏大厅 
hero英雄 
weapons武器 
warehouse仓库 
list排行榜 
season赛季

效果如下

第十题

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如下

英雄
	

     
宁红夜
     
武田信忠
     
顾清寒
     
无尘
     
季沧海
     
妖刀姬
     
火男
    

武器
	

     
阔刀
     
双节棍
     
长剑
     
太刀
     
匕首
     
万刃轮
     
一窝蜂
    

效果图如下