web实验2 制作简单网页（HTML+CSS）
一、实验目的
1．掌握文本样式的设置。
2．掌握图像样式的设置。
3．掌握各种媒体的插入方法。
二、实验内容
采用DIV+CSS，制作“在线电影”页面。
三、操作提示
1．新建网站的文件夹，网站图像素材保存在images文件夹中，媒体文件放在flash文件中。
2．新建index.html页面，要求：
页面字体大小为14px，文本颜色为#000；
页面背景颜色为#edb8d2；
上下左右距均为0。
3．利用div布局，宽度为900px，居中对齐。
4．利用无序列表制作导航栏，背景颜色为 #e2697a，列表项创建一个空链接，鼠标放在超链接的文本时，字体颜色黄色，有下划线。
a:link {color: #FF0000} /* 未访问的链接 /
a:visited {color: #00FF00} / 已访问的链接 /
a:hover {color: #FF00FF} / 当有鼠标悬停在链接上 /
a:active {color: #0000FF} / 被选择的链接 */
注意：四个选择器根据需要设置。
5．“您现在的位置：爱狗网>>宠物视频>>《流浪狗之家》预告片”内容，背景颜色为#f4ccd1，高度为30px，对“爱狗网”和“宠物视频”设置空链接。
6．“下面请欣赏《流浪狗之家》预告片”对齐方式为“居中对齐”，背景颜色为#FFeaf3，高度为25px，行高为25px。
7．插入素材中的“radio.flv”文件。提示：由于视频的格式，此处不能简单的使用embed标签，可以使用HTML5标签video，具体如下，若该标签不能被浏览器识别，则显示your browser does not support the video tag.
8．“流浪狗之家 影盟评分 8 .8”，背景图像4.jpg，不重复，右对齐，背景颜色为#FFeaf3。
注意：该标题与视频顶部对齐。
9．完成下面的效果
注意：
：前的字体加粗；
字体14px，行距为18px，
首行缩进16px，外边距上、下、左、右都为5px等。
10．“留言板”、“友情链接”、“诚邀加盟”、“问题反馈”等内容建立空链接。背景颜色为#e2697a，水平对齐为“居中对齐”，文本垂直也居中。
最后，浏览页面效果为
其它页面设置请自行修改完成。
HTML代码部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" cocntent="width=device-width, initial-scale=1.0">
<title>在线电影</title>
<link rel="stylesheet" href="style.css">
<style type="text/css">
</style>
</head>
<body>
<div id="every">
<div id="top">
<img src="images/top.jpg" alt="可爱的小狗">
</div>
<div id="middle">
<div class="nav1">
<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>
<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>
</div>
<div class="nav2">
<p style="font-size: 13px; margin-left: 30px;">您现在的位置: <a href="#" style="width: 42px;">爱狗网</a>>> <a href="#" style="width: 55px;">宠物视频 </a>>> <span>《流浪之家》预告片</span></p>
</div>
</div>
<p style="text-align: center; background-color: rgba(255, 234, 238, 0.973); height: 25px; line-height: 25px;">下面请欣赏《流浪狗之家》预告片</p>
<div id="content">
<div id="aigouzhijia">
<video width="450px" height="280px" style="vertical-align: text-top;" controls autoplay><source src="flash/radio.flv"></source>your browser does not support the vidio tag</video>
</div>
<div id="review">
<h3>流浪狗之家 影盟评分 8.8</h3>
<p class="text" >评分:
<img src="images/01.gif" alt="">
<img src="images/01.gif" alt="">
<img src="images/01.gif" alt="">
<img src="images/02.gif" alt="">
<img src="images/02.gif" alt="">
</p>
<p class="text"><span>别名:</span> 狗狗旅馆,狗旅馆 </p></td></tr>
<p class="text"><span>导演:</span> Thor Freudenthal </p></td></tr>
<p class="text"><span>主演:</span> 艾玛.罗伯茨、杰克.T.奥斯汀、莉莎.库卓 </p></td></tr>
<p class="text"><span>地区:</span> 美国 </p></td></tr>
<p class="text"><span>片长:</span> 7 秒 </p></td></tr>
<p class="text"><span>公司:</span> United International Pictures (UIP) </p></td></tr>
<p class="text"><span>语言:</span> 英语 </p></td></tr>
<p class="text"><span>类型:</span> 喜剧 </p></td></tr>
<p class="text"><span>剧情: </span> 阴黑的夜晚,两个矮小的身影在穷街陋巷 </p></td></tr>
<p style="text-align: right;"><a href="#" >【具体介绍】</a></p>
</div>
</div>
<div id="footer">
<p>
<a href="#" style="font-size: 14px;">留言板</a>
|<a href="#" style="font-size: 14px;">友情链接</a>
|<a href="#" style="font-size: 14px;">诚邀加盟</a>
|<a href="#" style="font-size: 14px;">问题反馈</a>
|<a style="color: black; font-size: 14px; text-decoration: none;">爱狗网版权所有</a>
</p>
<div class="ICP">
<a href="#" style="font-size: 15px; color: black"> 沪ICP备09047xxx号</a>
</div>
</div>
</div>
</body>
</html>
CSS部分
* {
margin: 0px;
}
body {
background-color: #edb8d2;
}
#every {
margin: 0px auto;
width: 900px;
height: 900px;
}
#top {
width: 900px;
height: 246px;
}
#middle {
width: 900px;
height: 70px;
}
#content {
width: 900px;
height: 325px;
background-color: #FFeaf3;
}
.nav1 {
width: 900px;
height: 40px;
background-color: #FF1E70;
}
.nav2 {
width: 900px;
height: 30px;
background-color: #f4ccd1;
line-height: 30px;
}
#aigouzhijia {
width: 450px;
height: 300px;
float: left;
}
#review {
width: 450px;
height: 300px;
float: left;
}
ul {
list-style-type: none;
float: left;
}
li {
width: 65px;
height: 40px;
line-height: 40px;
float: left;
}
a {
font-size: 12px;
text-decoration: none;
display: inline-block;
}
a:link {color: blue}
a:visited {color: blue}
a:hover {color: yellow; text-decoration: underline;}
a:active {color: #0000FF}
h3 {
font-weight: 400;
margin-left: 8px;
height: 40px;
line-height: 40px;
padding-right: 200px;
background-image: url("images/04.gif");
background-size: 450px 40px;
background-repeat: no-repeat;
}
.text {
margin-left: 30px;
width: 450px;
height: 26px;
font-size: 14px;
}
.text span{
font-weight: bolder;
}
#footer {
width: 900px;
height: 60px;
background-color: #e2697a;
text-align: center;
}
.ICP {
width: 200px;
padding-left: 20px;
line-height: 15px;
height: 20px;
margin: auto;
margin-top: 5px;
}
更多推荐
web实验2 制作简单网页（HTML+CSS）
发布评论