本文出自：http://blog.csdn.net/svitter

创建一个HTML页面。 其内容为一个无序列表。 列表中至少包括了5本畅销书，每本书之前的项目符号必须採用概述封面的缩略图。

这些信息能够冲Web上获取。

要求採用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>

	<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>

book.css:

.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);

}

HTML_项目符号使用图片的更多相关文章

  1. 自定义li项目符号

    使用background-image属性 先清除ul的默认list-style ul{ list-style:none } li{ background-image:url('./image/symb ...

  2. JavaScript把项目本地的图片或者图片的绝对路径转为base64字符串、blob对象在上传

    主题: JavaScript把项目本地的图片或者图片的绝对路径转为base64字符串.blob对象在上传. 用处: 从本地选择图片上传,如项目规定只能选择本项目文件夹下的图像上传为头像等. 主要思想: ...

  3. 项目笔记---CSharp图片处理

    原文:项目笔记---CSharp图片处理 项目笔记---CSharp图片处理 最近由于项目上需要对图片进行二值化处理,就学习了相关的图片处理上的知识,从开始的二值化的意义到动态阀值检测二值化等等,并用 ...

  4. C# /VB.NET 创建PDF项目符号列表和多级编号列表

    使用项目符号和编号,可以让文档的层次结构更清晰.更有条理,也更容易突出重点.在编辑文档的过程中,我个人也比较偏爱项目标号来标注文章重点信息.在之前的文章中,介绍了如何在Word中来创建项目标号和编号列 ...

  5. vue项目打包后图片路径问题

    当用vue-cli自动构建项目后,有两种运行方法,分别是: npm run dev : 提供一个开发的环境,自动热更新,资源使用绝对路径,所以可以正常看到背景图片. npm run build : 打 ...

  6. django之创建第12个项目-加载图片

    百度云盘:django之创建第12个项目-加载图片 1.setting配置 #静态文件相关配置 # URL prefix for static files. # Example: "http ...

  7. HTML 项目符号

    无序符号 <ul> <li> </li> <li> </li> <li> </li> </ul> 属性 ...

  8. Java 在Word中创建多级项目符号列表和编号列表

    本文分享通过Java程序代码在Word中创建多级项目符号列表和编号列表的方法.程序运行环境如下: IntelliJ IDEA 2018(JDK 1.8.0) Word 2013 Word Jar包:F ...

  9. 基于.NetCore开发博客项目 StarBlog - (9) 图片批量导入

    系列文章 基于.NetCore开发博客项目 StarBlog - (1) 为什么需要自己写一个博客? 基于.NetCore开发博客项目 StarBlog - (2) 环境准备和创建项目 基于.NetC ...

随机推荐

  1. 点击文字弹出一个DIV层窗口代码 【或FORM表单 并且获取点击按钮的ID值】

    点击不同按钮咨询不同的 专家 <?php for($i=1;$i<5;$i++){ $uid=$i; //用户ID ?> <a class="a_click" ...

  2. ACM_尿裤子

    Problem Description: 小X上课的时候喝了一大壶水,午饭后他极限跑回宿舍上厕所,结果发现不知道哪个逗比舍友在宿舍门上加了一把4位密码锁,然后还留了纸条:密码是6666,小X只能一个一 ...

  3. 【转】Linux GCC常用命令

    转自:http://www.cnblogs.com/ggjucheng/archive/2011/12/14/2287738.html 1简介 2简单编译 2.1预处理 2.2编译为汇编代码(Comp ...

  4. ffmpeg rtp时间戳

    ffmpeg rtp时间戳 ffmpeg  c  一.介绍 在ffmpeg中,每帧都会存在一个pts用来表示该帧图像在视频流中的位置.而在多路流(比如视频.音频)时,往往需要进行多媒体的同步,使得画面 ...

  5. jQuery导航插件One-Page-Nav演示-显示命名锚记

    jQuery导航插件One-Page-Nav演示-显示命名锚记 简介 使用 选项 示例 推荐 简介 电商网站的分类比较明确,比如1楼是手机通讯产品,2楼是家用电器,3楼是服装鞋包等等,旁边还会有一个固 ...

  6. Angular——事件指令

    基本介绍 angular的事件指令都是ng-click,ng-blur....的形式,类似于js的事件 基本使用 <!DOCTYPE html> <html lang="e ...

  7. html5——3D案例（立方体）

    立方体:父盒子规定了3d呈现属性,立方体做旋转运动 移动顺序:1.每个盒子都先移动100px,然后再做相应的旋转  2.只有这样立方体的几何中心点与父盒子的几何中心点是一样的 <!DOCTYPE ...

  8. CSS——规避脱标流和vertical-align

    规避脱标流: 1.尽量使用标准流. 2.标准流解决不了的使用浮动. 3.浮动解决不了的使用定位. 问题解决:嵌套盒子在不使用定位的情况下定位到右上角 <!DOCTYPE html> < ...

  9. ZipMarket数字内容/素材交易网站源码项目

    ZipMarket程序仿自Envato旗下网站,对于想创建数字内容/素材交易平台的站长来说,ZipMarket是一个十分独特和极具创新的解决方案,用户在你的网站注册并购买或出售数字内容/素材作品时,你 ...

  10. DOM对象之window

    window的属性 top:返回当前窗口的最顶层的先辈窗口 document:返回HTML文档对象 location:当前窗口的地址 self:返回对自身窗口的引用 parent:返回父窗口 如何引用 ...