您的位置：首页 > Web前端 > HTML

HTML简单实例

2020-01-13 16:48 92 查看

刚学完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>
  • 点赞
  • 收藏
  • 分享
  • 文章举报
向往@LY 发布了16 篇原创文章 · 获赞 5 · 访问量 1863 私信 关注
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航