本文出自：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. *[codility]Number-of-disc-intersections

    http://codility.com/demo/take-sample-test/beta2010/ 这题以前做的时候是先排序再二分,现在觉得没有必要.首先圆可以看成线段,把线段的进入作为一个事件, ...

  2. VMware与宿敌Amazon一笑泯恩仇：重新定义混合云？（私有云节节败退）

    摘要: 私有云巨头VMware看来是真的要输给一个“书贩子” 了!这意味着私有云将败给公有云? [阅读原文] 三年前,虚拟化巨头VMware曾对亚马逊Amazon云服务AWS竖过中指:我们怎么可能打不 ...

  3. C# volatile与lock

    一.C#中volatile volatile是C#中用于控制同步的关键字,其意义是针对程序中一些敏感数据,不允许多线程同时访问,保证数据在任何访问时刻,最多有一个线程访问,以保证数据的完整性,vola ...

  4. 小图用 imageNamed: 大图用 dataWithContentsOfFile:options

    1down voteaccepted If you're loading images like:[UIImage imageNamed:@"myImage.png"];Then ...

  5. 【转】android JNI编程 一些技巧（整理）

    原文网址:http://blog.csdn.net/linweig/article/details/5203716 本篇将介绍在JNI编程中如何传递参数和返回值. 首先要强调的是,native方法不但 ...

  6. windows查看服务端口

    开始--运行--cmd 进入命令提示符 输入netstat -ano 即可看到所有连接的PID 之后在任务管理器中找到这个PID所对应的程序如果任务管理器中没有PID这一项,可以在任务管理器中选&qu ...

  7. 用FSM写Case，玩过没？

    一.引言 测试工程师小新一是一名安卓客户端测试工程师,对于安卓客户端的功能测试.自动化测试和性能测试方面都有着非常丰富的经验.最近小新一被通知负责某二手交易APP的功能测试,在初步了解了该APP后,小 ...

  8. Asm Shader Reference --- Shader Model 1 part

    ps部分 ps_1_1,ps_1_2,ps_1_3,ps_1_4 总览                   Instruction Set                               ...

  9. 搭建hdfs服务器集群的搭建+trash

    完全分布式搭建需要三台机器:node1.node2和node3 搭建时间之前首先要保持时间一致:date ntpdateyum install ntpdatentpdate -u ntp.sjtu.e ...

  10. [codevs1557]热浪

    本题地址:http://www.luogu.org/problem/show?pid=1339 http://codevs.cn/problem/1557/ http://www.tyvj.cn/p/ ...