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>

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

相关推荐
inxunoffice16 分钟前
批量在多个 PDF 的指定位置插入页,如插入封面、插入尾页
前端·pdf
木木黄木木21 分钟前
HTML5 Canvas绘画板项目实战:打造一个功能丰富的在线画板
前端·html·html5
豆芽81923 分钟前
基于Web的交互式智能成绩管理系统设计
前端·python·信息可视化·数据分析·交互·web·数据可视化
不是鱼23 分钟前
XSS 和 CSRF 为什么值得你的关注?
前端·javascript
顺遂时光26 分钟前
微信小程序——解构赋值与普通赋值
前端·javascript·vue.js
anyeyongzhou28 分钟前
img标签请求浏览器资源携带请求头
前端·vue.js
Captaincc37 分钟前
腾讯云 EdgeOne Pages「MCP Server」正式发布
前端·腾讯·mcp
最新资讯动态1 小时前
想让鸿蒙应用快的“飞起”,来HarmonyOS开发者官网“最佳实践-性能专区”
前端
雾岛LYC听风1 小时前
3. 轴指令(omron 机器自动化控制器)——>MC_GearInPos
前端·数据库·自动化
weixin_443566981 小时前
39-Ajax工作原理
前端·ajax