利用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 ...
随机推荐
- PHP pdf转化为图片(PNG)
/** * 将pdf文件转化为多张png图片 * @param string $pdf pdf所在路径 (/www/pdf/abc.pdf pdf所在的绝对路径) * @param string $p ...
- c# winform窗体边框风格的设计
1.首先,窗体的FormBorderStyle设置成None,不要控制边框. 2.然后,TransparencyKey和BackColor颜色设置成相同的,这样,窗体就透明了. 3.最后,窗体的拖动 ...
- linux注意的一些地方
assert宏的原型定义在<assert.h>中,其作用是如果它的条件返回错误,则终止程序执行 #include <assert.h>void assert( int expr ...
- 【MySQL】为什么不要问我DB极限QPS/TPS
为什么不要问我DB极限QPS/TPS 背景 相信很多开发都会有这个疑问,DB到底可以支撑多大的业务量,如何去评估?对于这个很专业的问题,DBA也没有办法直接告诉你,更多的都是靠经验提供一个看似靠谱的结 ...
- shell 文件备份脚本
#!/bin/bash #输入参数:文件名 filename=$ #源文件目录 directory=/opt/docker/cloud-driver-training/apps #备份文件目录 bac ...
- mongoexport
导数据 数据同步 mongodb无自增id 数据断点 mongoexport — MongoDB Manual https://docs.mongodb.com/manual/reference/pr ...
- 介绍一个Redis的WEB 客户端
http://webd.is/ $ git clone git://github.com/nicolasff/webdis.git $ cd webdis$ make$ ...
- SNMP 原理及配置简述 net-snmp-utils net-snmp 第2版基于SNMP 群体名（community name） 第3版引入了安全性更高的访问控制方法 SNMP协议操作只有4种 Apache的php_snmp 模块
SNMP 原理及配置简述 net-snmp-utils net-snmp 第2版基于SNMP 群体名(community name) 第3版引入了安全性更高的访问控制方法 SNMP协议操作只有4种 ...
- nmon 命令
nmon 命令 用途 以交互方式显示本地系统统计信息并以记录方式记录系统统计信息. 语法 交互方式: nmon [ -h ] nmon [ -s < seconds >] [ -c < ...
- POI - Excel API
一.概述 1. Apache POI是Apache软件基金会的开放源码函式库,POI提供API给java程式对Microsoft Office格式档案读和写的功能. 2. 结构 ...