92. Web前端网页案例——【赵丽颖明星主题精品网页（ 6页）】大学生期末大作业 html5+css3

码农的码

于 2024-12-15 19:50:13 发布

阅读量1.3k

点赞数 7

分类专栏：明星文章标签：前端课程设计 html css3 html5 jquery css

本文链接：https://blog.csdn.net/2301_82212046/article/details/144491418

版权

明星专栏收录该内容

6 篇文章

订阅专栏

♬♬♬欢迎光临我的CSDN！这里是Web前端网页案例大集汇，有各行各业的前端网页案例，每天会持续更新！如果你对Web前端网页的学习、开发有困惑，抑或是为Web前端网页期末大作业、课设毕设烦恼，在我这可以提供专业的解决方案，☎☏有兴趣的欢迎联系交流！请点赞关注，谢谢！❤❤❤更多网页案例推荐:

http://angella.blog.csdn.net

提示：以下是本篇文章正文内容，下面案例供参考：

一、网页概述

本实例应用html5+css3 、导航菜单、音频、留言表单等。适用于大学生网页课程作业设计；本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。

二、网页文件

本网页共包含6个页面：

三、网页效果

以下是本篇文章正文内容，下面案例仅供参考（节选示例）：

四、代码展示

1.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>赵丽颖</title>
<link rel="stylesheet" type="text/css" href="css/index.css" >
</head>
<body>
<embed src="music/music.mp3" width="0" height="0">
<center>
<div id="page">
<div class="head"><img src="images/img_01.jpg" /></div>
<div class="nav"> <span class="navt">赵丽颖明星网站<em class="fa fa-venus"></em><strong style="font-family:myFont1;">Welcome to Zhao Liying's personal website</strong></span>

</div>
<div class="l_pagege">
<ul>
<li class="one"><a href="index.html"><span class="fa fa-home"></span>我的首页</a></li>
<li><a href="lishi.html" ><span class="fa fa-user-circle-o"></span>个人信息</a></li>
<li><a href="xisu.html"><span class="fa fa-film"></span>演艺经历</a></li>
<li><a href="lao.html" ><span class="fa fa-smile-o"></span>人物评价</a></li>
<li><a href="photo.html" ><span class="fa fa-street-view"></span>杂志写真</a></li>
<li><a href="yan.html"><span class="fa fa-commenting"></span>在线留言</a></li>
</ul>
</div>
<div class="zhi"> <img src="images/img_04.jpg" /> <img src="images/img_06.jpg" /> <img src="images/img_03.jpg" /> <img src="images/a4.jpg" />
<div class="clearit"></div>
</div>
<div class="zhicici" style="padding-bottom:50px;"> <br />
<P>赵丽颖，1987年10月16日出生于河北省廊坊市，中国内地影视女演员。</P>
<P>2006年，因获得雅虎搜星比赛冯小刚组冠军而进入演艺圈；同年，在冯小刚执导的广告片《跪族篇》中担任女主角。2007年，参演个人首部电影《镖行天下之牡丹阁》。2011年，因在古装剧《新还珠格格》中饰演晴儿一角而被观众所认识。2013年，凭借古装剧《陆贞传奇》获得更多的关注。2014年10月，在第10届金鹰电视艺术节举办的投票活动中被选为"金鹰女神"；12月，凭借都市爱情剧《杉杉来了》获得第5届国剧盛典内地最具人气女演员奖；同年，成立海润传媒赵丽颖工作室。</P>
<P>2015年，主演的仙侠剧《花千骨》成为中国首部网络播放总量突破200亿的电视剧，并打破中国内地周播剧收视纪录，而其个人则凭借该剧先后获得第6届澳门国际电视节金莲花最佳女主角奖、第6届国剧盛典最具收视号召力演员奖、第22届上海电视节白玉兰奖最佳女主角奖提名、第28届中国电视金鹰奖观众喜爱的女演员奖。2016年，主演古装玄幻剧《青云志》；同年，担任河北省旅游形象大使</P>
</div>
<div class="clearit"></div>
</div>
<div class="foot">
<p>明星--赵丽颖</p>
</div>
</center>
<bgsound src="music/music.mp3" volume="0" balance="0" loop="21">
</body>
</html>

...

2.CSS

代码如下（节选示例）：

/* CSS Document */

* {
margin: 0;
padding: 0;
}

body {
   font-family: "myfont";
   font-size: 12px;
   color: #000000;
   line-height: 20px;
   text-align: left
}
.img {
   display: inline-block;
   height: 35px;
}
.border-radius {
   width: 200px;
   height: 50px;
   background-color: pink;
   border: 5px solid #fff;
   border-radius: 50px;
   font-family: ΢��ź�;
   font-size: 25px;
   color: #fff;
   line-height: 50px;
   text-align: center;
   margin: 35px auto;
}
.border-radius:hover {
   box-shadow: 0 0 15px #aaa;
}
td, th {
   font-family: "΢��ź�";
   font-size: 12px;
   color: #000000;
}
a {
   color: #000000;
}
A:link {
   TEXT-DECORATION: none;
}
A:visited {
   TEXT-DECORATION: none;
}
A:hover {
   TEXT-DECORATION: underline;
   color: #ffffff;
}
ul, li {
   list-style-type: none;
}
.clearit {
   clear: both;
}
.hSpace1 {
   height: 1px;
   line-height: 1px;
   overflow: hidden;
   clear: both;
}
.hSpace5 {
   height: 5px;
   line-height: 5px;
   overflow: hidden;
   clear: both;
}
.hSpace10 {
   height: 10px;
   line-height: 10px;
   overflow: hidden;
   clear: both;
}
.hSpace5F {
   height: 5px;
   line-height: 5px;
   background: #FFFFFF;
   overflow: hidden;
   clear: both;
}
.p5 {
   padding: 5px;
}
.borderU {
   border-right: 1px solid #75819e;
   border-left: 1px solid #75819e;
   border-bottom: 1px solid #75819e;
}
.borderU_p5 {
   border-right: 1px solid #75819e;
   border-left: 1px solid #75819e;
   border-bottom: 1px solid #75819e;
   padding: 5px;
}
.borderH {
   border-right: 1px solid #75819e;
   border-left: 1px solid #75819e;
}