html+css网页开发之头部导航条（logo、导航栏、搜索框）

页面布局整体思路：

确定页面的版心（可视区），测量可知。
分析页面中的行模块，以及每个行模块中的列模块。
一行中列模块常用浮动布局，先确定每个列的大小，之后确定列的位置。
制作HTML结构。遵循先有结构，后有样式的原则。

效果图如下：

1号是版心盒子header 1200*42的盒子水平居中对齐
版心盒子内包含2号盒子logo
版心盒子内包含3号盒子nav文字导航栏
版心盒子内包含4号盒子search搜索框
版心盒子内包含5号盒子user个人信息
注意4个盒子都必须是浮动

导航栏注意点：

nav文字导航栏不直接用链接a，而是用无序列表<li>包含链接（li+a），再在a中写文本

li+a语义更清晰，更有条例
如果直接用a，搜索引擎容易识别为有堆砌关键字嫌疑（故意堆砌关键字容易被搜索引擎有降权风险），从而影响网站排名。
让导航栏一行显示，给li加浮动。因为a本身是行内元素，可以一行显示，但li是块级元素，影响了a。

nav文字导航栏不指定宽度，而给链接a指定左右padding撑开盒子

因为每个链接的文字个数不同。
将来可以继续添加文字。

把CSS布局页面引入HTML中，代码如下

<link rel="stylesheet" href="style.css">

确定版心

页面的版心是1200px，每个版心都要水平居中对齐，可以定义版心为公共类：

.w{width：1200px;margin:auto;
}

index.html

<head><link rel="stylesheet" href="style.css">
</head>
<body><div class="header w"><!-- 标志模块 --><div class="logo"><img src="data:images/logo.png"></div><!-- 文字导航栏模块 --><div class="nav"><ul><li><a href="#">首页</a></li><li><a href="#">课程</a></li><li><a href="#">职业规划</a></li></ul></div><!-- 搜索模块 --><div class="search"><input type="text" value="输入关键词" ></input><button></button></div><!-- 用户模块 --><div class="user"><img src="data:images/user.png" style="vertical-align: middle"> qq-lilei</div></div>
</body>

style.css

    *{margin: 0;padding: 0;}.w{width:1200px;margin: auto;}li{list-style: none;}a{text-decroation: none;}.header{height: 42px;margin:30px auto;}.logo{float: left;width: 198px;height: 42px;}.nav{float: left;margin-left: 60px;}.nav ul li{float: left;margin: 0 15px;}.nave ul li a{display: block;height: 42px;padding: 0 10px;line-height: 42px;color: black;}.nave ul li a: hover{border-bottom: 2px solid #00a4ff;}.search{float: left;width: 412px;height: 42px;background-color: #00a4ff;margin-left: 50px; }.search input{float: left;width: 345px;height: 40px;border: 1px solid #00a4ff;border-right: 0;color: #bfbfbf;font-size: 14px;padding-left: 15px;}.search button{float: left;width: 50px;height: 42px;/* 去掉按钮默认边框 */border: 0;background: url(images/btn.png);.user{float: left;}

html+css网页开发之头部导航条（logo、导航栏、搜索框）相关推荐

纯CSS实现下拉菜单及下拉容器等（纯CSS实现导航条及导航下拉容器）
原文:纯CSS实现下拉菜单及下拉容器等(纯CSS实现导航条及导航下拉容器) 虽然网上类似甚至相同的案例有很多,但是我还是写下,以记下笔记,也可供大家参考希望大家可以指导批评~~ 首先我们以列表ul ...
php自定义文件后缀名,显示文件扩展名显示文件后缀名设置篇-DIV CSS网页开发准备...
显示扩展名-DIV CSS网页开发准备一.为什么需要显示扩展名? - TOP 因为很多时候我们需要辨别文件的扩展名如是.txt..js..css..php..htm..asp..aspx等文 ...
html鼠标滑过导航条展开导航条,JS+CSS实现鼠标滑过时动态翻滚的导航条效果
本文实例讲述了JS+CSS实现鼠标滑过时动态翻滚的导航条效果.分享给大家供大家参考.具体如下: 这是一款鼠标悬停时动态翻滚的导航条,注意这里用了两个背景图,请等待网页加载完成或多刷新几次,这个是使用J ...
HTML与CSS网页开发基础快速入门
目录一.HTML文档结构二.HTML常用标记三.表格标记四.表单标记五.超链接与图片标记六.HTML5新增内容七.CSS样式表一.HTML文档结构 < html >标记是 ...
满屋花网页代码_成为更好的程序猿！2020年给网页开发人员的32条建议
全文共3315字,预计学习时长10分钟来源:Pexels 2019年已经过去了,对开发人员来说是充满挑战和机遇的一年.开发人员们学习和掌握了很多--像React.Vue.Angular和Svelte ...
iOS 导航控制器、导航条、导航项、控制器的关系
常见的APP的页面结构,分为两个横向和纵向两个维度,最为经典的就是横向维度采用UITabBarController,纵向维度采用UINavigationController.当然,横向维度还可以使用U ...
html+css网页开发实战——1、头部背景和文字的制作
网页成品图: 一. 自己动手实践: 首先,把网页分为三大部分,定义了三个div,class分别为header,center,footer.然后在定义它们里面的div.代码如下: <!DOCTYP ...
html鼠标滑过导航条展开导航条,jquery css实现鼠标滑过导航菜单栏动画效果
对于导航栏的实现对于前端人员来说再简单不过了,但是如何让我们的导航看起来生动,给用户一种很高大上的感觉,却需要我们好好设计一下.今天我给大家带来的是我自己在项目中用到的一个例子,当我们鼠标滑过导航栏时 ...
amazeui学习笔记--css（常用组件10）--导航条Topbar
amazeui学习笔记--css(常用组件10)--导航条Topbar 一.总结 1. 导航条:就是页面最顶端的导航条:在容器上添加 .am-topbar class,然后按照示例组织所需内容.< ...
前端基础之《Bootstrap（8）—CSS组件_导航条》
一.导航条 1.nav标签:灰色小条 <nav class="navbar navbar-default"></nav> 2.头部和折叠小按钮(.navba ...

html+css网页开发之头部导航条（logo、导航栏、搜索框）

html+css网页开发之头部导航条（logo、导航栏、搜索框）相关推荐

最新文章

热门文章

html+css网页开发 之 头部导航条（logo、导航栏、搜索框）

html+css网页开发 之 头部导航条（logo、导航栏、搜索框）相关推荐

最新文章

热门文章

html+css网页开发之头部导航条（logo、导航栏、搜索框）

html+css网页开发之头部导航条（logo、导航栏、搜索框）相关推荐