html+caa手写qq音乐

wKiom1WkcCeRNBEtAARLBna2sTo644.jpg

源代码:

<!doctype html>

<html>

<head>

<!--声明当前页面的编码集:charset=gbk;gb2312(中文编码),utf-8国际编码-->

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

<!--当前页面三要素-->

<title>音乐播放插件</title>

<meta name="keywords" content="关键词">

<meta name="description" content="seo描述">

<!--css,js-->

<style type="text/css">

*{margin:0;padding:0;}

body{background:url("img/bg.jpg") no-repeat top center;}

.bt{color:#fff;text-align:center;}

.music{width:960px;height:250px;margin:50px auto;background:url("img/banner_bg.jpg") no-repeat;position:relative;}

.music ul li{list-style:none;position:absolute;}

.music ul .kg1{top:160px;left:97px;}

.music ul .kg1 a img{border-radius:100%;}

.music ul .kg2{top:30px;left:165px;}

.music ul .kg2 a img{border-radius:100%;}

.music ul .kg3{top:65px;left:306px;}

.music ul .kg3 a img{border-radius:100%;}

.music ul .kg4{top:160px;right:320px;}

.music ul .kg4 a img{border-radius:100%;}


</style>


<!--给当前页页面插入一个外部引入js文件-->

<script type="text/javascript" src="相对路径">



</script>



</head>


<body >

<h1 class="bt">dubijerry网页播放音乐</h1>


<div class="music">

<ul>

<li class="kg1">

<a>

<img src="img/1.jpg" alt="孙露" width="60px" height="60px"/>

</a>

</li>

<li class="kg2">

<a>

<img src="img/2.jpg" alt="抒情流行" width="90px" height="90px"/>

</a>

</li>

<li class="kg3">

<a>

<img src="img/3.jpg" alt="华语流行" width="124px" height="124px"/>


</a>

</li>

<li class="kg4">

<a>

<img src="img/4.jpg" alt="周华健" width="60px" height="60px"/>

</a>

</li>

</ul>

</div>



</body>


</html>


你可能感兴趣的:(html+css页面设计)