使用HTML/CSS实现一个复杂页面--随笔

最新推荐文章于 2022-03-14 21:57:56 发布

meishanxu

最新推荐文章于 2022-03-14 21:57:56 发布

阅读量830

点赞数

分类专栏： H5&CSS3实践总结

本文链接：https://blog.csdn.net/xumeishan0527/article/details/78491920

版权

H5&CSS3实践总结专栏收录该内容

4 篇文章 0 订阅

订阅专栏

从开始做任务九到最终完善全部代码大约花了2天时间，零零散散，从刚开始看到题目心想：“这么怎么复杂”，看到其他同学完成的优秀代码时心想：“肯定是用了插件”的不可思议情绪后，到最后自己一步步完美完成，才发现自己之前在山脚下看山峰是有多幼稚，一步一个脚印往上爬，看到山顶太阳的时候，恍然大悟，心旷神怡！谢谢自己的坚持，慢慢地感受和享受着自我提升的过程。

总的来说，惊喜的有以下几点：
1、利用input标签中的checked属性监控选项卡；
2、position: relative占坑，提高等级可用；
3、line-height比height实在

值得一提的是，line-height特性值指定了每个行内非替换元素生成的行内框的确切高度，可以等价为box-sizing: content-box；而 height 只是决定包含块高度，这一点在实现如下图选项卡遮挡部分是关键。同时line-heighth还有一个很重要的用处就是可以实现文字始终保持垂直居中。

难点来源于如何实现选项卡模块点击切换，如下图所示：
这里写图片描述

具体实现代码如下：

<div class="project__left">
    <p class="project__left__title">第一组项目</p>
    <ul class="project__left__ul">
        <li class="project__left__ulLI">
            <input type="radio" name="project" checked="checked" class="liInput">
            <span>项目一</span>
            <div class="project__left__table">
                <table cellspacing="0">
                    <tr>
                        <td class="tableActive">购买材料一</td><td>购买材料一</td><td>购买材料一</td><td>购买材料一</td>
                    </tr>
                    <tr>
                        <td>购买材料一</td><td>购买材料一</td><td>购买材料一</td><td>购买材料一</td>
                    </tr>
                    <tr>
                        <td>购买材料一</td><td>购买材料一</td><td>购买材料一</td><td>购买材料一</td>
                    </tr>
                    <tr>
                        <td>购买材料一</td><td>购买材料一</td><td>购买材料一</td><td>购买材料一</td>
                    </tr>
                    <tr>
                        <td>购买材料一</td><td>购买材料一</td><td>购买材料一</td><td>购买材料一</td>
                    </tr>
                    <tr>
                        <td>购买材料一</td><td>购买材料一</td><td>购买材料一</td><td>购买材料一</td>
                    </tr>
                </table>
            </div>
        </li>
        <li class="project__left__ulLI">
            <input type="radio" name="project" class="liInput">
            <span>项目二</span>
            <div class="project__left__table table2">
                <table cellspacing="0">
                    <tr>
                        <td class="tableActive">购买材料一</td><td>购买材料一</td><td>购买材料一</td><td>购买材料一</td>
                    </tr>
                    <tr>
                        <td>购买材料一</td><td>购买材料一</td><td>购买材料一</td><td>购买材料一</td>
                    </tr>
                    <tr>
                        <td>购买材料一</td><td>购买材料一</td><td>购买材料一</td><td>购买材料一</td>
                    </tr>
                    <tr>
                        <td>购买材料一</td><td>购买材料一</td><td>购买材料一</td><td>购买材料一</td>
                    </tr>
                    <tr>
                        <td>购买材料一</td><td>购买材料一</td><td>购买材料一</td><td>购买材料一</td>
                    </tr>
                    <tr>
                        <td>购买材料一</td><td>购买材料一</td><td>购买材料一</td><td>购买材料一</td>
                    </tr>
                </table>
            </div>
        </li>
        <li class="project__left__ulLI">
            <input type="radio" name="project" class="liInput">
            <span>项目三</span>
            <div class="project__left__table table3">
                <table cellspacing="0">
                    <tr>
                        <td class="tableActive">购买材料一</td><td>购买材料一</td><td>购买材料一</td><td>购买材料一</td>
                    </tr>
                    <tr>
                        <td>购买材料一</td><td>购买材料一</td><td>购买材料一</td><td>购买材料一</td>
                    </tr>
                    <tr>
                        <td>购买材料一</td><td>购买材料一</td><td>购买材料一</td><td>购买材料一</td>
                    </tr>
                    <tr>
                        <td>购买材料一</td><td>购买材料一</td><td>购买材料一</td><td>购买材料一</td>
                    </tr>
                    <tr>
                        <td>购买材料一</td><td>购买材料一</td><td>购买材料一</td><td>购买材料一</td>
                    </tr>
                    <tr>
                        <td>购买材料一</td><td>购买材料一</td><td>购买材料一</td><td>购买材料一</td>
                    </tr>
                </table>
            </div>
        </li>
        <li class="project__left__ulLI">
            <input type="radio" name="project" class="liInput">
            <span>项目四</span>
            <div class="project__left__table table4">
                <table cellspacing="0">
                    <tr>
                        <td class="tableActive">购买材料一</td><td>购买材料一</td><td>购买材料一</td><td>购买材料一</td>
                    </tr>
                    <tr>
                        <td>购买材料一</td><td>购买材料一</td><td>购买材料一</td><td>购买材料一</td>
                    </tr>
                    <tr>
                        <td>购买材料一</td><td>购买材料一</td><td>购买材料一</td><td>购买材料一</td>
                    </tr>
                    <tr>
                        <td>购买材料一</td><td>购买材料一</td><td>购买材料一</td><td>购买材料一</td>
                    </tr>
                    <tr>
                        <td>购买材料一</td><td>购买材料一</td><td>购买材料一</td><td>购买材料一</td>
                    </tr>
                    <tr>
                        <td>购买材料一</td><td>购买材料一</td><td>购买材料一</td><td>购买材料一</td>
                    </tr>
                </table>
            </div>
        </li>
        <li class="project__left__ulLI">
            <input type="radio" name="project" class="liInput">
            <span>项目五</span>
            <div class="project__left__table table5">
                <table cellspacing="0">
                    <tr>
                        <td class="tableActive">购买材料一</td><td>购买材料一</td><td>购买材料一</td><td>购买材料一</td>
                    </tr>
                    <tr>
                        <td>购买材料一</td><td>购买材料一</td><td>购买材料一</td><td>购买材料一</td>
                    </tr>
                    <tr>
                        <td>购买材料一</td><td>购买材料一</td><td>购买材料一</td><td>购买材料一</td>
                    </tr>
                    <tr>
                        <td>购买材料一</td><td>购买材料一</td><td>购买材料一</td><td>购买材料一</td>
                    </tr>
                    <tr>
                        <td>购买材料一</td><td>购买材料一</td><td>购买材料一</td><td>购买材料一</td>
                    </tr>
                    <tr>
                        <td>购买材料一</td><td>购买材料一</td><td>购买材料一</td><td>购买材料一</td>
                    </tr>
                </table>
            </div>
        </li>
    </ul>
</div>

.project__left {
  box-shadow: 0 0 0.5px #b4b4b4;
  border-radius: 10px;
  flex: 1.5;
  height: 355px;
  background: #fff;
  margin-right: 10px;
}
.project__left__title {
  height: 40px;
  background: #f4f6f7;
  -webkit-border-radius: 10px 10px 0 0 ;
  -moz-border-radius: 10px 10px 0 0 ;
  border-radius: 10px 10px 0 0 ;
  font: 12px/40px "sans-serif";
  color: #b0b0b0;
  text-indent: 20px;
}
.project__left__ul {
  list-style: none;
  margin: 10px 0 0 16px;
}
.project__left__ulLI {
  display: inline-block;
  position: relative;
  width: 74px;
  line-height: 30px;
  font: 12px/30px "sans-serif";
  text-align: center;
}
.project__left__ulLI span {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 5px 5px 0 0;
  z-index: 1;
  background: #ededf0;
}
.liInput {
  position: absolute;
  left: 0;
  z-index: 99;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.liInput:checked + span {
  background: #fff;
  border: 1px solid #aaa;
  border-bottom: 1px solid #fff;
}
.liInput:checked + span + .project__left__table {
  display: block;
}
.project__left__table {
  position: absolute;
  width: 490px;
  height: 250px;
  top: 31px;
  left: 0;
  z-index: 0;
  border: 1px solid #aaa;
  -webkit-border-radius: 0 4px 4px 4px ;
  -moz-border-radius: 0 4px 4px 4px;
  border-radius: 0 4px 4px 4px;
  display: none;
}
.project__left__table table {
  width: 402px;
  height: 184px;
  font: 14px/33px "sans-serif";
  text-align: center;
  position: absolute;
  border-collapse: collapse;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.project__left__table td {
  border: 1px solid #ededf0;
  height: 33px;
}
.project__left__table .tableActive {
  background: #ededf0;
}
.table2 {
  margin-left: -78px;
}
.table3 {
  margin-left: -157px;
}
.table4 {
  margin-left: -236px;
}
.table5 {
  margin-left: -315px;
}

meishanxu

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
使用HTML/CSS实现一个复杂页面--随笔

从开始做任务九到最终完善全部代码大约花了2天时间，零零散散，从刚开始看到题目心想：“这么怎么复杂”，看到其他同学完成的优秀代码时心想：“肯定是用了插件”的不可思议情绪后，到最后自己一步步完美完成，才发现自己之前在山脚下看山峰是有多幼稚，一步一个脚印往上爬，看到山顶太阳的时候，恍然大悟，心旷神怡！谢谢自己的坚持，慢慢地感受和享受着自我提升的过程。总的来说，惊喜的有以下几点： 1、利用input标签中
复制链接

扫一扫