HTML5教程

HTML简单实例

本文主要是介绍HTML简单实例，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

刚学完Html5,为了加深对Html5的理解，便突发奇想的使用纯Html写了一个纯静态的页面，代码通俗易懂，适合小白进行研究学习。

代码效果：
在这里插入图片描述代码index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>MUSIC AND MOVIE AND STUDY 导航</title>

<style>
body {
  margin: 0;
}

/* 头部样式 */
.header {
  background-color: #00BFFF;
  padding: 20px;
  text-align: center;
}



/* 导航条 */
.topnav {
  overflow: hidden;
  background-color: #333;
}
 
/* 导航链接 */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
 
/* 链接 - 修改颜色 */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

</style>
</head>
<body>

<div class="header">
  <h1><font  color=" #696969"><i>MUSIC AND MOVIE AND STUDY 导航</i></font></h1>
</div>

<div class="topnav">
  <a href="index.jsp">首页</a>
  <a href="guanyuwomen.html">关于我们</a>
  
</div>


  <!-- <div id="menu" style="background-color:#1E90FF;height:450px;width:150px;float:left;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript</div> -->

<div id="content" style="background-color:#EEEEEE;height:450px;width:1340px;float:left;">
<br>
<font color="#00CED1"  size="4px">在线音乐与影视</font>
<br>
<div  style="background-color:#EEEEEE;height:170px;width:1330px;float:left;border:3px solid #1E90FF;">
<table  cellspacing="10">
<tr>

<td>
<a href="//www.kugou.com">
<img   src="image/kg.png"  width="120" height="120"></a>
<br>
<div style="text-align:center">酷狗音乐</div>
<td/>

<td>
<a href="https://y.qq.com/">
<img   src="image/QQ.jpg"  width="120" height="120"></a>
<br>
<div style="text-align:center">QQ音乐</div>
<td/>

<td>
<a href="https://music.163.com/">
<img   src="image/wyy.png"  width="120" height="120"></a>
<br>
<div style="text-align:center">网易云音乐</div>
<td/>


<td>
<a href="http://www.kuwo.cn/">
<img   src="image/kw.png"  width="120" height="120"></a>
<br>
<div style="text-align:center">酷我音乐</div>
<td/>

<td>
<a href="https://www.xiami.com/">
<img   src="image/xm.png"  width="120" height="120"></a>
<br>
<div style="text-align:center">虾米音乐</div>
<td/>


<td>
<a href="https://m.iqiyi.com/">
<img   src="image/aqy.jpg"  width="120" height="120"></a>
<br>
<div style="text-align:center">爱奇艺</div>
<td/>

<td>
<a href="https://m.youku.com/">
<img   src="image/yk.png"  width="120" height="120"></a>
<br>
<div style="text-align:center">优酷视频</div>
<td/>


<td>
<a href="https://m.v.qq.com/">
<img   src="image/tx.jpg"  width="120" height="120"></a>
<br>
<div style="text-align:center">腾讯视频</div>
<td/>

<td>
<a href="https://m.mgtv.com/">
<img   src="image/mg.jpg"  width="120" height="120"></a>
<br>
<div style="text-align:center">芒果视频</div>
<td/>
</tr>
 </table>
    </div>
    
    <br>
    <br>
     <br>
      <br>
      
     <hr>
    <font color="#00CED1"  size="3px"><em>网址导航</em></font>
    <div  style="background-color:#EEEEEE;height:190px;width:1330px;float:left;border:3px solid #1E90FF;">
    <table border="1px"  style="background-color:#EEEEEE;height:10px;width:1330px;" >
    <tr>
       <th >IT学习网站</th>
       <th >软件下载</th>
       <th >视频解析</th>
       <th >网站源码</th>
     </tr>
    
    <tr>
      <td><a  href="http://www.pzit.store"><div  style="text-align:center;">www.pzit.store</div></a></td>
    <td><a  href="https://www.pzit.store"><div  style="text-align:center;">www.pzit.store</div></a></td>
   <td><a  href="http://www.pzit.store/jx"><div  style="text-align:center;">www.pzit.store</div></a></td>
    <td><a  href="http://www.pzit.store"><div  style="text-align:center;">www.pzit.store</div></a></td>
    </tr> 
    
    <tr>
    <td>w</td>
    <td>w</td>
    <td><a href="m3u8.html"></a></td>
    <td>w</td>
    </tr>
    
    <tr>
    <td>w</td>
    <td>w</td>
    <td>w</td>
    <td>w</td>
    </tr>
    
    <tr>
    <td></td>
    <td>w</td>
    <td>w</td>
    <td>w</td>
    </tr>
    
    <tr>
    <td>w</td>
    <td>w</td>
    <td>w</td>
    <td>w</td>
    </tr>
    
    <tr>
    <td>w</td>
    <td>w</td>
    <td>w</td>
    <td>w</td>
    </tr>
    </table>
    </div>
    </div>

<div  id="button"  style="background-color:#696969;height:471px;width:1350px;text-align:center;">版权所有：<a  href="http://www.pzit.store">www.pzit.store </a></div>

</body>
</html>

这篇关于HTML简单实例的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航