小网页学习开发02简单列表01 

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
div{
position:absolute;
top:22%;
left:20%;
background-color:skyblue;

}
div ul li:first-child{
width:940px;
height:80px;
background-image:url("6.jpg");
text-align:center;
font-size:70px;
color:green;
font-weight:bold;
font-family:微软雅黑;

}

div ul{
list-style:none;
}
div ul li{

font-family:宋体;
font-size:50px;
}
img{
width:50px;
;
}
</style>
</head>
<body>
<div>


<ul>
<li>头条推荐</li>
<li><img src="icon.jpg">盘点关于全球旅游胜地的15大误传</li>
<li><img src="icon.jpg">世界四大文明古都，中国的最迷人!</li>
<li><img src="icon.jpg">川师大杀人案嫌犯作案动机，行凶前喝4瓶酒</li>
<li><img src="icon.jpg">银行金库遭劫：现场留百捆现金 值守人死亡</li>
<li><img src="icon.jpg">关于地铁房的5大误区!买房的必看</li>
<li><img src="icon.jpg">挣漂福利 郑州将分配533套公租房！</li>
<li><img src="icon.jpg">思域在哪些城市不加价？</li>
<li><img src="icon.jpg">三厢版宝马1系会有市场吗？</li>
<li><img src="icon.jpg">撞发？没关系!有一种流行叫杨幂分侧头杀</li>
</div>



</ul>

</div>
</body>
<html>

　　效果：

 

posted @ 2017-07-23 18:20  毕竟冬哥一场梦  阅读(81)  评论(0)    收藏  举报