标签:style blog http color 使用 ar sp div 2014
本文出自:http://blog.csdn.net/svitter
1. 创建一个HTML页面, 其内容为一个无序列表,列表中至少包括了5本畅销书,每本书之前的项目符号必须採用概述封面的缩略图。这些信息能够冲Web上获取。 要求採用CSS方法进行布局。
交作业的请不要照抄我的代码- -。
ex1.html:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <link href="book.css" rel="stylesheet" type="text/css"> </head> <!--.author:svitter;--> <body> <div> <h1 class="diffentcolor">Linux畅销书</h1> <div id="menu"> <br /> </div> <div id="content"> <ul> <li id="book1">鸟哥的Linux私房菜基础篇</li> <li id="book2">鸟哥的Linux私房菜server篇</li> <li id="book3">Linux命令行与shell脚本编程大全</li> <li id="book4">Linux运维之道</li> <li id="book5">Linux/Unix系统编程手冊</li> </ul> </div> </div> </body>
.diffentcolor{color:green;} #differcolor{color:green} body, td, div, .p, a { font-family: arial,sans-serif; } h1,h2{ font-family:sans-serif; color:gray; } .author{ by:svitter; } h1{ border-bottom:1px solid black; border-bottom:1px; solid black; } div#container{width:500p} div#menu {width:150px;float:left;} div#content {float:left;} li#book1{ list-style-image:url(pic/popularBook.jpg); } li#book2{ list-style-image:url(pic/popularBook2.jpg); } li#book3{ list-style-image:url(pic/popularBook3.jpg); } li#book4{ list-style-image:url(pic/popularBook4.jpg); } li#book5{ list-style-image:url(pic/popularBook5.jpg); }
效果简单演示:
标签:style blog http color 使用 ar sp div 2014
原文地址:http://www.cnblogs.com/blfshiye/p/4003234.html