HTML 网页“酷悦台”

萌萌不做梦

已于 2022-06-28 23:21:17 修改

阅读量938

点赞数 4

分类专栏： HTML 文章标签：前端 html javascript

于 2022-06-28 21:17:16 首次发布

本文链接：https://blog.csdn.net/qq_54633910/article/details/125509993

版权

HTML 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
<meta charset="utf-8">

<style type="text/css" css="index.css">
    *{
        margin:0;
        padding:0;
}
body{
    background: #f2f2f2;
}
#top ul li input{
    background-image:url(images/search.png);
    background-color: #dcdcdc;
           background-repeat:no-repeat;
         border: 0px;
           border-radius: 50px;
}
#top ul {
margin-left: 80px;
width: 1200px;
    height: 50px;

}
#top ul li {
float: left;
list-style-type: none;
margin-left: 15px;
}
#top ul li a:hover {
background:cyan;
}
#top ul li a{
text-decoration: none;
color: grey;
}
#top ul li a:hover{
text-decoration: none;
color: red;
}
#top {
    width: 1400px;
    height: 40px;
    background:black;
    margin: 0 auto;
    line-height: 40px;
    overflow: hidden;
   
}

 
 #con #con-top img{
   margin-left: 30px;
    width: 1300px;
 }
 #con #con-top{
    text-align: center;
    width: 1300px;
    margin-left: 30px;
    overflow: hidden;
 }
 #con #con-bottom  {
width: 1250px;
margin: 0 auto;
margin-right: 20px;
overflow: hidden;
 }
 #con #con-bottom #con-bottom-img {
 
  overflow: hidden;
 }
 #con #con-bottom #con-bottom-dl dl {
     float: left;
     padding: 5px;
   
     width: 220px;
     border: solid 1px white;
 }
 #con #con-bottom #con-bottom-dl dl:hover {
     float: left;
     padding: 5px;
     
     width: 220px;
     border: solid 1px green;
 }
 #con #con-bottom #con-bottom-dl {
    
  margin-right: 50px;
 }
 #foot ul li{
    float: left;
    color: grey;
list-style-type: none;
margin-left:70px;
font-size: 12px;
 }
 #foot ul {
   padding: 15px;
margin-left:300px;
 }
 #foot{
     background:white;
     text-align: center;
     font-size:15px;
 }
</style>
    </head>
    <body>
<div id="top">
    
<ul type="none">
    <li><a href="">
        <img src="images/logo.png">
    </a>
    </li>
    <li><a href=""> 首页 </a> </li>
    <li><a href="">|</a></li>
    <li><a href="">我的MV</a></li>
    <li><a href="">|</a></li>
    <li><a href="">酷悦单</a></li>
    <li><a href="">|</a></li>
    <li><a href="">悦榜TOP10</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>
     <input type="text">
    </li>
    <li><a href="">VIP会员登录</a></li>
    <li><a href="">|</a></li>
    <li><a href="">注册</a></li>
</ul>
</div>
<div id="con">
       <div id="con-top"><img src="images/lunbo2.jpg"></div>
       <div id="con-bottom">
            <div id="con-bottom-img"><img src="images/lanmu3.jpg"</div>
             <div id="con-bottom-dl">
             <dl> <dt><img src="images/lanmu31.jpg"</dt>
                  <dd>经典无论何时都会湿了眼眶！</dd>
            </dl>
            <dl> <dt><img src="images/lanmu32.jpg"</dt>
                <dd>面朝大海，春暖花开</dd>
          </dl>
          <dl> <dt><img src="images/lanmu33.jpg"</dt>
            <dd>MV故事会</dd>
          </dl>
          <dl> <dt><img src="images/lanmu34.jpg"</dt>
            <dd>Post-Britpop后英式摇滚</dd>
         </dl>
         <dl> <dt><img src="images/lanmu35.jpg"</dt>
            <dd>我在空间的缝隙里寻找你</dd>
         </dl>
         <dl> <dt><img src="images/lanmu31.jpg"</dt>
            <dd>经典无论何时都会湿了眼眶！</dd>
        </dl>
        <dl> <dt><img src="images/lanmu32.jpg"</dt>
          <dd>面朝大海，春暖花开</dd>
        </dl>
        <dl> <dt><img src="images/lanmu33.jpg"</dt>
             <dd>MV故事会</dd>
       </dl>
       <dl> <dt><img src="images/lanmu34.jpg"</dt>
         <dd>Post-Britpop后英式摇滚</dd>
      </dl>
       <dl> <dt><img src="images/lanmu35.jpg"</dt>
      <dd>我在空间的缝隙里寻找你</dd>
      </dl>
            </div>
      </div>
</div>
<div id="foot">
<p><ul>
    <li>关于酷悦台</li>
    <li>人才招聘</li>
    <li>联系我们</li>
    <li>友情链接</li>
    <li>版权声明</li>
    <li>客服中心</li>
  
</ul></p><br/>
<p>Copyright &copy; 2009 - 2014 kuyuetai.com 违者必究</p>
</div>
    </body>
</html>