8.6 百度首页编写-导航栏

看到百度首页，首先对网页内容进行大致的分类，一般网页都可分为导航栏，页面主题，页脚，页面主题有根据其内容继续细分。

大致的分类：

    <body> <!-- 百度导航列表 --><div class="header-box"> <!-- 页面导航栏 --><div class="search"> <!-- 页面内容 --><div class="footer"> <!-- 页面底部 --> </div></body>

碰到的错误:使用floa方法但导航栏不在同一行内：

原因：惯性思维，对ul 和li使用浮动方法，但由于兄弟元素拥有高度，无法并到同一行。

<body> <!-- 百度导航列表 --><div class="header-box"> <!-- 页面头部，导航栏 --><div class="header-news"><div>杭州</div></div><div class="header-contain"><div><ul class="header-titles ls"><li>新闻 </li><li>hao123</li><li>地图</li><li>视频 </li></ul></div></div>  </div>

更正：互换左右标题栏的先后顺序。

<body> <!-- 百度导航列表 --><div class="header-box"> <!-- 页面头部，导航栏 --><div class="header-contain"><div><ul class="header-titles ls"><li>新闻 </li><li>hao123</li><li>地图</li><li>视频 </li></ul></div></div><div class="header-news"><div>杭州</div></div></div>

8.6 百度首页编写-导航栏相关推荐

前端之路——第五篇：1:1还原知乎首页顶层导航栏！
今天!我们来1比1还原知乎首页的导航栏. 其实要我自己做,有点虚的.老师还是细心的做了一遍给我看. 废话不多说,看下图!你喜欢那个多点?猜下那个是正品,那个是A货! 很明显,都是好看的一个导航栏. 今 ...
仿写小米网站首页顶部导航栏部分
说明: 1.由于本人只学习了部分html和css,所以本文没有涉及到js部分. 2.本文并没有实现小米官网首页的全部功能,还存在很多问题.如果以后技能提升,会继续更新实现未完成的功能. 3.这个练习会 ...
仿写小米网站首页产品导航栏
说明: 1.由于本人只学习了部分html和css,所以本文没有涉及到js部分. 2.本文并没有实现小米官网首页的全部功能,还存在很多问题.如果以后技能提升,会继续更新实现未完成的功能. 3.这个练习会 ...
html复习第六天京东首页布局(导航栏/左侧)
PS:为了2像素重改了半天~强迫症的痛~ 项目文件: index.html images |–reset.css |–index.css index.html代码: <!DOCTYPE html ...
模仿淘宝首页横向导航栏
@TOC在这里插入代码片 <nav class="w"><div class="nav-scroll"><!-- 列表信息 --& ...
淘宝首页左侧导航栏源代码
需要源码的朋友请Q我:
小米官网竖直导航栏html,演示：小米首页纵向导航栏特效(上)
课程目标: 本季课程引入了CSS3众多功能中的新特性,让设计和开发人员能够轻松的创作出各种精美的界面效果.整合 HTML5 & CSS3,有的是网站开发中常用的.实用的功能,有的是先进的 We ...
使用CSS模仿小米首页导航栏
仿小米首页左侧导航栏(纯css) 两大部分左侧灰色部分先上代码快捷键小技巧 CSS 右侧部分 CSS 页面元素隐藏总结两大部分首先我们先看看小米首页左侧导航栏的样子首先是左侧灰色部分,不 ...
Python Web前端实战案例——电商网站商品菜单导航栏
jQuery是一个快速.小巧.轻量级的.写的少.做的多.功能丰富的 JavaScript 库,是目前最流行的 JS 框架.利用它可以帮我们快速实现一些炫酷的效果. 目录 1 原理先知 2 思路概要 3 ...
【小程序自定义组件，冒泡，自定义导航栏，页面栈】
自定义组件在根目录新建一个components的文件夹----新建一个文件夹post----新建一个compont文件也叫post 创建完之后 post.json就自动配置好了 {"com ...

8.6 百度首页编写-导航栏

8.6 百度首页编写-导航栏相关推荐

最新文章

热门文章