怎么用div+css写网页设计,以这个为例

html-css020

怎么用div+css写网页设计,以这个为例,第1张

您好,1、div是个层,css来定义它的样式,比如<div class="mystyle"></div>,在css文件中写个样式:.mystyle{float:leftwidth:100pxheight:200pxmargin-top:10px},这样就能让这个div按这个样式显示(左浮动,宽100像素,高200像素,上边距10像素,),当然还有好多属性你可以再加。

2、你是下的网站模板吗?静态的话直接可以双击浏览了,动态的话要没编译过的才能改,主要改改数据库的连接(如用户名和密码),模板没错误的话一般可以运用了。

CSS

/*基本信息*/

body

{font:12px

Tahomabackground:#CCCCCC}/*适用于页面整体:字体及字体大小,页面页边距全部设置为0,文字对齐方式为居中,背景颜色*/

*

{

margin:0

padding:0

border:0}/*全局设定,外边距,内边距和表格边框全部为0*/

html,body

{

height:100%}

/*全局设定高度为100%*/

/*--------------------------------------*/

/*页面主体*/

#pagebody

{

width:780px

/*设定宽度*/

margin:0px

auto

/*居中*/

}

#mainleft

{

width:192px

/*设定宽度*/

float:left

/*浮动居左*/

clear:left

/*不允许左侧存在浮动*/

overflow:hidden

/*超出宽度部分隐藏*/

border:1px

solid

#006699

margin:5px

auto

height:auto

}

#mainright

{

width:580px

text-align:left

float:right

/*浮动居右*/

clear:right

/*不允许右侧存在浮动*/

overflow:hidden

border:0px

solid

#E00/*初始使用表格,留存使用*/

margin:5px

auto

}

#mainright2

{

width:578px

float:right

/*浮动居右*/

clear:right

/*不允许右侧存在浮动*/

overflow:hidden

border:0px

solid

#006699

margin:2px

auto

height:auto

}

#mainright3

{

width:285px

/*设定宽度*/

float:left

/*浮动居左*/

clear:left

/*不允许左侧存在浮动*/

overflow:hidden

/*超出宽度部分隐藏*/

border:1px

solid

#006699

margin:2px

auto

height:auto

}

#mainright4

{

width:285px

/*设定宽度*/

float:right

/*浮动居左*/

clear:right

/*不允许左侧存在浮动*/

overflow:hidden

/*超出宽度部分隐藏*/

border:1px

solid

#006699

margin:2px

auto

height:auto

}

/*字体设置*/

#biaoti

{

font-size:10px

font-weight:bold

padding-left:10px

color:#FFf

background-color:#006699

height:20px

}

页面

<!DOCTYPE

html

PUBLIC

"-//W3C//DTD

XHTML

1.0

Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html

xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta

http-equiv="Content-Type"

content="text/html

charset=gb2312"

/>

<title>无标题文档</title>

<link

href="css.css"

rel="stylesheet"

type="text/css"

/>

</head>

<body>

<div

id="pagebody"><!--页面主体-->

<div

id="mainleft">

左侧显示

</div><!--左侧关闭-->

<div

id="mainright2">

<div

id="mainright3">

右侧一显示

</div>

<div

id="mainright4">

右侧二显示

</div>

</div>

</div>

</body>

</html>

CSS和DIV分开,也可以放在同一个文件中,下面就是一个简单的CSS+DIV网页

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html charset=gb2312" />

<title>一个简单的CSS网页</title>

<style type="text/css">

<!--

.jiandan {

    font-size: 16px

    font-weight: bold

    color:#f00

}

.aa{width:500pxheight:200px border:1px solid #00f}

-->

</style>

</head>

<body>

<div class="aa"><span class="jiandan">一个简单网页</span></div>

</body>

</html>