<html>
<head>
<title></title>
<style> //设置样式
.body{
font : 62.5% Arial,Verdana,sans-serif ;
}
.h1{
font-size : 2.5em ; margin-bottom : 0 ;
}
.h2{
font-size : 1.3em ; margin-bottom : 5em ;
}
.h3{
font-size : 1.1em ; margin-bottom : 0 ;
}
.poem{
margin : 0.2em ;
}
.highlight{
font-style : italic ;
border : 1px solid #888 ;
padding : 0.5em ;
margin : 0.5em 0 ;
background-color : #ffc ;
}
.hor{
float : left ;
list-style : none ;
margin : 10px ;
}
.a{ color : #bcc ;}
.b{ background : url(audio-1.png //此处放置你的图片) no-repeat right top;
padding-right :18px ;
}
.c{ background-color : #fff ; padding : 2px ; border : 1px solid #000 ;}
.d{ background : url(player.png) no-repeat right top;padding-right :18px ;}
</style>
</head>
<body>
<script type="text/javascript" language="javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="jquery.min.js">//加载jquery库文件(到官网下载)
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#ul_1 > li").addClass('hor'); //以<li>顶级的应用hor样式
$("#ul_1 li:not(.hor)").addClass('highlight');
//此处的意思是没有应用hor样式的<li>就应用highlight样式
});
$(document).ready(function(){
$('a[href^=love]').addClass('b'); //以love开头的链接文件应用样式b(注意^)
$('a[href$=video]').addClass('d'); //以video结尾的链接文件应用样式d(注意$)
});
</script>
<ul id="ul_1"> //<ul>的id是ul_1
<li>one
<ul>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
</ul>
</li>
<li>two
<ul>
<li>two</li>
<li>two</li>
<li>two</li>
</ul>
</li>
<li>three
<ul><li>three(<a href="love.html" title="love you">mail</a>)
<ul>
<li>three</li>
<li>three</li>
</ul>
</li>
<li><a title="like you" href="like.video">four</a></li>
<li>five</li>
</ul>
</li>
</li>
</ul>
</body>
</html>
最后成品如下：
共同學(xué)習(xí)，寫下你的評論
評論加載中...
作者其他優(yōu)質(zhì)文章
