请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

模板之家 首页 教程频道 查看内容

如何在 HTML 和 CSS 中格式化我的导航栏?

模板之家 2021-7-28 16:54

分享至 : QQ空间
收藏

之前的文章《css技巧:怎么给图片添加蒙版(分享)》中,给大家介绍了怎样使用css图片添加蒙版的方法。下面本篇文章给大家介绍如何在 HTML 和 CSS 中格式化我的导航栏呢,我们一起看怎么做,有需要的朋友可以参考一 ...

之前的文章《css技巧:怎么给图片添加蒙版(分享)》中,给大家介绍了怎样使用css图片添加蒙版的方法。下面本篇文章给大家介绍如何在 HTML 和 CSS 中格式化我的导航栏呢,我们一起看怎么做,有需要的朋友可以参考一下,希望对你们有所助。

在不久前学习了基础知识(并很快忘记了它们)后,几个月前我开始阅读它。我已经开始制作自己的网页以测试和提高我的技能,但是我在让导航栏正确显示时遇到了问题。

我的导航栏的 HTML

代码如下:

<div class="nav">
    <ul class="nav">
        <li class="nav"><a class="nav" href="#">Home</a></li>
        <li class="nav"><a class="nav" href="#">Coffee</a></li>
        <li class="nav"><a class="nav" href="#">Food</a></li>
        <li class="nav"><a class="nav" href="#">Catering</a></li>
        <li class="nav"><a class="nav" href="#">About</a></li>
        <li class="nav"><a class="nav" href="#">Contact</a></li>
    </ul>
</div>
<!--Navigation bar.-->

下面列出了相关元素(div、ul、li 和 a)的 CSS 代码

代码如下:

div{    
    border: 2px;
    border-radius: 3px;
    margin: 0 auto 60 auto;
    padding: 10px;
    width: 980; 
}
/*BASIC DIV ELEMENT.*/

/*LINKS.*/
a{
    color: #545454;
    font-family: lucida grande, lucida sans, sans-serif;
    font-size: 14px;
    text-decoration: none;
}

a:hover, a:active {
    color: #191919;
}
/*LINKS.*/

/*NAV BAR*/
a.nav:link{
    background-color: #D7C5CC;
    color: #191919;
    display: inline-block;
    padding: 15px;
    text-align:center;
    width: 90px;
}

a.nav:hover{
    color: #191919;
    background-color: #EDD9DF;
}

li.nav{
    float: left;
}

ul.nav{
    display: center;
    margin: 0 auto 0 auto;
}
/*NAV BAR*/

在编写 HTML 和 CSS 代码方面,我是一个绝对的初学者,如果做得不好,我深表歉意。

我在两个方面遇到导航栏的问题:

我无法使导航栏的角正确变圆。我之前已将 ul.nav和li.nav更改为“border-radius: 10;” 作为一个属性 - 两者都无济于事。
我无法让导航栏在我的页面上正确居中(我正在 Chrome 中对其进行测试)。每隔一个 div 完美地居中;我试过编辑“显示”和“浮动”属性无效。
我在 Stackoverflow 上搜索了许多类似的帖子,但似乎没有一个答案能得到想要的结果。

推荐学习:Html视频教程

以上就是如何在 HTML 和 CSS 中格式化我的导航栏?的详细内容,更多请关注模板之家(www.mb5.com.cn)其它相关文章!


路过

雷人

握手

鲜花

鸡蛋
来自: 网络收集
文章评论0人参与
热门频道
  • ecshop成人用品商城网站源源码模板 微信小
  • ecshop微信小程序代生成服务 可选购小程序
  • 【可选购小程序】ecshop生鲜食品蔬菜水果特
  • 【可选购小程序】ecshop医药品保健药房网站
  • ecshop百货超市日用品网站 免费生成微信小
  • ecshop办公用品文具耗材设备 免费生成微信
  • 【可选购小程序】ecshop家居家纺床上用品源
  • 【可选购小程序】ecshop户外运动体育用品健
  • ecshop整站数据打包 带数据 适合申请支付、
  • ecshop跨境购海淘微信分销商城网站源码模板
    推荐文章
  • 热门
  • 最新
返回顶部