搜索
您的当前位置:首页正文

Div+CSS布局入门教程(三)_html/css_WEB-ITnose

2023-11-27 来源:学路情感网

作者:番茄红了 三、页面顶部制作(1)   当我们写好了页面大致的DIV结构后,我们就可以开始细致地对每一个部分进行制作了。   在上一章中我们写入了一些样式,那些样式是为了预览结构而写入的,我们把css.css中的样式全部清除掉,重新写入以下样式代码:

程序代码

/*基本信息*/ body {font:12px Tahoma;margin:0px;text-align:center;background:#FFF;} a:link,a:visited {font-size:12px;text-decoration:none;} a:hover{} /*页面层容器*/ #container {width:800px;margin:10px auto}

   样式说明:    a:link,a:visited {font-size:12px;text-decoration:none;}   a:hover {}   这两项分别是控制页面中超链接的样式,具体我就不说明了,请大家参阅手册。    #container {width:800px;margin:10px auto}   指定整个页面的显示区域。    width:800px指定宽度为800像素,这里根据实际所需设定。    margin:10px auto,则是页面上、下边距为10个像素,并且居中显示。   上一章中我们讲过, 对层的margin属性的左右边距设置为auto可以让层居中显示。   接下来,我们开始制作TOP部分,TOP部分包括了 LOGO、 菜单和 Banner,首先我们要做的就是对设计好的图片进行切片,以下是在FW下完成的切片:   我将TOP部分切片为两部分,第一部分包括了LOGO和一条横线。由于LOGO图片并没有太多的颜色,这里我于是将这一部分保存为GIF格式,调色板选择为精确,选择Alpha透明度,色版为白色(此处颜色应与背景色相同),导出为 logo.gif,图像宽度为 800px。   到这里,有的朋友就说了, * 为什么要使用GIF格式?使用JPEG不是更好吗?   因为GIF格式的图片文件更小,这样能使页面载入的速度更快,当然使用此格式之前必须确定图片并没有使用太多的颜色,当我们使用了GIF格式时,从肉眼上并不能看出图片有什么太大的变化,因此这是可行的。    * 接下来的Banner部分还能使用GIF格式吗?   答案是不能,因为Banner部分是一个细致的图片,如果使用GIF格式颜色会有太大的损失,所以必须使用JPEG格式,将文件导出为 banner.jpg。    * 合理的切片是非常之重要的,因为切片的方法正确与否决定了CSS书写的简易程度以及页面载入速度。   切好片后,我们还需要对TOP部分进行分析并将DIV结构写入Header中代码如下:

程序代码

           

  • 首页
  •          
  • 博客
  •          
  • 设计
  •          
  • 相册
  •          
  • 论坛
  •          
  • 关于
  •             

      为什么要这么写呢,因为对菜单使用列表
  • 形式,可以在以后方便对菜单定制样式。   而为什么要添加以下代码呢?   
  •   插入这一段代码是可以方便地对菜单选项之间插入一些分隔样式,例如预览图中的 竖线分隔。   然后我们在css.css中再写入以下样式:

    程序代码

    /*页面头部*/ #header {background:url(logo.gif) no-repeat}

       样式说明:    #header {background:url(logo.gif) no-repeat}   给页面头部分加入一个背景图片LOGO,并且不作填充。    这里,我们没有指定header层的高度,为什么不指定呢?   因为header层中还有菜单和banner项,所以层的高度暂时是未知的,而层的属性又可以让层根据内容自动设定调整,因此我们并不需要指定高度。    * 接下来,我们开始制作菜单,留到下一章,教程中相关文件请到下一章下载! 相关文章: Div+CSS布局入门教程(一) # -- 页面布局与规划 Div+CSS布局入门教程(二) # -- 写入整体层结构与CSS Div+CSS布局入门教程(三) # -- 页面顶部制作(1) Div+CSS布局入门教程(四) # -- 页面顶部制作(2)----使用列表
  • 制作菜单 Div+CSS布局入门教程(五) # -- 用好border和clear 优化你的CSS代码 #

    小编还为您整理了以下内容,可能对您也有帮助:

    如何用DIV+CSS进行网页样式布局

    在html网页编辑中,对于新手来讲,接触最多的就是div+css;那么如何使用div+css就行网页简单布局呢

    一个网页设计时,我们可以将一个页面设置为头部,中间,和底部三部分; 头部有分为店招(logo)和导航等 中间既内容部分,内容也可一个整体,也可左右分离, 底部来页面结尾,一般写版权信息,友情链接等

    头部编辑

    店招: !doctype html html head meta charset="utf-8" title淘宝助手网/title style #top{ width:1200px; height: auto; margin:0 auto; color:#FFF;} #logo{ width:100%; height:100px; background: #003; } /style /head body div id="top" div id="logo"店招/div div id="nav"导航/div /div !--------头部------------ div id="centre" div id="centreLeft"内容左/div div id="centreRight"内容右/div /div !--------中间------------- div id="bottom"底部/div !-----------底部---------------- /body /html

    导航: !doctype html html head meta charset="utf-8" title淘宝助手网/title style a,ul,li,div,span,td{ padding:0; margin:0;} #top{ width:1200px; height: auto; margin:0 auto; color:#FFF;} #logo{ width:100%; height:100px; background: #003; } #nav{ width:100%; height:30px; background:#300} a{ text-decoration: none; display:block;den} ul li{list-style: none;} #navulli{ float:left; margin-left: 50px; line-height:30px; } #navullia{ color:#FFF; font-weight:900px} /style /head body div id="top" div id="logo"店招/div div id="nav" ul lia href="" title="" target="_blank"淘宝/a/li lia href="" title="" target="_blank"图片/a/li lia href="" title="" target="_blank"视频/a/li lia href="" title="" target="_blank"资料下载/a/li lia href="" title="" target="_blank"视频下载/a/li /ul /div /div !--------头部------------ div id="centre" div id="centreLeft"内容左/div div id="centreRight"内容右/div /div !--------中间------------- div id="bottom"底部/div !-----------底部---------------- /body /html

    内容

    !doctype html html head meta charset="utf-8" title淘宝助手网/title style a,ul,li,div,span,td{ padding:0; margin:0;} #top{ width:1200px; height: auto; margin:0 auto; color:#FFF;} #logo{ width:100%; height:100px; background: #003; } #nav{ width:100%; height:30px; background:#300} a{ text-decoration: none; display:block;} ul li{list-style: none;} #navulli{ float:left; margin-left: 50px; line-height:30px; } #navullia{ color:#FFF; font-weight:900px} /*******===================头====================************/ #centre{ margin:0 auto; width:1200px; height:auto; } #centreLeft{ float:left; width:70%; height:500px;border:1px #333333 solid;} #centreRight{ float: right; width:27%; height:400px;border:1px #333333 solid;} /style /head body div id="top" div id="logo"店招/div div id="nav" ul lia href="" title="" target="_blank"淘宝/a/li lia href="" title="" target="_blank"图片/a/li lia href="" title="" target="_blank"视频/a/li lia href="" title="" target="_blank"资料下载/a/li lia href="" title="" target="_blank"视频下载/a/li /ul /div /div !--------头部------------ div id="centre" div id="centreLeft"内容左/div div id="centreRight"内容右/div /div !--------中间------------- div id="bottom"底部/div !-----------底部---------------- /body /html

    底部

    !doctype html html head meta charset="utf-8" title淘宝助手网/title style a,ul,li,div,span,td{ padding:0; margin:0;} #top{ width:1200px; height: auto; margin:0 auto; color:#FFF;} #logo{ width:100%; height:100px; background: #003; } #nav{ width:100%; height:30px; background:#300} a{ text-decoration: none; display:block;} ul li{list-style: none;} #navulli{ float:left; margin-left: 50px; line-height:30px; } #navullia{ color:#FFF; font-weight:900px} /*******===================头====================************/ #centre{ margin:0 auto; width:1200px; height:auto; overflow: hidden } #centreLeft{ float:left; width:70%; height:500px;border:1px #333333 solid;} #centreRight{ float: right; width:27%; height:400px;border:1px #333333 solid;} /***********==============内容===================*******/ #bottom{ margin:0 auto; width:1200px; height:200px; border:1px #333333 solid; margin-top:20px; } /***********==============底部===================*******/ /style /head body div id="top" div id="logo"店招/div div id="nav" ul lia href="" title="" target="_blank"淘宝/a/li lia href="" title="" target="_blank"图片/a/li lia href="" title="" target="_blank"视频/a/li lia href="" title="" target="_blank"资料下载/a/li lia href="" title="" target="_blank"视频下载/a/li /ul /div /div !--------头部------------ div id="centre" div id="centreLeft"内容左/div div id="centreRight"内容右/div /div !--------中间------------- div id="bottom"底部/div !-----------底部---------------- /body /html

    DIV+CSS网页布局时需要知道的几个技巧_html/css_WEB-ITnose

    本文向大家简单描述一下DIV CSS网页布局需要掌握的技巧,良好的习惯可能会使你的设计周期加倍缩短,下面让我们一起来学习吧。你对对DIV CSS网页布局需要掌握的技巧是否熟悉,这里和大家分享一下,良好的习惯可能会使你的设计周期加倍缩短。 以下是进行CSS设计时的几个小技巧 1.DIV CSS网页布局若有疑问立即检测 在出错时若能对原始代码做简单检测可以省去很多头痛问题。W3C对于XHTML与CSS都有检测工具可用,请见http://validator.w3.org。请注意,在文件开头的错误,可能因为不当的结构等因素造成更多错误;我们建议先修正一些最明显的错误之后重新检测,这样也许会让错误数量爆减。 2.DIV CSS网页布局时使用浮动功能时记得适当清除指令 浮动是个危险的功能,未必会产生您所期望的结果。如果您遇到浮动元素延伸到外围容器的边框或者其他不正常情况,请先确定您的做法是正确的。 3.边界重合时利用padding或border来避免 有事可能会为了一点不应该出现的空间而焦头烂额,或者您需要一点点空间时,怎样都挤不出来。如果您有用到margin,那么很容易产生边界的重合; 4.尝试避免同时对元素指定padding/border以及高度或宽度 Windows版IE经常导致width与height的计算问题。有些方法可以解决此问题,但如果母元素需要指定高度与宽度时,最好能够在母元素之内的子元素套用margin,或者当子元素需要指定高度与宽度时,在母元素套用padding以达效果。 5.DIV CSS网页布局时不要依赖min-width/min-height Windows版IE并不支援两种语法。但是在某种程度下,windows版IE可以达到相当于min-width/min-height的效果,所以只要对IE做点过滤功能,即可达到您想要的结果。 6.若有疑问,先减少百分比 有时候某些错误会使50%+50%成为100.1%,使网页出现问题。这时请尝试将这些值改为49%,甚至49.9%。 7.DIV CSS网页布局时记住写法(TRBL) Border,margin与padding的简写语法有特定顺序,从上方开始顺时针方向转动:top,right,bottom,left.所以margin:01px3px5px;的结果是上方无边界,右边1像素,以此类推。这样就不会弄错次序了。 8.只要不是零的值,都要指定单位 CSS需要您对每个font,Margin等各种值指定单位。唯一的例外就是Line-height

    页面元素居中的几种方法_html/css_WEB-ITnose

    1前言 做页面布局时,经常会需要将一些页面元素居中显示。当然,你可以设定元素的top、left来使它居中,但是,当父容器的大小发生变化,你不得不修改子元素的top、left来使它保持居中;当用户的显示器分辨率与你的测试机不同,可能会导致界面乱成一片,所以不管从代码的易维护性的角度还是从对不同分辨率显示器的适应性方面来说,这种设置固定值的方法显然是比较拙劣的。因此,做页面布局,应尽量减少使用固定值的布局方式。下面介绍几种页元素居中的方法。

    1Div居中 1.1左右居中 在父窗口中设置text-align:center,要注意的是,此方法只对内联元素起作用,所以要在居中的div中设置display:inline-block。以下代码中红线部分表示了如何让3个div在itemContainer中居中显示。

    如果是单个元素居中,也可以用margin:0auto,但此方法不能使多个元素在父窗口中居中。

    1.2上下居中 text-align属性只能设置左右居中,上下居中可以采用如下方法:top:50%;margin-top:-40px。top:50%设置div顶部位于父容器高度50%的地方,但是div本身有高度,margin-top:-40px表示上移div自身高度的一半。要注意的是父容器要设置overflow:auto,否则以上设置会影响父容器的大小。

    如果需要上下左右同时居中,则与2.1所示方法结合使用。

    以下代码中红线部分表示了如何使itemContainer在整个页面中居中显示。

    2文本居中 方法一:把文本放在div标签中,然后按照div居中的方法设置居中

    方法二:左右居中text-align:center,上下居中可以设置在文本的父容器中设置line-height等于父容器高度,如以下代码所示。

    3背景图片居中 设置background: 50% 50%,可调整这两个参数使用仅上下居中(background: 0% 50%)和仅左右居中(background: 50% 0%)。

    4测试用例 .item{background:url("pic.png")no-repeat 50% 50%;position:relative;display:inline-block;width:80px;height:80px;outline:solid2px #000000;;line-height:80px}

    style="position:relative;width:400px;height:80px;outline:solid 2px#ff0000;text-align:center;top:50%;margin:0 auto;margin-top:-40px">

    测试

    测试

    测试

    div+css布局的基本流程

    解决这个问题的方法如下:

    1、新建一个html文件,命名为test.html,用于讲解div+css布局的基本流程。

    2、在test.html文件内,对body进行样式初始化,设置外边距margin为0,内边距padding为0,同时使用text-align设置文字居中。

    3、在test.html文件内,为了讲解方便,设置所有的div高度为200px,内容的颜色为红色。

    4、在test.html文件内,使用div创建网页的头部,使用margin:0 auto设置div居中,同时设置其宽度为800px,背景颜色为灰色。

    5、在test.html文件内,使用div创建网页的中部,使用margin:0 auto设置div居中,同时设置其宽度为800px。

    6、在test.html文件内,在网页的中部,创建两个div,用于将中部为两部分,每一个部分宽度为50%,左部分使用float:left设置左浮动,右部分使用float:right设置右浮动。

    7、在test.html文件内,使用div创建网页的底部,使用clear:both清除上面div的浮动,避免影响底部的布局。同时,使用margin:0 auto设置div居中,同时设置其宽度为800px,背景颜色为#000fff。

    8、在浏览器打开test.html文件,查看实现的效果,这样问题就解决了。

    学路情感网还为您提供以下相关内容希望对您有帮助:

    HTML页面引入CSS的几种方式及区别_html/css_WEB-ITnose

    1. 使用HTML标签的style属性如:这种方式的优点:分散灵活方便;缺点:缺乏整体性和规划性,不利于维护,维护成本高;这种方式的CSS渲染的优先级要高于其它三种。 2. 将样式代码写在标签中通常将style标签放到HTML文件标签里如...

    页面元素居中的几种方法_html/css_WEB-ITnose

    1Div居中 1.1左右居中 在父窗口中设置text-align:center,要注意的是,此方法只对内联元素起作用,所以要在居中的div中设置display:inline-block。以下代码中红线部分表示了如何让3个div在itemContainer中居中显示。 如果是单...

    如何用DIV+CSS进行网页样式布局

    } /style /head body div id="top" div id="logo"店招/div div id="nav"导航/div /div !---头部--- div id="centre" div id="centreLeft"内容左/div...

    怎么用css+div布局一个网页!具体的思路是怎么样的?先后顺序是怎么的...

    如果想像我的效果图一样铺满整个屏幕可以加入以下代码。<style type="text/css">body{height:100%;  margin:0px; padding:0px;}</style>每个div,都有父容器。body就是最根源的父容器。只有把body设置为100%就...

    div+css布局的基本流程

    1、新建一个html文件,命名为test.html,用于讲解div+css布局的基本流程。2、在test.html文件内,对body进行样式初始化,设置外边距margin为0,内边距padding为0,同时使用text-align设置文字居中。3、在test.html文件内,...

    div+css如何布局头部导航条!

    1、新建一个html页面。2、在html页面上新建三个div标签,分别为这三个div添加class为:header、main、footer。3、创建style标签用于设置css样式。在title标签下创建一个style标签,然后为header类设置div的高、背景颜色样式。4...

    css居中的几种方式_html/css_WEB-ITnose

    1.margin 这种方式只能实现固定宽度的块级元素水平居中,如果该元素没有设置宽度或者不是块级元素,则不会生效。/*以div元素为例*/div{ width: 100px; height: 100px; margin: auto; /*或者margin: 0 auto;*/} 2...

    web前端开发技术DIV+CSS页面布局 5行5列怎么弄?

    DIV+CSS页面布局是web标准中的一种新的布局方式。在这种布局中,div承载的是内容,而CSS承载的是样式。5行5列具体制作方法推荐通过千锋教育进行学习,千锋教育开发教学课程,满足工科建设人才培养计划,切合主流企业对IT互联网...

    div+css布局过程

    <title>DIV+CSS布局教程</title> <style type="text/css"> Container{ width:1000px;margin:0 auto;/*设置整个容器在浏览器中水平居中*/ background:#CF3;} Header{ height:80px;background:#093;} logo{ padding-...

    ...布局时需要知道的几个技巧_html/css_WEB-ITnose

    以下是进行CSS设计时的几个小技巧 1.DIV CSS网页布局若有疑问立即检测 在出错时若能对原始代码做简单检测可以省去很多头痛问题。W3C对于XHTML与CSS都有检测工具可用,请见http://validator.w3.org。请注意,在文件开头的错...

    本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。

  • 热门图文

    • 次韵钱申伯山堂之咏的朝代是什么

      《次韵钱申伯山堂之咏》李弥逊朝代:宋代。《次韵钱申伯山堂之咏》年代:宋代。作者:李弥逊。别称:西翁、筠溪居士、普现居士。字号:字似之号筠西翁、筠溪居士、普现居士等。出生地:吴县(今江苏苏州)。出生时间:1085年。去世时间:1153年。主要作品:《沁园春》《永遇乐》《永遇乐》《念奴娇》《念奴娇》等。我们为您从以下几个方面提供次韵钱申伯山堂之咏的详细介绍。一、《次韵钱申伯山堂之咏》的全文 点此查看《次韵钱申伯山堂之咏》的详细内容。净坊秋色老苍官,檐额飞云细可攀。客梦偶随疏雨断,僧游长带暮钟还。似闻遗锡藏银地,亲见高人住骨山。愁绝寒江归去路,乱峰青处望双鬟。二、《次韵钱申伯山堂之咏》李弥逊其他诗词《菩萨蛮》、《水调歌头》、《念奴娇》、《水调歌头》、《永遇乐》。相同朝代的诗歌;

    • 次韵钱申伯山堂之咏的朝代

      《次韵钱申伯山堂之咏》李弥逊朝代:宋代。《次韵钱申伯山堂之咏》年代:宋代。作者:李弥逊。别称:西翁、筠溪居士、普现居士。字号:字似之号筠西翁、筠溪居士、普现居士等。出生地:吴县(今江苏苏州)。出生时间:1085年。去世时间:1153年。主要作品:《沁园春》《永遇乐》《永遇乐》《念奴娇》《念奴娇》等。我们为您从以下几个方面提供次韵钱申伯山堂之咏的详细介绍。一、《次韵钱申伯山堂之咏》的全文 点此查看《次韵钱申伯山堂之咏》的详细内容。净坊秋色老苍官,檐额飞云细可攀。客梦偶随疏雨断,僧游长带暮钟还。似闻遗锡藏银地,亲见高人住骨山。愁绝寒江归去路,乱峰青处望双鬟。二、《次韵钱申伯山堂之咏》李弥逊其他诗词《菩萨蛮》、《水调歌头》、《念奴娇》、《水调歌头》、《永遇乐》。相同朝代的诗歌;

    • 次韵钱申伯山堂之咏朝代

      《次韵钱申伯山堂之咏》李弥逊朝代:宋代。《次韵钱申伯山堂之咏》年代:宋代。作者:李弥逊。别称:西翁、筠溪居士、普现居士。字号:字似之号筠西翁、筠溪居士、普现居士等。出生地:吴县(今江苏苏州)。出生时间:1085年。去世时间:1153年。主要作品:《沁园春》《永遇乐》《永遇乐》《念奴娇》《念奴娇》等。我们为您从以下几个方面提供次韵钱申伯山堂之咏的详细介绍。一、《次韵钱申伯山堂之咏》的全文 点此查看《次韵钱申伯山堂之咏》的详细内容。净坊秋色老苍官,檐额飞云细可攀。客梦偶随疏雨断,僧游长带暮钟还。似闻遗锡藏银地,亲见高人住骨山。愁绝寒江归去路,乱峰青处望双鬟。二、《次韵钱申伯山堂之咏》李弥逊其他诗词《菩萨蛮》、《水调歌头》、《念奴娇》、《水调歌头》、《永遇乐》。相同朝代的诗歌;

    • 次韵钱申伯山堂之咏的作者 次韵钱申伯山堂之咏的作者是什么]

      《次韵钱申伯山堂之咏》李弥逊作者:李弥逊。《次韵钱申伯山堂之咏》作者:李弥逊。年代:宋代。别称:西翁、筠溪居士、普现居士。字号:字似之号筠西翁、筠溪居士、普现居士等。出生地:吴县(今江苏苏州)。出生时间:1085年。去世时间:1153年。主要作品:《沁园春》《永遇乐》《永遇乐》《念奴娇》《念奴娇》等。我们为您从以下几个方面提供次韵钱申伯山堂之咏的详细介绍。一、《次韵钱申伯山堂之咏》的全文 点此查看《次韵钱申伯山堂之咏》的详细内容。净坊秋色老苍官,檐额飞云细可攀。客梦偶随疏雨断,僧游长带暮钟还。似闻遗锡藏银地,亲见高人住骨山。愁绝寒江归去路,乱峰青处望双鬟。二、《次韵钱申伯山堂之咏》李弥逊其他诗词《菩萨蛮》、《水调歌头》、《念奴娇》、《水调歌头》、《永遇乐》。相同朝代的诗歌;

    • 次韵钱申伯山堂之咏的作者是什么

      《次韵钱申伯山堂之咏》李弥逊作者:李弥逊。《次韵钱申伯山堂之咏》作者:李弥逊。年代:宋代。别称:西翁、筠溪居士、普现居士。字号:字似之号筠西翁、筠溪居士、普现居士等。出生地:吴县(今江苏苏州)。出生时间:1085年。去世时间:1153年。主要作品:《沁园春》《永遇乐》《永遇乐》《念奴娇》《念奴娇》等。我们为您从以下几个方面提供次韵钱申伯山堂之咏的详细介绍。一、《次韵钱申伯山堂之咏》的全文 点此查看《次韵钱申伯山堂之咏》的详细内容。净坊秋色老苍官,檐额飞云细可攀。客梦偶随疏雨断,僧游长带暮钟还。似闻遗锡藏银地,亲见高人住骨山。愁绝寒江归去路,乱峰青处望双鬟。二、《次韵钱申伯山堂之咏》李弥逊其他诗词《菩萨蛮》、《水调歌头》、《念奴娇》、《水调歌头》、《永遇乐》。相同朝代的诗歌;

    Top