HTML导航CSS样式详解
2020-07-28 09:11
281 查看
HTML导航CSS样式详解
导航的最终样式:
- 可以看到我们的导航栏分为左边logo和右边的导航(字),两边距离网页边框相同,背景为灰色,我们可以简单分为以下模块:
我们将导航栏作为一个大盒子,里面嵌套一个盒子让它居中,再绿色盒子里面放入一个小盒子分别装logo图片和一个无序列表ul装文字导航。 - 代码结构如下:
<nav class="clear"> <div id="logo"> <img src="../day05/web-img/logo.png" alt=""> </div> <ul> <li><a href="">首页</a></li> <li><a href="">产品</a></li> <li><a href="">服务</a></li> <li><a href="">11</a></li> <li><a href="">22</a></li> </ul> </nav>
3.CSS样式:
首先我们将nav背景色改成灰色,两边留白;padding为内边距。
nav{ /*让两边留白部分相同,为15%*/ padding: 0 15%; background-color: #797777; }
让logo和ul分别左右浮动:
#logo img{ float: left; /*font-size: 0;*/ height: 65px; } nav>ul{ float: right; }
改变ul内部li元素的样式;list-style是去掉默认样式;float是为了让li元素横着向左排列。
nav>ul>li{ list-style: none; float: left; /*list-style: none;*/ width: 85px; height: 65px; /*字体垂直居中*/ line-height: 65px; /*字体水平居中*/ text-align: center; }
有不懂得留言~
相关文章推荐
- HTML之Table简约时尚CSS样式 + HTML中checkbox元素【全选】或【取消全选】、或得到选中个数全案例使用详解
- Html5+Css实战前端小米官网左侧导航(思路+详解+素材)
- html之marquee详解
- Java内部类(InnerClass)详解(转http://www.exam8.com/computer/Java/zonghe/200707/659749.html)
- HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth之完全详解(
- Css样式详解--其他样式【已经熟记,形成文本】
- 美团网官网最新底部导航页面制作及CSS样式设计
- Css样式详解--框模型
- 15款HTML5/CSS3案例展示,导航,日历,钟表。
- web前端之html图片操作详解从零开始(三)----img标签
- Chrome开发工具Elements面板(编辑DOM和CSS样式)详解
- 【转】Html表头Meta http-equiv属性详解
- B站楼梯导航待更新(只使用HTML和CSS)
- HTML编辑器FCKeditor使用详解
- HTML编辑器FCKeditor使用详解
- css样式 怎么引入html中
- html的一些标准css样式
- 在Html中使用Requirejs进行模块化开发实例详解
- HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth到底指的哪到哪的距离之完全详解
- HTML渲染过程详解