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，居中对齐。 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代码部分

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;
    
}