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

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

2023-11-27 来源:学路情感网
作者:番茄红了 三、页面顶部制作(2)----使用列表
  • 制作菜单   开始此节的学习前,请确认你已经参照之前的几节内容写入了DIV、CSS到index.htm和css.css文件中。   这一节我将告诉大家如何用列表
  • 来制作菜单。

    程序代码

  • 首页
  • 博客
  • 设计
  • 相册
  • 论坛
  • 关于
  •   以上是这部分的结构,有关于 、
  • 这两个HTML元素大家自己去参考相关的内容吧,它们最主要的作用就是在HTML中以列表的形式来显示一些信息。   还有一点需要大家一定要分清楚的,当在HTML中定义为 id="divID"时,在CSS对应的设置语法则是 #divID{} ,如果在HTML中定义为 class="divID"时,则在CSS中对应的设置语法是.divID。   如果 id="divID"这个层中包括了一个,则这个img在CSS中对应的设置语法应该是 #divID img {},同样,如果是包含在 class="divID"这个层中时,则设置语法应该是 .divID img {},这一点希望大家要分清楚了。   另外,HTML中的一切元素都是可以定义的,例如table、tr、td、th、form、img、input...等等,如果你要在CSS中设置它们,则直接写入元素的名称加上一对大括号 {}就可以了。所有的CSS代码都应该写在大括号 {}中。   按照上面的介绍,我们先在css.css中写入以下代码:

    程序代码

    #menu ul {list-style:none;margin:0px;} #menu ul li {float:left;}

      解释一下:    #menu ul {list-style:none;margin:0px;}   list-style:none,这一句是取消列表前点,因为我们不需要这些点。   margin:0px,这一句是删除UL的缩进,这样做可以使所有的列表内容都不缩进。    #menu ul li {float:left;}   这里的 float:left 的左右是让内容都在同一行显示,因此使用了浮动属性( float)。   到这一步,建议大家先保存预览一下效果,我们再添加下面的内容,效果如下:   这时,列表内容是排列在一行,我们在#menu ul li {}再加入代码 margin:0 10px:

    程序代码

    #menu ul {list-style:none;margin:0px;} #menu ul li {float:left;margin:0 10px}

      margin:0 10px的作用就是让列表内容之间产生一个20像素的距离(左:10px,右:10px),预览的效果如下:   现在,雏形已经出来了,我们再来固定菜单的位置,把代码改成如下:

    程序代码

    #menu {padding:20px 20px 0 0} /*利用padding:20px 20px 0 0来固定菜单位置*/ #menu ul {float:right;list-style:none;margin:0px;} /*添加了float:right使得菜单位于页面右侧*/ #menu ul li {float:left;margin:0 10px}

      这时,位置已经确定了,可是构思图中,菜单选项之间还有一条竖线,怎么办呢?   别忘了,我们早就已经留好了一个空的,要想加入竖线就使用它了。   按照上面说的方法,我们再添加以下代码:

    程序代码

    .menuDiv {width:1px;height:28px;background:#999}

    ,保存预览一下,竖线是否已经出来了?关于这段代码就不多讲了,应该是很容易理解的。   不过,菜单选项的文字却在顶部,我们再修改成以下代码:

    程序代码

    #menu ul li {float:left;margin:0 10px;display:block;line-height:28px}

      关于 display:block;line-height:28px大家可以去参阅一下手册,我就不多讲了。   效果基本上已经实现了,剩下的就是修改菜单的超链接样式,在css.css中添加以下代码:

    程序代码

    #menu ul li a:link,#menu ul li a:visited {font-weight:bold;color:#666} #menu ul li a:hover{}

      这个也不多说了,没什么好说的了,最后的效果如下:   这一节到这里就完毕了,顺便把素材提供给大家:   构思图: 点击下载   HTML和CSS源文件: 点击下载 相关文章: 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_WEB-ITnose

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

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

    4. 使用@import,引入CSS文件这种方法既可以用在标签里,也可以用在外部CSS文件中,如:@import url ('/css/list.css')特点:引入方便,但性能可能较差 使用link 标签和@import区别: 1. 范畴不同: link是HTML标签,...

    div+css布局的基本流程

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

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

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

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

    div+css布局现在是主流,能提高网页加载速度,提高后期代码维护效率。步骤阅读 方法/步骤 >01 div 所谓<div>标签我们可以理解为一个盒子。例如:<div class="top"   style='border:1px solid #000;background...

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

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

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

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

    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-...

    DIV+CSS布局问题,让两个DIV标签并排

    1、使用css float并排显示:对div设置一个float浮动属性即可解决不并排显示,只要并排div盒子总宽度小于或等于最外层盒子宽度即可实现多个div对象并排显示。加float浮动实现多个div并排显示。这里对div通设一个浮动,当然实际使用...

    CSS样式表代码布局基础教程

    CSS样式表代码布局基础教程—课程6:div布局(一) 六、div 布局 默认div 占据一行,第二个 div 到下一行去,怎样用 div 进行分栏布局,我们来看一个练习; 1、文本编辑器 1)打开记事本或 gedit、leafpad 文本编辑器,gedit 在查看菜单...

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

  • 热门图文

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

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

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

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

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

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

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

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

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

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

    Top