仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 592|回复: 8
打印 上一主题 下一主题

[DIV+CSS] CSS教程之CSS+DIV计划实例:超酷的竖排导航栏

[复制链接]
金色的骷髅 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-16 00:25:03 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
CSS的极大优势表现在简洁的代码,对于一个大型网站来说,可以节省大量带宽,而且众所周知,搜索引擎喜欢清洁的代码。
HTML:
以下是援用片断:
<divid="navcontainer">
<ulid="navlist">
<liid="active"><ahref="#"id="current">Itemone</a>
<ulid="subnavlist">
<liid="subactive"><ahref="#"id="subcurrent">Subitemone</a></li>
<li><ahref="#">Subitemtwo</a></li>
<li><ahref="#">Subitemthree</a></li>
<li><ahref="#">Subitemfour</a></li>
</ul>

</li>
<li><ahref="#">Itemtwo</a></li>
<li><ahref="#">Itemthree</a></li>
<li><ahref="#">Itemfour</a></li>
</ul>
</div>
CSS:
以下是援用片断:
#navcontainer{margin-left:30px;}

#navcontainerul
{
margin:0;
padding:0;
list-style-type:none;
font-family:verdana,arial,Helvetica,sans-serif;
}

#navcontainerli{margin:0;}

#navcontainera
{
display:block;
padding:5px10px;
width:140px;
color:#000;
background-color:#ADC1AD;
text-decoration:none;
border-top:1pxsolid#fff;
border-left:1pxsolid#fff;
border-bottom:1pxsolid#333;
border-right:1pxsolid#333;
font-weight:bold;
font-size:.8em;
background-image:url(images/vertical06.jpg);
background-repeat:no-repeat;
background-position:00;
}

#navcontainera:hover
{
color:#000;
background-color:#889E88;
text-decoration:none;
border-top:1pxsolid#333;
border-left:1pxsolid#333;
border-bottom:1pxsolid#fff;
border-right:1pxsolid#fff;
background-image:url(images/vertical06a.jpg);
background-repeat:no-repeat;
background-position:00;
}

#navcontainerululli{margin:0;}

#navcontainerulula
{
display:block;
padding:5px5px5px30px;
width:125px;
color:#000;
background-color:#C5D8C5;
text-decoration:none;
font-weight:normal;
}

#navcontainerulula:hover
{
color:#000;
background-color:#889E88;
text-decoration:none;
}

ABOUTTHECODE
SomelistswithintheListamaticsitehadtobemodifiedsothattheycouldworkonListamaticssimplelistmodel.Whenindoubt,usetheexternalresourcefirst,oratleastcomparebothmodelstoseewhichonesuitsyourneeds.
检察效果

</p>
更方便搜索引擎的搜索。用只包含结构化内容的HTML代替嵌套的标签,搜索引擎将更有效地搜索到你的内容,并可能给你一个较高的评价(ranking)。
因胸联盟 该用户已被删除
沙发
发表于 2015-1-18 06:34:40 | 只看该作者
帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。
分手快乐 该用户已被删除
板凳
发表于 2015-1-24 20:35:36 | 只看该作者
在刚开始接触网页的第一堂课上,听说网页制作会是一门很无聊并且很难听懂的过程,而事实却印证了这样一个事实。
飘灵儿 该用户已被删除
地板
发表于 2015-2-2 14:48:23 | 只看该作者
运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环
老尸 该用户已被删除
5#
发表于 2015-2-8 00:59:39 | 只看该作者
直接用代码建立链接,如:可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接,可以再选中文字后在代码中插入html标签,页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。
飘飘悠悠 该用户已被删除
6#
发表于 2015-2-24 02:22:37 | 只看该作者
还是在Dreamweaver所见即所得添加链接是,可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。
小妖女 该用户已被删除
7#
发表于 2015-3-7 10:35:46 | 只看该作者
所见则所得网页编辑器的优点就是直观性,使用方便,容易上手.
只想知道 该用户已被删除
8#
发表于 2015-3-15 01:21:47 | 只看该作者
难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心,坚持不懈的决心。在自己无法解决某些问题时,就需要虚心请教别人.
再见西城 该用户已被删除
9#
发表于 2015-3-21 19:15:15 | 只看该作者
所见则所得网页编辑器的优点就是直观性,使用方便,容易上手.
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-6-4 15:11

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表