如何使用div+css布局结构?在网页设计中,下好模板这后该怎样运用?

html-css015

如何使用div+css布局结构?在网页设计中,下好模板这后该怎样运用?,第1张

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

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

css使div背景图片填充的具体操作步骤如下:

1、我们首先打开前端开发工具,新建一个html代码页面。

2、在html代码页面上创建一个用于设置背景颜色的div标签,然后给这个标签添加上class = "bg-img"。

3、设置背景图片,创建style标签,然后在标签里面对类为bg-img设置背景图片、图片不重复、宽、高的样式。

4、保存html代码,使用浏览器打开,这个时候会发现浏览器上的背景图片显示在左上角。

5、回到html代码页面,在bg-img类里添加background-position: center的属性。

6、保存html代码后重新刷新浏览器,这个时候会发现浏览器上的背景图片已经自动居中了。

<style type="text/css">

#1{ width:100px

height:100px

float:left

border:1px solid #00

margin-right:20px

}

#2{ width:200px

height:200px

float:left

border:1px solid #00

}

</style>

</head>

<body>

<div id="1"></div>

<div id="2"></div>

</body>