黑马前端——days14

本文链接：https://blog.csdn.net/qq_52652401/article/details/141286152

案例 1

页面框架文件

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style1.css">
</head>

<body>
  <script src="index1.js"></script>
</body>

</html>

案例1

格式文件

span {
  /* 需要給span指定内外边距 */
  display: inline-block;
  width: 80px;
  height: 30px;

  text-align: center;
  line-height: 30px;
  
  padding: 5px 10px;
  margin: 2px;
  
  border: 1px solid #000;
  border-radius: 5px;
  
  box-shadow: 2px 2px 2px rgba(255, 192, 203, 0.4);
  color: hotpink;
  background-color: rgba(255, 192, 203, 0.1);
}

事件文件

for (let i = 1; i <= 9; i++) {
  for (let j = 1; j <= i; j++) {
    document.write(`<span>${j} * ${i} = ${i * j}</span>`)
  }
  document.write(`<br>`)
}

案例 2

页面框架文件

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style2.css">
</head>

<body>
  <script src="index2.js"></script>
</body>

</html>

案例2

格式文件

* {
  margin: 0;
  padding: 0;
}

.box {
  /* 弹性盒子布局 */
  display: flex;
  width: 700px;
  height: 300px;

  border-left: 1px solid #000;
  border-bottom: 1px solid #000;

  margin: 50px auto;
  text-align: center;
  /* 均匀排列每个元素 每个元素周围分配相同的空间 */
  justify-content: space-around;
  /* 将元素与 flex 容器的主轴末端或交叉轴末端对齐 */
  align-items: flex-end;
}

.box>div {
  /* 弹性盒子布局 */
  display: flex;
  width: 50px;
  background-color: greenyellow;
  /* 定义主轴和方向 */
  flex-direction: column;
  /* 均匀排列每个元素 首个元素放置于起点 末尾元素放置于终点 */
  justify-content: space-between;
}

.box div span {
  /* 默认文字在边框顶端 将文字移出去 */
  margin-top: -20px;
}

.box div h4 {
  width: 70px;
  /* 默认文字在边框底部 将文字移出去并居中 */
  margin-bottom: -35px;
  margin-left: -10px;
}

事件文件

let arr = []
for (let i = 1; i <= 4; i++) {
  arr.push(prompt(`请输入第${i}季度的数据`))
}
document.write(`<div class="box">`)
for (let i = 0; i < 4; i++) {
  document.write(`
        <div style="height: ${arr[i]}px;">
          <span>${arr[i]}</span>
          <h4>第${i + 1}季度</h4>
        </div>
  `)
}
document.write(`</div>`)