导航制作总结

最新推荐文章于 2023-07-03 21:56:05 发布

轼同辙

最新推荐文章于 2023-07-03 21:56:05 发布

阅读量371

点赞数

分类专栏： Java前端

本文链接：https://blog.csdn.net/weixin_43633023/article/details/106022900

版权

Java前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

1.导航条可用<nav>标签实现，可以方便搜索引擎解析页面结构

2.一些导航图标或是前端常用图标可在bootstrap中引用，下附引用方法链接：

https://v3.bootcss.com/components/

3.导航条内的元素定位可利用margin、padding实现，如（1）设定<nav>（父元素）的padding；（2）设定子元素的margin

4.实现左右水平布局，可以让内联元素右浮动即可

5.对于较重要的字眼可用<strong>标签修饰，如数字（购物车中商品件数）等

6.要覆盖bootstrap自带的样式，可以用“！important”提高自定义样式的优先级

7.命名选择器时可由选择器的功能、与其绑定的元素的功能或位置来命名，提高代码可读性

以下是制作源代码和效果图：

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<script src="file:\\D:\project\j2se\jQuery\jquery.min.js"></script>
		<link href="file:\\D:\project\j2se\bootStrap\css\bootstrap\3.3.6\bootstrap.min.css" rel="stylesheet">
		<script src="file:\\D:\project\j2se\bootStrap\js\bootstrap\3.3.6\bootstrap.min.js"></script>
		<style>
			body{
				font-size:12px;
				font-family:Arial;
			}
			nav.top{
				padding:5px 227.6px;
				background-color:whitesmoke;
			}
			.redColor{
				color:#C40000 !important;
			}
			nav.top a,span{
				margin:0 10px 0 10px;
				color:#999;
			}
			a:hover{
				color:#C40000;
				text-decoration:none;
			}
		</style>
	</head>
	<body>
		<nav class="top">
			<a href="#">
				<span class="glyphicon glyphicon-home redColor"></span>
				天猫首页
			</a>
			<span>喵，欢迎来天猫</span>
			<a href="#">请登录</a>
			<a href="#">免费注册</a>
			<span class="pull-right">
				<a href="#">我的订单</a>
				<a href="#">
					<span class="glyphicon glyphicon-shopping-cart redColor"></span>
					购物车<strong>0</strong>件
				</a>
			</span>
		</nav>
	</body>
</html>

这是效果图

轼同辙

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
导航制作总结

1.导航条可用<nav>标签实现，可以方便搜索引擎解析页面结构2.一些导航图标或是前端常用图标可在bootstrap中引用，下附引用方法链接：https://v3.bootcss.com/components/3.导航条内的元素定位可利用margin、padding实现，如（1）设定<nav>（父元素）的padding；（2）设定子元素的margin4.实现左右水平布局，可以让内联元素右浮动即可5.对于较重要的字眼可用<strong>标签修饰，如数字（
复制链接

扫一扫