以下为本人大一选修课《网页设计与网站开发》的实验作业题，均为本人原创，分享给大家。如有不足之处欢迎指出。

实验1

1.题目

2.代码

3.网页运行效果

实验2

1.题目

2.代码

3.网页运行效果

实验3

1.题目

2.代码

3.网页运行效果

实验4

1.题目

2.代码

3.网页运行效果

实验5

1.题目

2.代码

3.网页运行效果

实验6

1.题目

2.代码

3.网页运行效果

注：

图片文件建议保存到根目录下
网页运行效果以Microsoft Edge为准，其他浏览器可能显示会出问题。

实验1

1.题目

新建一个HTML5的页面，保存为“test1.html”,基于以下html代码，利用CSS完成如下效果。

2.代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test1</title>
<style type="text/css">*{margin:0px;padding:0px;font-size:80px;font-family:微软雅黑;}.blue{color:blue;}.red{color:red;}.orange{color:orange;}.green{color:green;}
</style>
</head><body>
<strong class="blue">G</strong>
<strong class="red">o</strong>
<strong class="orange">o</strong>
<strong class="blue">g</strong>
<strong class="green">l</strong>
<strong class="red">e</strong>
</body>
</html>

3.网页运行效果

实验2

1.题目

新建一个HTML5的页面，保存为“test2.html”,使用内部样式表（内嵌式）方法完成如下图所示的HTML文档。

2.代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test2</title>
<style type="text/css">.p1{font-family:黑体;font-size:30px;font-weight:bold;text-align:center;}.p2{color:red;background-color:yellow;}
</style>
</head><body>
<p class="p1">内部样式表方法</p>
<hr>
<p class="p2">在HTML文件的头部应用内部样式表方法添加CSS</p>
</body>
</html>

3.网页运行效果

实验3

1.题目

新建一HTML5的页面，保存为“test3.html”,使用链入外部样式表（外部样式表名为：Style.css，存放在主文件夹的CSS文件夹下）方法完成如下图所示的HTML文档。

提示： 1、外部样式主要格式化一级标题，二级标题等；

2、首行缩进是在<P>加上格式style="text-indent:2em"

3、选项是列表，有序和无序两种

2.代码

共有两个文件：css文件和html文件

css文件

@charset "utf-8";
/* CSS Document */
/*下面写的样式对整个网站有效*/
*{font-size:15px;font-family:华文楷体;margin-left:20px;}
.h1{font-family:方正姚体;text-align:center;font-size:20px;color:#97C029;}
.h2{font-size:18px;line-height:45px;}ul{margin-left:30px;list-style-image:url(../images/icon_1.gif);font-size: 15px;line-height:28px;
}
ol{margin-left:40px;line-height:28px;}

html文件

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test3</title>
<link type="text/css" rel="stylesheet" href="css/style.css">
</head><body>
<h1 class="h1">听力：地点方向题解析</h1>
<h2 class="h2">一、应试技巧、解释</h2>
<p style="text-indent:2em">这类题的问题是关于对话发生的场合、地点或者对话涉及到的人或事物所处的位置；或者是关于问路时给出的指向。提问方式通常为：</p>
<ul><li>Where is the conversation most probably taking place?    </li><li>Where are the two speakers?</li><li>Where will the woman (man) go first?</li><li>Where did the woman (man) find …?</li><li>Where will the woman (man) stop on her way?</li>
</ul>
<h2 class="h2">二、试题分析</h2>
<p><strong>1. 题号： 6 来源:大学英语四级统考全真题2006年6月老题型（对话）</strong></p>
<p style="text-indent:2em">M: Can you stop by the post office and get me some envelops and 39 cents stamps?</p>
<p style="text-indent:2em">W: Well, I am not going to stop by the post office, but I can buy you some at the bookstore after I see the dentist on Marker Street.</p>
<p style="text-indent:2em">Q: Where will the woman go first?</p>
<ol><li>To the dentist's.</li><li>To the market.</li><li>To the post office.</li><li>To the bookstore.</li>
</ol>
<p style="text-indent:2em">本题考查地点，考生在做此类考题时必须做好笔记，听到相关题干时对应做好标记即可；听完男人的话在post office项标记，envelop和stamp都是邮局场景的提示词，注意本题的考点也有两个but和after，诸如after，before之类的动作先后顺序安排的提示词也是听力的重点，听完女人的话否定post office，勾出dentist’s和bookstore注意after的动作先后，而女人先做的动作是to the dentist’s；原文中get sb. sth. 是表示买东西的典型表达。 </p>
</body>
</html>

3.网页运行效果

实验4

1.题目

新建一个HTML5的页面，保存为“test4.html”,设置CSS文本外观属性，要求：综合使用标记选择器、id选择器及类选择器控制元素。

设置所有文本为黑体、14像素，行高为18像素（line-height）。
设置标题“你若安好，便是晴天”为18像素、紫色、加粗、居中的效果。
设置第一段文本为红色、居中对齐。
设置第二段文本为蓝色、首行缩进2个字符、字间距为16像素。
设置第三段文本为绿色、加粗、斜体。
设置第四段文本为紫色、删除线效果。

2.代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test4</title>
<style type="text/css">*{font-family:黑体;font-size:14px;line-height:18px;}h1{font-size: 18px;color: purple;font-weight: bold;text-align:center; }.p1{color:red;text-align:center;}.p2{color:blue;text-indent:2em;letter-spacing:16px;/*字符间距（每个字之间的距离）*/}.p3{color:green;font-weight:bold;font-style:italic;/*斜体*/letter-spacing:2px;}.p4{color:purple;text-decoration:line-through;/*删除线*/}
</style>
</head><body>
<h1>你若安好，便是晴天</h1>
<p class="p1">一个人，一本书，一杯茶，一帘梦</p>
<p class="p2">站在时光的十字路口，回望过去的种种单纯与美好，欣慰而悲凉。</p>
<p class="p3">花开花落，风卷云舒。青春如同流沙般从指缝溜走，过去的倔强与轻狂，原来如此荒诞不羁。俗世喧嚣，总会想在空灵停滞的时空内，独倚幽窗，品一壶清茶，嘻嘻体味光阴如梭，年华老去。</p>
<p class="p4">时光轮回，生命交替，红尘无尽。</p>
</body>
</html>

3.网页运行效果

注：颜色可以自己修改哈。

实验5

1.题目

新建一HTML5的页面，保存为“test5.html”,利用多类选择器，编写CSS样式完成下图效果。【提醒：定义两个类firstTilte，titleBgcolor】

2.代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test5</title>
</head>
<style type="text/css">*{color:red;font-size:36px;}.div2{background:#CCC;}
</style>
<body>
<div>一级标题2</div>
<div class="div2">一级标题3</div>
</body>
</html>

3.网页运行效果

实验6

1.题目

新建一HTML5的页面，保存为“test6.html”,利用子元素选择器，编写CSS样式完成下图效果。【综合应用题，主要用于id选择器的使用。列表的定义可以自动生成，关键是补充代码，实现样式转换】

<ul>

<li>

菜单2

<ul>

</ul>

</li>

</ul>

</div>

2.代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test6</title>
<style type="text/css">#top{font-family:黑体;color:blue;font-size:32px;background-color:red;}#nav{background-color:#999;}li{color:#C60;}
</style>
</head><body>
<div id="top">网页顶部</div>
<div id="nav"><ul><li>菜单1</li><li>菜单2<ul><li style="color:#9F3;">菜单2的子菜单</li></ul></li></ul>
</div>
</body>
</html>

3.网页运行效果

《网页设计与网站开发》实验题不定期更新，有需要可以点击右下角《专栏目录》，

也可以点击链接：HTML_秃头小二的博客-CSDN博客

如有帮助可以帮忙点个赞嘛……谢谢啦！

【Google】【内部样式表】【外部样式表：听力地点方向题】【设置字体间距】【多类、子元素选择器】【网页设计与网站开发HTML、CSS、JavaScript】【第 8 章】CSS基础——实验题1-6相关推荐

【JavaScript编写计算工资小程序】【表格细边框设置】【网页设计与网站开发HTML、CSS、JavaScript实例教程】【第十章】JavaScript基础——【传智播客】实验作业题【实验5】
以下为本人大一选修课<网页设计与网站开发>的实验作业题,均为本人原创,分享给大家.如有不足之处欢迎指出. 1.题目: 实验5.新建页面test5.html,利用JavaScript编写如下 ...
DIV+CSS如何设置字体间距
CSS如何设置字体间距设置字间距,顾名思义就是设置字和字之间的距离. 在CSS中,调整字间距的属性是 leeter-spacing ,该属性定义了在文本字符之间插入多少空间,这里允许使用负值,这会让 ...
微型计算机基础答案,第1章微型计算机基础知识题库和答案
第1章微型计算机基础知识题库微型计算机基础知识 2010-01-18 14:18 第1章微型计算机基础知识 ________________________________________ 一 ...
css 父级设置了padding，但是子元素还是会超过padding解决方案
由上图所示,明明父级已经设置了一个padding,但是子元素还是跑出来了,这是为什么呢? 我看了一下,是因为子元素,设置了width100%,以后还设置了padding,导致的问题,因为我们的盒子是标 ...
css设置竖排字体时letter-spacing无法有效设置字体间距
因为如果是通过设置宽度来进行自动换行的话,则无法通过letter-spacing或者word-spacing设置字体间距,实际上此时字体间距的本质是行间距,单行只有一个汉字,所以只能通过设置line- ...
关于父元素设置maxHeight或minHeight，子元素高度设置%的不生效的问题
关于父元素设置maxHeight或minHeight,子元素高度设置%的不生效的问题要理解这个问题,首先要搞清楚一个元素的高度是由什么决定的?如果在不额外设置高度或者行高等外加的影响高度的css样式 ...
计算机中使用的集成电路绝大部分是,第1章信息技术基础判断题
<第1章信息技术基础判断题>由会员分享,可在线阅读,更多相关<第1章信息技术基础判断题(2页珍藏版)>请在人人文库网上搜索. 1.第1章信息技术概述判断题判断题:1数据是计算 ...
itext设置字体间距_全面解析排版三要素：字号、行距和字间距，小白看完都会排版...
字体从设计到使用,其实是一个非常大的范畴.得益于互联网技术的发展,我们已经免费享用了很多字体设计师的功劳,比如很多文印店给客户设计LOGO,其实无非也就是筛选字体而已,调配颜色--这的确不假,在某种层 ...
css3 - 设置字体间距
前言今天偶然发现,提到字体间距缩减问题大脑模糊没有头绪,这里记录一下,巩固基础. 设置字间距 letter-spacing属性增加或减少字符间的空白(字符间距). 该属性定义了在文本字符框之间插入多 ...

【Google】【内部样式表】【外部样式表：听力地点方向题】【设置字体间距】【多类、子元素选择器】【网页设计与网站开发HTML、CSS、JavaScript】【第 8 章】CSS基础——实验题1-6

实验1

1.题目

2.代码

3.网页运行效果

实验2

1.题目

2.代码

3.网页运行效果

实验3

1.题目

2.代码

3.网页运行效果

实验4

1.题目

2.代码

3.网页运行效果

实验5

1.题目

2.代码

3.网页运行效果

实验6

1.题目

2.代码

3.网页运行效果

【Google】【内部样式表】【外部样式表：听力地点方向题】【设置字体间距】【多类、子元素选择器】【网页设计与网站开发HTML、CSS、JavaScript】【第 8 章】CSS基础——实验题1-6相关推荐

最新文章

热门文章