利用Html.css OPPO手机导航菜单的制作解析
<body>
<div id="top" class="auto">
<div class="nav">
<div class="left same">
<img src="data:images/mainnav_l.gif" />
</div>
<div class="mainnav">
<img class="logo" src="data:images/logo.gif" />
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">手机</a></li>
<li><a href="#">手机</a></li>
<li><a href="#">手机</a></li>
<li><a href="#">手机</a></li>
</ul>
</div>
<div class="right same">
<img src="data:images/mainnav_r.gif" />
</div>
</div>
</div>
</body>
body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,form,input,textarea,p {
margin:0px;
padding:0px;
font-size:13px;
}
ul {
list-style:none;
}
img,a img {
border:none;
}
a {
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
.auto{
width:960px;
margin: auto;
}
body{
background:url(body_bg.jpg) repeat-x;
}
#top .nav{
height:46px;
background:url(mainnav_bg.gif) repeat-x;
margin:15px ;
}
#top .nav .same{
width:10px;
height:46px;
}
#top .nav .left{
float:left;
}
#top .nav .right{
float:right;
}
#top .nav .mainnav{
width:940px;
float:left;
}
#top .nav .mainnav .logo{
width:163px;
height:46px;
float:left;
display:block;
}#top .mainnav ul {
width:770px;
float:left;
height:46px;
}
#top .mainnav ul li{
float:left;
}
#top .mainnav ul li a{
color:#;
font-size:14px;
display:block;
width:135px;
height:46px;
line-height:46px;
text-align:center;
background:url(main_line.gif) no-repeat;
}
#top .mainnav ul li a:hover{
background:url(green_bg.jpg);
text-decoration:none;
color:#fff;
}
CSS界面的解析
利用Html.css OPPO手机导航菜单的制作解析的更多相关文章
- 纯css实现京东导航菜单
纯CSS代码实现导航菜单,推荐在chrome预览! 预览请点击这里:mygithub <!doctype html> <html lang="en"> &l ...
- 利用jquery实现百度新闻导航菜单滑动动画
前言 前两天,群里有人问百度新闻导航是如何实现的,当时由于忙于工作,没有来得及细看,恰好今天有空闲时间,索性就实现一下这个效果吧: 思路与步骤 1.利用UL创建简单横向导航: <!DOCTYPE ...
- 【Web】利用jquery实现百度新闻导航菜单滑动动画
前言 前两天,群里有人问百度新闻导航是如何实现的,当时由于忙于工作,没有来得及细看,恰好今天有空闲时间,索性就实现一下这个效果吧: 思路与步骤 1.利用UL创建简单横向导航: <!DOCTYPE ...
- HTML+CSS代码橙色导航菜单
效果预览:http://hovertree.com/code/texiao/ks63r6aq.htm <!DOCTYPE html> <html xmlns="http:/ ...
- 用css实现三级导航菜单
主要使用css的hover伪类来实现该功能. 主要思路:先搭出三级菜单的框架,然后使用css的:hover来实现! 对li添加类selected,对该类添加position:relative属性,然后 ...
- 分类导航菜单的制作（附源码）--HTML
不多说,直接贴代码哈!有疑问,可追加评论哈! demo.html: <!DOCTYPE html><html> <head> <title>分类导航菜单 ...
- 纯css实现二级导航菜单效果,通过简单的鼠标事件操作页面元素样式变换实现二级导航菜单的功能,非常简单实用,
HTML代码如下 <!-- 头部导航栏开始--><div id="nav"><dl class="sy"><dt> ...
- 纯CSS下拉导航菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="h ...
- 简单的CSS 下拉导航菜单实现代码
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <met ...
随机推荐
- URL上的中文编码
参考:http://www.chinaz.com/web/2013/0226/293639.shtml 一 URL上拼接中文会进行编码 在URL上拼接中文时,比如www.abc.com?season= ...
- 【Android】Android内存溢出问题---用自行开辟的空间进行对内存管理
public static Bitmap readBitmap(String path) { BitmapFactory.Options options = new BitmapFactory.Opt ...
- 三维凸包求重心到面的最短距离（HDU4273）
http://acm.hdu.edu.cn/showproblem.php?pid=4273 Rescue Time Limit: 2000/1000 MS (Java/Others) Memo ...
- 02.MyBatis配置文件详解
MyBatis入参考文档:http://mybatis.org/mybatis-3/zh/ 1.properties 属性 1.在MyBatis配置文件中引用属性文件 MyBatis ...
- nginx软件的编译安装步骤
1.1 检查软件安装的系统环境 [root@web02 conf]# cat /etc/redhat-release CentOS release 6.8 (Final) [root@web02 co ...
- 沈阳网络赛D-Made In Heaven【k短路】【模板】
One day in the jail, F·F invites Jolyne Kujo (JOJO in brief) to play tennis with her. However, Pucci ...
- hihoCoder_1445_后缀自动机二·重复旋律5
#1445 : 后缀自动机二·重复旋律5 时间限制:10000ms 单点时限:2000ms 内存限制:512MB 描述 小Hi平时的一大兴趣爱好就是演奏钢琴.我们知道一个音乐旋律被表示为一段数构成的数 ...
- 针对Redis队列的理解，实例操作（转）
原文:本文出自 “峰云,就她了.” http://rfyiamcool.blog.51cto.com/1030776/1131271 为什么要使用消息队列 用我的话来说, 队列特点是先进先出,在任务 ...
- python 定义类 学习1
此时的d1就是类Dog的实例化对象 实例化,其实就是以Dog类为模版,在内存里开辟一块空间,存上数据,赋值成一个变量名 # 定义类模板 class dog(object): # 定义类的方法功能 # ...
- Elasticsearch入门教程
ElasticSearch是一个高度可扩展的开源搜索引擎并使用REST API,所以您值得拥有. 在本教程中,将介绍开始使用ElasticSearch的一些主要概念. 下载并运行ElasticSear ...