1
/* TODO:banner 上的文字 需要居中显示 */
2
.home-wrapper .banner .banner-conent .hero {
3
  text-align: center; /* 文字居中 */
4
  margin-top: 3rem;
5
}
6

7
/* TODO: main-wrapper 通过设置main-wrapper 布局方式 让.main-left  .main-right 正确显示 */
8
.main-wrapper {
9
  display: flex; /* 使用flex布局 */
10
  margin: 1.5rem auto 0 auto;
11
  max-width: 1100px;
12
  padding: 0 0.9rem;
13
  box-sizing: border-box;
14
  position: relative;
15
}
16

17
/*/* TODO 宽度自适应 居左显示 */
18
.main-wrapper .main-left {
19
  width: auto; /*宽带自适应*/
20
}
21

22
/* 宽 245px 居右显示 */
23
.main-wrapper .main-right>* {
24
  box-sizing: border-box;
25
  width: 245px;/* 宽 245px */
26
}

1
    <link rel="stylesheet" href="css/style.css" />

1
        computed: {
2
          filteredList() {
3
            // TODO: 请补充代码
4
            const keyword = this.search.trim() //去除空格
5
            //filter 方法遍历 postList 数组中的每一个元素
6
            return this.postList.filter(post => post.title.includes(keyword))
7
          },
8
        },
9
      });

1
const showed = document.querySelector('.options') // 整个容器
2
const show = document.querySelectorAll('.option') // 所有选项卡
3

4
// 给整个容器加事件监听器（事件委托）
5
showed.addEventListener('click', (err) => {
6
    // 1. 所有选项移除 active 类
7
    show.forEach(i => i.classList.remove("active"))
8

9
    // 2. 给你点击的元素加上 active 类
10
    err.target.classList.add("active")
11
})

1
function generate() {
2
    subject = document.getElementById("subject");
3
    event1 = document.getElementById("event1");
4
    event2 = document.getElementById("event2");
5
    if (subject.length==0 || event1.length==0 || event2.length==0){
6
        return;
7
    }
8
    result = `欢迎用户${subject.value}在${event2.value}学习${event1.value}课程！`; //使用字符串拼接
9
    document.getElementById("result").value = result;
10
}

1
// 实现选项卡功能
2
function init() {
3
  // TODO 待补充代码
4
  const tabs = document.querySelectorAll(".tabs div")
5
  const contents = document.querySelectorAll("#content div")
6
  tabs.forEach((tab,index)=> {
7
    tab.addEventListener('click',()=>{
8
      tabs.forEach(i => i.classList.remove("active"))
9
      tab.classList.add("active")
10

11
      contents.forEach(s=>{
12
        s.classList.remove('active')
13
        contents[index].classList.add('active')
14
      })
15
    })
16
  })
17
}
18
init();

1
/* 菠萝 TODO 待补充代码 */
2
.yellow {
3
  align-self: flex-end;
4
  order: 1;
5
  /* | 属性           | 作用                       |
6
    | ------------ | ------------------------ |
7
    | `align-self` | 控制该元素在主轴垂直方向上的对齐方式（如底部）  |
8
    | `order`      | 控制该元素在父元素中的排列顺序（数字越小越靠前） |
9
 */
10
}

1
document.addEventListener('DOMContentLoaded', function () {
2
  const greetingDisplay = document.getElementById("greeting-display")
3
  const btn = document.getElementById("btn")
4
  // 点击开始书写按钮
5
  btn.addEventListener("click", () => {
6
    show(greetingDisplay)
7
  })
8
})
9

10
const greetings = [
11
  "新年快乐!",
12
  "接受我新春的祝愿,祝你平安幸福",
13
  "祝你新年快乐,洋洋得意!",
14
  "新的一年,新的开始;心的祝福,新的起点!",
15
  "新年好!祝新年心情好,身体好,一切顺心!",
16
]
17
// 随机数函数 从 greetings 随机取一个值并返回
18
function writeGreeting() {
19
  // TODO 带补充代码
20
  const res = Math.floor(Math.random() * 5)//随机生成0-4的整数
21
  console.log(greetings[res])
22
  return greetings[res]
23

24
}
25

26
/*
27
 * @param {*} greetingDisplay  要显示内容的dom元素
28
 */
29
//  show 将 writeGreeting 函数中返回的内容显示在 greetingDisplay 元素中
30
function show(greetingDisplay) {
31
  // TODO 待补充代码
32
  greetingDisplay.innerHTML = writeGreeting()
33
}
34

35
module.exports = { show, writeGreeting }

1
* {
2
    box-sizing: border-box;
3
    margin: 0;
4
    padding: 0;
5
}
6

7
body {
8
    background-image: url('../images/background-pic.jpeg');
9
    background-size: cover;
10
    color: #fff;
11
    height: 945;
12
    width: 1920;
13
}
14

15
.nav-bar {
16
    display: flex;
17
    align-items: center;
18
    justify-content: flex-end;
19
}
20

21
.nav-bar img {
22
    height: 50px;
23
    width: 50px;
24
    border-radius: 50%;
25
    margin: 15px;
26
}
27

28
/* 我自己写的 */
29
.content-container {
30
    margin-top: 70px;
31
/* 给主体内容一个上边距，让它不会贴着页面顶部 */
32
}
33

34
.content {
35
    height: 600px;
36
    width: 450px;
37
    background-color: rgba(0, 0, 0, .45);
38
    margin: 0 auto;
39
    /* 水平居中（margin: 0 auto）； */
40
    border-radius: 10px;
41
    text-align: center;
42
}
43

44
.content img {
45
    width: 200px;
46
    height: 200px;
47
    border-radius: 50%;
48
    margin-top: -20%;
49
    /* margin-top: -20%：向上浮动，让头像部分“插入”背景中 */
50
}
51

52
.content h2 {
53
    font-size: 45px;
54
    font-weight: 800;
55
    margin-bottom: 40px;
56
}
57

58
.content button {
59
    width: 80px;
60
    height: 30px;
61
    border-color: #041c32;
62
    background-color: #2d4263;
63
    color: white;
64
    margin-top: 15px;
65
}
66

67
.content a {
68
    text-decoration: none;
69
    color: white;
70
}
71

72
.text {
73
    margin-top: 15px;
74
    /* margin-top: 15px：与上面输入框拉开间距。 */
75
}
76

77
.content input {
78
    text-align: center;
79
    width: 300px;
80
    height: 40px;
81
    font-size: 20px;
82
    border-radius: 5px;
83
    margin: 10px;
84
}