Css之导航栏学习
Css:
ul {
list-style-type:none;
margin:;
padding:;
overflow:hidden;
background-color:blue;
/*固定在顶部*/
position:fixed;
top:;
width:100%;
} li {
float:left;
}
/* 出来最后一个选项(last-child) 其他的都添加分割线 */
li {
border-right: 1px solid #bbb;
}
li:last-child {
border-right:none;
} li a {
display:block;
color:white;
text-align:center;
padding:14px 16px;
text-decoration:none;
}
li a:hover {
background-color:darkgreen;
}
Html:
@{
Layout = null;
} <!DOCTYPE html> <html>
<head>
<meta name="viewport" content="width=device-width" />
<script src="../Scripts/jquery-1.9.1.min.js"></script>@*应用自己下好的jQuery,也可以引用百度(src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js)或者微软CDN*@
<link href="../Content/ldbCss.css" rel="stylesheet" type="text/css" /> @*stylesheet该句引入样式.css*@
<link href="../Content/ButtonCss.css" rel="stylesheet" type="text/css" /> @*stylesheet该句引入样式.css*@
<title>Index</title>
</head>
<body>
<div>
<ul>
<li><a class="active" href="~/Views/Home/myHtmlCss.cshtml">进销存</a></li>
<li><a href="#product">生产管理</a></li>
<li><a href="#javascript()">工艺管理</a></li>
<li><a href="#javascritp()">成品管理</a></li>
<li><a href="#">设置</a></li>
<li><a href="#">联系</a></li>
<li><a href="#">关于</a></li>
</ul>
</div> <div style="padding:20px;margin-top:30px;background-color:#1abc9c;height:1500px;">
<h1>Fixed Top Navigation Bar(固定导航栏在顶部)</h1>
<h2>Scroll this page to see the effect</h2>
<h2>固定导航栏在顶部</h2> <p>固定导航栏在顶部..</p>
<p>固定导航栏在顶部..</p>
<p>固定导航栏在顶部..</p>
<p>固定导航栏在顶部..</p>
<p>固定导航栏在顶部..</p>
<p>固定导航栏在顶部..</p>
<p>固定导航栏在顶部..</p>
<p>固定导航栏在顶部..</p>
<p>固定导航栏在顶部..</p>
<p>固定导航栏在顶部..</p>
<p>固定导航栏在顶部..</p>
<p>固定导航栏在顶部..</p>
<p>固定导航栏在顶部..</p>
<p>固定导航栏在顶部..</p>
<p>固定导航栏在顶部..</p>
<p>固定导航栏在顶部..</p>
<p>固定导航栏在顶部..</p>
<p>固定导航栏在顶部..</p>
<p>固定导航栏在顶部..</p>
<p>固定导航栏在顶部..</p>
<p>固定导航栏在顶部..</p>
</div>
</body>
</html>
效果:
Css之导航栏学习的更多相关文章
- 谈谈一些有趣的CSS题目(八)-- 纯CSS的导航栏Tab切换方案
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- 第8天:CSS制作导航栏
今天主要学习了网页导航栏的制作.注意:引入外部CSS样式时,如果使用background:url(../images/1.png),一定记得用..跳出当前文件夹,回到上级目录. 一.导航栏实现步骤: ...
- day13—CSS之导航栏
转行学开发,代码100天——2018-03-29 见过这么多网页,没有导航栏的几乎没见过.因此,对导航栏的练习非常之必要. 导航栏的实现,基本上都是通过链接列表实现,即ul->li->a标 ...
- 巧妙使用checkbox制作纯css动态导航栏
前提:很多时候.我们的网页都需要一个垂直的导航栏.可以分类.有分类.自然就有展开.关闭的功能.你还在使用jquery操作dom来制作吗?那你就out了! 方案:使用checkbox 的 checked ...
- CSS 笔记——导航栏、下拉菜单、提示工具
8. 导航栏.下拉菜单.提示工具 (1)导航栏 垂直导航栏 <!DOCTYPE html> <html lang="en"> <head> &l ...
- HTML/CSS:导航栏水平和垂直
1.垂直导航栏 导航栏 = 链接列表导航栏基本上是一个链接列表,因此使用 <ul> 和 <li> 元素是非常合适的.如需构建垂直导航栏,我们只需要定义 <a> 元素 ...
- HTML+CSS实现导航栏二级下拉菜单完整代码
工具是vs code 代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...
- CSS实现导航栏底部动态滚动条效果
预习了CSS3部分的新知识,想着在不使用JS的情况下实现导航栏滚动条效果,如下: 实现滚动条效果,其实就是在<li></li>标签中让<span>元素的宽度由0变化 ...
- html css二级导航栏
二级导航栏制作: 1.将一级导航栏去除列表样式(list-style:none),并给予浮动,使其横向排列(float:left) 2.给每个li中添加一个<a></a>标签, ...
随机推荐
- C++与Java通过WebService通信(上)
一. 前言 本篇讲述如果通过C++客户端访问Java服务端发布的SOAP模式的WebService接口.文档中的样例代码拷贝出去即可运行,所有的代码都是本地测试OK的:本文不但解决了接口调用的问题,同 ...
- MySQL数据库索引简介
一.索引的含义和特点 索引是一个单独的.存储在磁盘上的数据库结构,他们包含着对数据表里所有记录的引用指针.使用索引用于快速找出某个或多个列中有一特点值的行,所用MySQL列类型都可以被索引,对 ...
- [转]使用Subversion进行版本控制
使用Subversion进行版本控制 http://www.subversion.org.cn/svnbook/1.4/index.html 针对 Subversion 1.4(根据r2866编译) ...
- 让你的网站high起来
最初是在陌小雨的网站上看见这个功能,赶脚很牛逼的样子,于是给自己的网站加上了.在我网站首页的轮播图上面那个按钮就能实现这个功能,当然这里你点击右边的这个链接也可以看到效果——>点此嗨一下. 效果 ...
- serializeArray()获取的表单参数转化成json格式的对象
目标:将serializeArray()这个方法获取的表单对象 转换成json格式 function serializeObject(){ //easyui提交表单 $('#form').form( ...
- 笔记:I/O流-对象序列化
Java 语言支持一种称为对象序列化(Object Serialization)的非常通用的机制,可以将任何对象写入到流中,并在之后将其读回,首先需要支持对象序列化的类,必须继承与 Serializa ...
- vue技术解析六之生命周期函数
- bootbox的使用
/* * className为green的方法 */ function alertMsgG(msg,title,fn){ bootbox.alert({ buttons: { ok: { label: ...
- C++环境搭建与atom编译器编译C++
Windows下安装 方法一--VS: 使用windows开发神器visio studio.这种方法比较简单,直接下载一个最新的vs安装就行.不单单是C++,C.C#.VB等都可以开发. 方法二--只 ...
- 【Android】你知道还可以通过 View.animate() 来实现动画么
这次想来讲讲 View.animate(),这是一种超好用的动画实现方式,用这种方式来实现常用的动画效果非常方便,但在某些场景下会有一个坑,所以这次就来梳理一下它的原理. 基础 首先,先来看一段代码: ...