2023.11.16 | admin | 80次围观
导航栏布局
实现如下导航栏：
首先进行页面需求分析，如图所示导航栏分为三部分，包括标志、导航、用户按钮。为了使结构看起来明显，我们使用色块表示如何将网上下载的网页特效代码添加到自己的网页中，确保结构正确之后再往里面填充内容。
具体步骤如下：
（1） 在页面中引入reset.css文件（前两篇博客里有介绍），清除默认样式。
HTML代码如下：
<link rel="stylesheet" href="css/reset.css" />
（2） 设置向左和向右的浮动属性的CSS公共样式。
CSS代码如下：
/* 公共属性 */
.fl{
float: left;
}
.fr{
float: right;
}
（3） 创建最外层盒子。在页面中创建一个div元素，class名为nav，表示整个导航栏，设置高度和下边框，并添加临时的背景颜色。
HTML代码如下：
<div class="nav clearfix">div>
CSS代码如下：
.nav{
height: 88px;
border-bottom: 2px solid #e8e8e8;
border-top: 100px;
background-color: #fdf5de;
}
（4）在HTML的最外层盒子中创建三个元素，标志与导航向左浮动，用户按钮向右浮动。为了检查他们的位置，设置宽高与背景颜色。
HTML代码如下：
<div class="nav clearfix">
<div class="logo fl">
图片
div>
<div class="main fl">
导航
div>
<div class="user fr">
按钮
div>
div>
CSS代码如下：
.nav{
height: 88px;
border-bottom: 2px solid #e8e8e8;
border-top: 100px;
background-color: #fdf5de;
}
.nav .logo{
margin: 0 0 0 80px;
width: 100px;
height: 88px;
background-color: #f9809f;
}
.nav .main{
margin-left: 60px;
width: 100px;
height: 88px;
background-color: #2fbdbf;
}
.nav .user{
margin: 0 16px 0 60px;
width: 100px;
height: 88px;
background-color: #86d5bf;
}
效果图如下：
（5）在色块中填充详细内容。
HTML代码如下：
<div class="nav clearfix">
<div class="logo fl">
<img src="img/test3.png" alt="" />
div>
<div class="main fl">
<a href="">品牌讯息a>
<a href="">服务指南a>
<a href="">工厂信息a>
<a href="">公司简介a>
<a href="">招聘a>
div>
<div class="user fr">
<a href="" class="fl">联系我们a>
<a href="" class="fl">登录a>
div>
div>
效果图如下：
（6）删除之前为色块临时设置的宽度，由于设置的浮动属性，宽度由子元素撑开。
效果图如下：
（7）使元素垂直居中。给色块添加CSS属性line-height，设置其与height的值相等，这样元素就会垂直居中显示。
CSS代码如下：
line-height: 88px;
效果图如下：
（8）调整细节部分的CSS样式如何将网上下载的网页特效代码添加到自己的网页中，具体见相关代码。
CSS代码如下：
.nav .main a{
margin: 0 12px;
}
.nav .user{
margin: 0 16px 0 60px;
height: 88px;
line-height: 88px;
background-color: #86d5bf;
}
.nav .user a{
font-size: 14px;
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
border-radius: 18px;
margin: 22px 0;
}
.nav .user a:nth-of-type(1){
background-color: #28292a;
margin-right: 20px;
color: #ffffff;
}
.nav .user a:nth-of-type(2){
background-color: #ffd40d;
color: #000000;
}
效果图如下：
（9）删除多余的背景颜色。
最终效果图如下：
完整代码如下：
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>D5title>
<link rel="stylesheet" href="css/reset.css" />
<style>
/* 公共属性 */
.fl{
float: left;
}
.fr{
float: right;
}
.clearfix:after{
content: "";
display: block;
clear: both;
}
.nav{
height: 88px;
border-bottom: 2px solid #e8e8e8;
border-top: 100px;
background-color: #fdf5de;
}
.nav .logo{
margin: 0 0 0 80px;
height: 88px;
line-height: 88px;
}
.nav .main{
margin-left: 60px;
height: 88px;
line-height: 88px;
}
.nav .main a{
margin: 0 12px;
}
.nav .user{
margin: 0 16px 0 60px;
height: 88px;
line-height: 88px;
}
.nav .user a{
font-size: 14px;
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
border-radius: 18px;
margin: 22px 0;
}
.nav .user a:nth-of-type(1){
background-color: #28292a;
margin-right: 20px;
color: #ffffff;
}
.nav .user a:nth-of-type(2){
background-color: #ffd40d;
color: #000000;
}
style>
head>
<body>
<div class="nav clearfix">
<div class="logo fl">
<img src="img/test3.png" alt="" />
div>
<div class="main fl">
<a href="">品牌讯息a>
<a href="">服务指南a>
<a href="">工厂信息a>
<a href="">公司简介a>
<a href="">招聘a>
div>
<div class="user fr">
<a href="" class="fl">联系我们a>
<a href="" class="fl">登录a>
div>
div>
body>
html>
版权声明
本文仅代表作者观点。
本文系作者授权发表，未经许可，不得转载。
发表评论