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

１.   创建一个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>

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

}

PIC要自己建立，插入图标。

效果简单演示：

CSS_使用css布局的更多相关文章

  1. 每日CSS_纯CSS制作进度条

    每日CSS_纯CSS制作进度条 2020_12_26 源码 1. 代码解析 1.1 html 代码解析 设置整个容器 <div class="container"> . ...

  2. 界面设计技法之css布局

    css布局之于页面就如同ECMAScript之于JS一般,细想一番,html就如同语文,css就如同数学,js呢,就是物理,有些扯远,这里就先不展开了. 回到主题,从最开始的css到如今的sass(l ...

  3. CSS布局 - 三栏布局

    CSS布局技术可谓是前端技术中最基础的技术,就是因为基础,所以我认为要更加熟练,深入的去掌握,去梳理. 一. 传统 ---> 浮动实现的三栏布局 采用浮动实现的三栏布局有以下特点及注意事项: · ...

  4. DIV+CSS布局中主要CSS属性介绍

    Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能 ...

  5. CSS 布局

    近日开发中,总感觉页面布局方面力不从心.以前也曾学过这方面的内容,但是不够系统,因此我打算整理一下. 在web 页面中一般有 table 和 css+div 两种布局方式. 其中css+div 又分为 ...

  6. CSS布局经典—圣杯布局与双飞翼布局

    在我之前的博客网页整体布局完全剖析-剖完你不进来看一下么?中总结单列.两列.三列固宽与变宽布局,我还以为已经囊括了所有经典的网页布局方法了呢,当然除了CSS3的弹性盒模型没有涉及到,现在看来确实是自己 ...

  7. html学习第三天—— 第12章——css布局模型

    清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又不同于我们常说的 ...

  8. CSS篇之DIV+CSS布局

    <div></div> div与其他标签一样,也是一个XHTML所支持的标签. div是XHTML中指定的,远门用于布局设计的容器标记. 简单的CSS布局 头部 内容 页脚 & ...

  9. CSS 布局口诀

    body { font-family: Segoe UI,"Microsoft YaHei", Georgia,Helvetica,Arial,sans-serif,宋体, PMi ...

随机推荐

  1. UL LI 布局 TAB 切换条

    web页面实现tab的功能有几种实现方式,下面是使用UL LI DIV方式实现的tab. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tr ...

  2. javaweb学习总结(三十六)——使用JDBC进行批处理

    在实际的项目开发中,有时候需要向数据库发送一批SQL语句执行,这时应避免向数据库一条条的发送执行,而应采用JDBC的批处理机制,以提升执行效率. JDBC实现批处理有两种方式:statement和pr ...

  3. Android 如何在ScrollView中嵌套ListView

    前几天因为项目的需要,要在一个ListView中放入另一个ListView,也即在一个ListView的每个ListItem中放入另外一个ListView.但刚开始的时候,会发现放入的小ListVie ...

  4. TigerLeapMC V1.3 for Windows(支持DLNA)

    TigerLeapMC V1.3 2014-04-10: 1.更新tlplayer TigerLeapMC是基于tlplayer作为播放器的集成DLNA,(DMS,DMR,DMP)等,支持各种网络播放 ...

  5. 深刻理解C#的传值调用和传引用调用

    传值调用和传引用调用是几乎所有主流语言都会涉及到的问题,下面我谈谈我对C#中传值调用和传引用调用的理解. 1. 一般对C#中传值调用和传引用调用的理解 如果传递的参数是基元类型(int,float等) ...

  6. 六月计划#2A(6.10-6.16)

    17/35 STL BZOJ_1588_&_Codevs_1296_[HNOI2002]_营业额统计(平衡树/set)(set重做) BZOJ_1208_&_Codevs_1258_[ ...

  7. 【转】java中静态代码块的用法 static用法详解

    原文网址:http://www.cnblogs.com/panjun-Donet/archive/2010/08/10/1796209.html (一)java 静态代码块 静态方法区别一般情况下,如 ...

  8. C#的排列组合类

    C#的排列组合类 //-----------------------------------------------------------------------------//// 算法:排列组合 ...

  9. linux tar 解压命令总结

    把常用的tar解压命令总结下,当作备忘: tar -c: 建立压缩档案 -x:解压 -t:查看内容 -r:向压缩归档文件末尾追加文件 -u:更新原压缩包中的文件 这五个是独立的命令,压缩解压都要用到其 ...

  10. VS2008压力测试时web测试记录器无显示

    系统:win7 浏览器:IE8 web测试记录器:Web Test Recorder   在运行vs2008Web压力测试时一直在浏览器左侧的web测试记录器无显示. 解决办法:     在IE工具栏 ...