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

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


相关推荐

  • floyed「建议收藏」

    floyed「建议收藏」#include<iostream>#include<cstdio>#include<cstdlib>#include<cstring>#include<algorithm>usingnamespacestd;constintmaxn=405;constintinf=4000005;intd1[maxn][m…

    2022年6月15日
    26
  • Linux使用SCP进行文件传输

    Linux使用SCP进行文件传输本章内容基于CentOS6.5(32位)scp就是securecopy,是用来进行远程文件拷贝的。数据传输使用ssh,并且和ssh使用相同的认证方式,提供相同的安全保证。scp不需要安装额外的软件,使用起来简单方便,安全可靠且支持限速参数但是它不支持排除目录为了学习SCP命令我创建了3个Linux虚拟机,其ip地址分别位192.168.132.130、192.168.132.1…

    2022年8月22日
    7
  • C++虚函数表剖析

    C++虚函数表剖析关键词:虚函数,虚表,虚表指针,动态绑定,多态一、概述为了实现C++的多态,C++使用了一种动态绑定的技术。这个技术的核心是虚函数表(下文简称虚表)。本文介绍虚函数表是如何实现动态绑定的。二、类的虚表每个包含了虚函数的类都包含一个虚表。我们知道,当一个类(A)继承另一个类(B)时,类A会继承类B的函数的调用权。所以如果一个基类包含了虚函数,那么其继承类也可调用这些虚函数,换句话说,一个类继承了包

    2022年7月13日
    33
  • VisualSVN Server启动错误(0x8007042a)

    VisualSVN Server启动错误(0x8007042a)

    2021年9月21日
    53
  • 查看webpack版本_封装webpack

    查看webpack版本_封装webpacknpmwebpack-v转载于:https://www.cnblogs.com/aiyr/p/10562244.html

    2022年8月9日
    6
  • MATLAB绘图怎么变得更好看[通俗易懂]

    MATLAB绘图怎么变得更好看[通俗易懂]同样用的都是MATLAB,为啥大佬们画的图都那么好看,而你画的图都是简单、普通,那是因为我们掌握的基础元素不一样,只有掌握了最基本的基础元素,再加上日益增长的审美,才会有一张好图出来。二维绘图 函数名 说明 plot 基本的线性坐标绘图 loglog X-Y轴双对数坐标绘图 …

    2022年6月20日
    26

发表回复

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

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