仓酷云

标题: 来一发CSS实例教程:制造网页列表菜单 [打印本页]

作者: 乐观 时间: 2015-1-15 23:32
标题: 来一发CSS实例教程:制造网页列表菜单
有了CSS，我们不再需要用FONT标签或者透明的1pxGIF图片来控制标题，改变字体颜色，字体样式等等
网页制造poluoluo文章简介：css技能:列表菜单的计划.
css技能:列表菜单的计划
这是一个很复杂的教程,次要教你怎样用list的边框款式和背景图象来创立一个菜单出来.技能在于利用list的绝对定位,来转移边框的地位.这个技能十分天真,你能够轻松的改动边框和背景的结构.它乃至可让扫瞄器的字体渐渐变小(也能够增年夜).

源码下载:200911191240125525.rar
1.仔细的检察上面的html代码,并共同上面的示图,可让你加倍分明这些代码的感化.
---------------
<ul>
<li>CSSDesign25095</li>
</ul>
------------------

2.给<li>postion:relative并增加一个底边框款式.
给设position:absolute并利用负值让它们位于边框之下.
注:利用绝对值来把持padding的空间.
------------------------
.menu{
width:500px;
list-style:none;
margin:002em;
padding:0;
font:150%/100%Arial,Helvetica,sans-serif;
}
.menuli{
clear:both;
margin:0;
padding:001.8em0;
position:relative;
border-bottom:dotted2px#999;
}
.menustrong{
background:#fff;
padding:010px00;
font-weight:normal;
position:absolute;
bottom:-.3em;
left:0;
}
.menuem{
background:#fff;
padding:0005px;
font:110%/100%Georgia,"TimesNewRoman",Times,serif;
position:absolute;
bottom:-.2em;
right:0;
}
.menusup{
font-size:60%;
color:#666;
margin-left:3px;
}
-------------------------
3.如今来设置<li>的CSS款式
----------------------
li{
border-bottom:dashed1px#000;
padding:002.3em0;
----------------------
4.也能够利用背景图片来做界限(见前面的演示)
------------------
li{
background:url(images/circle.gif)repeat-xleftbottom;
}
--------------------------
5.假如你仍在利用IE6以下版本大概buggierIE6,你大概会注重到结构显现不一般,要办理这个成绩,只需增加clearfix给<li>元素.
-------------------
/*clearfix*/
.menuli:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.menuli{display:inline-block;}
/*HidesfromIE-mac*/
*html.menuli{height:1%;}
.menuli{display:block;}
/*EndhidefromIE-mac*/
------------------
转载请说明链接,木木在此感谢了.
本文地点：http://www.ximumu.cn/post/172.html

在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。

作者: 兰色精灵 时间: 2015-1-17 23:11
Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。

作者: 再见西城 时间: 2015-1-24 06:28
俗话说：兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中，我们难免会遇到各种各样的问题。

作者: 仓酷云 时间: 2015-1-31 23:48
每天上网看着那样多的网页，于是我才下定决心选择了网页制作这一门课程，目的就是希望以后能够做出一个完美的网页来。

作者: 蒙在股里 时间: 2015-2-7 02:42
直接用代码建立链接，如：可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接，可以再选中文字后在代码中插入html标签，页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。

作者: 变相怪杰 时间: 2015-2-20 07:41
经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅.

作者: 分手快乐 时间: 2015-3-6 17:15
技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。

作者: 小魔女 时间: 2015-3-13 05:25
可以使用 CSS 检查工具进行设计。

作者: 谁可相欹 时间: 2015-3-20 14:26
Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。

欢迎光临仓酷云 (http://ckuyun.com/)