【页面布局】个人博客

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

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

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

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

修复网站显示问题

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

难评

【功能实现】搜一搜呀

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

【功能实现】折叠手风琴

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

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

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

关于你的欢迎语

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

【功能实现】卡片化标签页

// 实现选项卡功能
function init() {
  // TODO 待补充代码
  const tabs = document.querySelectorAll(".tabs div")
  const contents = document.querySelectorAll("#content div")
  tabs.forEach((tab,index)=> {
    tab.addEventListener('click',()=>{
      tabs.forEach(i => i.classList.remove("active"))
      tab.classList.add("active")
      
      contents.forEach(s=>{
        s.classList.remove('active')
        contents[index].classList.add('active')
      })
    })
  })
}
init();

记得删除tabs里的无用类名

【页面布局】 水果摆盘

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

【功能实现】新年贺卡

document.addEventListener('DOMContentLoaded', function () {
	const greetingDisplay = document.getElementById("greeting-display")
	const btn = document.getElementById("btn")
	// 点击开始书写按钮
	btn.addEventListener("click", () => {
		show(greetingDisplay)
	})
})

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

}

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

module.exports = { show, writeGreeting }

【页面布局】给页面化个妆

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-image: url('../images/background-pic.jpeg');
    background-size: cover;
    color: #fff;
    height: 945;
    width: 1920;
}

.nav-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.nav-bar img {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    margin: 15px;
}

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

.content {
    height: 600px;
    width: 450px;
    background-color: rgba(0, 0, 0, .45);
    margin: 0 auto;
    /* 水平居中（margin: 0 auto）； */
    border-radius: 10px;
    text-align: center;
}

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

.content h2 {
    font-size: 45px;
    font-weight: 800;
    margin-bottom: 40px;
}

.content button {
    width: 80px;
    height: 30px;
    border-color: #041c32;
    background-color: #2d4263;
    color: white;
    margin-top: 15px;
}

.content a {
    text-decoration: none;
    color: white;
}

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

.content input {
    text-align: center;
    width: 300px;
    height: 40px;
    font-size: 20px;
    border-radius: 5px;
    margin: 10px;
}