本文出自：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. MyEclipse中文乱码，编码格式设置，文件编码格式 总结

    一.设置新建常见文件的默认编码格式,也就是文件保存的格式.在不对MyEclipse进行设置的时候,默认保存文件的编码,一般跟简体中文操作系统(如windows2000,windowsXP)的编码一致, ...

  2. Ember.js demo3

    <!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery.j ...

  3. HAL打开驱动失败

    --- ---

  4. 【HDOJ】1238 Substrings

    深搜+剪枝,简单字符串. #include <stdio.h> #include <string.h> #define MAXLEN 105 #define MAXNUM 10 ...

  5. 利用逻辑运算符?"三个数字比大小

    static void Main(string[] args)        {            int a, b, c;            while (true)            ...

  6. WCF 双工模式

    WCF之消息模式分为:1.请求/答复模式2.单向模式3.双工模式 其中,请求/答复模式,在博文: WCF 入门教程一(动手新建第一个WCF程序并部署) WCF 入门教程二 中进行了详细介绍,此处将主要 ...

  7. 用jQuery 处理XML-- jQuery与XML

    jQuery与XML 快而强的遍历系统,华丽丽的选择器语法,这或许是jQuery 那么流行的原因.当然它还有详尽的文档.它主要是用来处理HTML的,但在这里妳会看到如何应用到XML. 使用jQuery ...

  8. Lua查找字符串注意

    问题: 使用Lua写Wireshark插件时,经常匹配字符串.今天使用string.find()函数查找字符串”max-age”,没有找到. 分析: local index = string.find ...

  9. LightOJ 1370 Bi-shoe and Phi-shoe 欧拉函数+线段树

    分析:对于每个数,找到欧拉函数值大于它的,且标号最小的,预处理欧拉函数,然后按值建线段树就可以了 #include <iostream> #include <stdio.h> ...

  10. JSON字符串转换成JSON对象

    字符串转对象(strJSON代表json字符串) var obj = eval(strJSON); var obj = strJSON.parseJSON(); var obj = JSON.pars ...