HTML第七章上机题3---------视频宣传

最新推荐文章于 2019-05-31 18:17:03 发布

倩倩之

最新推荐文章于 2019-05-31 18:17:03 发布

阅读量3.1k

点赞数 2

分类专栏： HTML

本文链接：https://blog.csdn.net/qq_36074113/article/details/52859916

版权

HTML 专栏收录该内容

11 篇文章 3 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>青鸟视频宣传片播放页</title>
<link href="css/video.css" rel="stylesheet" type="text/css" />
</head>

<body>
<!--LOGO开始-->
<div id="topLogo"><img src="image/forumLogo_r.jpg"/></div>
<!--导航菜单开始-->
<div id="menu">
  <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>
  </ul>
</div>
<!--导航菜单结束-->
<div id="content">
<div class="videoBody">
      <div class="broadcastVideo"><img src="image/video.jpg"/></div>
      <h1>青鸟视频——携手共同进步</h1>
      <span>时长：80秒 </span>
      <p>点击：541563</p>
    </div>
<!--视频列表开始-->
<div class="videoSame">
      <div class="videoTitle">精彩视频</div>
      <ul class="videoSList">
        <li><a href="#"><img src="image/video-01.jpg"/></a>
          <h1>携手共同进步</h1>
          <p>时长：80秒</p>
          <span>点击：541563</span> </li>
        <li><a href="#"><img src="image/video-02.jpg"/></a>
          <h1>美丽的起点</h1>
          <p>时长：120秒</p>
          <span>点击：657842</span> </li>
        <li><a href="#"><img src="image/video-03.jpg"/></a>
          <h1>努力的过程</h1>
          <p>时长：50秒</p>
          <span>点击：912380</span> </li>
        <li><a href="#"><img src="image/video-04.jpg"/></a> <h1>享受丰硕的成果</h1>
          <p>时长：60秒</p>
          <span>点击：47651280</span> </li>
      </ul>
    </div>
    <div id="bottom">
    Copyright @ 1999-2014 Beijing Aptech Beida Jade Bird Information Technology Co.,Ltd <br/>
      北大青鸟IT教育      北京阿博泰克北大青鸟信息技术有限公司 版权所有
  </div>
</div>
</body>
</html>




@charset "gb2312";
/* CSS Document */
body, div, dl, dt, dd, ul, li, p, h1, h2, h3 {
	margin:0px;
	padding:0px;
}
body {
	line-height:20px;
	font-size:12px;
}
img {
	border:0px;
}
ul, li {
	list-style:none;
}
#topLogo {
	width:960px;
	margin:0px auto;
	color:#a3a3a3;
	background:#ebebeb url(../image/forumLogo.jpg) 0px 0px no-repeat;
	height:82px;
	text-align:right;
}
#menu {
	background-color:#383838;
	height:33px;
	width:960px;
	margin:0px auto;
}
#menu li {
	float:left;
}
#menu li a, #menu li a:hover {
	color:#ffffff;
	text-decoration:none;
	font-size:14px;
	font-weight:bold;
	height:33px;
	line-height:33px;
	display:block;
	padding:0px 15px;
}
#menu li a {
	background:url(../image/forumMenuBg.gif) top right no-repeat;
}
#menu li a:hover {
	background:url(../image/forumMenuBg.jpg) repeat-x;
}
#content {
	margin:0px auto;
	width:960px;
	padding:10px 0px 10px 0px;
	background:#ddd9d9;
	height:420px;
}
.videoBody {
	float:left;
	width:620px;
	padding:0px 0px 0px 20px;
}
.broadcastVideo {
	height:306px;
	padding-top:20px;
	background-color:#000000;
	text-align:center;
}
.videoBody h1 {
	font-size:12px;
	padding-left:10px;
}
.videoBody span {
	background:url(../image/icon-01.jpg) 10px 5px no-repeat;
	padding-left:30px;
	display:block;
	float:left;
	line-height:25px;
}
.videoBody p {
	background:url(../image/icon-02.jpg) 10px 5px no-repeat;
	padding-left:30px;
	line-height:25px;
	float:left;
}
.videoSame {
	float:right;
	width:295px;
	height:370px;
	background-color:#ced4db;
}
.videoTitle {
	background:url(../image/icon-03.jpg) repeat-x;
	height:29px;
	line-height:29px;
	color:#ffffff;
	font-size:14px;
	font-weight:bold;
	padding-left:15px;
}
.videoSList {
	padding:10px 0px 0px 10px;
}
.videoSList li {
	float:left;
	width:142px;
	height:160px;
}
.videoSList li a img {
	border:2px #ffffff solid;
}
.videoSList li a:hover img {
	border:2px #f08609 solid;
}
.videoSList h1 {
	font-size:12px;
	padding-left:10px;
	line-height:25px;
}
.videoSList p {
	background:url(../image/icon-01.jpg) 10px 5px no-repeat;
	padding-left:30px;
	height:25px;
	line-height:25px;
}
.videoSList span {
	background:url(../image/icon-02.jpg) 10px 5px no-repeat;
	padding-left:30px;
	height:25px;
	line-height:25px;
	display:block;
}
#bottom {
	border-top:1px #666 solid;
	line-height:25px;
	text-align:center;
	clear:both;
}

倩倩之

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
HTML第七章上机题3---------视频宣传

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;&lt;me
复制链接

扫一扫