简单div+css布局之二_html/css_WEB-ITnose

php中文网

发布时间：2016-06-24 12:32:00

1204人浏览过

来源于php中文网

原创

立即学习“前端免费学习笔记（深入）”；

续简单的div+css的布局之一

立即学习“前端免费学习笔记（深入）”；

left-top.gif right-top.gif

立即学习“前端免费学习笔记（深入）”；

right.gif left-bottom.gif

立即学习“前端免费学习笔记（深入）”；

8023商城系统

由于8023特殊的数字。所以该项目取名为：8023商城，这个项目是一个简单B2C商城，后台功能不是很完善，许多功能尚未加入，源码仅供参考学习之用，请等待后续版本！项目名称：8023商城　版本号码：1.0页面采用：DIV+TABLE+CSS进行布局。项目结构：B/S结构开发语言：ASP.NET(C#)开发人员：独自开发平台：windows server 2003、windows xp相关软件：Vis

下载

立即学习“前端免费学习笔记（深入）”；

right-bottom.gif

立即学习“前端免费学习笔记（深入）”；

实例 3 代码：

body{

background:#fff;

font:13px/1.5 Arial, Helvetica, sans-serif;

margin:0;

padding:0;

}

.rounded{

background:#aaa url(images/lt.gif) top left no-repeat;

width:100%;

}

.rounded h2{

background:url(images/rt.gif) top right no-repeat;

padding:20px 20px 10px;

margin:0;

}

.rounded .main{

background:url(images/r.gif) top right repeat-y;

padding:10px 20px;

margin:-2em 0 0 0;

}

.rounded .footer{

background:url(images/lb.gif) bottom left no-repeat;

}

.rounded .footer p{

color:#888;

text-align:right;

background:url(images/rb.gif) bottom right no-repeat;

display:block;

padding:10px 20px 30px;

margin:-2em 0 0 0;

}

立即学习“前端免费学习笔记（深入）”；

#header,#pagefooter,#containter{

width:760px;

margin: 0 auto;

}

立即学习“前端免费学习笔记（深入）”；

#content{

width:497px;

float:left;

position:relative;

top:20px;

}

#content1{

width:260px;

}

#side{

width:248px;

float:left;

}

#side1{

width:248px;

float:left;

}

#side2{

width:260px;

}

立即学习“前端免费学习笔记（深入）”；

Page Header

这是一行文本，这里作为样例，显示在布局框中

这是一行文本，这里作为样例,显示在布局框中

立即学习“前端免费学习笔记（深入）”；

Page Content

这是一行文本，这里作为样例，显示在布局框中

这是一行文本，这里作为样例,显示在布局框中

Page Content1

这是一行文本，这里作为样例，显示在布局框中

这是一行文本，这里作为样例,显示在布局框中

Page Side

这是一行文本，这里作为样例，显示在布局框中

这是一行文本，这里作为样例,显示在布局框中

Page Side3

这是一行文本，这里作为样例，显示在布局框中

这是一行文本，这里作为样例,显示在布局框中

Page Side2

这是一行文本，这里作为样例，显示在布局框中

这是一行文本，这里作为样例,显示在布局框中

立即学习“前端免费学习笔记（深入）”；

Page Footer

这是一行文本，这里作为样例，显示在布局框中

这是一行文本，这里作为样例,显示在布局框中

实例 4 代码：

立即学习“前端免费学习笔记（深入）”；

固定宽度相对定位

立即学习“前端免费学习笔记（深入）”；