練習(xí)了一個(gè)選項(xiàng)卡樣式
- 框選選項(xiàng)卡的大邊框 給其加css樣式
2.排列內(nèi)部?jī)?nèi)容，分為兩個(gè)部分，標(biāo)題和內(nèi)容，先弄標(biāo)題+css樣式
3.圈定內(nèi)容部分 +css樣式
4.js樣式，主要是獲取標(biāo)簽，循環(huán)，改標(biāo)簽名稱
用到的主要樣式
css中
height width
border-bottom---- 加邊框下劃線
text-align 文本居中
line-height文本高度
display：none隱藏內(nèi)容
display：block 顯示內(nèi)容
position 定位 相對(duì)relative 絕對(duì)absolute
js中
let tts=document.getElementsByClassName("tt")獲取文本
for循環(huán)
tts[i].classList="tt"所有標(biāo)題標(biāo)簽class都變?yōu)閠t
如圖效果
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>選項(xiàng)卡效果</title>
<link rel="stylesheet" href="./選項(xiàng)卡.css">
</head>
<body>
<div class="tab">
<div class="tab-title">
<div class="tt active">1</div>
<div class="tt">2</div>
<div class="tt">3</div>
</div>
<div class="tab-content">
<div class="tab-content">
<div class="tc active">1</div>
<div class="tc">2</div>
<div class="tc">3</div>
</div>
</div>
</div>
<script>
// js效果
// 步驟一:在tts變量中保存了三個(gè)標(biāo)題標(biāo)簽
let tts = document.getElementsByClassName("tt")
// console.log(tts)
// 步驟二：給需要的每個(gè)標(biāo)題標(biāo)簽添加鼠標(biāo)進(jìn)入事件
for (let i = 0; i < tts.length; i++) {
// console.log(tts[i])
tts[i].onmouseenter = function () {
// console.log("鼠標(biāo)進(jìn)入標(biāo)題為",i ,"的標(biāo)簽")
//步驟三: 鼠標(biāo)進(jìn)入標(biāo)題后，讓選中標(biāo)題高亮，不管之前是誰高亮，只要選中的高亮
// 去掉css中的active樣式名稱
for (let j = 0; j < tts.length; j++) {
// 操作class屬性，可以使用固定語法classList
// 讓所有標(biāo)題的class變?yōu)閠t不用active
tts[j].classList = "tt"
}
// 高亮選中的標(biāo)題
tts[i].classList = "tt active"
// 循環(huán)內(nèi)容
let tcs = document.getElementsByClassName("tc")
for (let x = 0; x < tcs.length; x++) {
tcs[x].classList = "tc"
}
tcs[i].classList = "tc active"
}
}
</script>
</body>
</html>
css樣式
- {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 瀏覽器顯示高度，寬度100% */
html,
body {
height: 100%;
width: 100%;
}
/* 所有字體10px大小 */
html {
font-size: 10px;
}
.tab {
/* 一個(gè)rem=10個(gè)px /
width: 40rem;
height: 30rem;
/ 加邊框，實(shí)線，一個(gè)像素，黑色 */
border: solid 1px #000;
}
.tab-title {
width: 100%;
height: 5rem;
/* 彈性樣式 /
display: flex;
/ 兩邊對(duì)齊排列 /
justify-content: space-between;
/ 文本居中 /
text-align: center;
/ 文本高度 /
/ 給邊框增加下劃線 /
border-bottom: solid 2px rgb(231, 150, 28);
/ background-color: paleturquoise; */
}
.tt {
height: 5rem;
/* 均勻分配寬度 /
flex: 1;
/ background-color: #fafafa; /
font-size: 1.8rem;
text-align: center;
/ 文本高度，邊框高度=文本高度時(shí)，表示居中 */
line-height: 5rem;
}
/* ..tt.active中間不加空格，表示這兩個(gè)名稱出現(xiàn)在同一個(gè)標(biāo)簽中*/
.tt.active,
.tt:hover {
background-color: rgb(231, 150, 28);
color: white;
}
.tab-content {
height: 250px;
width: 100%;
background-color: burlywood;
position: relative;
}
.tc {
height: 100%;
width: 100%;
font-size: 1.8rem;
text-align: center;
position: absolute;
display: none;
}
/* .tc子標(biāo)簽的第一個(gè) */
.tc.active{
display: block;
}
.tc:nth-of-type(1){
background-color: lightblue;
}
.tc:nth-of-type(2){
background-color: olive;
}
.tc:nth-of-type(3){
background-color: peachpuff;
}
