1. <body>
  2. <div id="top" class="auto">
  3.        <div class="nav">
  4.              <div class="left same">
  5.                    <img src="data:images/mainnav_l.gif" />
  6.              </div>
  7.              <div class="mainnav">
  8.                    <img  class="logo" src="data:images/logo.gif" />
  9.                    <ul>
  10.                         <li><a href="#">首页</a></li>
  11.                         <li><a href="#">手机</a></li>
  12.                         <li><a href="#">手机</a></li>
  13.                         <li><a href="#">手机</a></li>
  14.                         <li><a href="#">手机</a></li>
  15.                    </ul>
  16.              </div>
  17.              <div class="right same">
  18.                     <img src="data:images/mainnav_r.gif" />
  19.              </div>
  20.        </div>
  21. </div>
  22. </body>
  1. body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,form,input,textarea,p {
  2.     margin:0px;
  3.     padding:0px;
  4.     font-size:13px;
  5. }
  6. ul {
  7.     list-style:none;
  8. }
  9. img,a img {
  10.     border:none;
  11. }
  12. a {
  13.     text-decoration:none;
  14. }
  15. a:hover {
  16.     text-decoration:underline;
  17. }
  18. .auto{
  19.     width:960px;
  20.     margin: auto;
  21. }
  22. body{
  23.    background:url(body_bg.jpg) repeat-x;
  24. }
  25. #top .nav{
  26.       height:46px;
  27.       background:url(mainnav_bg.gif) repeat-x;
  28.       margin:15px    ;
  29. }
  30. #top .nav .same{
  31.    width:10px;
  32.    height:46px;
  33. }
  34. #top .nav .left{
  35.     float:left;
  36. }
  37. #top .nav .right{
  38.     float:right;
  39. }
  40. #top .nav .mainnav{
  41.     width:940px;
  42.     float:left;
  43. }
  44. #top .nav .mainnav .logo{
  45.      width:163px;
  46.      height:46px;
  47.      float:left;
  48.      display:block;
  49. }#top .mainnav ul {
  50.      width:770px;
  51.      float:left;
  52.      height:46px;
  53. }
  54. #top .mainnav ul li{
  55.      float:left;
  56. }
  57. #top .mainnav ul li a{
  58.      color:#;
  59.      font-size:14px;
  60.      display:block;
  61.      width:135px;
  62.      height:46px;
  63.      line-height:46px;
  64.      text-align:center;
  65.      background:url(main_line.gif) no-repeat;
  66. }
  67. #top .mainnav ul li a:hover{
  68.      background:url(green_bg.jpg);
  69.      text-decoration:none;
  70.      color:#fff;
  71. }

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. 【BZOJ3943】[Usaco2015 Feb]SuperBull 最大生成树

    [BZOJ3943][Usaco2015 Feb]SuperBull Description Bessie and her friends are playing hoofball in the an ...

  2. App Transport Security has blocked a cleartext HTTP (http://) resource load since it is insecure.

    [摘要: App Transport Security has blocked a cleartext HTTP (http://) resource load since it is insecur ...

  3. struts2的占位符*在action中的配置方法

    转自:https://blog.csdn.net/u012546338/article/details/68946633 在配置<action> 时,可以在 name,class,meth ...

  4. 查询hadoop参数变量

    [hadoop@master hadoop]$ hive -S -e 'set -v'|grep querylog|grep -E -v 'CLASSPATH|class'hive.querylog. ...

  5. PHP获取目录和的方法通过魔术变量；通过超级全局变量；通过相关函数等等：

    <?php /** * PHP获取路径或目录实现 * @link http://www.phpddt.com */ //魔术变量,获取当前文件的绝对路径 echo "__FILE__: ...

  6. 数据字典Data Dict

    数据字典 所有的数据表都属于数据库对象,每当创建一张数据表的时候,会自动在指定的数据字典表执行一个增加语句(这个增加语言我们是不知道的),数据字典的数据操作只能通过命令完成,不能直接使用SQL完成. ...

  7. linux dd命令详解及使用案例场景

    一.dd命令 dd:用指定大小的块拷贝一个文件,并在拷贝的同时进行指定的转换. 注意:指定数字的地方若以下列字符结尾,则乘以相应的数字:b=512:c=1:k=1024:w=2 参数注释: 1. if ...

  8. throw and throws in Java

    throw and throws in Java - GeeksforGeeks https://www.geeksforgeeks.org/throw-throws-java/ throw and ...

  9. OpenPGP协议的一个JavaScript实现：OpenPGP.js

    OpenPGP.js 是OpenPGP协议的一个Javascript实现. 基于 JavaScript的OpenPGP实现方便用户可以直接在浏览器中加密和解密Web邮件,不需要专门的邮件客户端.

  10. Celery和Rabbitmq自学

    异步消息队列,也能用于定时和周期性任务.每次修改的task代码还要重启worker,这个有点麻烦 所有带task()装饰器的可调用对象(usertask)都是celery.app.task.Task类 ...