그런 요구사항이 있습니다. 목록의 글머리 기호를 썸네일로 표시하고 싶습니다. 이 문서에서는 레이아웃 구현을 위해 다음을 참조할 수 있습니다.
최소 5권의 베스트셀러 도서를 순서 없이 나열한 HTML 페이지를 만듭니다. 각 도서 앞의 글머리 기호는 표지 개요를 나타내는 썸네일이어야 합니다. 이 정보는 웹에서 얻을 수 있습니다. 레이아웃에는 CSS 메소드가 필요합니다.
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> <p> <h1 class="diffentcolor">Linux畅销书</h1> <p id="menu"> </p> <p id="content"> <ul> <li id="book1">鸟哥的Linux私房菜基础篇</li> <li id="book2">鸟哥的Linux私房菜服务器篇</li> <li id="book3">Linux命令行与shell脚本编程大全</li> <li id="book4">Linux运维之道</li> <li id="book5">Linux/Unix系统编程手册</li> </ul> </p> </p> </body>
book.css:
코드는 다음과 같습니다. 다음:
.diffentcolor{color:green;} #differcolor{color:green} body, td, p, .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; } p#container{width:500p} p#menu {width:150px;float:left;} p#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); }
이미지의 CSS 작성 방법을 사용하는 HTML 비순차 목록 글머리 기호 기호에 대한 자세한 내용은 PHP 중국어 웹사이트를 참고하세요!