黑马前端——days14_js

宝塔山  金牌会员 | 2024-8-18 03:45:46 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 510|帖子 510|积分 1530

案例 1

页面框架文件

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>Document</title>
  8.   <link rel="stylesheet" href="style1.css">
  9. </head>
  11. <body>
  12.   <script src="index1.js"></script>
  13. </body>
  15. </html>
复制代码

格式文件

  1. span {
  2.   /* 需要給span指定内外边距 */
  3.   display: inline-block;
  4.   width: 80px;
  5.   height: 30px;
  7.   text-align: center;
  8.   line-height: 30px;
  9.   
  10.   padding: 5px 10px;
  11.   margin: 2px;
  12.   
  13.   border: 1px solid #000;
  14.   border-radius: 5px;
  15.   
  16.   box-shadow: 2px 2px 2px rgba(255, 192, 203, 0.4);
  17.   color: hotpink;
  18.   background-color: rgba(255, 192, 203, 0.1);
  19. }
复制代码
变乱文件

  1. for (let i = 1; i <= 9; i++) {
  2.   for (let j = 1; j <= i; j++) {
  3.     document.write(`<span>${j} * ${i} = ${i * j}</span>`)
  4.   }
  5.   document.write(`<br>`)
  6. }
复制代码
案例 2

页面框架文件

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>Document</title>
  8.   <link rel="stylesheet" href="style2.css">
  9. </head>
  11. <body>
  12.   <script src="index2.js"></script>
  13. </body>
  15. </html>
复制代码

格式文件

  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4. }
  6. .box {
  7.   /* 弹性盒子布局 */
  8.   display: flex;
  9.   width: 700px;
  10.   height: 300px;
  12.   border-left: 1px solid #000;
  13.   border-bottom: 1px solid #000;
  15.   margin: 50px auto;
  16.   text-align: center;
  17.   /* 均匀排列每个元素 每个元素周围分配相同的空间 */
  18.   justify-content: space-around;
  19.   /* 将元素与 flex 容器的主轴末端或交叉轴末端对齐 */
  20.   align-items: flex-end;
  21. }
  23. .box>div {
  24.   /* 弹性盒子布局 */
  25.   display: flex;
  26.   width: 50px;
  27.   background-color: greenyellow;
  28.   /* 定义主轴和方向 */
  29.   flex-direction: column;
  30.   /* 均匀排列每个元素 首个元素放置于起点 末尾元素放置于终点 */
  31.   justify-content: space-between;
  32. }
  34. .box div span {
  35.   /* 默认文字在边框顶端 将文字移出去 */
  36.   margin-top: -20px;
  37. }
  39. .box div h4 {
  40.   width: 70px;
  41.   /* 默认文字在边框底部 将文字移出去并居中 */
  42.   margin-bottom: -35px;
  43.   margin-left: -10px;
  44. }
复制代码
变乱文件

  1. let arr = []
  2. for (let i = 1; i <= 4; i++) {
  3.   arr.push(prompt(`请输入第${i}季度的数据`))
  4. }
  5. document.write(`<div class="box">`)
  6. for (let i = 0; i < 4; i++) {
  7.   document.write(`
  8.         <div style="height: ${arr[i]}px;">
  9.           <span>${arr[i]}</span>
  10.           <h4>第${i + 1}季度</h4>
  11.         </div>
  12.   `)
  13. }
  14. document.write(`</div>`)
复制代码
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

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

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

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

本版积分规则

宝塔山

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

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