DIV教程之一列流动宽度结构和背景图片相对定位

只看该作者 · 发表于 2015-1-16 00:05:20

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

你可以轻松地控制页面的布局。
一列流动宽度网页用于我的进修条记，很不错吧。这张网页，我只是实验了一下背景图片的相对定位设置。

1.HTML部分只需在<body></body>之间编写一个DIV标签，给DIV标签利用layout作为ID称号便可：<divid="layout">这里写进文章内容</div>；

2.接上去先为body编写CSS代码：（办法仍是和“我的第一张css+div结构网页”一样，用鼠标编代码，呵呵！）

body{
margin:0px;
padding:0px;
background-attachment:fixed;
background-image:url(images/tupian/a017.JPG);
background-repeat:no-repeat;
background-position:leftbottom;
}

再为layout编写CSS代码，断定宽高度外，我举行了相对定位，设定了高低摆布边框间隔，为减少右上角的背景图片，举行了正数设置。

#layout{
height:480px;
width:720px;
margin-top:20px;
margin-right:30px;
margin-bottom:20px;
margin-left:150px;
padding:40px;
background-image:url(images/tupian/a017-2.jpg);
background-position:right-100px;
background-repeat:no-repeat;
border:thickdouble#F79A94;
font-family:"宋体";
font-size:9pt;
color:#993300;
line-height:150%;
}

假如必要一列流动宽度居中设置，只需把下面四个margin值改成："margin:0pxauto;"便可。

缩短改版时间。只要简单的修改几个CSS文件就可以重新设计一个有成百上千页面的站点。

只看该作者 · 发表于 2015-1-18 05:13:44

俗话说：兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中，我们难免会遇到各种各样的问题。

只看该作者 · 发表于 2015-1-25 20:06:09

每天上网看着那样多的网页，于是我才下定决心选择了网页制作这一门课程，目的就是希望以后能够做出一个完美的网页来。

只看该作者 · 发表于 2015-2-3 22:15:23

学Dreamweaver技术的过程其实是一个增加信心的过程。

只看该作者 · 发表于 2015-2-9 07:11:21

直接用代码建立链接，如：可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接，可以再选中文字后在代码中插入html标签，页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。

只看该作者 · 发表于 2015-2-27 04:49:35

不管老师做怎样的解释，而我却对它感到很是吃力，诸如里面有许多不知道的功能。

只看该作者 · 发表于 2015-3-8 22:48:17

每天上网看着那样多的网页，于是我才下定决心选择了网页制作这一门课程，目的就是希望以后能够做出一个完美的网页来。

只看该作者 · 发表于 2015-3-16 19:51:23

每天上网看着那样多的网页，于是我才下定决心选择了网页制作这一门课程，目的就是希望以后能够做出一个完美的网页来。

		自动登录	找回密码
密码			立即注册

[DIV+CSS] DIV教程之一列流动宽度结构和背景图片相对定位

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子