html 前端进行浮动布局设置

数据人与超自然意识  论坛元老 | 2025-1-9 10:30:31 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 1022|帖子 1022|积分 3066

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要 登录 才可以下载或查看，没有账号？立即注册

x
  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8">
  5.                 <title></title>
  6.                 <style>
  7.                         h2{
  8.                                 text-align: center;/* //将h2标签实现居中表示 */
  9.                         }
  10.                         .ways{
  11.                                 position:absolute;/* 绝对定位方式,块级元素独占一行，行内元素则在一行内从左到右排列。 */
  12.                                 background-color: bisque;
  13.                                 text-align: center;
  14.                                 top:50px;
  15.                                 left:250px;
  16.                                 padding:20px;/* 内边距,内部填充 */
  17.                                 margin-right: 30px;/* 外边距,外部边框 */
  18.                         }
  19.                         .ways_title::before{
  20.                                 content:"";
  21.                                 display: inline-block;
  22.                                 text-decoration: line-through;        /* 在文本中间画一条贯穿线，这条线会穿过文本的中部，从而产生一种文本被划掉的视觉效果 */
  23.                                 width:100px;
  24.                                 border-top: 2px solid wheat;/* border - top是 CSS（层叠样式表）中用于设置元素顶部边框的属性 */。
  25.                                 margin-right: 30px;
  26.                         }
  27.                         .ways_title::after{
  28.                                 content:"";
  29.                                 display: inline-block;/* 几个元素在同一行显示，并且还能设置它们各自的大小和样式 */
  30.                                 text-decoration: line-through;
  31.                                 width:100px;
  32.                                 border-top: 2px solid wheat;
  33.                                 margin-left: 30px;
  34.                         }
  35.                         .way{
  36.                                 float:left;
  37.                                 margin:20px;
  38.                                 width:320px;
  39.                                 border-radius: 20px;
  40.                                 box-shadow: 4px 4px 4px 4px yellow;/* 用于给元素添加阴影效果,应用块级元素和行内元素 */
  41.                                 overflow: hidden;
  42.                         }
  43.                         .way_img{
  44.                                 width:inherit;//继承父元素
  45.                                 height:150px;
  46.                         }
  47.                         .way_title{
  48.                                 line-height: 50px;
  49.                                 background-color:cyan;
  50.                                 font-weight: bold;
  51.                         }
  52.                 </style>
  53.         </head>
  54.        
  55.        
  56.                 <section class="ways">
  57.                         <h2 class="ways_title">成长路线</h2>
  58.                         <div class="clear-fix">
  59.                                 <!-- //第一张图 -->
  60.                                 <a class="way">
  61.                                         <div class="way_img">
  62.                                                 <img src="../images/ke1.png">
  63.                                         </div>
  64.                                         <div class="way_title">前端工程师</div>
  65.                                 </a>
  66.                                 <!-- 第二张图 -->
  67.                                 <a class="way">
  68.                                         <div class="way_img">
  69.                                                 <img src="../images/ke2.png">
  70.                                         </div>
  71.                                         <div class="way_title">java工程师</div>
  72.                                 </a>
  73.                                 <!-- 第三张图 -->
  74.                                 <a class="way">
  75.                                         <div class="way_img">
  76.                                                 <img src="../images/ke3.png">
  77.                                         </div>
  78.                                         <div class="way_title">python工程师</div>
  79.                                 </a>
  80.                                
  81.                                
  82.                         </div>
  83.                 </section>
  84.         </body>
  85. </html>
复制代码

运行结果发现可以精确表现
导航条代码实现
  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8">
  5.                 <title></title>
  6.                
  7.                 <style>
  8.                         header{
  9.                                 padding: 8px;
  10.                                 height: 40px;
  11.                                 background-color: #ffffff;
  12.                         }
  13.                         .header{
  14.                                 border: 1px solid;
  15.                                 border-radius: 2px;
  16.                         }
  17.                         h1{
  18.                                 font-size: 20px;
  19.                                 font-weight:bold;
  20.                         }
  21.                         .nav-active{
  22.                                 color:#000000
  23.                         }
  24.                         .nav_1{
  25.                                 padding: 8px;
  26.                                 font-size: 16px;
  27.                                 color:#888888;
  28.                                 text-decoration: none;
  29.                         }
  30.                         .nav_3 a{
  31.                                 padding:6px 12px;
  32.                                 display: inline-block;
  33.                                 font-size: 16px;
  34.                                 border-radius: 4px;
  35.                         }
  36.                        
  37.                         .nav_4{
  38.                                 border:1px solid #007bff;
  39.                                 color:#007bff;
  40.                                 margin-right: 8px;
  41.                                 text-decoration: none;
  42.                         }
  43.                         .nav_4:hover{
  44.                                 background-color:#007bff;
  45.                                 color:#ffffff;
  46.                         }
  47.                         .nav_5{
  48.                                 border:1px solid #2a8745;
  49.                                 background-color: #2a8745;
  50.                                 color:#ffffff;
  51.                                 text-decoration: none;
  52.                         }
  53.                         .nav_5:hover{
  54.                                 background-color: #ffffff;
  55.                                 color:#2a8745;
  56.                         }
  57.                         .header-left{
  58.                                 float:left;
  59.                         }
  60.                         .header-right{
  61.                                 float:right;
  62.                         }
  63.                         .header::after{
  64.                                 content:"";
  65.                                 display:block;
  66.                                 clear:both;
  67.                         }
  68.                         .header-left .logo{
  69.                                
  70.                                 float:left;
  71.                                 margin-right:30px;
  72.                                 line-height:20px;
  73.                        
  74.                         }
  75.                         .header-left .nav{
  76.                                 float:left;
  77.                                 margin-right:30px;
  78.                                 line-height:40px;
  79.                         }
  80.                         #header-right-unlogined{
  81.                                 display: inline-block;
  82.                         }
  83.                         #header-right-unlogined.a{
  84.                                 padding: 6px 12px;
  85.                                 display: inline-block;
  86.                                 box-sizing: border-box;
  87.                                 border: 3px solid;
  88.                                 border-radius: 4px;
  89.                                 font-size: 16px;
  90.                         }
  91.                        
  92.                        
  93.                 </style>
  94.         </head>
  95.         <body>
  96.                 <header class="header clear-fix">
  97.                 <div class="header-left">
  98.                 <h1 class="logo">NOC 新云课堂</h1>
  99.                 <nav class="nav">
  100.                         <a class="nav_1"href="#">首页</a>
  101.                         <a class="nav_1"href="#">课堂分类</a>
  102.                         <a class="nav_1"href="#">直播课堂</a>
  103.                         <a class="nav_1"href="#">阶段测试</a>
  104.                 </div>
  105.                         </nav>
  106.                 <div class="header-right">
  107.                         <div id="header-right-unlogined">
  108.                         <div class="nav_3">
  109.                         <a class="nav_4"href="#">登录</a>
  110.                         <a class="nav_5"href="#">注册</a>
  111.                         </div>
  112.                         </div>
  113.                 </div>
  114.                 </header>
  115.         </body>
  116. </html>
复制代码

运行结果发现可以精确表现

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

数据人与超自然意识

论坛元老
这个人很懒什么都没写!

楼主热帖

标签云

AI 运维 CIO 存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表