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

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>

效果图如下

网页设计综合题（含解析）相关推荐

HTML网页设计综合题,网页设计（Html5）试题C卷
网页设计期末试题试卷(B卷) 年月考试级专业一.单项选择题(本大题共 25小题,每小题1分,共25分) 1.HTML 语言中,设置链接颜色的代码是( ) A. B. C. D. 2. 下列标记 ...
云南林业职业技术学院计算机考试试题,云南林业职业技术学院单招模拟题(含解析)9.docx...
云南林业职业技术学院单招模拟题(含解析)9 育龙单招网,单招也能上大学! 2016年云南单招云南林业职业技术学院考试模拟题(含解析) 本云南云南林业职业技术学院单招考试模拟题,内容来自于相关网站和 ...
Dreamweaver Flash Photoshop网页设计综合应用 (智云科技) [iso] 1.86G
全书共15章,主要包括网页制作基础.Dreamweaver CC网页制作.Photoshop CC网页图像设计.Flash CC网页动画设计以及综合案例实战5个部分.通过本书的学习,不仅能让读者学会三 ...
云南林业计算机单招试题,2016年云南林业职业技术学院单招的模拟题含解析-.docx...
2016年云南林业职业技术学院单招的模拟题含解析- 育龙单招网,单招也能上大学! 2016年云南单招云南林业职业技术学院考试模拟题(含解析) 本云南云南林业职业技术学院单招考试模拟题,内容来自于相 ...
c语言for循环嵌套经典例题,C语言 for循环的嵌套题(含解析和答案).doc
C语言 for循环的嵌套题(含解析和答案) 第33.34课时 for循环的嵌套实验题一: 1.下面有关for循环的正确描述是: D A) for循环只能用于循环次数已经确定的情况 B) for循环是 ...
中小企业信息化--网页设计模拟题1
一填空题 1.网页按其表现形式可分为和两种. 静态网页. 动态网页 2.简单地说, 就是一个网站的网址. URL 3.URL代表的是 .它的功能是提供一种在Internet上查找任何 ...
日照职业学校单招计算机模拟题,2016年山东日照职业技术学院单招模拟题(含解析)...
2016年日照职业技术学院单招模拟题 (考试时间:90分钟满分:100分) 选择题(每题4分,共100分): 第1题:____ of the teacher in our school are fro ...
sql语句练习50题(含解析)
文章目录 1.查询"01"课程比"02"课程成绩高的学生的信息及课程分数(偏难) 2.查询"01"课程比"02"课程成绩 ...
2018江苏专转本计算机知识点,2018江苏专转本计算机真题[含解析]
省2017 年普通高校专转本选拔考试计算机基础试题卷注意事项: 1.本试卷分为试题卷和答题卡两部分,试题卷共 8 页.全卷满分 100 分,考试时间 90 分钟. 2.必须在答题卡上作答,作答在试 ...

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

网页设计综合题（含解析）相关推荐

最新文章

热门文章