IrisVega/test
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

modified: styles.css

Browse Source 
modified:   test.html
This commit is contained in:
IrisVega 2024-07-10 16:07:15 +08:00
parent 40532b4e7b
commit aa786a5733
2 changed files with 46 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
styles.css
View File

@ -4,6 +4,7 @@
/* 选项卡按钮样式 */ /* 选项卡按钮样式 */
.tab { .tab {
display: flex;
overflow: hidden; overflow: hidden;
border: 1px solid #ff69b4; /* 粉色边框 */ border: 1px solid #ff69b4; /* 粉色边框 */
background-color: #ffc0cb; /* 粉色背景 */ background-color: #ffc0cb; /* 粉色背景 */
@ -136,3 +137,19 @@ span {
font-size: 1.2em; font-size: 1.2em;
font-weight: bold; font-weight: bold;
} }
#tab-container {
display: flex;
overflow-x: auto;
white-space: nowrap;
}
/* .tab {
display: flex;
} */
.tablinks {
display: inline-block;
padding: 10px;
border: 1px solid #ccc;
cursor: pointer;
}

57
test.html
View File

@ -12,34 +12,35 @@
<input type="range" id="mySlider" min="0" max="100" value="50"> <input type="range" id="mySlider" min="0" max="100" value="50">
<span id="sliderValue">50</span> <span id="sliderValue">50</span>
</div> </div>
<div class="tab"> <div class="tab-container">
<button class="tablinks" data-tab="Tab0">日历</button> <div class="tab">
<button id="addTab" class="addTab">+</button> <button class="tablinks" data-tab="Tab0">日历</button>
</div> <button id="addTab" class="addTab">+</button>
<div id="Tab0" class="tabcontent"> </div>
<h3 id="selectedDate">点击日期后，当前位置显示所点日期</h3> <div id="Tab0" class="tabcontent">
<div class="cldBody"> <h3 id="selectedDate">点击日期后，当前位置显示所点日期</h3>
<table> <div class="cldBody">
<thead> <table>
<tr> <thead>
<td colspan="7"> <tr>
<div class="top"> <td colspan="7">
<span id="left"><</span> <div class="top">
<span id="topDate"></span> <span id="left"><</span>
<span id="right">></span> <span id="topDate"></span>
</div> <span id="right">></span>
</td> </div>
</tr> </td>
<tr id="week"> </tr>
<td>日</td> <tr id="week">
<td>一</td> <td>日</td>
<td>二</td> <td>一</td>
<td>三</td> <td>二</td>
<td>四</td> <td>三</td>
<td>五</td> <td>四</td>
<td>六</td> <td>五</td>
</tr> <td>六</td>
</thead> </tr>
</thead>
<tbody id="tbody"></tbody> <tbody id="tbody"></tbody>
</table> </table>
</div> </div>