html 前端进行浮动布局设置

html 复制代码
<!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>

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

导航条代码实现

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>

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

相关推荐
IT_陈寒11 分钟前
Java性能优化:从这8个关键指标开始,让你的应用提速50%
前端·人工智能·后端
天生我材必有用_吴用13 分钟前
Vue3+Node.js 实现大文件上传:断点续传、秒传、分片上传完整教程(含源码)
前端
摸鱼的春哥29 分钟前
前端程序员最讨厌的10件事
前端·javascript·后端
牧羊狼的狼5 小时前
React 中的 HOC 和 Hooks
前端·javascript·react.js·hooks·高阶组件·hoc
知识分享小能手6 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
魔云连洲6 小时前
深入解析:Vue与React的异步批处理更新机制
前端·vue.js·react.js
mCell6 小时前
JavaScript 的多线程能力:Worker
前端·javascript·浏览器
超级无敌攻城狮8 小时前
3 分钟学会!波浪文字动画超详细教程,从 0 到 1 实现「思考中 / 加载中」高级效果
前端
excel9 小时前
用 TensorFlow.js Node 实现猫图像识别(教学版逐步分解)
前端
gnip9 小时前
JavaScript事件流
前端·javascript