1. 首页>精华知识 > 知识

dw怎么把div置顶

作者:丁原明
2020-05-16
知识

1. 如何让网页中的DIV布局置顶不留白

用三个DIV左中右拼成了背景图片,在css里也写body{ margin: 0; padding: 0px; },可是还是不能置顶,在DW的设计页面里看是置顶的,在浏览器里预览顶部还是有10px的空白,求指点#side { background: url(images/left.jpg);height: 1195px; width: 542px; float: left; }

#side1 { background: url(images/right.jpg); height: 1195px; width: 506px; float: right; }

#main { background: url(images/mid.jpg); height: 1195px; margin:0 ; }

2. 怎样使用DW让网页图片置顶

使用DW让网页图片置顶,可分三种情况:

1. css reset

在HTML标签在浏览器里有默认的样式,例如 p

标签有上下边距,strong标签有字体加粗样式,em标签有字体倾斜样式。不同浏览器的默认样式之间也会有差别,例如ul默认带有缩进的样式,在IE

下,它的缩进是通过margin实现的,而Firefox下,它的缩进是由padding实现的。在切换页面的时候,浏览器的默认样式往往会给我们带来麻

烦,影响开发效率。所以解决的方法就是一开始就将浏览器的默认样式全部去掉,更准确说就是通过重新定义标签样式。“覆盖”浏览器的CSS默认属性。最最简

单的说法就是把浏览器提供的默认样式覆盖掉

根据本题提问主要涉及到以下CSS Reset

html, body,

div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, aside,

pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,

small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset,

form, label, legend, caption, tbody, tfoot, thead, article, aside,

canvas, details, figcaption, figure, footer, header, hgroup, menu, nav,

section, summary, time, mark, audio, video { margin:0; padding:0;

border:0; outline:0; vertical-align:baseline; }

table { border-collapse:collapse; border-spacing:0; }

fieldset, img { border:0; }

td, td img { vertical-align:top }

2. 图片为页面中插入的img,如<img src="../images/1.jpg" />

如果已经设置了以上的css reset ,在没有专门设置其它任何间距的情况下,图片默认也是置顶的。

3. 图片为背景图片 如

div{width:100%;height:50px;background:url(../images/1.jpg) left top

no-repeat;} 其中的left top 就是定义图片位置的,让图片水平居左垂直居上显示,也就是说此时图片也是置顶的;left top

也可以换成数值 如 background:url(../images/1.jpg) 0 0 no-repeat;

3. 网页设计DIV置顶怎么做

用CSS 的时候习惯性格式化一下例如: body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { -x-system-font:none; font-family:"宋体",Corbel,Verdana,Helvetica,sans-serif; font-size:12px; font-size-adjust:none; font-stretch:normal; font-style:normal; font-variant:normal; font-weight:normal; line-height:normal; margin:0; padding:0; text-align:left;}因为 BODY 有自己默认的样式。

4. 怎样使用DW让网页图片置顶

使用DW让网页图片置顶,可分三种情况:1. css reset 在HTML标签在浏览器里有默认的样式,例如 p 标签有上下边距,strong标签有字体加粗样式,em标签有字体倾斜样式。

不同浏览器的默认样式之间也会有差别,例如ul默认带有缩进的样式,在IE下,它的缩进是通过margin实现的,而Firefox下,它的缩进是由padding实现的。在切换页面的时候,浏览器的默认样式往往会给我们带来麻烦,影响开发效率。

所以解决的方法就是一开始就将浏览器的默认样式全部去掉,更准确说就是通过重新定义标签样式。“覆盖”浏览器的CSS默认属性。

最最简单的说法就是把浏览器提供的默认样式覆盖掉 根据本题提问主要涉及到以下CSS Reset html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, aside, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, tbody, tfoot, thead, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; vertical-align:baseline; } table { border-collapse:collapse; border-spacing:0; } fieldset, img { border:0; } td, td img { vertical-align:top }2. 图片为页面中插入的img,如 如果已经设置了以上的css reset ,在没有专门设置其它任何间距的情况下,图片默认也是置顶的。3. 图片为背景图片 如 div{width:100%;height:50px;background:url(../images/1.jpg) left top no-repeat;} 其中的left top 就是定义图片位置的,让图片水平居左垂直居上显示,也就是说此时图片也是置顶的;left top 也可以换成数值 如 background:url(../images/1.jpg) 0 0 no-repeat;。

推荐阅读
  • 描写人多的四字词语

    人山人海、比肩继踵、万人空巷、座无虚席、门庭若市、高朋满座、沸沸扬扬、热闹非凡、门庭若市、熙熙攘攘、车水马龙、人来人往、 济济一堂、摩肩接踵、.熙熙攘攘、 攘来熙往 熙来攘往 、比肩叠踵 、宾客如云、 驾肩…

    知识 2024-05-21
  • 毫升和斤怎样换算

    毫升是体积单位,斤是质量单位,不能换算。根据物质密度不同,换算比例不同。对于水来说,一斤等于500毫升…

    知识 2024-05-21
  • 泡沫之夏第三部小说的结局是什么啊

    夏沫与欧辰一起,还有了个孩子,夏沫弟弟死了,最后是夏沫和欧辰在一起了,不过洛熙也得到了从未有过的平静的内心,所以可以说是一个大团圆结局。明晓溪写了番外在仙度瑞拉,说夏沫生了一个儿子,叫做橙橙。夏沫因为…

    知识 2024-05-21
  • 什么软件的卫星地图最清晰最高看到人

    就目前而言,手机用卫星图较为清晰、能看到人的还是谷歌。有两种产品,一是手机版谷歌地球(Google Earth),打开后就是卫星图。二是手机版谷歌地图(Google Maps),既有卫星图,又有矢量图,还能导航。  国内的手…

    知识 2024-05-21
  • 在手机上正规赚钱方法(手机能赚钱的5

    一、众包类:按照任务操作,单价较低,做得越多,收入越多众包类项目是手机赚钱比较常见的类型之一,经常可以看到一些网友操作这类项目,譬如:众人帮、阿里众包、百度众包等,是业内较为知名的任务众包平台,每天都…

    头像 bianji123
    知识 2024-05-21