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

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


相关推荐

  • 创建xsync 脚本

    创建xsync 脚本1、安装rsync:yum-yinstallrsync2、创建xsync文件并进行编辑(最好放到配置过环境变量的目录下)输入命令:vi/usr/local/spark/spark-standalone/bin/xsync#!/bin/bash#1获取输入参数个数,如果没有参数,直接退出pcount=$#if[$pcount-lt1]thenechoNoEnoughArguement!exit;fi#2.遍历集群所有机器forh…

    2022年5月5日
    41
  • kafka删除topic消息的四种方式[通俗易懂]

    kafka删除topic消息的四种方式[通俗易懂]方法一:快速配置删除法(简单粗暴,如果这个主题有程序还在消费都,此时KAFKA就gameover)1.kafka启动之前,在server.properties配置delete.topic.enable=true2.执行命令bin/kafka-topics.sh–delete–topictest–zookeeperzk:2181或者使用kafka-manager集群管理工具删除注意:如果kafka启动之前没有配置delete.topic.enable=true,topic只会标记

    2022年10月16日
    0
  • Latex 公式在线可视化编辑器

    Latex 公式在线可视化编辑器本文介绍定制latex公式在线编辑器

    2022年8月1日
    7
  • Iocomp VC2017 – 5.12版本Crack

    Iocomp VC2017 – 5.12版本CrackIocomp工业仪表盘控件包(.net版)包括多种用来创建专业的仪表和测量、工业控制、工业监控等相关的应用程序的控件包,包括仪表盘控件,开关控件,实时曲线控件,LED灯控件等等。所有的控件均为100%托管代码,Ω578867473知道支持Microsoft/Borland/CodeGear/Embarcadero等不同的开发环境。包括三个不同的版本,终极版(ultimate),专业版(ProPack)和曲线版(PlotPack.)控件包中的所有控件都是面向对象的设计,并.

    2022年7月25日
    9
  • 程序员外包平台_人力资源外包和劳务派遣

    程序员外包平台_人力资源外包和劳务派遣程序员接单平台,程序员接单,程序员外包平台,程序员外包

    2022年9月29日
    0
  • Linux重启网卡失败_centos7重启后网卡不启动

    Linux重启网卡失败_centos7重启后网卡不启动重启网卡报错:Restartingnetwork(viasystemctl):Jobfornetwork.servicefailedbecausethecontrolprocessexitedwitherrorcode.本人解决办法:去windows里面查找一下关于网卡的服务是否打开如果没有则手动开启这两个服务。有可能是UUID冲突,这里j简单介绍一…

    2022年9月22日
    0

发表回复

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

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