html+css:小米顶部菜单+二级菜单
1、源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.header{
/*height:38px;*/
background-color: #333;
}
.header .menu{
float: left;
color: white;
/*height: 38px;*/
/*!*垂直居中*!*/
/*line-height: 38px;*/
}
.header .account{
float: right;
color: white;
/*height: 38px;*/
/*line-height: 38px;*/
}
/*将部件放到容器中，实现居中*/
.container{
width: 1000px;
margin-top: 0;
margin-left: auto;
margin-right: auto;
}
.header a{
color:#b0b0b0;
line-height: 40px;
display: inline-block;
/*内部有了高度，外部就不用设置了*/
font-size: 12px;
margin-right: 10px;
text-decoration: none;
}
.header a:hover{
color: white;
}
.body{
margin: 0;
}
.sub-header{
height: 100px;
/*background-color: #b0b0b0;*/
}
.sub-header .ht{
height: 100px;
}
.sub-header .logo{
width: 234px;
float:left;
/*border: 1px solid red;*/
}
.sub-header .menu-list{
float: left;
line-height: 100px;
/*border: 1px solid red;*/
}
.sub-header .menu-list a{
display: inline-block;
padding: 0 10px;
color: #333333;
font-size: 16px;
/*去掉标签的下划线*/
text-decoration: none;
}
/*放上鼠标，改变颜色*/
.sub-header .menu-list a:hover{
color:#ff6700;
}
.sub-header .search{
float: right;
}
.sub-header .logo a{
/*图片居中只能使用内外边距*/
margin-top: 22px;
display:inline-block;
}
.sub-header .logo a img{
height: 56px;width: 56px
}
</style>
</head>
<body >
<div class = "header">
<div class="container">
<div class = "menu">
<a href="https://www.mi.com/index.html">小米商城</a>
<a href="https://www.mi.com/index.html">MIUI</a>
<a href="https://www.mi.com/index.html">云服务</a>
<div style="width: 200px;text-align: center"></div>
</div>
<div class = "account">
<a href="https://www.mi.com/index.html">登录</a>
<a href="https://www.mi.com/index.html">注册</a>
</div>
<div style="clear: both"></div>
</div>
</div>
<div class="sub-header">
<div class="container">
<div class = "ht logo">
<!--a标签默认为行内标签，设置高度、边距无效。->变成块级标签 || 块级+行内-->
<a href="https://www.mi.com/index.html">
<img src="/static/xiaomi.png">
</a>
</div>
<div class="ht menu-list">
<a href="https://www.mi.com/index.html" >小米手机</a>
<a href="https://www.mi.com/index.html">电视</a>
<a href="https://www.mi.com/index.html">笔记本</a>
</div>
<div class = "ht search"></div>
<div class="clear:both"></div>
</div>
</div>
</body>
</html>
2、效果展示
3、小结
html+css:小米顶部菜单+二级菜单的更多相关文章
- 个人练习：使用HTML+CSS制作二级菜单
最近一直在学习HTML+CSS,刚看完如果制作下拉菜单部分,就想着做一个练练手. 先上成品图: 就是上面这个效果,横向菜单选项能点击,鼠标放在上面也能展开二级菜单,二级菜单也能点击,点击后就会在底下的 ...
- 纯css实现鼠标感应弹出二级菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- html和css实现一级菜单和二级菜单学习笔记
实现一级菜单: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> ...
- css案例学习之ul li dl dt dd实现二级菜单
效果 代码实现 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...
- CSS之实现二级菜单动态出现
一直觉得二级菜单的出现效果仅仅有js才干控制.今天研究了一下阿里巴巴站点的首页,才发现,原来二级菜单的动态显示也能够使用CSS来控制,原来对CSS是静态的东西一直是误解它了,CSS也能够实现动态的效果 ...
- HTML+CSS实现导航栏二级下拉菜单完整代码
工具是vs code 代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...
- CSS制作二级菜单时，二级菜单与一级菜单不对齐
效果如图: 部分代码如图: <li><a href="#" target="_blank">关于我们</a> <ul& ...
- 纯CSS实现带返回顶部右侧悬浮菜单
这是我做个人网页的时候加上的带返回顶部右侧悬浮菜单效果,如下图, 使用工具是Hbuilder. 代码如下: <!DOCTYPE html> <html> <head> ...
- css导航菜单二级显示的问题
m项目中出现了二级菜单的标签是在导航的里面,用css ul>li:hover ul>li>ul>li 这样子实现不了鼠标经过时导航里二级菜单的显示,这里个人感觉是冲突了.最后通 ...
- CSS导航菜单（二级菜单）
index.html <div class="nav"> <ul> <li> <a href="#">Java& ...
随机推荐
- 后端开发之光！Django应用的容器化部署实践~
在此之前,我一直用uwsgi+virtualenv+nginx方式进行应用部署,操作起来比较麻烦,而且依赖于服务器上的Python版本,服务的管理方面单纯uwsgi + pid算不上特别麻烦但总没有d ...
- [转帖]CentOS-7-x86_64-Everything-2009 rpm包列表(CentOS7.9)
CentOS-7-x86_64-Everything-2009 rpm包列表(CentOS7.9) 共10073个文件 复制389-ds-base-1.3.10.2-6.el7.x86_64.rpm ...
- [转帖]坑：jmeter代理服务器录制脚本出现target controller is configured to "use recording Controller" but no such controller exists...
配置好代理服务器后,运行代理服务器 run 报错: target controller is configured to "use recording Controller" bu ...
- [转帖] 拒绝蛮力，高效查看Linux日志文件！
https://www.cnblogs.com/codelogs/p/16410363.html 原创:扣钉日记(微信公众号ID:codelogs),欢迎分享,转载请保留出处. 简介# 日常分析问题时 ...
- [转帖]解决vCenter6.x由于证书过期问题无法登录
https://www.dinghui.org/vcenter-sts-certificate.html#:~:text=%E8%BF%99%E6%97%B6%E5%80%99%EF%BC%8C%E5 ...
- [转帖]python字符串如何删除后几位
https://www.python51.com/jc/15070.html 1.首先在jupyter notebook中新建一个空白的python文件: 2.然后定义一个字符串,用字符串截取的方式打 ...
- [转帖]Kibana查询语言（KQL）
时间 2020-12-27 标签 html java 数据库 ide ui 翻译 日志 htm 对象 blog 栏目 HTML 繁體版 原文 https://www.cnblogs.com/-b ...
- [转帖]Linux使用Stress-ng测试CPU、内存、磁盘I/O满载情况教程与范例
https://www.xiaoyuanjiu.com/108301.html 介绍如何在 Linux 系统上使用 stress-ng 负载测试工具,产生 CPU.内存等资源满载的状况. stress ...
- [转帖]2.20 Native Operating System Tools
https://docs.oracle.com/javase/8/docs/technotes/guides/troubleshoot/tooldescr020.html#BABBHHIE 2.20 ...
- redis-shake
https://github.com/alibaba/RedisShake/wiki/%E8%BF%90%E8%A1%8C%E7%9B%91%E6%8E%A7 redis-shake is a too ...