前端笔记HTML5+CSS3——导航栏navigator

文章目录

    • 导航栏一
    • 导航栏二
    • 导航栏三
    • 导航栏四

导航栏一


<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
		<style type="text/css">
			body,div,ul,li{
      
				margin: 0;
				padding: 0;
			}
			#nav{
      /*设置最外面的div属性*/
				width: 960px;/*宽*/
				height: 35px;/*高*/
				background-color: #E7E7E7;/*背景颜色*/
				margin: 0 auto;/*div对齐方式居中*/
				margin-top: 30px;/*上边距*/
			}
			#nav ul{
      /*设置大框架div里面ul标签的属性*/
				width: 960px;/*宽*/
				height: 35px;/*高*/
			}
			#nav ul li{
      /*设置ul里面的li标签的属性*/
				float: left;/*左浮动*/
				list-style: none;/*去掉圆点*/
				/*width: 100px;*/
				background-color: #E7E7E7;
				height: 35px;
				text-align: center;/*水平居中*/
				line-height: 35px;/*垂直居中*/
				/*padding: 0 10px;/* 上下  左右*/
				/*border: 1px solid #000; /*边框*/
			}
			#nav ul li a{
      /*设置li里面a标签的属性*/
				font-size: 14px;/*大小*/
				color: #8790A1;
				text-decoration: none;/*去掉超链接下划线*/
				display: block;/*内联元素变为块元素*/
				float:left;
				height: 35px;
				padding: 0 10px;
			}
			#nav ul li a:hover{
      /*设置a标签的鼠标触碰效果,鼠标放上去出现效果*/
				background-color: #85CE02;
				color: #ffffff;
				font-size: 15px;
			}
		style>
	head>
	<body>
		<div id="nav">
			
			<ul>  
				<li><a href="#">阿里巴巴a>li>
				<li><a href="#">腾讯a>li>
				<li><a href="#">百度a>li>
				<li><a href="#">小米a>li>
				<li><a href="#">今日头条a>li>
				<li><a href="#">微软a>li>
			ul>
		div>
	body>
html>

运行结果
前端笔记HTML5+CSS3——导航栏navigator_第1张图片

导航栏二


<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
		<style type="text/css">
			body,div,ul,li{
      
				margin: 0;
				padding: 0;
			}
			#nav{
      
				width: 960px;
				height: 35px;
				background-color: #E7E7E7;
				margin: 0 auto;/*居中*/
				margin-top: 30px;
			}
			#nav ul{
      
				width: 960px;
				height: 35px;
				
			}
			#nav ul li{
      
				float: left;
				list-style: none;/*去掉圆点*/
				/*background-color: #E7E7E7;*/
				background-image: url(img/nav_back2.jpg);
				height: 35px;
				text-align: center;/*水平居中*/
				line-height: 35px;/*垂直居中*/
			}
			#nav ul li a{
      
				font-size: 14px;/*大小*/
				color: #8790A1;
				text-decoration: none;/*去掉超链接下划线*/
				display: block;/*变为块元素*/
				float:left;
				height: 35px;
				padding: 0 10px;
			}
			#nav ul li a:hover{
      /*鼠标放上去出现效果*/
				background-color: #646464;
				color: #ffffff;
				font-size: 15px;
			}
		style>
	head>
	<body>
		<div id="nav">
			
			<ul>  
				<li><a href="#">阿里巴巴a>li>
				<li><a href="#">腾讯a>li>
				<li><a href="#">百度a>li>
				<li><a href="#">小米a>li>
				<li><a href="#">今日头条a>li>
				<li><a href="#">微软a>li>
			ul>
		div>
	body>
html>

运行结果
在这里插入图片描述

导航栏三


<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
		<style type="text/css">
			body,div,ul,li{
      
				margin: 0;
				padding: 0;
			}
			#nav{
      
				width: 960px;
				height: 35px;
				background-color: #E7E7E7;
				margin: 0 auto;/*居中*/
				margin-top: 30px;
			}
			#nav ul{
      
				width: 960px;
				height: 35px;
				
			}
			#nav ul li{
      
				float: left;
				list-style: none;/*去掉圆点*/
				background-color: #646464;
				/*background-image: url(img/nav_back2.jpg);*/
				height: 35px;
				text-align: center;/*水平居中*/
				line-height: 35px;/*垂直居中*/
				margin-right: 1px;
			}
			#nav ul li a{
      
				font-size: 14px;/*大小*/
				color: #FFF;
				text-decoration: none;/*去掉超链接下划线*/
				display: block;/*变为块元素*/
				float:left;
				height: 35px;
				padding: 0 10px;
			}
			#nav ul li a:hover{
      /*鼠标放上去出现效果*/
				background-color: #E7E7E7;
				color: #8790A1;
				font-size: 15px;
			}
		style>
	head>
	<body>
		<div id="nav">
			
			<ul>  
				<li><a href="#">阿里巴巴a>li>
				<li><a href="#">腾讯a>li>
				<li><a href="#">百度a>li>
				<li><a href="#">小米a>li>
				<li><a href="#">今日头条a>li>
				<li><a href="#">微软a>li>
			ul>
		div>
	body>
html>

运行结果
在这里插入图片描述

导航栏四


<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
		<style type="text/css">
			body,div,ul,li{
      
				margin: 0;
				padding: 0;
			}
			#nav{
      
				width: 960px;
				height: 35px;
				background-color: #E7E7E7;
				margin: 0 auto;/*居中*/
				margin-top: 30px;
				border-radius: 5px;
			}
			#nav ul{
      
				width: 960px;
				height: 35px;
				border-radius: 5px;
			}
			#nav ul li{
      
				float: left;
				list-style: none;/*去掉圆点*/
				background-color: #E7E7E7;
				/*background-image: url(img/nav_back2.jpg);*/
				height: 35px;
				text-align: center;/*水平居中*/
				line-height: 35px;/*垂直居中*/
				margin-right: 1px;
			}
			#nav ul li a{
      
				font-size: 14px;/*大小*/
				color: #8790A1;
				text-decoration: none;/*去掉超链接下划线*/
				display: block;/*变为块元素*/
				float:left;
				height: 35px;
				padding: 0 10px;
			}
			#nav ul li a:hover{
      /*鼠标放上去出现效果*/
				background-color: #85CE02;
				color: #FFF;
				font-size: 15px;
				border-radius: 5px;/*圆角*/
			}
		style>
	head>
	<body>
		<div id="nav">
			
			<ul>  
				<li><a href="#">阿里巴巴a>li>
				<li><a href="#">腾讯a>li>
				<li><a href="#">百度a>li>
				<li><a href="#">小米a>li>
				<li><a href="#">今日头条a>li>
				<li><a href="#">微软a>li>
			ul>
		div>
	body>
html>

运行结果
在这里插入图片描述

你可能感兴趣的:(#,HTML+CSS,css3,html5)