当前位置：首页 > article >正文

html 前端进行浮动布局设置

article 2025/1/9 10:55:42

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			h2{
				text-align: center;/* //将h2标签实现居中表示 */
			}
			.ways{
				position:absolute;/* 绝对定位方式,块级元素独占一行，行内元素则在一行内从左到右排列。 */
				background-color: bisque;
				text-align: center;
				top:50px;
				left:250px;
				padding:20px;/* 内边距,内部填充 */
				margin-right: 30px;/* 外边距,外部边框 */
			}
			.ways_title::before{
				content:"";
				display: inline-block;
				text-decoration: line-through;	/* 在文本中间画一条贯穿线，这条线会穿过文本的中部，从而产生一种文本被划掉的视觉效果 */
				width:100px;
				border-top: 2px solid wheat;/* border - top是 CSS（层叠样式表）中用于设置元素顶部边框的属性 */。
				margin-right: 30px;
			}
			.ways_title::after{
				content:"";
				display: inline-block;/* 几个元素在同一行显示，并且还能设置它们各自的大小和样式 */
				text-decoration: line-through;
				width:100px;
				border-top: 2px solid wheat;
				margin-left: 30px;
			}
			.way{
				float:left;
				margin:20px;
				width:320px;
				border-radius: 20px;
				box-shadow: 4px 4px 4px 4px yellow;/* 用于给元素添加阴影效果,应用块级元素和行内元素 */
				overflow: hidden;
			}
			.way_img{
				width:inherit;//继承父元素
				height:150px;
			}
			.way_title{
				line-height: 50px;
				background-color:cyan;
				font-weight: bold;
			}
		</style>
	</head>
	
	
		<section class="ways">
			<h2 class="ways_title">成长路线</h2>
			<div class="clear-fix">
				<!-- //第一张图 -->
				<a class="way">
					<div class="way_img">
						<img src="../images/ke1.png">
					</div>
					<div class="way_title">前端工程师</div>
				</a>
				<!-- 第二张图 -->
				<a class="way">
					<div class="way_img">
						<img src="../images/ke2.png">
					</div>
					<div class="way_title">java工程师</div>
				</a>
				<!-- 第三张图 -->
				<a class="way">
					<div class="way_img">
						<img src="../images/ke3.png">
					</div>
					<div class="way_title">python工程师</div>
				</a>
				
				
			</div>
		</section>
	</body>
</html>

运行结果发现可以正确显示

导航条代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style>
			header{
				padding: 8px;
				height: 40px;
				background-color: #ffffff;
			}
			.header{
				border: 1px solid;
				border-radius: 2px;
			}
			h1{
				font-size: 20px;
				font-weight:bold;
			}
			.nav-active{
				color:#000000
			}
			.nav_1{
				padding: 8px;
				font-size: 16px;
				color:#888888;
				text-decoration: none;
			}
			.nav_3 a{
				padding:6px 12px;
				display: inline-block;
				font-size: 16px;
				border-radius: 4px;
			}
			
			.nav_4{
				border:1px solid #007bff;
				color:#007bff;
				margin-right: 8px;
				text-decoration: none;
			}
			.nav_4:hover{
				background-color:#007bff;
				color:#ffffff;
			}
			.nav_5{
				border:1px solid #2a8745;
				background-color: #2a8745;
				color:#ffffff;
				text-decoration: none;
			}
			.nav_5:hover{
				background-color: #ffffff;
				color:#2a8745;
			}
			.header-left{
				float:left;
			}
			.header-right{
				float:right;
			}
			.header::after{
				content:"";
				display:block;
				clear:both;
			}
			.header-left .logo{
				
				float:left;
				margin-right:30px;
				line-height:20px;
			
			}
			.header-left .nav{
				float:left;
				margin-right:30px;
				line-height:40px;
			}
			#header-right-unlogined{
				display: inline-block;
			}
			#header-right-unlogined.a{
				padding: 6px 12px;
				display: inline-block;
				box-sizing: border-box;
				border: 3px solid;
				border-radius: 4px;
				font-size: 16px;
			}
			
			
		</style>
	</head>
	<body>
		<header class="header clear-fix">
		<div class="header-left">
		<h1 class="logo">NOC 新云课堂</h1>
		<nav class="nav">
			<a class="nav_1"href="#">首页</a>
			<a class="nav_1"href="#">课堂分类</a>
			<a class="nav_1"href="#">直播课堂</a>
			<a class="nav_1"href="#">阶段测试</a>
		</div>
			</nav>
		<div class="header-right">
			<div id="header-right-unlogined">
			<div class="nav_3">
			<a class="nav_4"href="#">登录</a>
			<a class="nav_5"href="#">注册</a>
			</div>
			</div>
		</div>
		</header>
	</body>
</html>