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代码部分
<!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)相关推荐
- hbuilderx制作简单网页_网页制作的基本步骤是怎样的?制作简单网页的具体操作有哪些呢?...
网页制作的基本步骤是怎样的?制作简单网页的具体操作有哪些呢?如果是详细的网页制作,设计和制作一样关键.有可能是网页设计制作新手对简单网页制作设计的具体操作不太清楚.更别说设计详细的网页了.下面一起来看 ...
- Web入门(1)——制作简单的网页
文章目录 安装基础软件 设计网站外观 做出计划 绘制草图 选定内容 文本 主题颜色 图像 字体 处理文件 网站应保存在何处? 关于大小写和空格的提示 网站应该使用什么结构? 文件路径 安装基础软件 计 ...
- hbuilderx制作简单网页_简单的手机网页制作教程
很多小白会以为建站只能通过电脑,但实际上,用手机也能顺利建站,而且操作非常简单,不需要你懂技术知识哦!下面就跟大家说说手机网页制作教程: 首先,你需要选择一个比较好用的手机网页制作app.尽量找知名度 ...
- hbuilder制作简单网页_企业信息化网站+营销服务之电子商务网站制作流程
爱美食爱技术 网站制作流程,是指网站制作过程中必须遵循的工作顺序.每个成品网站都必须按标准流程进行建设.这类似于企业的产品生产线,一个工序一个工序地完成整个产品加工.很多人把网站制作与网页制作混为一谈 ...
- Web前端大作业制作个人网页(html+css+javascript)
- 宠物网页作业HTML 大一作业HTML宠物网页作业 web期末大作业HTML 动物网页作业HTML HTML制作宠物网页作业css
- web实验报告——JSP动态网页编程
实验报告 一. 基本思路及实验结果(记录各种运行情况或页面的运行效果): 1.使用TOMCAT服务器配置jsp应用 1)打开TOMCAT/webapps子目录,创建一web应用(如myweb),将ex ...
- 简单的网页制作_制作简单网页物体
在掌握了路径和图层样式之后,我们终于可以开始"白手起家"地制作网页了.这不同于以往开启一幅图像后对其进行调整,或将两个图层通过蒙版或图层混合模式进行合成等操作,是完全在一片空白上逐 ...
- Web前端大作业—个人网页(html+css+javascript)我的家乡新密 (15页)含课程设计
家乡旅游景点网页作业制作 网页代码运用了DIV盒子的使用方法,如盒子的嵌套.浮动.margin.border.background等属性的使用,外部大盒子设定居中,内部左中右布局,下方横向浮动排列,大 ...
最新文章
- 深度学习框架大战,我该选哪个?
- MSTAR SETBOX 常用API
- JDK之jstat的用法
- BC:带你温习并解读《中国区块链技术和应用发展白皮书》—区块链技术发展路线图
- 前后端分离的思考与实践
- C#halcon点拟合圆形函数
- 【POJ - 1850】Code (组合数学,字符串另类排序)
- java连接kvstore_Tendermint ABCI 应用 KVStore 源码详解
- html5 zoom-in,页面打开效果除了slide-in-right,还有哪些?
- Office 365中的密码过期策略
- xftp中文文件名乱码
- java:单例模式的五种实现方式
- C盘压缩,电脑无法正常启动的解决方法?
- Oracle查询优化改写2.0 第二章:给查询结果排序
- 微博自定义来源怎么去掉android,手把手教大家如何修改微博来源
- Fastjson解析错误---NumberFormatException: For input string: Nov 11, 2015 12:22:12 PM
- linux 格式化 4k对齐,硬盘WD10EARS在FreeNas的格式化方法,4k对齐的问题
- android常用控件实验报告,常用控件的编程实验报告
- Nagiosxi的一个RCE漏洞利用脚本
- 可以吗?从 FireWire 设备引导 Linux