使用css和html制作导航栏_导航栏html代码-优快云博客

本文链接：https://blog.youkuaiyun.com/maoqiwei/article/details/143477076

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			#m{
				background-color: antiquewhite;
				width: 100%;
				height: 50px;
			}
			#i{
				float: left;
				width: 100px;
				height: 50px;
				line-height: 50px;
				text-align: center;
				color: black;
				position: relative;
			}
			#i:hover{
				background-color: aqua;
			}
			#c{
				width: 720px;
				margin: auto;
			}
			#d{
				background-color: aqua;
				display: none;
				position: absolute;
			}
			#i:hover>#d{
				display: block;
				width: 100px;
				
			}	
		</style>
	</head>
	<body>
		<div id='m'>
			<div id="c">
				<div id="i">原神
					<div id="d">
						<div>下载</div>
						<div>运行</div>
					</div>	
				</div>
				<div id="i">崩坏3
					<div id="d">
						<div>下载</div>
						<div>运行</div>
					</div>
				</div>
				<div id="i">星铁
					<div id="d">
						<div>下载</div>
						<div>运行</div>
					</div>
				</div>
				<div id="i">第五人格
					<div id="d">
						<div>下载</div>
						<div>运行</div>
					</div>
				</div>
				<div id="i">千恋万花
					<div id="d">
						<div>下载</div>
						<div>运行</div>
					</div>
				</div>
				<div id="i">魔女的夜宴
					<div id="d">
						<div>下载</div>
						<div>运行</div>
					</div>
				</div>
				
			</div>
		</div>
	</body>
</html>

效果

相关参数介绍

文本相关属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div {
				width: 150px;
				height: 150px;
				border: 5px solid red;
				/* 字体大小 */
				font-size: 20px;
				/* 字体粗细 */
				font-weight: 100;
				/* 字体类型 */
				font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
				/* 字体风格 */
				font-style: italic;

				/* 文字布局 */
				text-align: left;
				/* 字体颜色 */
				color: green;
				/* 设置文字划线 */
				/* text-decoration: underline; */
				
				/* 隐藏超出部分 */
				overflow: hidden;
				/* 不能完整显示的部分用省略号代替 */
				text-overflow: ellipsis;
				
				/* 第一个参数控制 阴影在 x轴上的偏移量 */
				/* 第一个参数控制 阴影在 y轴上的偏移量 */ 
				/* 第三个参数用来控制 阴影的模糊度 */
				/* 第四个参数控制阴影的颜色 */
				/* text-shadow: 2px 2px 2px purple,
				-2px -2px 2px red,
				-2px 2px 2px green,
				2px -2px 2px blue; */
				
				/* 标签的阴影 */
				/* box-shadow: 5px 5px 2px purple,
				-5px -5px 2px green; */
				
				/* 设置段落的缩进 */
				text-indent: 100px;
			}
		</style>
	</head>
	<body>
		<div>鲲>鲲>鲲>鲲>鲲>鲲>鲲</div>
	</body>
</html>

定位参数


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			.parent {
				width: 100px;
				height: 100px;
				border: 5px solid blue;
				text-align: center;
				/* line-height: 100px; */
				/* position: fixed; */
				/* 当页面是固定定位 绝对定位的时候 可以使用 
				left right top bottom 属性 表示标签距离页面的长度*/
				/* top: 100px;
				left: 100px; */

			}

			/* 当使用绝对定位的时候，此时标签不在受dom的拘束，它可以漂浮在整个页面布局之上 */
			/* 当使用绝对定位时要：子绝父相 */
			#child {
				width: 100px;
				height: 100px;
				border: 1px solid red;
				position: absolute;
				display: none;
				/* top: 200px;
				left: 200px; */
			}

			#second_div:hover>div {
				display: block;
				top: 0px;
				left: 105px;
				position: relative;
			}
		</style>
	</head>
	<body>
		<div class="parent"> 上边的div</div>
		<div id="second_div" class="parent">
			<div id="child">
				12312321
			</div>
		</div>
		<div class="parent"> 下边的div</div>

	</body>
</html>