十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
还是新人把:
站在用户的角度思考问题,与客户深入沟通,找到鄠邑网站设计与鄠邑网站推广的解决方案,凭借多年的经验,让设计与互联网技术结合,创造个性化、用户体验好的作品,建站类型包括:成都网站建设、成都网站设计、企业官网、英文网站、手机端网站、网站推广、域名注册、雅安服务器托管、企业邮箱。业务覆盖鄠邑地区。
第一:要页面对齐,主要还是要浮动、但清除浮动不是加在每一个样式里的的(直接写个css“ #clear{ clear:both;})
第二:你写的页面,不齐全,下面少了一个/ul
第三:你的img src="imgeas/baiyun120_zt_22_07.gif"; /这句是不是放在ul class=”leftlist_div"里面的,没放好吧!
这要的页面 ,直接在css的样式里加个float:left 就行了! 你自己试试吧! 呵呵,还要多学一下!
首页打开dreamweaver或其它编辑器,创建一个名为nav的导航菜单
div class="nav"
ul
lia href="#"栏目一/a/li
lia href="#"栏目二/a/li
lia href="#"栏目三/a/li
lia href="#"栏目四/a/li
lia href="#"栏目五/a/li
/ul
/div
现在为nav添加样式,首先去掉默认的margin和padding,再去掉ul li标签的list-style样式和a标签的默认下划线。接下来再添加适当的样式(根据实际需要添加)进行美化,如一下样式:
style type="text/css"
* { margin:0; padding:0;}
ul, li { list-style:none;}
a { text-decoration:none;}
.nav { border:2px solid #ccc; border-right:none; overflow:hidden; float:left; margin:100px 0 0 300px;}
.nav ul li { float:left;}
.nav
ul li a
{ width:120px; height:40px; text-align:center; line-height:40px; display:block; border-right:2px
solid #ccc; background:#eee; color:#666;}
.nav ul li a:hover{ color:#f00; }
/style
像这样,一个菜单横向菜单就建好了,下面给栏目一,栏目二,栏目三,添加二级下拉菜单
div class="nav"
ul
lia href="#"栏目一/a
ul
lia href="#"二级栏目/a/li
lia href="#"二级栏目/a/li
lia href="#"二级栏目/a/li
lia href="#"二级栏目/a/li
/ul
/li
lia href="#"栏目二/a
ul
lia href="#"二级栏目/a/li
lia href="#"二级栏目/a/li
lia href="#"二级栏目/a/li
lia href="#"二级栏目/a/li
/ul
/li
lia href="#"栏目三/a
ul
lia href="#"二级栏目/a/li
lia href="#"二级栏目/a/li
lia href="#"二级栏目/a/li
lia href="#"二级栏目/a/li
lia href="#"二级栏目/a/li
/ul
/li
lia href="#"栏目四/a/li
lia href="#"栏目五/a/li
/ul
/div
添加完二级栏目后,现在开始添加css样式,首先给li标签下的ul标签添加相对定位,再去除之下li标签的做浮动样式,再适当修改a标签,如一下样式:
.nav ul li ul { position:absolute;}
.nav ul li ul li { float:none;}
.nav ul li ul li a { border-right:none; border-top:1px dotted #ccc; background:#f5f5f5;}
接下来隐藏掉二级下来菜单,并给它添加鼠标滑动效果,使得当鼠标滑动到主栏目时,二级下来菜单显示,样式如下:
.nav ul li ul { position:absolute; display:none;}
.nav ul li ul li { float:none;}
.nav ul li ul li a { border-right:none; border-top:1px dotted #ccc; background:#f5f5f5;}
.nav ul li:hover ul{ display:block; }
至此,横向二级下拉菜单就制作完成了,这里附加上全部代码
请按照下面标准执行即可;
1.行内样式>指定样式>通用class样式通用未指定CLASS样式
2.例子:
1)div style="..."aaaaaa/a这就是指定用style的行内样式;
2)div id="side" aaaaaa/div这就是指定id使用side样式;
3)div class="ot"aaaaaa/div这就是指了通用的class为ot的样式;
4)如bodytabletrth这些一开始样式文件就定义好全程的样式,为通用为指定的样式;
最高就是指行内样式,接着就是指定ID的,然后就是CLASS,最后就是未指定通用样式;