how2j.cn

下载区
文件名 文件大小
imgs.rar 774k
answer.rar 776k

工具版本兼容问题
需要的人物头像在右侧



步骤 1 :

练习效果图

edit Or  姿势不对,事倍功半! 点击查看做练习的正确姿势
练习效果图


HOW2J公众号,关注后实时获知最新的教程和优惠活动,谢谢。


问答区域    
2020-09-21 代码简洁,还原度良好
黑夜萤火虫




基本上完成了练习,还原度达到95%以上
加载中
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>我是标题</title>
        <style type="text/css">
            .floatLeft{float: left;}
            .whiteWord{color: #F4F4F4}
            .goldWord{color: #FF9100}
            #underLine{border-bottom: green dashed 1px}
            .smallerWord{font-size: 80%}
            .blackBackground{background-color: #11141B}
            .grayBackground{background-color:gray}
            .title{
                text-align: center;
                font-weight: bold;
                font-size: 120%
            }
            .lineHeight{line-height: 50px;}
            table td{width: 80px;}
            table img{width: 60px;height: 60px;}
            table#imgTable>tr{margin-bottom: 30px;}
            .relative{position: relative}
            .absolute{position: absolute;left: 300px}
        </style>
    </head>
    <body class="grayBackground">
<!--    左侧资料-->
        <div class="blackBackground whiteWord floatLeft smallerWord relative">
            <div class="title lineHeight">英雄资料</div>
            <form>
                <table>
                    <tr>
                        <td><input type="checkbox"> 坦克</td>
                        <td><input type="checkbox"> 法师</td>
                        <td><input type="checkbox"> 刺客</td>
                    </tr>
                    <tr>
                        <td><input type="checkbox"> 辅助</td>
                        <td><input type="checkbox"> 新手</td>
                        <td><input type="checkbox"> 近战</td>
                    </tr>
                    <tr>
                        <td><input type="checkbox"> 远程</td>
                        <td><input type="checkbox"> 推进</td>
                        <td><input type="checkbox"> 打野</td>
                    </tr>
                    <tr>
                        <td><input type="checkbox"> 后期</td>
                        <td><input type="checkbox"> 潜行</td>
                        <td><input type="checkbox"> 战士</td>
                    </tr>
                </table>
            </form>
            <div class="goldWord lineHeight" id="underLine">英雄价格:</div>
            <form>
                <table>
                    <tr>
                        <td><input type="checkbox"> 0300 </td>
                        <td><input type="checkbox"> 4800 </td>
                        <td><input type="checkbox"> 3150 </td>
                    </tr>
                    <tr>
                        <td><input type="checkbox"> 1350 </td>
                        <td><input type="checkbox"> 450 </td>
                    </tr>
                </table>
            </form>
            <div class="title lineHeight">物品资料</div>
            <form>
                <table>
                    <tr>
                        <td><input type="checkbox"> 生命值 </td>
                        <td><input type="checkbox"> 攻击速度 </td>
                        <td><input type="checkbox"> 护甲穿透 </td>
                    </tr>
                    <tr>
                        <td><input type="checkbox"> 暴击 </td>
                        <td><input type="checkbox"> 法术穿透 </td>
                        <td><input type="checkbox"> 魔法抗性 </td>
                    </tr>
                    <tr>
                        <td><input type="checkbox"> 法术伤害 </td>
                        <td><input type="checkbox"> 物理伤害 </td>
                        <td><input type="checkbox"> 消耗品 </td>
                    </tr>
                    <tr>
                        <td><input type="checkbox"> 韧性 </td>
                        <td><input type="checkbox"> 法力值 </td>
                        <td><input type="checkbox"> 生命偷取 </td>
                    </tr>
                    <tr>
                        <td><input type="checkbox"> 冷却缩减 </td>
                        <td><input type="checkbox"> 生命回复 </td>
                        <td><input type="checkbox"> 附魔 </td>
                    </tr>
                    <tr>
                        <td><input type="checkbox"> 法力回复 </td>
                        <td><input type="checkbox"> 法术吸血 </td>
                        <td><input type="checkbox"> 移动速度 </td>
                    </tr>
                    <tr>
                        <td><input type="checkbox"> 护甲值 </td>
                    </tr>
                </table>
            </form>
            <div class="title lineHeight">符文资料</div>
        </div>
<!--    这是右侧部分-->
    <div class="goldWord smallerWord blackBackground absolute">
        <form>
            <table id="imgTable">
                <tr>
                    <td>
                        <img src="images/imgs/0.jpg">
                        <div>牛头酋长</div>
                        <div>阿利斯塔</div>
                    </td>
                    <td>
                        <img src="images/imgs/1.jpg">
                        <div>钢铁大侠</div>
                        <div>波比</div>
                    </td>
                    <td>
                        <img src="images/imgs/2.jpg">
                        <div>殇之木乃伊</div>
                        <div>阿木木</div>
                    </td>
                    <td>
                        <img src="images/imgs/3.jpg">
                        <div>冰晶凤凰</div>
                        <div>艾尼维亚</div>
                    </td>
                    <td>
                        <img src="images/imgs/4.jpg">
                        <div>黑暗之女</div>
                        <div>安妮</div>
                    </td>
                    <td>
                        <img src="images/imgs/5.jpg">
                        <div>寒冰猎手</div>
                        <div>艾希</div>
                    </td>
                    <td>
                        <img src="images/imgs/6.jpg">
                        <div>蒸汽机器人</div>
                        <div>布里茨</div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <img src="images/imgs/0.jpg">
                        <div>牛头酋长</div>
                        <div>阿利斯塔</div>
                    </td>
                    <td>
                        <img src="images/imgs/1.jpg">
                        <div>钢铁大侠</div>
                        <div>波比</div>
                    </td>
                    <td>
                        <img src="images/imgs/2.jpg">
                        <div>殇之木乃伊</div>
                        <div>阿木木</div>
                    </td>
                    <td>
                        <img src="images/imgs/3.jpg">
                        <div>冰晶凤凰</div>
                        <div>艾尼维亚</div>
                    </td>
                    <td>
                        <img src="images/imgs/4.jpg">
                        <div>黑暗之女</div>
                        <div>安妮</div>
                    </td>
                    <td>
                        <img src="images/imgs/5.jpg">
                        <div>寒冰猎手</div>
                        <div>艾希</div>
                    </td>
                    <td>
                        <img src="images/imgs/6.jpg">
                        <div>蒸汽机器人</div>
                        <div>布里茨</div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <img src="images/imgs/0.jpg">
                        <div>牛头酋长</div>
                        <div>阿利斯塔</div>
                    </td>
                    <td>
                        <img src="images/imgs/1.jpg">
                        <div>钢铁大侠</div>
                        <div>波比</div>
                    </td>
                    <td>
                        <img src="images/imgs/2.jpg">
                        <div>殇之木乃伊</div>
                        <div>阿木木</div>
                    </td>
                    <td>
                        <img src="images/imgs/3.jpg">
                        <div>冰晶凤凰</div>
                        <div>艾尼维亚</div>
                    </td>
                    <td>
                        <img src="images/imgs/4.jpg">
                        <div>黑暗之女</div>
                        <div>安妮</div>
                    </td>
                    <td>
                        <img src="images/imgs/5.jpg">
                        <div>寒冰猎手</div>
                        <div>艾希</div>
                    </td>
                    <td>
                        <img src="images/imgs/6.jpg">
                        <div>蒸汽机器人</div>
                        <div>布里茨</div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <img src="images/imgs/0.jpg">
                        <div>牛头酋长</div>
                        <div>阿利斯塔</div>
                    </td>
                    <td>
                        <img src="images/imgs/1.jpg">
                        <div>钢铁大侠</div>
                        <div>波比</div>
                    </td>
                    <td>
                        <img src="images/imgs/2.jpg">
                        <div>殇之木乃伊</div>
                        <div>阿木木</div>
                    </td>
                    <td>
                        <img src="images/imgs/3.jpg">
                        <div>冰晶凤凰</div>
                        <div>艾尼维亚</div>
                    </td>
                    <td>
                        <img src="images/imgs/4.jpg">
                        <div>黑暗之女</div>
                        <div>安妮</div>
                    </td>
                    <td>
                        <img src="images/imgs/5.jpg">
                        <div>寒冰猎手</div>
                        <div>艾希</div>
                    </td>
                    <td>
                        <img src="images/imgs/6.jpg">
                        <div>蒸汽机器人</div>
                        <div>布里茨</div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <img src="images/imgs/0.jpg">
                        <div>牛头酋长</div>
                        <div>阿利斯塔</div>
                    </td>
                    <td>
                        <img src="images/imgs/1.jpg">
                        <div>钢铁大侠</div>
                        <div>波比</div>
                    </td>
                    <td>
                        <img src="images/imgs/2.jpg">
                        <div>殇之木乃伊</div>
                        <div>阿木木</div>
                    </td>
                    <td>
                        <img src="images/imgs/3.jpg">
                        <div>冰晶凤凰</div>
                        <div>艾尼维亚</div>
                    </td>
                    <td>
                        <img src="images/imgs/4.jpg">
                        <div>黑暗之女</div>
                        <div>安妮</div>
                    </td>
                    <td>
                        <img src="images/imgs/5.jpg">
                        <div>寒冰猎手</div>
                        <div>艾希</div>
                    </td>
                    <td>
                        <img src="images/imgs/6.jpg">
                        <div>蒸汽机器人</div>
                        <div>布里茨</div>
                    </td>
                </tr>

            </table>
        </form>
    </div>
    </body>
</html>

							





回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





2020-08-26 mark
suqize




mark 基本一致,用了flex弹性盒子,没有用列表
<head>
    <style>
        div.container {
            margin:0 0;
            padding:0 0;
            background-color: rgb(66, 66, 66);
            width:780px;
            height:570px;
        }

        div.check-box {
            position: relative;
            left: 5px;
            top: 8px;
            background-color: rgb(27, 27, 41);
            width: 220px;
            height: 520px;
            float: left;
        }
        
        .check-box p {
            color:lavender;
            text-align: center;
        }

        .check-box .c1 {
            color:lavender;
            margin-left: 3px;
            font-size: 13px;
        }

        .check-box .c2 {
            color: orange;
            margin-left: 20px;
            margin-top: 8px;
            font-size: 11px;
            font-weight: bolder;
            padding-bottom: 8px;
            border-bottom: 1px dashed orange;
            width: 170px;
        }

        .check-box .c3 {
            color:lavender;
            margin-left: 6px;
            margin-top: 10px;
            font-size: 13px;
        }

        .c1 input {
            margin-left: 18px;
        }

        .c3 input {
            margin-left: 14px;
        }

        div.character-box {
            position: relative;
            top: 8px;
            right: 20px;
            background-color: rgb(27, 27, 41);
            width: 515px;
            height: 562px;   
            float: right;     
        }

        .b1 {
            display: flex;
            flex-direction: row;
            margin:15px auto;
        }

        .hero {
            width: 60px;   
            margin: auto 6.6px;
        }

        .hero img {
            width: 60px;
            border:1px solid gray;
        }

        .hero .name1, .name2{
            color: orange;
            font-size: 12px;
            text-align: center;
        }
    </style>
</head>
<div class="container">
    <div class="check-box">
        <p>英雄资料</p>
        <div class="c1">
            <input type="checkbox" />坦克
            <input type="checkbox" />法师
            <input type="checkbox" />刺客
        <div style="height: 5px;"></div>
            <input type="checkbox" />辅助
            <input type="checkbox" />新手
            <input type="checkbox" />近战
        <div style="height: 5px;"></div>  
            <input type="checkbox" />远程
            <input type="checkbox" />推进
            <input type="checkbox" />打野    
        <div style="height: 5px;"></div>  
            <input type="checkbox" />后期
            <input type="checkbox" />潜行
            <input type="checkbox" />战士       
        </div>
        <div class="c2">英雄价格:</div>
        <div class="c3">
            <input type="checkbox" />6300
            <input type="checkbox" />4800
            <input type="checkbox" />3150
        <div style="height: 5px;"></div>
            <input type="checkbox" />1350
            <input type="checkbox" />450
        </div> 
        <p>物品资料</p>
    </div>
    <div class="character-box">
        <div class="b1">
            <div class="hero">
                <img src="./imgs/0.jpg" alt="">
                <div class="name1">牛头酋长</div>
                <div class="name2">阿利斯塔</div>
            </div>
            <div class="hero">
                <img src="./imgs/0.jpg" alt="">
                <div class="name1">牛头酋长</div>
                <div class="name2">阿利斯塔</div>
            </div>
            <div class="hero">
                <img src="./imgs/0.jpg" alt="">
                <div class="name1">牛头酋长</div>
                <div class="name2">阿利斯塔</div>
            </div>
            <div class="hero">
                <img src="./imgs/0.jpg" alt="">
                <div class="name1">牛头酋长</div>
                <div class="name2">阿利斯塔</div>
            </div>
            <div class="hero">
                <img src="./imgs/0.jpg" alt="">
                <div class="name1">牛头酋长</div>
                <div class="name2">阿利斯塔</div>
            </div>
            <div class="hero">
                <img src="./imgs/0.jpg" alt="">
                <div class="name1">牛头酋长</div>
                <div class="name2">阿利斯塔</div>
            </div>
            <div class="hero">
                <img src="./imgs/0.jpg" alt="">
                <div class="name1">牛头酋长</div>
                <div class="name2">阿利斯塔</div>
            </div>
        </div>
        <div class="b1">
            <div class="hero">
                <img src="./imgs/0.jpg" alt="">
                <div class="name1">牛头酋长</div>
                <div class="name2">阿利斯塔</div>
            </div>
            <div class="hero">
                <img src="./imgs/0.jpg" alt="">
                <div class="name1">牛头酋长</div>
                <div class="name2">阿利斯塔</div>
            </div>
            <div class="hero">
                <img src="./imgs/0.jpg" alt="">
                <div class="name1">牛头酋长</div>
                <div class="name2">阿利斯塔</div>
            </div>
            <div class="hero">
                <img src="./imgs/0.jpg" alt="">
                <div class="name1">牛头酋长</div>
                <div class="name2">阿利斯塔</div>
            </div>
            <div class="hero">
                <img src="./imgs/0.jpg" alt="">
                <div class="name1">牛头酋长</div>
                <div class="name2">阿利斯塔</div>
            </div>
            <div class="hero">
                <img src="./imgs/0.jpg" alt="">
                <div class="name1">牛头酋长</div>
                <div class="name2">阿利斯塔</div>
            </div>
            <div class="hero">
                <img src="./imgs/0.jpg" alt="">
                <div class="name1">牛头酋长</div>
                <div class="name2">阿利斯塔</div>
            </div>
        </div>
        <div class="b1">
            <div class="hero">
                <img src="./imgs/0.jpg" alt="">
                <div class="name1">牛头酋长</div>
                <div class="name2">阿利斯塔</div>
            </div>
            <div class="hero">
                <img src="./imgs/0.jpg" alt="">
                <div class="name1">牛头酋长</div>
                <div class="name2">阿利斯塔</div>
            </div>
            <div class="hero">
                <img src="./imgs/0.jpg" alt="">
                <div class="name1">牛头酋长</div>
                <div class="name2">阿利斯塔</div>
            </div>
            <div class="hero">
                <img src="./imgs/0.jpg" alt="">
                <div class="name1">牛头酋长</div>
                <div class="name2">阿利斯塔</div>
            </div>
            <div class="hero">
                <img src="./imgs/0.jpg" alt="">
                <div class="name1">牛头酋长</div>
                <div class="name2">阿利斯塔</div>
            </div>
            <div class="hero">
                <img src="./imgs/0.jpg" alt="">
                <div class="name1">牛头酋长</div>
                <div class="name2">阿利斯塔</div>
            </div>
            <div class="hero">
                <img src="./imgs/0.jpg" alt="">
                <div class="name1">牛头酋长</div>
                <div class="name2">阿利斯塔</div>
            </div>
        </div>
        <div class="b1">
            <div class="hero">
                <img src="./imgs/0.jpg" alt="">
                <div class="name1">牛头酋长</div>
                <div class="name2">阿利斯塔</div>
            </div>
            <div class="hero">
                <img src="./imgs/0.jpg" alt="">
                <div class="name1">牛头酋长</div>
                <div class="name2">阿利斯塔</div>
            </div>
            <div class="hero">
                <img src="./imgs/0.jpg" alt="">
                <div class="name1">牛头酋长</div>
                <div class="name2">阿利斯塔</div>
            </div>
            <div class="hero">
                <img src="./imgs/0.jpg" alt="">
                <div class="name1">牛头酋长</div>
                <div class="name2">阿利斯塔</div>
            </div>
            <div class="hero">
                <img src="./imgs/0.jpg" alt="">
                <div class="name1">牛头酋长</div>
                <div class="name2">阿利斯塔</div>
            </div>
            <div class="hero">
                <img src="./imgs/0.jpg" alt="">
                <div class="name1">牛头酋长</div>
                <div class="name2">阿利斯塔</div>
            </div>
            <div class="hero">
                <img src="./imgs/0.jpg" alt="">
                <div class="name1">牛头酋长</div>
                <div class="name2">阿利斯塔</div>
            </div>
        </div>
        <div class="b1">
            <div class="hero">
                <img src="./imgs/0.jpg" alt="">
                <div class="name1">牛头酋长</div>
                <div class="name2">阿利斯塔</div>
            </div>
            <div class="hero">
                <img src="./imgs/0.jpg" alt="">
                <div class="name1">牛头酋长</div>
                <div class="name2">阿利斯塔</div>
            </div>
            <div class="hero">
                <img src="./imgs/0.jpg" alt="">
                <div class="name1">牛头酋长</div>
                <div class="name2">阿利斯塔</div>
            </div>
            <div class="hero">
                <img src="./imgs/0.jpg" alt="">
                <div class="name1">牛头酋长</div>
                <div class="name2">阿利斯塔</div>
            </div>
            <div class="hero">
                <img src="./imgs/0.jpg" alt="">
                <div class="name1">牛头酋长</div>
                <div class="name2">阿利斯塔</div>
            </div>
            <div class="hero">
                <img src="./imgs/0.jpg" alt="">
                <div class="name1">牛头酋长</div>
                <div class="name2">阿利斯塔</div>
            </div>
            <div class="hero">
                <img src="./imgs/0.jpg" alt="">
                <div class="name1">牛头酋长</div>
                <div class="name2">阿利斯塔</div>
            </div>
        </div>
    </div>
</div>

							





回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





2020-08-14 垃圾答案,不过还是做出来了粗制滥造!!!
2020-07-14 搞定,比一题做的快10分钟哈哈
2020-06-09 练习2


提问太多,页面渲染太慢,为了加快渲染速度,本页最多只显示几条提问。还有 31 条以前的提问,请 点击查看

提问之前请登陆
提问已经提交成功,正在审核。 请于 我的提问 处查看提问记录,谢谢
关于 前端部分-CSS-综合性练习2 的提问

尽量提供截图代码异常信息,有助于分析和解决问题。 也可进本站QQ群交流: 635924385
提问尽量提供完整的代码,环境描述,越是有利于问题的重现,您的问题越能更快得到解答。
对教程中代码有疑问,请提供是哪个步骤,哪一行有疑问,这样便于快速定位问题,提高问题得到解答的速度
在已经存在的几千个提问里,有相当大的比例,是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本,可以节约自己大量的学习时间。 站长把教学中用的软件版本整理了,都统一放在了这里, 方便大家下载: https://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图