天书笔记:HTML+CSS实现顶部导航栏
此笔记纯属本人脑残笔记,阅读困难不理解属正常现象,初学者尽量不要阅读,否则轻则口吐白沫重则走火入魔,切记切记
先晒效果图:

效果要求类似于b站的顶部导航(。。原谅我老是拿b站做例子:) )
然后是代码
下面逐条分析这一堆东西
HTML部分主要是这个:
<div class="topbar">
<div class="topbody">
<a class="title" href="">标题</a>
<ul class="toplist">
<li><a href="">项目1</a></li>
<li><a href="">项目2</a></li>
<li><a href="">项目3</a></li>
<li><a href="">项目4</a></li>
</ul>
</div>
</div>
CSS:
*{
margin: 0px;
padding:0px;
}
.topbody{
width:900px;
margin: 0 auto;
}
.topbar{
width:100%;
background-color: #000;
display: inline-block;
}
.topbar li{
float:left;
}
.toplist{
display: inline-block;
list-style-type:none;
}
.toplist a{
color:#FFF;
text-decoration: none;
}
.title,.toplist a{
display:block;
display: block;
float: left;
}
.toplist a{
padding:15px 20px 15px 20px;
}
.title{
color:#FFF;
text-decoration: none;
padding:15px 30px 15px 30px;
}
顶栏主要被一个class为topbar的div包围,然后里面嵌套了一个topbody是因为下一步要设宽度。还有一个a设为标题。最坑爹的是顶栏项目必须用ul包围,F12了很多网站都是这样写的,具体为什么我也不知道,莫非是能让浏览器更好的渲染页面?用ul更坑爹的是处理那几个样式,要知道ul默认是带点的。。所以需要把这个点去掉。。百度了一阵终于知道了把list-style-type设成none就可以了
关于上文提及的topbody:这里topbody作为主层主要起到一个固定宽度的作用,防止显示区域一大了里面的项目就跟着跑那种情况。css用了margin居中法并且指定了一个宽度
.topbody{
width:900px;
margin: 0 auto;
}
关于项目的处理需要注意把topbar里的所有元素(这里的a和li)都display:block并且float:left,display:block是为了设padding时会起作用,float:left是向左浮动。然后基本所有用过float:left这个东西的都会出现父容器撑不开的情况(高度为0),这时用display: inline-block;这条就可以撑开了
此笔记纯属本人脑残笔记,阅读困难不理解属正常现象,初学者尽量不要阅读,否则轻则口吐白沫重则走火入魔,切记切记
天书笔记:HTML+CSS实现顶部导航栏的更多相关文章
- 通过HTML+CSS+JavaScript实现鼠标移动到页面顶部导航栏出现,如果移出导航栏3秒又隐藏起来,而且不受滚动条影响(二)
通过HTML+CSS+JavaScript实现鼠标移动到页面顶部导航栏出现,如果移出导航栏3秒又隐藏起来,而且不受滚动条影响(二) 效果:默认一直隐藏导航栏,当滚动条滚到超过300px按钮出现,点击回 ...
- 【源码分享】jquery+css实现侧边导航栏
jquery+css实现侧边导航栏 最近做项目的时候,突然想用一个侧边导航栏,网上找了几个插件,有的太丑而且不太符合我的预期.与其修改别人的代码,不如自己来写一个了.废话不多说先上图,感兴趣的请继续看 ...
- android开发(49) android 使用 CollapsingToolbarLayout ,可折叠的顶部导航栏
概述 在很app上都见过 可折叠的顶部导航栏效果.google support v7 提供了 CollapsingToolbarLayout 可以实现这个效果.效果图如下: 实现步骤 1. 写 ...
- [置顶]
xamarin Tablayout+Viewpager+Fragment顶部导航栏
最近几天不忙,所以把项目中的顶部导航栏的实现归集一下.android中使用TabLayout+ViewPager+Fragment制作顶部导航非常常见,代码实现也比较简单.当然我这个导航栏是基于xam ...
- 使用PagerSlidingTabStrip实现顶部导航栏
使用PagerSlidingTabStrip配合ViewPager实现顶部导航栏. 效果图如下: PagerSlidingTabStrip是github上的一个开源项目,项目地址如下 ...
- Android之仿今日头条顶部导航栏效果
随着时间的推移现在的软件要求显示的内容越来越多,所以要在小的屏幕上能够更好的显示更多的内容,首先我们会想到底部菜单栏,但是有时候像今日头条新闻客户端要显示的内容太多,而且又想在主界面全部显示出来,所以 ...
- Flutter学习笔记(17)--顶部导航TabBar、TabBarView、DefaultTabController
如需转载,请注明出处:Flutter学习笔记(17)--顶部导航TabBar.TabBarView.DefaultTabController 上一篇我们说了BottmNavigationBar底部导航 ...
- 【React -- 9/100】 抽离顶部导航栏 - [组件复用]
今天写的页面中需要重复使用到顶部导航栏,所以把顶部导航栏抽离出来 考虑复用组件的健壮性,使用PropTypes校验,可以自定义一个click事件 JSX import React from " ...
- 用Vue来实现音乐播放器(五):路由配置+顶部导航栏组件开发
路由配置 在router文件夹下的index.js中配置路由 import Vue from 'vue' import Router from 'vue-router'//配置路由前先引入组件impo ...
随机推荐
- CSS的Display属性可能的值
none 此元素不会被显示. block 此元素将显示为块级元素,此元素前后会带有换行符. inline 默认.此元素会被显示为内联元素,元素前后没有换行符. inline-block 行内块元素.( ...
- C# 站点IP访问频率限制 针对单个站点
0x00 前言 写网站的时候,或多或少会遇到,登录,注册等操作,有时候,为了防止别人批量进行操作,不得不做出一些限制IP的操作(当前也可以用于限制某个账号的密码校验等). 这样的简单限制,我们又不想对 ...
- 最近Google经常打不开?
最近听好多同事讲google打不开,无法进行搜索,用了代理之后速度还是很慢,而百度搜索又不佳… 就在此分享一些google地址: 个人收藏夹的: 203.208.46.144(这段时间推荐使用这4个地 ...
- jquery内容选择器(匹配包含指定选择器的元素)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 【Java每日一题】20161116
package Nov2016; public class Ques1116 { public static void main(String[] args){ System.out.println( ...
- oracle的基本数据类型(转载)
数据类型是在设计表结构中需要定义的,选择适当的数据类型可以节省存储空间,提高运算效率. Oracle数据类型主要包括 1.字符型 适合保存字符串类型的数据,如姓名.地址.简介等等. 如:char(20 ...
- Mybatis添加返回主键ID
1.对应xml文件<insert id="insert" parameterType="DetectStandard"useGeneratedKeys=& ...
- 点我吧工作总结(技术篇) zookeeper
我思故我在,提问启迪思考! 1.什么是zookeeper? 2.zookeeper与dubbo.springMVC之间的协同工作? http://doc.okbase.net/congcong68/a ...
- 框架SpringMVC笔记系列 一 基础
主题:SpringMVC 学习资料参考网址: 1.http://www.icoolxue.com 2.http://aokunsang.iteye.com/blog/1279322 1.SpringM ...
- Scalaz(29)- Free :Coyoneda - Functor for free
很多时候我们会遇到一些高阶类型F[_],但又无法实现它的map函数,也就是虽然形似但F不可能成为Functor.看看下面的例子: trait Interact[A] case class Ask(pr ...