设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 萌新训练营 › 萌新交流区 › 一个常见的网页布局和浮动的3种情况
返回列表 发新帖
查看: 2989|回复: 1

[作品展示] 一个常见的网页布局和浮动的3种情况

[复制链接]
肖-肖
发表于 2021-4-28 14:57:53 | 显示全部楼层 |阅读模式

马上注册，结交更多好友，享用更多功能^_^

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

x
网页布局效果图
ft52.png
源代码
常见网页布局和浮动的一些情况.zip (254.07 KB, 下载次数: 0, 售价: 2 鱼币)
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

wp231957
发表于 2021-4-29 12:21:55 | 显示全部楼层
帮我设计一下呀，css 实在是太复杂了
整体格局 不动，就是让那些按钮 字体大一些   绝对在div中居中 就可以了
  1. <!DOCTYPE.html>
  2. <html>

  4. <head>
  5.     <title> 实时经营信息系统 </title>
  6.     <meta charset="utf-8">
  7.     <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
  8.     </script>
  9.     <style>
  10.         div {
  11.             margin-left: 10%;
  12.             margin-top: 4%;
  13.             padding-top: 3%;
  14.             padding-left: 12%;
  15.             font-size: 24px;
  16.         }
  17.         
  18.         .s1 {
  19.             width: 200px;
  20.             height: 100px;
  21.             float: left;
  22.             border: 1px solid #f00;
  23.             line-height: 30px;
  24.         }
  25.         
  26.         .s2 {
  27.             width: 200px;
  28.             height: 100px;
  29.             float: left;
  30.             border: 1px solid #f00;
  31.         }
  32.         
  33.         .s3 {
  34.             width: 200px;
  35.             height: 150px;
  36.             float: left;
  37.             border: 1px solid #f00;
  38.         }
  39.         
  40.         .s4 {
  41.             width: 200px;
  42.             height: 150px;
  43.             float: left;
  44.             border: 1px solid #f00;
  45.             margin-left: 10%;
  46.         }
  47.         
  48.         .sytle3 {
  49.             margin-left: 3%;
  50.             vertical-align: middle;
  51.             font-size: 24px;
  52.         }
  53.     </style>

  55. </head>

  57. <body>
  58.     <div class="s1">
  59.         <button id="denglu" class="style3" type="button"><b>本日首次录入</b></button><br><br>
  60.         <button id="xiugai" class="style3" type="button"><b>补录(修改)</b></button>
  61.     </div>
  62.     <div class="s2">
  63.         <button id="chaxun" class="style3" type="button">日报查询 </button><br><br>
  64.         <button id="ybchaxun" class="style3" type="button">月报查询 </button>
  65.     </div>
  66.     <div class="s3">
  67.         <button id="xiugaimima" class="style3" type="button"><b>密码修改</b></button>
  68.     </div>
  69.     <div class="s4">
  70.         <button id="rizhicx" class="style3" type="button"><b>日志查询</b></button><br><br>
  71.         <button id="zbwh" class="style3" type="button"><b>指标维护</b></button><br><br>
  72.         <button id="mimacsh" class="style3" type="button"><b>密码初始化</b></button>
  73.     </div>

  75. </body>

  77. </html>
复制代码
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2025-4-25 22:03

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表