Web前端小例子——简单导航栏

写一个导航栏: 使用ul、li、a标签；

步骤：
           1:ul去除默认属性
           2:li 漂浮
           3:a变为块级元素(点击整个区域都可链接)

实现上下居中：可以塞泡沫（填充，这样会增加整个模型的高，要在其他地方减掉）、也可以塞空白div；

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title></title><style type="text/css">/* 媒体查询 根据 用户设备的屏幕尺寸来显示, */#all { width: 80%; height: 550px; background-color: pink;margin: auto;}#nav{height: 100px; background-color: lightblue; }#mid{height: 350px; background-color: gray;}#mid #midleft{width: 20%; height:350px ; background-color: red; float: left;}#mid #midmid{width: 70%; height:350px ; background-color: lime;float: left;}#mid #midright{width: 10%; height:350px ; background-color: khaki;float: left;}#foot{height: 100px; background-color: yellow;}@media only screen and (max-width:1400px ) {#all{width: 80%;}}@media only screen and (max-width:700px ) {#all{width: 100%;}}/* --------------------------------- 导航栏: UL LI a 导航栏1:UL 去除默认属性2:li 漂浮3:a变为块级元素*/#all ul{ margin: 0px; padding: 0px; list-style-type: none;height: 60px; background-color: #C71585;}#all li{ float: left; width: 20%;height: 60px;}#all ul li a{display: block;height: 45px; text-align: center; font-size: 22px;font-family: "courier new"; font-weight: 700; color: white; text-decoration: none;/* 塞泡沫 */padding-top:15px;border-right: 2px solid white;}#all ul li a#a1{background-color: yellow;}#all ul li a#a2{background-color: forestgreen;}#all ul li a:hover {background-color: crimson;}#all ul li a#a1:hover {background-color: gray;}#all ul li a#a2:hover {background-color: gray;}</style></head><body><div id="all"><div id="nav"><ul><li><a href="float.html" id="a1" target="_blank">Main</a></li><li><a href="float.html" id="a2">Java</a></li><li><a href="float.html">用户配置</a></li><li><a href="float.html">email</a></li><li><a href="float.html">其他</a></li></ul></div><div id="mid"><div id="midleft"></div><div id="midmid"></div><div id="midright"></div></div><div id="foot"></div></div></body>
</html>

Web前端小例子——简单导航栏相关推荐

微信小程序自定义导航栏胶囊菜单按钮高度完美适配原理简单赛过一些大厂的适配妈妈再也不用担心我强迫症啦
在自定义小程序导航栏时,右上角的胶囊(MenuButton)在不同机型测试,会发现很难适配. 实测中不同的手机,胶囊高度不一样.状态栏高度不一样.与模拟器显示的情况是不一样的. 完全需要根据手机,动 ...
说一说要求小程序自定义导航栏的需求有多沙雕
小程序是一种新的开放能力,开发者可以快速地开发一个小程序.小程序可以在超级App 内被便捷地获取和传播,同时具有出色的使用体验. 在小程序项目中自定义导航栏绝对算得上是最恶心的需求之一.本篇文章 ...
小程序底部导航栏(tabBar)图标的正确做法
许多人都认为小程序系统的底部导航栏特别不好看,为了美观而选择自定义,从此身陷漩涡无法自拔.其实真正的原因是图标的图片处理不当(说白了就是前端和设计太菜了),导致会有线条变粗,间距不当的视觉感受. 除小 ...
小程序自定义导航栏适配
小程序自定义导航栏适配(完美版) 1.发现问题小程序页面自定义导航栏功能已经开放有些日子了(还不知道这个功能的可以先>>了解一下),这极大的提升了小程序开发的自由度,相信不少小伙伴已经使 ...
css标签显示特性（块级元素、行内元素、行内块元素、标签显示模式转换display、简单文字居中、简单导航栏案例）
HTML标签一般分为块标签和行内标签两种类型,它们也称块元素和行内元素. 标签以什么方式进行显示,比如div 自己占一行, 比如span 一行可以放很多个 1. 块级元素(block-level) 常 ...
微信小程序tabBar导航栏页和其他页执行onLoad与onShow时机；tabBar页获取不到参数问题；navigateTo跳转无效问题；onShow执行两次问题；
1.注意点: 只有五种情况会触发导航栏tabBar页的onLoad函数,分别是: –1.1:首次进入到导航栏tabBar页面: –1.2:从微信分享进入的导航栏tabBar页面: –1.3:识别二维码 ...
微信小程序头部导航栏自定义
微信小程序头部导航栏自定义参考网址微信开放文档 navigationStyle导航栏样式:仅支持以下值:default默认样式,custom 自定义导航栏,只保留右上角胶囊按钮配置示例 {&quo ...
web元件库/常用web组件/常用表单/导航栏/边框/图标/日期时间选择器/评分组件/穿梭框/输入框/步骤条/计数器/输入框/Axure原型/axure元件库/rp原型/交互控件/五星评分器/导航框架
web元件库/axure元件库/常用web组件/常用表单/导航栏/边框/图标/日期时间选择器/评分组件/穿梭框/输入框/步骤条 /交互控件:单/多选框.输入框.计数器.选择器.级联选择.滑动开关.滑块 ...
web元件库/axure元件库/常用web组件/常用表单/导航栏/边框/图标/日期时间选择器/评分组件/穿梭框/输入框/步骤条/
web元件库/axure元件库/常用web组件/常用表单/导航栏/边框/图标/日期时间选择器/评分组件/穿梭框/输入框/步骤条/ Axure原型演示及下载地址请点击:https://www.pmdan ...

Web前端小例子——简单导航栏

Web前端小例子——简单导航栏相关推荐

最新文章

热门文章