HTML+CSS的小实例
通过一个月以来对HTML5+CSS的学习。这篇随笔给大家来做一个简单的网页中常见的导航栏。
这些都称之为网页中的导航栏。
我简单的做了一个某宝和58同城的导航栏，供大家学习参考。
一、58同城导航栏：
解析：首先我们来看到这个导航栏，我们可以把它分成两个部分 左边为一部分，右边为一部分。把导航栏拆分成两个部分 这样这个导航栏的难度就大大降低了。
HTML5部分：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="master1.css">
<link rel="shortcut icon" href="56.ico" />
<title>【58同城 58.com】珠海分类信息 - 本地 免费 高效</title> </head> <body>
<div class="warpper"> <div class="top-nav-wrap">
<div class="top-nav">
<!--左-->
<ul class="top-nav-l">
<!-- <li class="top-nav-menu area">
<a href="#">
<span>珠海</span>
</a>
</li>-->
<li class="top-nav-menu city">
<span class="area">珠海</span>
<span>
<a href="#">[切换城市</a>
</span>
<a href="#">澳门</a>
<a href="#">中山</a>
<a href="#">重庆]</a>
</li>
<li class="top-nav-menu tianqi">
<span class="bg-pic yl-pic"></span>
<span>晴</span>
<span>28 ~ 21℃</span>
<span class="bg-pic zl-pic"></span>
</li>
</ul> <!--右-->
<ul class="top-nav-r">
<li class="top-nav-menu login">
<a href="#">
<span class="c-span">登录 / 注册 </span>
</a>
</li>
<!-- <li class="top-nav-menu cut-off">
<span>/</span>
</li> <li class="top-nav-menu login">
<a href="#">
<span class="c-span">注册</span>
</a>
</li>-->
<li class="top-nav-menu per">
<a href="#">
<span class="c-span">个人中心</span>
</a>
<span class="bg-pic xsj-pic"></span>
</li> <li class="top-nav-menu mer">
<a href="#">
<span class="c-span">商家中心</span>
</a>
<span class="bg-pic xsj-pic"></span>
</li> <li class="top-nav-menu help">
<a href="#">
<span class="c-span">帮助中心</span>
</a>
<span class="bg-pic xsj-pic"></span>
</li> <li class="top-nav-menu ser">
<a href="#">
<span class="c-span">联系客服</span>
</a>
</li> <li class="top-nav-menu vig">
<a href="#">
<span class="c-span">网站导航</span>
</a>
<span class="bg-pic xsj-pic"></span>
</li> </ul>
</div>
</div>
</div>
</body> </html>
CSS代码部分：
/*页面初始化*/
*{
margin:;
padding:;
list-style: none;
text-decoration:none;
}
/*页面的整体显示*/
html,
body{
width:100%;
height:100%;
background-color:#f4f4f4;
color:#555;
overflow: hidden;
}
/*页面的模块*/
.warpper{
width:100%;
height:100%; }
/*设置导航栏的宽高*/
.warpper .top-nav-wrap{
width:100%;
height:35px;
background-color:#fff;
border-bottom: 1px solid #ddd;/*下标线*/
/*background-color:1px solid #000;*/
}
/*给显示东西的导航栏设置宽高*/
.warpper .top-nav-wrap .top-nav{
width:1190px;
height:35px;
/*border:1px solid red;*/
margin:0 auto; }
/*将左边的内容 向左靠齐*/
.warpper .top-nav-wrap .top-nav .top-nav-l{
float:left;
}
/*将右边的内容 向右靠齐*/
.warpper .top-nav-wrap .top-nav .top-nav-r{
float:right;
}
/*将所以的内容区域水平排列*/
.warpper .top-nav-wrap .top-nav ul li{
float:left;
margin:5px;
}
/*将内容的所以的a标签改变颜色大小等*/
.warpper .top-nav-wrap .top-nav a{
color:#555;
font-size:12.5px;
padding:0 5px;
margin:;
}
/*将内容首个 改变样式和字体，大小*/
.warpper .top-nav-wrap .top-nav .area{
color:#ff552e;
font-size:7.5px;
font-weight:bold;/*字体加粗*/
float: left;
padding-top: 4px;
}
/*改变所以span的内容字体大小*/
.warpper .top-nav-wrap .top-nav span{
font-size:11px; }
/*鼠标指向改变状态。。颜色*/
.warpper .top-nav-wrap .top-nav a:hover{
color:#ff552e;
}
/*内容间距*/
.warpper .top-nav-wrap .top-nav .city{
padding:0 -6px;
word-spacing:-10px;
letter-spacing: 1px;
} /*图片设置*/
.warpper .top-nav-wrap .top-nav .bg-pic{
display:inline-block;
width:14px;
height:9px;
background-size:100% 100%;
vertical-align:middle;
} .warpper .top-nav-wrap .top-nav .bg-pic.xsj-pic{
background-image: url('./xsj1.png');
width:9px;
height:7px;
}
.warpper .top-nav-wrap .top-nav .bg-pic.yl-pic{
background-image: url('./tq.png');
width:16px;
height:10px;
}
.warpper .top-nav-wrap .top-nav .bg-pic.zl-pic{
background-image: url('./zl.png');
width:18px;
height:18px;
}
运行效果：
二、淘宝导航栏
HTML代码部分：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="master.css"> <title>淘宝网 - 淘！我喜欢</title>
</head> <body> <div class="wrapper">
<!--导航栏-->
<div class="top-nav-wrap">
<div class="top-nav"> <ul class="top-nav-l">
<li class="top-nav-menu china">
<span class="c-span">中国大陆</span>
<span class="bg-pic xsj-pic"></span>
</li>
<li class="top-nav-menu login-sign">
<a href="#">亲，请登录</a>
<a href="#">免费注册</a>
</li>
<li class="top-nav-menu ">
<a href="#">手机逛淘宝</a>
</li>
</ul> <ul class="top-nav-r">
<li class="top-nav-menu my-taobao">
<a href="#">我的淘宝</a>
<span class="bg-pic xsj-pic"></span>
</li>
<li class="top-nav-menu shop-Car">
<a href="#">
<span class="bg-pic shopCar-pic"></span>
<span>购物车0</span>
</a>
<span class="bg-pic xsj-pic"></span>
</li>
<li class="top-nav-menu like">
<a href="#">
<span class="bg-pic like-pic"></span>
<span>收藏夹</span>
</a>
<span class="bg-pic xsj-pic"></span>
</li> <li class="top-nav-menu goods">
<a href="#">商品分类</a>
</li> <li class="top-nav-menu cut-off">
<span>|</span>
</li>
<li class="top-nav-menu seller">
<a href="#">
<span class="c-span">卖家中心</span>
<span class="bg-pic xsj-pic"></span>
</a>
</li>
<li class="top-nav-menu cutsomer">
<a href="#">
<span class="c-span">联系客服</span>
<span class="bgPic xsj"></span>
</a>
</li>
<li class="top-nav-menu web-nav">
<a href="#">
<span class="bg-pic web-nav-pic"></span>
<span>网站导航</span>
</a>
<span class="bg-pic xsj-pic"></span>
</li>
</ul>
</div>
<!--导航图片
<div class="ad-wrap">
<img src="toutiao4.png" alt="图">
</div>-->
</div>
</body>
</html>
CSS代码部分：
/*初始化工作*/
*{
margin:;/*去边距*/
padding:;
list-style:none;/*去标签小圆点*/
text-decoration: none;/*去下划线*/
}
/*想设置页面的宽度，必须先让父元素先修改值*/
html,
body{
width: 100%;
height: 100%;
background-color:#f4f4f4;
color:#3c3c3c;
overflow: hidden;/*去纵向滚动条*/
}
.wrapper{
width: 100%;
height: 100%;
}
/*上导航栏条*/
.wrapper .top-nav-wrap{
width: 100%;
height:35px;
/*border:1px solid #000;*/
}
.wrapper .top-nav-wrap .top-nav{
width: 1190px;
height: 35px;
/*border:1px solid black;*/
margin:0 auto;/*让导航条居中在页面中间*/
}
.wrapper .top-nav-wrap .top-nav .top-nav-l{
float:left;/*让左侧的东西靠左*/
}
.wrapper .top-nav-wrap .top-nav .top-nav-r{
float:right;/*让右侧的东西靠右*/
}
.wrapper .top-nav-wrap .top-nav ul li{
float:left;/*导航条水平排列*/
margin:6px;/*字间距*/
}
.wrapper .top-nav-wrap .top-nav a{
color:#6c6c6c;
font-size:12.5px;
padding:0 6px;
margin:;
}
/*伪类 鼠标指针指向*/
.wrapper .top-nav-wrap .top-nav a:hover{
color:#f40;
}
.wrapper .top-nav-wrap .top-nav .china{
color:black;
font-size:13px;
padding-top:3.5px;
}
.wrapper .top-nav-wrap .top-nav .my-taobao a{
color:black;
}
.wrapper .top-nav-wrap .top-nav .login{
color:#f40;
}
.wrapper .top-nav-wrap .top-nav .c-span{
padding:0 3px; }
.wrapper .top-nav-wrap .top-nav .bg-pic{
display:inline-block;
width:10px;
height:10px;
background-size:100% 100%;
vertical-align:middle;
}
.wrapper .top-nav-wrap .top-nav .bg-pic.xsj-pic{
background-image: url('./xsj.png'); }
.wrapper .top-nav-wrap .top-nav .like-pic{
background-image: url('./xxx.png');
width:13px;
height:9px;
padding-top:4px; }
.wrapper .top-nav-wrap .top-nav .bg-pic.shopCar-pic{
background-image: url('./gwc.png');
width:14px;
height:15px; }
.wrapper .top-nav-wrap .top-nav .bg-pic.web-nav-pic{
background-image: url('./xuanxiang.png');
width:10px;
height:8px;
padding-top:2px;
}
.wrapper .top-nav-wrap .top-nav .cut-off{
line-height:25px;
color:#ddd;
}
注：因为没有运用到JavaScript所以很多动态交互无法实现，图标都是图片暂时放上的。所以请多多理解。
运用的知识：1.title显示， 2.css样式引入， 3.css选择器与选择器权重， 4.横向滚动条消失， 5.display， 6.浮动， 7.居中， 8.文字竖直居中， 9.background， 10.伪类， 11.定位position， 12.margin/padding
HTML+CSS的小实例的更多相关文章
- CSS应用内容补充及小实例
一.clear 清除浮动 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
- Django 小实例S1 简易学生选课管理系统 12 CSS样式完善
Django 小实例S1 简易学生选课管理系统 第12节--CSS样式完善 点击查看教程总目录 作者自我介绍:b站小UP主,时常直播编程+红警三,python1对1辅导老师. 课程模块的逻辑代码到这里 ...
- Django 小实例S1 简易学生选课管理系统 8 CSS样式优化
Django 小实例S1 简易学生选课管理系统 第8节--CSS样式优化 点击查看教程总目录 作者自我介绍:b站小UP主,时常直播编程+红警三,python1对1辅导老师. 前面的几节下来,用户模块基 ...
- canvas实践小实例一 —— 画板工具
前面讲了一部分的canvasAPI的基础知识,光看API的介绍确实是很无趣乏味,需要一点可以激发内心的激情的东西来激励自己来学习,于是就了伴随canvasAPI学习的小实例,这样通过API的知识,结合 ...
- 如何使用CSS实现小三角形效果
如何使用CSS实现小三角形效果:建议:尽可能的手写代码,可以有效的提高学习效率和深度.在众多的网页效果中,都有小三角形效果的应用,能够增加特定应用的美观度,下面就给出一段实例代码,里面介绍了两种实现小 ...
- --@angularJS--综合小实例1
<!DOCTYPE HTML><html ng-app="myapp"><head> <title>综合小实例</title& ...
- JavaScript小实例：拖拽应用（二）
经常在网站别人的网站的注册页中看到一个拖拽验证的效果,就是它的验证码刚开始不出来,而是有一个拖拽的条,你必须将这个拖拽条拖到底,验证码才出来,说了感觉跟没说一样,你还是不理解,好吧,我给个图你看看: ...
- javascript小实例，拖拽应用（一）
前面我们将了一下拖拽的基本思想,理论是有了,那实践呢,可以运用到什么地方呢?下面就给大家带来一个用拖拽思想写的一个小实例,供大家参考,大致效果看下图: 就是这样一个简单的一个拖拽条,你可以把它理解为滚 ...
- javascript小实例，实现99乘法表及隔行变色
人生短暂,废话不多说,直奔主题! 这个小实例的要求: 实现在页面中输出99乘法表.(要求:以每三行为一组,实现隔行变色(颜色为白,红,黄(也可自己定义)),鼠标滑过每一行,行背景颜色变为蓝色,鼠标离开 ...
随机推荐
- python正则小结
注意pattern字符串前要加r 原始字符串 元字符 . 匹配除换行的任意字符 ^ 匹配开头 $ 匹配结尾 表示重复 ...
- Scrapy爬取豆瓣图书数据并写入MySQL
项目地址 BookSpider 介绍 本篇涉及的内容主要是获取分类下的所有图书数据,并写入MySQL 准备 Python3.6.Scrapy.Twisted.MySQLdb等 演示 代码 一.创建项目 ...
- python习题——随机整数生成类
随机整数生成类 可以先设定一批生成数字的个数,可设定指定生成的数值的范围 1.普通类实现 import random import random class RandomGen: def __init ...
- 树莓派debian配置lamp[解决Apache不显示php网页]
Apache + MySql + Php． 1.安装Apache Apache可以用下面的命令来安装 sudo apt-get install apache2 Apache默认路径是/var/www/ ...
- ASP.NET购物车Cookie获取，创建，添加，更新，删除的用法
#region 添加购物车 public void GetShoppingCart(int skuId, int quanlity) { HttpCookie cookie = HttpContext ...
- windwos 10 安装flask
1 安装python2.7.13 安装文件为:python-2.7.13.amd64.msi,因为python2.7.13中已经包含了pip. 在安装过程中选中[Add python.exe to P ...
- apple平台下的objc的GCD，多线程编程就是优雅自然。
在apple的操作系统平台里,GCD使得多线程编程是那么的优雅自然.在传统的多线程编程中,首先要写线程处理循环:之后还有事件队列,消息队列:还要在线程循环中分离事件解释消息,分派处理:还要考虑线程间是 ...
- GitHub远程库的搭建以及使用
GitHub远程库的搭建 一).配置SSH 步骤: 1).注册GitHub账号 2).本地git仓库与远程的GitHub仓库的传输要通过SSH进行加密 3).创建SSH key 1.检查在用户主目 ...
- 并行模式之Master-Worker模式
并行模式之Master-Worker模式 一).Master-Worker模式 作用: 将一个大任务分解成若干个小任务,分发给多个子线程执行. 注: 将大任务分解成小任务,小任务的实现逻辑要相同. 二 ...
- elasticsearch安装踩坑记
ES的安装与启动时问题解决 环境: 系统环境:CentOS7 JDK:jdk-8u131-linux-x64.tar.gz 不可以通过Root用户来启动ES 通过上面的错误提示可以看出,can ...