练习 | div ul li 导航栏目标50个+分析

快乐的高兴的学习代码中

已于 2023-02-10 21:04:05 修改

阅读量1.7k

点赞数 4

分类专栏：练习文章标签： css

于 2021-10-12 14:54:51 首次发布

本文链接：https://blog.csdn.net/A123ppleQueen/article/details/120722836

版权

第一大类

初始情况，一个div里包括了ul--4个li ,div背景色蓝色，li背景色绿色，去掉了li自带的符号，li进行了浮动，现在以它为目标，发散成多种导航样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		li{
			list-style: none;
			float: left;
			background-color: #008000;
		}
		div{
			background-color: #4169E1;
			width: 100%;
			height: 30px;
		}
		</style>
	</head>
	<body>
		<div>
			<ul>
				<li>不想上班</li>
				<li>想有工资</li>
				<li>一夜暴富</li>
				<li>我的梦想</li>
			</ul>
		</div>
	</body>
</html>

1. 4个li平分占据整个div

思路：

陷阱：这里有几个问题需要思考 ①为什么是padding-left：0 生效了。而margin-left:0不生效。

②为什么是li:25%不是ul。③li line-height和div行高一样为什么就ok。④图一图二的差别是什么

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		li{
			list-style: none;
			float: left;
			background-color: #008000;
			width: 25%;
			line-height:30px ;
		}
		div{
			background-color: #4169E1;
			width: 100%;
			height: 30px;
		}
		ul{
		padding-left: 0;
		}
		</style>
	</head>
	<body>
		<div>
			<ul>
				<li>不想上班</li>
				<li>想有工资</li>
				<li>一夜暴富</li>
				<li>我的梦想</li>
			</ul>
		</div>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		li{
			/* 图二代码加了一个文字居中 */
			list-style: none;
			float: left;
			background-color: #008000;
			width: 25%;
			line-height:30px ;
			/* border:1px solid #FF4500; */
			/* box-sizing: border-box; */
			text-align: center;
		}
		div{
			background-color: #4169E1;
			width: 100%;
			height: 30px;
		}
		ul{
		padding: 0;
		}
		</style>
	</head>
	<body>
		<div>
			<ul>
				<li>不想上班</li>
				<li>想有工资</li>
				<li>一夜暴富</li>
				<li>我的梦想</li>
			</ul>
		</div>
	</body>
</html>

2.4个li平分占据整个div 百分比问题

百分比是流式布局

第二大类

div ul 背景图片

背景图片和ul大小如何一致：背景图片宽度-40就是ul的宽度了。

背景图片大小通过background-size来设置

不要设置*{margin:0,padding:0},不然，ul li的那个符号标点会少一排

下面ul li成为两列是浮动，ul宽度是li的两倍

那个符号图标可以通过list-style-image换成自已想要的样式，不过我没找到满意的图标，就没做

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		div{
		    background: url(31.png) no-repeat ;
		    background-size:200px 300px ;
		    width:300px;
		    height:600px;
		}
		ul{
		   background-color: #8A2BE2;
		   width:160px;
		   margin-top: 220px;
		   height: 120px;
		   list-style: none;
		}
		li{
		  width: 80px;
		  float: left;
		
		}
		.b1{
		   color: white;
		}
		</style>
	</head>
	<body>
		<div>
			 <span class="b1">线路</span>
			    <ul id="list">
			    <li><a href="#" >123</a></li>
			    <li><a href="#" >456</a></li>
			    <li><a href="#" >789</a></li>
			    <li><a href="#" >789456</a></li>
			    <li><a href="#" >234</a></li>
			    <li><a href="#">345</a></li>
			    <li><a href="#">458</a></li>
			    <li><a href="#">963</a></li>
			    <li><a href="#">523</a></li>
			    <li><a href="#">5268</a></li> 
			    </ul>
		</div>
	</body>
</html>

ul下直接变成两行

原理就是ul是li的两倍就行，li在左浮动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		    ul{
		      background-color: #8A2BE2;
		      width:800px;
			  list-style: none;
			  text-decoration: none;
		    }
		   li{
		      background-color: #FF1493;
		      width:400px;
		      float: left;
		    }
		</style>
	</head>
	<body>
		<ul id="list">
		    <li><a href="#" >123</a></li>
		    <li><a href="#" >456</a></li>
		    <li><a href="#" >789</a></li>
		    <li><a href="#" >789456</a></li>
		    <li><a href="#" >234</a></li>
		    <li><a href="#">345</a></li>
		    <li><a href="#">458</a></li>
		    <li><a href="#">963</a></li>
		    <li><a href="#">523</a></li>
		    <li><a href="#">5268</a></li>
		</ul>
	</body>
</html>

重新分类

uli自带padding

所以是否加ul{padding:0}决定了子项是否紧挨着左边

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		ul{
			list-style:non

最低0.47元/天解锁文章

快乐的高兴的学习代码中

关注

4
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
练习 | div ul li 导航栏目标50个+分析

第一大类初始情况，一个div里包括了ul--4个li ,div背景色蓝色，li背景色绿色，去掉了li自带的符号，li进行了浮动，现在以它为目标，发散成多种导航样式<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> li{ list-style: none; float: l..
复制链接

扫一扫