<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. EUI组件之DataGroup

    看官网教程,这个没法单独用. http://developer.egret.com/cn/github/egret-docs/extension/EUI/dataCollection/dataGrou ...

  2. python webdriver中对不同下拉框通过文本值的选择

    在自动化中python对下拉框的处理网上相对实例比较少,其它前辈写的教程中对下拉也仅仅是相对与教程来说的,比如下面: m=driver.find_element_by_id("Shippin ...

  3. 使用Martix来实现缩放图片的功能

    使用Martix(android.graphics.Matrix)类中的postScale()方法结合Bitmap来实现缩放图片的功能 Bitmap bmp = BitmapFactory.decod ...

  4. HTML标签img--改变图片尺寸

    转自:https://blog.csdn.net/u012377333/article/details/50508484 1.统一大小? 我的网页上面有许多的图片,有的大,有的小,我想如果图片大的实现 ...

  5. angularJs初体验，实现双向数据绑定！使用体会：比较爽

    使用初体验:ng 双向数据绑定: 最简单的双向数据绑定:(使用默认模块控制) <body ng-app> <input type="text" ng-model= ...

  6. Spring MVC 框架学习

    一.spirng的简介 Spring是一个开源框架,它由Rod Johnson创建.它是为了解决企业应用开发的复杂性而创建的.Spring使用基本的JavaBean来完成以前只可能由EJB完成的事情. ...

  7. ubuntu下完全卸载opencv3.1.0

    在ubuntu下删除opencv需要以下步骤: 1.进入opencv的源代码文件夹下的release(这是你在安装opencv时候自己命名的,cmake时候所在的目录) 2.执行以下命令 sudo m ...

  8. c# 公共方法

    MyMeans using System; using System.Collections.Generic; using System.Text; using System.Windows.Form ...

  9. Python开发【Django】：日志记录、API认证

    日志记录: 调用同一个对象,分别记录错误日志和运行日志 自定义日志类: class Logger(object): __instance = None def __init__(self): self ...

  10. ovn-sb 摘要

    1.Database Structure Physical network table中包含了和chassis nodes有关的所有信息,包括用于overlay所需的IP地址,支持的tunnel类型以 ...