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

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


相关推荐

  • solidworks2016安装教程及激活成功教程方法视频_solidworks2016激活不成功怎么办

    solidworks2016安装教程及激活成功教程方法视频_solidworks2016激活不成功怎么办最好是重启之后安装,什么应用都别打开,不然可能会有干扰,我第一次安装没成功~第二次成功的转载http://www.cadzxw.com/5075.htmlsolidwork2016中文激活成功教程版下载:点击下载首先下载本站提供的solidworks2016软件。安装与激活成功教程方法亲测有效。1、下载完成后解压文件,首先打开激活成功教程文件夹,双击文件夹中的“SolidWorksSerialNumber…

    2025年8月21日
    4
  • matlab如何做向量内积,matlab2010a的bug:* 向量内积的错误解决方案「建议收藏」

    matlab如何做向量内积,matlab2010a的bug:* 向量内积的错误解决方案「建议收藏」很偶然地发现了一个matlab2010a的一个bug:在某种非常特殊的情况下,matlab2010a的向量内积,即*指令会产生错误的结果。下面陈述具体现象:1.程序源代码(注:运行该程序时需要把den1.mat和kern1.mat这两个matlab数据文件与程序放在同一个文件夹中)clc;clear;load(‘den1.mat’);load(‘kern1.mat’);x=kern;y=d…

    2022年9月24日
    4
  • pycharm提示no python interpreter_pycharm代码运行不了

    pycharm提示no python interpreter_pycharm代码运行不了Pycharm配置:解决方法如下方法一:Pycharm配置环境变量,ProjectInspector确认有Python3.7齿轮栏点Add,选ExistingEnvironment就好然后在Inspector选项找安装目录的Python.exe选择好了之后点击OK,之后选择Makeavaliableforallappliction再点OK就行了New新建一个pythonfile,然后就可以开始写代码了写完之后右键代码选择下面绿色的播放键Run就可以测试.

    2022年8月25日
    9
  • pycharm2021激活码【中文破解版】

    (pycharm2021激活码)这是一篇idea技术相关文章,由全栈君为大家提供,主要知识点是关于2021JetBrains全家桶永久激活码的内容https://javaforall.net/100143.htmlIntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,上面是详细链接哦~9ADCNKZL59-eyJsaWNlb…

    2022年3月22日
    79
  • 数据库:实体关系图(ER图)「建议收藏」

    数据库:实体关系图(ER图)「建议收藏」1,组成元素元素 描述 表示形似 实体 客观存在并可以相互区别的事物 用矩形框,矩形框内写明实体名 属性 实体所具有的一个属性 用椭圆型表示,并用无向边将其与相应的实体连接起来 关系 实体和实体之间以及实体内部的关系 用菱形表示,菱形框内写明联系名,并用无向边分别与有关实体连接起来, 同时在无向边旁边标上联系的类型 2,关系详解一,一对一一对一关系是指对于实体集A与实体集B,A中的每一个实体至多与B中

    2022年6月21日
    98
  • 小程序:matlab解微分方程「建议收藏」

    functionf=ball_trajectory(t,y);g=9.81;pi=3.14159265;air_density=1.20;M=57.5*0.001;D=64.0*0.001;R=D*0.5;A=pi*R*R;Cd=0.507;ratio_Cl_to_S=0.5

    2022年4月16日
    43

发表回复

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

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