CSS_使用css布局
本文出自：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布局的更多相关文章
- 每日CSS_纯CSS制作进度条
每日CSS_纯CSS制作进度条 2020_12_26 源码 1. 代码解析 1.1 html 代码解析 设置整个容器 <div class="container"> . ...
- 界面设计技法之css布局
css布局之于页面就如同ECMAScript之于JS一般,细想一番,html就如同语文,css就如同数学,js呢,就是物理,有些扯远,这里就先不展开了. 回到主题,从最开始的css到如今的sass(l ...
- CSS布局 - 三栏布局
CSS布局技术可谓是前端技术中最基础的技术,就是因为基础,所以我认为要更加熟练,深入的去掌握,去梳理. 一. 传统 ---> 浮动实现的三栏布局 采用浮动实现的三栏布局有以下特点及注意事项: · ...
- DIV+CSS布局中主要CSS属性介绍
Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能 ...
- CSS 布局
近日开发中,总感觉页面布局方面力不从心.以前也曾学过这方面的内容,但是不够系统,因此我打算整理一下. 在web 页面中一般有 table 和 css+div 两种布局方式. 其中css+div 又分为 ...
- CSS布局经典—圣杯布局与双飞翼布局
在我之前的博客网页整体布局完全剖析-剖完你不进来看一下么?中总结单列.两列.三列固宽与变宽布局,我还以为已经囊括了所有经典的网页布局方法了呢,当然除了CSS3的弹性盒模型没有涉及到,现在看来确实是自己 ...
- html学习第三天—— 第12章——css布局模型
清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又不同于我们常说的 ...
- CSS篇之DIV+CSS布局
<div></div> div与其他标签一样,也是一个XHTML所支持的标签. div是XHTML中指定的,远门用于布局设计的容器标记. 简单的CSS布局 头部 内容 页脚 & ...
- CSS 布局口诀
body { font-family: Segoe UI,"Microsoft YaHei", Georgia,Helvetica,Arial,sans-serif,宋体, PMi ...
随机推荐
- RxJava开发精要5 – Observables变换
原文出自<RxJava Essentials> 原文作者 : Ivan Morgillo 译文出自 : 开发技术前线 www.devtf.cn 转载声明: 本译文已授权开发者头条享有独家转 ...
- 【HDOJ】1171 Big Event in HDU
母函数,先要算搞清楚组合数可能的最大值.非常大.N种设备的最大VAL*最大数量. #include <stdio.h> #include <string.h> #define ...
- FORM - 实现某数据项自动按记录序号加一操作
---- 设块名为VO,要操作的数据项为VO_ID,在该块中建立块级触发子WHEN-CREATE- RECORD,每当生成新记录时VO_ID就会自动加一了,加入如下代码: :VO_ID:=:Syste ...
- Oracle EBS 预警系统管理
本章主要讲述配置和设置Oracle EBS预警系统管理, 它比较方便和及时发用户或系统对数据库操作情况.下面讲一操作步聚: 1.预警系统管理-->系统-->选项 名称"Unix ...
- poj3140Contestants Division
链接 这叫树形DP吗..?断开某条边 求剩下两颗树数权值和的差最小 dfs一遍 枚举边 查了n久 wa n次 dp数组没初始化.. 在poj上1A感觉应该挺爽 #include <iostre ...
- mac 上iterm终端显示中文为乱码解决方案
1.首先需要去设置下iterm,的终端编码方式为utf-8 检查方案为:iterm - > perferences - > Terminal ->Character Encoding ...
- bzoj3611
会构建虚树之后就是noip提高组的题目了稍微难一点的是求代价和,只要注意按一个方向避免重复计算贡献即可 ; type node=record po,next:longint; end; ..] of ...
- c#继承中的函数调用
首先看下面的代码: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 using System; namespace Test { public cl ...
- 部署解决方案包 (SharePoint Server 2010)
转:http://technet.microsoft.com/zh-cn/library/cc262995(v=office.14).aspx 本文介绍各个解决方案包,及其在 Microsoft Sh ...
- å∫ç∂´ƒ©˙ˆ∆˚¬µ˜øπœ®ß†¨√∑≈¥Ω who know?
´é∑w∑w∑wqq¡œœ∑åååß∂˚¬∆¬˚∆˙ß∂ƒµ˜∫√ç≍Ωåœ∑´®†¥¨ˆøπ“‘æ…¬˚∆˙©ƒ∂ßåΩ≍ç≍ç√∫˜µ≤≥÷÷¡™£¢∞§§¶••ªº–≠«``¡™£¢∞§¶•ªº ...