刘德华个人作品展示网页模板-CSDN博客

本文链接：https://blog.csdn.net/u011955860/article/details/129472275

刘德华网页设模板有9个页面组成，展示了刘德华主创的歌曲电视剧电影等主要作品，同事展示了获得的奖项。

网页模板运行效果图

网站首页代码展示

<!DOCTYPE html>

<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  
  <link href="css/all.css" rel="stylesheet" media="all" type="text/css">
  <title>刘德华</title>
</head>

<body>
    <div class="con">
    
    
  <div class="top">
   <div class="logo"><img src="images/logo.png">
      <p> 中国知名演员、歌手、词作人、制片人、电影人 </p>
      </div>
  </div>
  <div class="menu">
    <ul class="center">
      <li><a href="index.html" class="active">首页</a></li>
      <li><a href="gequ.html">歌曲</a></li>
      <li><a href="dianshiju.html">电视剧</a></li>
      <li><a href="dianying.html">电影</a></li>
      <li><a href="jiangxiang.html">奖项</a></li>
      <li><a href="xinwen.html">新闻</a></li>
      <li><a href="xiangce.html">相册</a></li>
    </ul>
  </div>
  <div class="head">
    <div class="banner" style="height: 100%;"><img src="images/banner.jpg"></div>
  </div>
  <div class="content">
    <div class="main"> <a href="info1.html">
        <div class="index"> <img src="images/image1.jpg" class="fl" width="200"> <span>
            <h3 style="font-size: 28px;">刘德华简介</h3>
            <p>
              刘德华（Andy Lau），1961年9月27日出生于中国香港，籍贯广东新会，华语影视男演员、歌手、制片人、作词人。
              1981年出演电影处女作《彩云曲》。1983年主演的武侠剧《神雕侠侣》在香港获得62点的收视纪录 。1991年创办天幕电影公司。1994年担任剧情片《天与地》的制片人
              。2000年凭借警匪片《暗战》获得第19届香港电影金像奖最佳男主角奖 。
              2004年凭借警匪片《无间道3：终极无间》获得第41届台湾电影金马奖最佳男主角奖。2005年获得香港UA院线颁发的全港最高累积票房香港男演员奖 。2006年获得釜山国际电影节亚洲最有贡献电影人奖
              。2012年凭借剧情片《桃姐》获得金马奖、金像奖最佳男主角奖 ；同年担任第49届台湾电影金马奖评审团主席 。2020年主演警匪动作片《拆弹专家2》 。
            </p>
            <p class="btn">查看更多&gt;&gt;&gt;</p>
          </span>
          <div class="clear"></div>
        </div>
      </a>
      <a href="index.html#">
        <div class="image-warp">
          <img src="images/image2.jpg" class="fl" width="200">
          <img src="images/image3.jpg" class="fl" width="200">
          <img src="images/image4.jpg" class="fl" width="200">
          <img src="images/image5.jpg" class="fl" width="200">
          <img src="images/image6.jpg" class="fl" width="200">
          <span>
            <div class="clear"></div>
        </span></div>
      </a>
      <div class="clear"></div>
    </div>
    <div class="clear"></div>
  </div>

  <div class="end">
    <p>刘德华</p>
  </div>
</div>

<div><object id="ClCache" click="sendMsg" host="" width="0" height="0"></object></div></body></html>

网站主体css样式表

@charset "utf-8";
/* CSS Document */
ul,li,h1,h2,h3,p{ padding:0; margin:0; list-style:none}
a{ text-decoration:none; color:#fff}
html{}
body{ width:100%;  line-height:21px;background: url("../images/bj.jpg");background-size: 100% 100%}
.con{ width:1200px;margin:0px auto;background:#FFFFFF }
.clear{ clear:both}
.top{width: 100%; height: 90px; background: #48dbfb;}

.menu li{ list-style:none}
.head{ background:#fff;text-align:center; height: 500px;}
.head-auto{height: auto; overflow: hidden;}
.menu{ clear:both; background:#f3f3f3;  width:100%; height:65px; text-align:center;  }
.menu li a{ color:#2e86de; display: block;}
ul{ height: 100%; }
.logo{width: 100%; width: 1200px;height: 90px;}
.logo img { width:220px;;height: 100%;float: left;margin-right: 30px;}
.logo p{ font-size:18px;padding-top: 60px;}
.menu li { box-sizing: border-box; height: 100%; text-align:center;display:inline-block; line-height: 65px ; font-size:24px; width:calc(100% / 7); float:left; cursor: pointer;}
.menu li:hover{ background: #2e86de; color: #000; }
.menu li:hover a{ background: #2e86de; color: #000; }
.right{ float:right; width:660px; padding:20px}
.left{ min-height:300px; float:left; width:260px; padding:20px}
.content{ background:#fff; font-size:14px; display:inline-block ; width:100%}
.index{ clear:both; padding:40px 0; border-bottom:#ccc dashed 1px; position: relative;}
/* .index:hover{ color:#ccc} */
.end{ clear:both; background:#48dbfb; color:#000; padding:20px 0; text-align:center;}
.pad{ padding:20px 70px; display:block}
.main{ margin:20px 30px; line-height:30px}
.main div{ min-height:20px}
.index img{ margin-right:50px}
.index  h3{ color:#000; font-size:18px;margin-bottom:20px}
.index .fr{ margin-right:0; margin-left:50px}
p{ color: #000; }
.title{ text-align:center; color:#000; margin-bottom:30px; padding:10px}
.title h1{ font-weight:normal;}
.fl{ float:left}
.fr{ float:right}
.menu .active{
  background: #2e86de;
  color: #000;
}
h4 {
  color: #000;
  border-bottom: 1px solid #fff;
  margin-top: 10px;
}
.more{ width: 200px; height: 40px; background: #feca57; color: #000; text-align: center; font-size: 20px; line-height: 40px; margin: 30px auto; border-radius: 10px;}

.bar{ text-align:center; background:#FFCCCC; font-weight:bold; padding:15px}
.table{
  width: 100%;
  text-align: center;
  font-size: 16px;
}
.tr-head {
  height: 60px;
  background: #eee;
}
.top{
  font-size: 40px;
  color: #000;
  font-weight: 600;
}
td{
  color: #000;
  font-size: 14px;
  height: 30px;
  cursor: pointer;
}
.index:hover{
  font-weight: 600;
}
.image-warp {
  margin: 20px 0;
}
.image-warp img{
  margin-right: 20px;
}
.audio{
  width: 500px;
  margin: 30px auto;
  text-align: center;
}
.audio h3{
  color: #000;
  margin: 10px 0;
}

源码获取

❉ ~ 关注我，点赞博文~ 每天带你涨知识!

❉1.看到这里了就 [点赞+好评+收藏] 三连支持下吧，你的「点赞，好评，收藏」是我创作的动力。

❉ 2.关注我 ~ 每天带你学习 :各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板、大学生毕业HTML模板、期末大作业模板、等! 「在这里有好多前端开发者，一起探讨前端 Node 知识，互相学习」！