Web全栈~14.购物车案例(导航栏)

最新推荐文章于 2023-10-03 00:20:51 发布

算法爱好者丶

最新推荐文章于 2023-10-03 00:20:51 发布

阅读量9.4k

点赞数 30

分类专栏： web 文章标签： html5

本文链接：https://blog.csdn.net/qq_41424688/article/details/112660430

版权

这篇博客介绍了如何使用HTML和CSS创建一个购物车的导航栏，包括左右两个部分。首先进行了样式初始化，然后逐步设置了导航栏的高度、颜色、文字样式以及元素的浮动和间距。通过浮动和行高的设定，实现了导航栏中元素的平行排列。最后，对重复的CSS样式进行了合并，以提高代码的可维护性。整个过程展示了基础的网页布局技巧。

摘要由CSDN通过智能技术生成

Web基本笔记~14.购物车案例(导航栏)

上一期

样式初始化

body,div,h1,h2,h3,h4,h5,h6,li,ol,ul{
   margin: 0px; padding: 0px;}
body{
   text-align: center;font-size:14px;}
a{
   text-decoration: none;}
li{
   list-style: none;}

头部导航栏初始

<!--	导航开始   	-->
<html>  
    <head>  
        <meta charset="utf-8">  
        <title>title</title>  
		<!--	      样式初始化	     	-->
		<link href="./css/reset.css" type="text/css" rel="stylesheet"/>
		<!--	  主要CSS		-->
		<link href="./css/demo.css"  type="text/css" rel="stylesheet"/>
	</head>  
    <body>  
		<!--	导航开始   	-->
		<div class="nav">
			<div class="warp">
				<!--	ul标签比较适合做导航栏	-->
				<ul class="nav_ul">
					<li><a href="">商城首页</a></li>
					<li><a href="">配送至 : 北京</a></li>
				</ul>
			</div>
		</div>