导航条的制作「建议收藏」

导航条的制作「建议收藏」制作成品模型图:代码:一、写代码前需要准备的:万事先写(css)结构,把结构搭建好再开始写(css)样式;制作导航条一般需要用到<ul><li></li>&l

大家好,又见面了,我是你们的朋友全栈君。

制作成品模型图:

导航条的制作「建议收藏」

 

 代码:

导航条的制作「建议收藏」

 

 导航条的制作「建议收藏」

 

 

一、写代码前需要准备的:
        万事先写(css)结构,把结构搭建好再开始写(css)样式;制作导航条一般需要用到<ul><li></li><ul>标签结构
 二、知识点:
        1、ul是块级元素所以在进行水平居中时用的是margin:0 auoto;   text-align:center;水平居中作用于行内元素。
        2、overflow: hidden;用于解决高度塌陷,高度塌陷指的是没有了高。
        3、增加白色边框时增加了1px,所以宽度增加了8px,之前的960px变成了968px,只有在每个自己的内部减个1px才行
        即每个.nav ul li a的宽度由之前的120px变成了119px。
        4、.nav ul li a:hover 鼠标滑过超链接时的状态显示。
        5、.nav ul li.last  li和last之间的点没有空格,这个运用到了权重值的知识点,如果写.list权重值小于.nav ul li
        即10<12是无法优先显示的,所以加了在.list前加了.nav ul li以权重值更大优先作用让最后一个白色边框条消失。
 
导航条的制作「建议收藏」

 

 

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/154988.html原文链接:https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长

相关推荐

  • jsonschema校验json数据_xml schema校验

    jsonschema校验json数据_xml schema校验ajv使用在使用前,需要知道json-schema是什么。json-schemajson-schema是一个用来描述json数据格式。ajvajv是一个校验json-schem

    2022年8月2日
  • 使用java代码打印三角形、平行四边形、菱形

    使用java代码打印三角形、平行四边形、菱形

    2021年5月24日
  • 【控制】人工势场法及人工势场函数「建议收藏」

    【控制】人工势场法及人工势场函数「建议收藏」人工势场法是由Khatib提出的一种机器人路径规划算法。该算法将目标和障碍物分别看做对机器人有引力和斥力的物体,机器人沿引力与斥力的合力来进行运动。该法结构简单,便于低层的实时控制,在实时避障和平滑的轨迹控制方面,得到了广泛应用,其不足在于存在局部最优解,容易产生死锁现象,因而可能使移动机器人在到达目标点之前就停留在局部最优点。From:人工势场法1.概述我们打两个比方来说明人工势场法的作用机理。首先,我们把构型空间比作一个电势场平面,机器人(的当前构型)比作空间中一点。如果让机器人的起点和障碍物

    2022年6月29日
  • 用Python做一个“以图搜番“的应用程序,再也不用愁动漫图片的出处了!

    用Python做一个“以图搜番“的应用程序,再也不用愁动漫图片的出处了!文章目录前言PyQt5界面设计使用QtDesigner绘制界面视频部件插入小技巧解码器下载功能实现trace.moeAPI介绍与视频使用Nuitka打包成exe文件前言喜欢看动漫的朋友们大概都能体会到一个难受的事情,就是在论坛或者群聊里面看到一张动漫截图,很想知道它的出处,但百度搜了一圈却也没有一个可靠结果,就很郁闷。今天就来带大家用Python做一个简单的“以图搜番”小应用。应用本身的实现不是很难的事情,其实就是调用别人的API接口来实现,主要目的还是通过这个案例来学习以下内容:学习如何用Py

    2022年10月9日
  • linux(3) 处理目录的常用命令「建议收藏」

    linux(3) 处理目录的常用命令「建议收藏」目录命令总览ls(英文全拼:listfiles):列出目录及文件名cd(英文全拼:changedirectory):切换目录pwd(英文全拼:printworkdirectory):显

    2022年7月30日
  • linux 更改文件读写权限_如何查看自己文件的权限

    linux 更改文件读写权限_如何查看自己文件的权限整理下Linux文件权限相关知识一、查看文件夹或文件的可读可写权限:ls-l文件夹解析“drwxrwxrwx”,这个权限说明一共10位。第一位代表文件类型,有两个数值:“d”和“-”,“d”代表目录,“-”代表非目录。后面9位可以拆分为3组来看,分别对应不同用户,2-4位代表所有者user的权限说明,5-7位代表组群group的权限说明,8-10位代表其他人

    2022年9月12日

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号