导航栏代码例子及注意事项
发布日期:2022-02-06 00:27:09 浏览次数:16 分类:技术文章

本文共 789 字,大约阅读时间需要 2 分钟。

在这里插入图片描述

导航框:


wangzhang
     
   LOGO
   网站首页
  
  • 关于我们

  •   
  • 新闻中心

  •   
  • 产品展示

  •   
  • 客户案例

  •   
  • 项目合作

  •   
  • 给我留言

  •   
  • 人才招聘

  •   
  • 联系我们
  •     

    Css中标签和属性值中内容的修改:

    body{

    margin:0 atuo;padding:0;

    }

    .nav{

    margin:0 auto;width:1240px;height:133px;

    }

    .nav li{

    float:left;list-style: none;width:107px;height:100%;line-height:133px ;text-align:center;font-size: 18px;

    }

    .nav .logo{

    width:363px;height:100%;color:blue;font-size:64px;font-family:microsoft yahei;

    }

    .nav .xuanzhong{

    background-color: blue;font-size: #ffffff;

    }

    结果:

    在这里插入图片描述

    注意:

    Body{}一般修改浏览器默认值

    属性值.nav{}定义属性值里的内容

    属性值中的标签.nav li{}定义标签了的内容

    属性值中的属性值.nav .logo{}和.nav .xuanzhong{}定义了logo属性值中的内容

    转载地址:https://blog.csdn.net/weixin_46182770/article/details/104025133 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

    上一篇:Html引进css的三种方法 相对路径和绝对路径
    下一篇:CMakeLists文件规划学习

    发表评论

    最新留言

    初次前来,多多关照!
    [***.188.9.67]2022年09月29日 00时23分43秒

    关于作者

        喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
    -- 愿君每日到此一游!

    最新文章

    maven 2019-12-25 17:50:56
    Vuex 2019-12-25 17:50:54
    SPA项目开发之JWT 2019-12-25 17:50:54
    SVN 2019-12-25 17:50:54
    通用分页案例的效果 2019-12-25 17:50:55
    JSP自定义标签 2019-12-25 17:50:55
    通用分页2 2019-12-25 17:50:55
    自定义mvc框架1 2019-12-25 17:50:55
    使用vue-ci搭建SPA项目 2019-12-25 17:50:53
    在VMware12.10虚拟机中安装CentOS 7 2019-12-25 17:50:53
    SPA项目开发之登录 2019-12-25 17:50:53
    SPA项目开发之首页导航+左侧菜单 2019-12-25 17:50:53
    SPA项目开发之动态树+数据表格+分页 2019-12-25 17:50:54
    SPA项目开发之CRUD+表单验证 2019-12-25 17:50:54
    使用简单的神经网络实现区分鸢尾花类别 2019-12-25 17:50:53
    NodeJS环境搭建 2019-12-25 17:50:53
    Vue路由 2019-12-25 17:50:53
    哥顶着巨大的、想发财的压力,要开始建站了 2019-12-25 17:50:53
    常见的机器学习算法 2019-12-25 17:50:53
    mathtype6.0部分符号显示为框的解决方法 2019-12-25 17:50:52