利用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 ...
随机推荐
- SQL---->mySQl数据库1------数据库的增删改查备份恢复
1.在终端输入:mysql -uroot -p 然后输入密码,进入客户端 2.输入:\s 3.创建数据库 3.1创建字符集是utf-8的数据库 3.2创建带校验规则的数据库,校验规则可以在a ...
- Linux救援模式
Linux系统使用版本:CentOS 6.5 救援模式有什么作用: ◆可以更改root密码: ◆恢复硬盘.文件系统操作: ◆系统启动不来的时候,只能通过救援模式来启动: 救援模式启动的步骤如下: 1. ...
- Elasticsearch之settings和mappings（图文详解）
Elasticsearch之settings和mappings的意义 简单的说,就是 settings是修改分片和副本数的. mappings是修改字段和类型的. 记住,可以用url方式来操作它们,也 ...
- ubuntu打开txt乱码
因为不支持中文 输入命令: iconv -f gbk -t utf8 filename.txt > filename.txt.utf8
- numpy基本方法总结 --good
https://www.cnblogs.com/xinchrome/p/5043480.html 一.数组方法 创建数组:arange()创建一维数组:array()创建一维或多维数组,其参数是类似于 ...
- talib 中文文档（五）：文档导航
Documentation 安装和问题 快速使用 高级应用 方法分类 Overlap Studies 重叠的研究 Momentum Indicators 动量指标 Volume Indicators ...
- 转载：Why using Single Root I/O Virtualization (SR-IOV) can help improve I/O performance and Reduce Costs
Introduction While server virtualization is being widely deployed in an effort to reduce costs and o ...
- 【Python】通过python代码实现demo_test环境的登录，通过csv/txt/excel文件批量添加课程并开启课程操作--（刚开始 项目 页面 模块 元素这种鸟 被称作pageobject 等这些搞完 然后把你的定位器、数据 和脚本在分离 就是传说中那个叫数据驱动 的鸟）
一.1.通过csv文件批量导入数据 1 from selenium import webdriver from time import ctime,sleep import csv #循环读取每一行每 ...
- android 第三方框架
1.视频:jcvideoplayer 2.圆角:cardview 3.圆形头像:circleimageview 4.加载网络图片:universalimageloader 5.网络请求:xutils ...
- 005-spring cache-配置缓存存储
一.概述 缓存抽象提供了多种存储集成.要使用它们,需要简单地声明一个适当的CacheManager - 一个控制和管理Caches的实体,可用于检索这些实体以进行存储. 1.1.基于JDK Concu ...