CSS |
您所在的位置：网站首页 › 怎么制作网页导航栏 › CSS |
CSS
|
文章目录
前言一、结构的布局二、实现过程
1.HTML结构2.CSS样式总结
前言
本文主要介绍了网易云导航栏的制作过程，这个案例中将会运用到CSS中的浮动、绝对定位等相关知识点（这些在以往的文章里有所介绍） 一、结构的布局 示例图
代码如下（示例）： 发现音乐 我的音乐 关注 商城 音乐人 下载客户端 创作者中心 登录 推荐 排行榜 歌单
主播电台
歌手
新碟上歌
2.CSS样式
代码如下（示例）： /* 导航条外部容器 */ .header-nav { width: 100%; height: 70px; background-color: #242424; } .nav-outer { width: 1100px; height: 70px; line-height: 70px; margin: 0 auto; } /* logo区域 */ #logo { float: left; } #logo>a { display: block; width: 157px; height: 69px; text-align: center; background-image: url(./img/topbar.png); background-position: 0px 0px; padding-right: 20px; color: #fff; } /* 导航条中部区域 */ .user-list li { float: left; } .user-list li>a { display: inline-block; padding: 0 19px; color: #ccc; font: 14px Arial, Helvetica, sans-serif; } .user-list li:first-child, .user-list li:first-child>a { background-color: #000000; color: #fff; } .user-list li:hover { background-color: #000000; } .hot { margin-top: 22px; margin-left: -12px; width: 28px; height: 19px; background-image: url(./img/topbar.png); background-position: -190px 0; } /* 右侧搜索框区域 */ .right-list { float: right; } .right-list li { float: left; } .search-wrap { width: 158px; height: 32px; line-height: 32px; background-image: url(./img/topbar.png); background-position: 0 -99px; background-color: #fff; border-radius: 32px; margin-top: 19px; } input { position: relative; width: 128px; height: 16px; outline: none; margin-left: 27px; top: -2px; border: none; } input::-webkit-input-placeholder { color: #9b9b9b; font: 12px Arial, Helvetica, sans-serif; } input:focus::-webkit-input-placeholder { content: '' } #maker { display: block; width: 90px; height: 32px; font-size: 12px; font: 12px Arial, Helvetica, sans-serif; margin: 19px 0 0 12px; box-sizing: border-box; padding-left: 16px; padding-top: 6px; border: 1px solid #4F4F4F; background-position: 0 -140px; color: #ccc; border-radius: 20px } #maker:hover { border-color: #ffffff; color: #ffffff; } .login { position: relative; top: -22px; width: 50px; height: 70px; margin: 19px 0 0 20px; padding: 0 22px 0 0; } .login>a { color: #787878; font: 12px Arial, Helvetica, sans-serif; } .login:hover a { text-decoration: underline; color: #999999; } /* 红色导航栏区域 */ .red-nav { width: 100%; height: 35px; background-color: #c20c0c; } .inner { width: 920px; height: 34px; margin: 0 auto; padding-left: 180px; } .inner li { float: left; height: 34px; } .inner li>a { display: block; height: 16px; line-height: 17px; font: 12px Arial, Helvetica, sans-serif; color: #ffffff; margin: 5px 17px 0px; padding: 3px 13px 3px 13px; } .inner li:first-of-type a { background-color: #9b0909; border-radius: 20px; } .inner li:hover a { background-color: #9b0909; border-radius: 20px; } .top-icon { width: 8px; height: 8px; position: relative; left: 54px; top: -23px; } /* 轮播图区域样式 */ .outer { position: relative; width: 100%; height: 285px; } .swiper-inner { position: relative; width: 984px; height: 285px; margin: 0 auto; } .swiper { width: 100%; height: 285px; overflow: hidden; } .swiper-wrapper>div>img { width: 730px; height: 285px; } .download-app { position: absolute; top: 0; left: 730px; width: 254px; height: 285px; background-image: url(./img/download.png); z-index: 20; } .download-app p { margin-top: 255px; color: #8d8d8d; text-align: center; font: 12px Arial, Helvetica, sans-serif; } 总结以上就是今日的分享，希望可以帮助到你吧，另外，祝福看到这篇文章的人今天会有一个好心情（祝好运哦~） |
【本文地址】
今日新闻 |
推荐新闻 |