<!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>
运行结果发现可以正确显示