html代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>联系小功能能</title>
<link href="css/contact.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src=""></script>
<!--[if IE 6]>
<script src="" type="text/javascript"></script>
<script type="text/javascript">
EvPNG.fix('div, ul, img, li, input, a, span');
</script>
<![endif]-->
</head>
<body>
<div class="top_daohang">
<ul>
<li>
<a href="#" title="提示一" class="topindex">首页</a>
</li>
<li>
<a href="#" title="提示二" class="toplx">联系我们</a>
</li>
<li>
<a href="#" title="提示三" target="_blank" class="toplc">建站流程</a>
</li>
<li>
<a href="#" title="提示四" class="toptc">建站套餐</a>
</li>
</ul>
</div>
</body>
</html>
CSS代码:
*{
margin:0;
padding:0;
}
body{
background:none repeat scroll 0 0 #FFFFFF;
color:#444444;
font-family:'宋体',arial,sans-serif;
font-size:12px;
}
.top_daohang{
border-bottom:1px solid #F1D2C3;
border-left:1px solid #F1D2C3;
border-radius:0 0 0 10px;
overflow:hidden;
position:absolute;
right:0;
text-align:right;
top:6px;
width:404px;
z-index:1000;
}
.top_daohang ul li{
float:right;
overflow:hidden;
}
.top_daohang li a{
background-color:#F6F6F6;
display:inline-block;
font-size:13px;
height:22px;
line-height:22px;
opacity:0.5;
padding-left:35px;
padding-right:20px;
}
.top_daohang li a:hover{
color:#000000;
opacity:1;
transition:color 0.25s linear 0.1s;
}
.topindex{
background:url("images/Home.gif") no-repeat scroll 14px center rgba(0,0,0,0);
font-weight:bold;
}
.toplx{
background:url("images/com.gif") no-repeat scroll 14px center rgba(0,0,0,0);
}
.toplc{
background:url("images/lc.gif") no-repeat scroll 14px center rgba(0,0,0,0);
}
.toptc{
background:url("images/tc.gif") no-repeat scroll 14px center rgba(0,0,0,0);
}
效果如下图所示:
分享到:
相关推荐
css+div实现换肤功能
DIV+CSS布局保障代码的简洁,利于搜索引擎蜘蛛抓取 网站源码全部开源免费,没有功能限制。 艺帆CMS是由艺帆互联开发,用于服务广大互联网工作者.简单易用,高扩展性是艺帆CMS的特征,艺帆的主旨是打造最适合大众的...
只要简单的修改几个CSS文件就可以重新设计一个有成百上千页面的站点。 4.强大的字体控制和排版能力。CSS控制字体的能力比糟糕的FONT标签好多了,有了CSS,我们不再需要用FONT标签或者透明的1 px GIF图片来控制标题...
自带最新的手机移动端,同一个后台,数据即时同步,简单适用! 原创设计、手工书写DIV+CSS,完美兼容IE7+、Firefox、Chrome、360浏览器等;主流浏览器; 页面简洁简单,容易管理,DEDE内核都可以使用;附带测试数据...
原来的网站是TABLE搭建的,现在选择网页,轻松按下按钮,一个全新的DIV+CSS网页重新构建完成了。 Table2CSS是一款可以将表格布局网页完美转换成DIV+CSS方式的软件。支持外部CSS,支持网页及目录 批量转换。 这个...
44. jquery漂亮网页布局综合定时器、切换间隔、滚动时间、滚动图片个数等示例 45. jQuery演示Ajax加载并显示图片的相片画廊实例 46. jQuery版Sexy Lightbox 2.3内容修饰框插件下载(支持HTML,flash,图片,视频等) ...
界面规范总体原则 1) 以用户为中心。设计由用户控制的界面,而不是界面控制用户...(比如一个列表显示,可能是一列,二列,n列,程序不做任何控制,只改css) 3) 解决主流浏览器兼容问题. 4) 降低界面和程序的耦合度。
本教程力求模拟真实开发场景,用简单的方法帮助读者掌握使用Web标准进行网页设计的方方面面,以及CSS布局中表现与内容分离的相关知识。通过对本教程的学习,希望读者能够以符合标准的设计思维,采用实战操作步骤...
采用CSS+div或者表格进行网页布局,采用是CSS+div的方式进行布局。网站分为主界面,登录界面,注册界面。主界面为用户展示了:网页头版的功能引导界面,以js轮播图为主要的欣赏界面,各个投票项目展示界面,投票项...
4.JS+CSS通用一个页面同时三个焦点图轮换效果完整实例 5.JS+CSS网页版模拟QQ登录框界面特效示例 6.JS+flash立柱广告代码仿百度MP3搜索右侧可伸缩的立柱广告效果 7.JS版本黑色超动感二级菜单导航模块代码 穿越...
简单的css+div 的jsp示例,完整的界面,实现的是学生查询功能
该教育网站采用ASP+ACCESS开发,页面采用div+css布局,兼容IE/搜狗/360等浏览器,蓝色风格界面设计清爽、干净,功能简单、适合二次开发,更适合新手站长学习div+css布局。原程序首页书法专区位置串位,现已修复。 ...
该教育网站采用ASP ACCESS开发,页面采用div css布局,兼容IE/搜狗/360等浏览器,蓝色风格界面设计清爽、干净,功能简单、适合二次开发,更适合新手站长学习div css布局。原程序首页书法专区位置串位,现已修复。 ...
主要为大家介绍了div+css实现仿淘宝的产品分类菜单效果代码,通过div+css实现仿淘宝布局效果的功能,非常简单实用,需要的朋友可以参考下
五、对网页进行了简单的seo优化,且采用div+css布局有助于探索引擎的收录! 二、免费版与商业版的区别: 商业版较之免费版多了相关的下载中心,留言板,广告管理,视频、QQ设置,友情链接添加管理、整站静态生成等...
1、页面布局使用表格或者DIV+CSS,页面布局合理,浏览导航方便、快捷。 2、各个栏目及页面可以使用统一风格。 3、整体效果美观,色彩、图片、文字、样式等符合主题,搭配协调。 要技术应用情况 常用HTML标签 布局...
当然,这只是一个简单的示例,你可以根据自己的需求进行修改和扩展。希望通过这篇博文,你可以掌握使用HTML和CSS创建仿ChatGPT聊天对话页面的基本技能。 感谢阅读!如果你有任何问题或建议,请随时提问。
《CSS网站布局实录:基于Web标准的网站设计指南(第2版)》内容提要: 本书是一本讲述基于Web标准的应用CSS进行网站布局设计与...感觉不是在看一本真金白银买来的书,而更象是偷看一个江湖上鲜见的手抄本……刺激! ——网友
3. jQuery+CSS实用图片收缩与放大效果插件 4. jquery+div实现同时滑动切换的图文展示特效插件下载 5. jquery+div带动画按钮图片手动与自动切换的特效代码 6. jquery一页多用的飞飞图片幻灯插件演示 7. jquery...
使用百度图片搜索功能,搜索美观大方的登录页面和注册页面,模仿其界面布局,使用所学的HTML、CSS和JavaScript知识,制作自己的表单页面,并使用虚拟帐号实现登录和重定向功能。 2).以表格或div布局方式,设计较人性...