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

导航条的制作「建议收藏」制作成品模型图:代码:一、写代码前需要准备的:万事先写(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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 电脑爱好者GHOSTWIN7纯净版v2.0

    电脑爱好者GHOSTWIN7纯净版v2.0系统特点:全自动无人值守安装,采用万能GHOST技术,安装系统过程只需5-8分钟,适合新旧各种机型。集成常见硬件驱动,智能识别+预解压技术,绝大多数硬件可以快速自动安装相应的驱动。VC++2005|2008|2010|2012|2013系统使用系统总裁论坛最新封装工具和IT天空论坛(稳定版)最新驱动包制作而成。我的文档收藏夹虚拟内存智能转移精简列表:示例文件Wi…

    2022年5月1日
    44
  • 软件测试用例包括_白盒测试用例

    软件测试用例包括_白盒测试用例测试用例分层每个测试用例都有1个或多个测试步骤(List[step]),每个测试步骤对应一个API请求或其他用例的引用。从上图分析,我们可以看到testsuite中包含了3个测试用例,testca

    2022年7月28日
    8
  • java map 缓存_缓存用于

    java map 缓存_缓存用于缓存什么是缓存?平常的开发项目中,多多少少都会使用到缓存,因为一些数据我们没有必要每次查询的时候都去查询到数据库。缓存的使用场景:在Java应用中,对于访问频率高,更新少的数据,通常的方案是将这类数据加入缓存中,相对从数据库中读取,读缓存效率会有很大提升。在集群环境下,常用的分布式缓存有Redis等。但在某些业务场景上,可能不需要去搭建一套复杂的分布式缓存系统,在单机环境下,通常是会希望使用内部的缓存(LocalCache)。使用map缓存方案:基于ConcurrentHashMap实现数

    2022年9月27日
    2
  • Java安全之初探weblogic T3协议漏洞

    Java安全之初探weblogicT3协议漏洞文章首发自安全客:Java安全之初探weblogicT3协议漏洞0x00前言在反序列化漏洞里面就经典的还是莫过于weblogic的反序列化漏洞

    2021年12月12日
    49
  • webstorm 插件_vscode插件开发文档

    webstorm 插件_vscode插件开发文档webstorm集成了很多强大的前端插件。使用的时候只需要在webstorm中搜索plugin就可以出来一堆,选择需要的安装j

    2025年10月15日
    3
  • 【android开发】Android防止内存溢出浅析

    【android开发】Android防止内存溢出浅析

    2021年11月16日
    44

发表回复

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

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