web实验2 制作简单网页（HTML+CSS）

最新推荐文章于 2024-06-19 13:11:05 发布

你的负卿是我

最新推荐文章于 2024-06-19 13:11:05 发布

阅读量2.3w

点赞数 61

分类专栏： web前端文章标签： css html web js html5

本文链接：https://blog.csdn.net/weixin_43909373/article/details/108131257

版权

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>

最低0.47元/天解锁文章

你的负卿是我

关注

61
点赞
踩
446

收藏

觉得还不错? 一键收藏
4
评论
web实验2 制作简单网页（HTML+CSS）

web实验2 制作简单网页（HTML+CSS）一、实验目的1．掌握文本样式的设置。2．掌握图像样式的设置。3．掌握各种媒体的插入方法。二、实验内容采用DIV+CSS，制作“在线电影”页面。三、操作提示1．新建网站的文件夹，网站图像素材保存在images文件夹中，媒体文件放在flash文件中。2．新建index.html页面，要求： 页面字体大小为14px，文本颜色为#000； 页面背景颜色为#edb8d2； 上下左右距均为0。3．利用div布局，宽度为900px，居中对齐。
复制链接

扫一扫

专栏目录