<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手机导航菜单的制作解析的更多相关文章

  1. 纯css实现京东导航菜单

    纯CSS代码实现导航菜单,推荐在chrome预览! 预览请点击这里:mygithub <!doctype html> <html lang="en"> &l ...

  2. 利用jquery实现百度新闻导航菜单滑动动画

    前言 前两天,群里有人问百度新闻导航是如何实现的,当时由于忙于工作,没有来得及细看,恰好今天有空闲时间,索性就实现一下这个效果吧: 思路与步骤 1.利用UL创建简单横向导航: <!DOCTYPE ...

  3. 【Web】利用jquery实现百度新闻导航菜单滑动动画

    前言 前两天,群里有人问百度新闻导航是如何实现的,当时由于忙于工作,没有来得及细看,恰好今天有空闲时间,索性就实现一下这个效果吧: 思路与步骤 1.利用UL创建简单横向导航: <!DOCTYPE ...

  4. HTML+CSS代码橙色导航菜单

    效果预览:http://hovertree.com/code/texiao/ks63r6aq.htm <!DOCTYPE html> <html xmlns="http:/ ...

  5. 用css实现三级导航菜单

    主要使用css的hover伪类来实现该功能. 主要思路:先搭出三级菜单的框架,然后使用css的:hover来实现! 对li添加类selected,对该类添加position:relative属性,然后 ...

  6. 分类导航菜单的制作（附源码）--HTML

    不多说,直接贴代码哈!有疑问,可追加评论哈! demo.html: <!DOCTYPE html><html> <head> <title>分类导航菜单 ...

  7. 纯css实现二级导航菜单效果,通过简单的鼠标事件操作页面元素样式变换实现二级导航菜单的功能,非常简单实用,

    HTML代码如下 <!-- 头部导航栏开始--><div id="nav"><dl class="sy"><dt> ...

  8. 纯CSS下拉导航菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="h ...

  9. 简单的CSS 下拉导航菜单实现代码

    <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <met ...

随机推荐

  1. 【BZOJ3932】[CQOI2015]任务查询系统 主席树

    [BZOJ3932][CQOI2015]任务查询系统 Description 最近实验室正在为其管理的超级计算机编制一套任务管理系统,而你被安排完成其中的查询部分.超级计算机中的 任务用三元组(Si, ...

  2. 310实验室(七)OptimizationTemplateLibrary

    利用泛型编程思想,C++模板. 首先定义变量或者重新typedef variables: 模板中的变量:_TRandom.double  _TReal._TProblem::TDecision _TD ...

  3. Java项目工程化之项目构建工具Maven

    欢迎查看Java开发之上帝之眼系列教程,如果您正在为Java后端庞大的体系所困扰,如果您正在为各种繁出不穷的技术和各种框架所迷茫,那么本系列文章将带您窥探Java庞大的体系.本系列教程希望您能站在上帝 ...

  4. session.cookie.lifetime和session.gc.maxlifetime的关系

    session.cookie.lifetime session.cookie.lifetime 默认是0,即浏览器关闭,session失效:修改这个值的作用是修改sessionid以cookie的形式 ...

  5. Ubuntu 16.04 安装和配置 Redis

    因为发现之前手动安装的 redis 与现有的教程不一样,所以总结统一一下安装的标准步骤. 安装依赖项 为了获取最新版本的 Redis,我们将从源代码进行编译和安装.下载源代码之前,需要先安装一些编译所 ...

  6. Nginx + Tomcat 负载均衡配置详解

    Nginx常用操作指南一.Nginx 与 Tomcat 安装.配置及优化1. 检查和安装依赖项 yum -y install gcc pcre pcre-devel zlib zlib-devel o ...

  7. 使用DBMS_SUPPORT包

    DBMS_SUPPORT包从Oracle7.2引入,主要功能用以提供更完整的用户session跟踪信息,这个包可以通过运行 dbmssupp.sql 和 prvtsupp.plb 两个脚本来创建.该脚 ...

  8. Tunnelblick 覆盖安装失败

    公司搬家, jira, sourceTree都链接不上了,发现是VPN断了的原因,需要重新链接VPN Tunnelblick坏掉了,覆盖安装总是提示安装失败,安装超时 nil,搜索一大堆文章, 看了这 ...

  9. [py]class的特殊方法

    类方法 解释 hasattr hasattr(class) getattr - setattr - delattr - - - __getattr__ __setattr__ __delattr__ ...

  10. MOPSO 多目标粒子群优化算法

    近年来,基于启发式的多目标优化技术得到了很大的发展,研究表明该技术比经典方法更实用和高效.有代表性的多目标优化算法主要有NSGA.NSGA-II.SPEA.SPEA2.PAES和PESA等.粒子群优化 ...