网页制作实验步骤_web简易开发

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

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

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;">您现在的位置:&nbsp;&nbsp; <a href="#" style="width: 42px;">爱狗网</a>>>&nbsp;&nbsp;<a href="#" style="width: 55px;">宠物视频&nbsp;&nbsp;</a>>>&nbsp;&nbsp;<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" >评分: &nbsp;
<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> &nbsp;狗狗旅馆,狗旅馆  </p></td></tr>
<p class="text"><span>导演:</span> &nbsp;Thor Freudenthal  </p></td></tr>
<p class="text"><span>主演:</span> &nbsp;艾玛.罗伯茨、杰克.T.奥斯汀、莉莎.库卓 </p></td></tr>
<p class="text"><span>地区:</span> &nbsp;美国 </p></td></tr>
<p class="text"><span>片长:</span> &nbsp;7 秒 </p></td></tr>
<p class="text"><span>公司:</span> &nbsp;United International Pictures (UIP)  </p></td></tr>
<p class="text"><span>语言:</span> &nbsp;英语  </p></td></tr>
<p class="text"><span>类型:</span> &nbsp;喜剧  </p></td></tr>
<p class="text"><span>剧情: </span>&nbsp;阴黑的夜晚,两个矮小的身影在穷街陋巷 </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;
}

在这里插入图片描述

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/182569.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • Protel 99SE汉化教程

    Protel 99SE汉化教程Protel99se是一款设计电路原理图和PCB的专业软件,它是由ProklTechnology开发出来的电路板设计软件,拥有功能强大、界面简洁等特点。Protel99se软件是由两大部分组成:电路原理图设计(AdvancedSchematic)和多层印刷电路板设计(AdvancedPCB)。安装教程原文链接:https://blog.csdn.net/weixin_42693097/a…

  • webpack 核心_webpack解决了什么问题

    webpack 核心_webpack解决了什么问题前言本质上,webpack是一个用于现代JavaScript应用程序的静态模块打包工具。当webpack处理应用程序时,它会在内部构建一个依赖图(dependencygraph),此

  • 安装 JAVA CRYPTOGRAPHY EXTENSION (JCE) UNLIMITED STRENGTH[通俗易懂]

    安装 JAVA CRYPTOGRAPHY EXTENSION (JCE) UNLIMITED STRENGTH[通俗易懂]JCE(JavaCryptographyExtension)是一组包,它们提供用于加密、密钥生成和协商以及MessageAuthenticationCode(MAC)算法的框架和实现。它提供对对称、不对称、块和流密码的加密支持,它还支持安全流和密封的对象。它不对外出口,用它开发完成封装后将无法调用。安装JCE步骤:1、打开以下网址,下载JCE压缩包:http://www.or…

  • 常见雪球期权总结_雪球期权和凤凰期权的区别

    常见雪球期权总结_雪球期权和凤凰期权的区别常见雪球期权总结从风险溢价的角度来看,雪球类产品的本质是买方通过承担下跌的尾部风险,换取远超无风险利率的票息收入。对尾部风险的承担则是通过成为看跌期权卖方的形式实现的。标准雪球期权标准雪球期权(

  • java异常处理(较详细)「建议收藏」

    java异常处理(较详细)「建议收藏」java异常处理(较详细)在使用计算机语言进行项目开发的过程中,即使程序员把代码写得尽善尽美,在系统的运行过程中仍然会遇到一些问题,因为很多问题不是靠代码能够避免的。比如:客户输入数据的格式,读取文件是否存在,网络是否始终保持通畅等等。异常:在Java语言中,将程序执行中发生的不正常情况称为“异常”。(开发过程中的语法错误和逻辑错误不是异常)Java程序在执行过程中所发生的异常…

  • 爱发php企业发卡网源码_爱发个人版自动发卡平台PHP开源源码【官方正版】

    爱发php企业发卡网源码_爱发个人版自动发卡平台PHP开源源码【官方正版】爱发个人版自动发卡平台PHP开源网站源码是我官方研发出个人版自动发卡平台系统演示站:http://ka.yc88.net备用:http://php2.a8tg.com/后台:http://php2.a8tg.com/admin.php服务器环境:PHP5.3、zend3、mysql5.1以上版本空间要支持.htaccess伪静态使用自动发卡平台禁止销售国家违规商品,被有关机关查处或接口被冻结或资金…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号