【页面布局】个人博客
/* 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;
}
Comments NOTHING