CSS系列教材（三十）- 练习 - 综合性练习2

how2j.cn

CSS系列教材（二十九）- 练习 - 综合性练习1

CSS系列教材（三十一）- 练习 - 综合性练习3

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

工具版本兼容问题

需要的人物头像在右侧

纠

步骤 1 :

练习效果图

edit 顶折

纠问

Or

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

练习效果图

CSS系列教材（二十九）- 练习 - 综合性练习1

CSS系列教材（三十一）- 练习 - 综合性练习3

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

问答区域

2020-09-21 代码简洁，还原度良好

黑夜萤火虫

关于前端部分-CSS-综合性练习2 的提问

基本上完成了练习，还原度达到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

关于前端部分-CSS-综合性练习2 的提问

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 垃圾答案，不过还是做出来了粗制滥造！！！

JustLc

关于前端部分-CSS-综合性练习2 的提问

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> body{ width: 1900px; background-color: #333333; } .leftdiv{ float: left; color: white; width: 550px; display: inline-block; background-color: black; margin-left: 10px; padding-left: 50px; } .rightdiv{ float: right; background-color: #000000; color: darkorange; width: 1250px; display: inline-block; } .title{ text-align: center; color: white; } .choose{ width: 180px; display: inline-block; margin-bottom:10px; } .price{ border-top: 1px dashed lightgray; } .imgdiv{ display: inline-block; text-align: center; padding: 5px; } .imgdiv img{ border: 1px gray solid; width: 150px; height: 150px; } </style> </head> <body> <div id="left" class="leftdiv"> <div id="hero" class="heroclassify"> <h3 class="title">英雄资料</h3> <div class="choose"> <input type="checkbox" />坦克 </div> <div class="choose"> <input type="checkbox" />法师 </div> <div class="choose"> <input type="checkbox" />刺客 </div> <div class="choose"> <input type="checkbox" />辅助 </div> <div class="choose"> <input type="checkbox" />射手 </div> <div class="choose"> <input type="checkbox" />近战 </div> <div class="choose"> <input type="checkbox" />远程 </div> <div class="choose"> <input type="checkbox" />推进 </div> <div class="choose"> <input type="checkbox" />打野 </div> <div class="choose"> <input type="checkbox" />后期 </div> <div class="choose"> <input type="checkbox" />潜行 </div> <div class="choose"> <input type="checkbox" />战士 </div> <p style="color: darkorange;">英雄价格:</p> <div class="price"> <div class="choose"> <input type="checkbox" />6300 </div> <div class="choose"> <input type="checkbox" />4800 </div> <div class="choose"> <input type="checkbox" />3150 </div> <div class="choose"> <input type="checkbox" />1350 </div> <div class="choose"> <input type="checkbox" />450 </div> </div> </div> <div id="wuping" class="wupingdiv"> <h3 class="title">物品资料</h3> <div class="choose"> <input type="checkbox" />生命值 </div> <div class="choose"> <input type="checkbox" />攻击速度 </div> <div class="choose"> <input type="checkbox" />护甲穿透 </div> <div class="choose"> <input type="checkbox" />暴击 </div> <div class="choose"> <input type="checkbox" />法术穿透 </div> <div class="choose"> <input type="checkbox" />魔法抗性 </div> <div class="choose"> <input type="checkbox" />法术伤害 </div> <div class="choose"> <input type="checkbox" />物理伤害 </div> <div class="choose"> <input type="checkbox" />消耗品 </div> <div class="choose"> <input type="checkbox" />韧性 </div> <div class="choose"> <input type="checkbox" />法力值 </div> <div class="choose"> <input type="checkbox" />生命偷取 </div> <div class="choose"> <input type="checkbox" />冷却缩减 </div> <div class="choose"> <input type="checkbox" />生命回复 </div> <div class="choose"> <input type="checkbox" />附魔 </div> <div class="choose"> <input type="checkbox" />法术回复 </div> <div class="choose"> <input type="checkbox" />法术吸血 </div> <div class="choose"> <input type="checkbox" />移动速度 </div> <div class="choose"> <input type="checkbox" />护甲值 </div> </div> <h3 class="title">符文资料</h3> </div> <div id="right" class="rightdiv"> <div id="lolimg" class="imgdiv"> <img src="imgs/0.jpg"/> <p>牛头酋长</p> <p>阿利斯塔</p> </div> <div id="lolimg" class="imgdiv"> <img src="imgs/1.jpg"/> <p>牛头酋长</p> <p>阿利斯塔</p> </div> <div id="lolimg" class="imgdiv"> <img src="imgs/2.jpg"/> <p>牛头酋长</p> <p>阿利斯塔</p> </div> <div id="lolimg" class="imgdiv"> <img src="imgs/3.jpg"/> <p>牛头酋长</p> <p>阿利斯塔</p> </div> <div id="lolimg" class="imgdiv"> <img src="imgs/4.jpg"/> <p>牛头酋长</p> <p>阿利斯塔</p> </div> <div id="lolimg" class="imgdiv"> <img src="imgs/5.jpg"/> <p>牛头酋长</p> <p>阿利斯塔</p> </div> <div id="lolimg" class="imgdiv"> <img src="imgs/6.jpg"/> <p>牛头酋长</p> <p>阿利斯塔</p> </div> <div id="lolimg" class="imgdiv"> <img src="imgs/7.jpg"/> <p>牛头酋长</p> <p>阿利斯塔</p> </div> <div id="lolimg" class="imgdiv"> <img src="imgs/8.jpg"/> <p>牛头酋长</p> <p>阿利斯塔</p> </div> <div id="lolimg" class="imgdiv"> <img src="imgs/9.jpg"/> <p>牛头酋长</p> <p>阿利斯塔</p> </div> <div id="lolimg" class="imgdiv"> <img src="imgs/10.jpg"/> <p>牛头酋长</p> <p>阿利斯塔</p> </div> <div id="lolimg" class="imgdiv"> <img src="imgs/11.jpg"/> <p>牛头酋长</p> <p>阿利斯塔</p> </div> <div id="lolimg" class="imgdiv"> <img src="imgs/12.jpg"/> <p>牛头酋长</p> <p>阿利斯塔</p> </div> <div id="lolimg" class="imgdiv"> <img src="imgs/13.jpg"/> <p>牛头酋长</p> <p>阿利斯塔</p> </div> <div id="lolimg" class="imgdiv"> <img src="imgs/14.jpg"/> <p>牛头酋长</p> <p>阿利斯塔</p> </div> <div id="lolimg" class="imgdiv"> <img src="imgs/15.jpg"/> <p>牛头酋长</p> <p>阿利斯塔</p> </div> <div id="lolimg" class="imgdiv"> <img src="imgs/16.jpg"/> <p>牛头酋长</p> <p>阿利斯塔</p> </div> <div id="lolimg" class="imgdiv"> <img src="imgs/17.jpg"/> <p>牛头酋长</p> <p>阿利斯塔</p> </div> <div id="lolimg" class="imgdiv"> <img src="imgs/18.jpg"/> <p>牛头酋长</p> <p>阿利斯塔</p> </div> <div id="lolimg" class="imgdiv"> <img src="imgs/19.jpg"/> <p>牛头酋长</p> <p>阿利斯塔</p> </div> <div id="lolimg" class="imgdiv"> <img src="imgs/20.jpg"/> <p>牛头酋长</p> <p>阿利斯塔</p> </div> <div id="lolimg" class="imgdiv"> <img src="imgs/0.jpg"/> <p>牛头酋长</p> <p>阿利斯塔</p> </div> <div id="lolimg" class="imgdiv"> <img src="imgs/21.jpg"/> <p>牛头酋长</p> <p>阿利斯塔</p> </div> <div id="lolimg" class="imgdiv"> <img src="imgs/22.jpg"/> <p>牛头酋长</p> <p>阿利斯塔</p> </div> <div id="lolimg" class="imgdiv"> <img src="imgs/23.jpg"/> <p>牛头酋长</p> <p>阿利斯塔</p> </div> </div> </body> </html>

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2020-07-14 搞定，比一题做的快10分钟哈哈

asdhiodhw

关于前端部分-CSS-综合性练习2 的提问

搞定，比一题做的快10分钟哈哈

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<html>

<style>
body{
width:100%;
background-color:Gainsboro;
}

table.left_t{
float:left;
width:200;
height:500;
background-color:black;
border-collapse:collapse;
}
font{
color:white;
font-size:70%;
}

font.bold{
font-weight:bold;
}
td.center{
text-align:center;
}
td.left{
text-align:left;
}

table.right_r{
float:left;
margin-left:30;
width:500;
height:500;
background-color:black;
border-collapse:collapse;
}
img{
border:1px solid gray;
weight:50;
height:50;
}
table.right_r td{
text-align:center;
}
p{
margin:0;
font-size:60%;
color:DarkSalmon;
}
</style>
<body>
<table border="1" class="left_t">
<tr>
<td colspan="3" class="center"><font class="bold">英雄资料</font></td>
</tr>
<tr>
<td><input type="radio"><font>坦克</font></td>
<td><input type="radio"><font>法师</font></td>
<td><input type="radio"><font>刺客</font></td>
</tr>
<tr>
<td><input type="radio"><font>辅助</font></td>
<td><input type="radio"><font>法师</font></td>
<td><input type="radio"><font>刺客</font></td>
</tr>
<tr>
<td><input type="radio"><font>坦克</font></td>
<td><input type="radio"><font>法师</font></td>
<td><input type="radio"><font>刺客</font></td>
</tr>
<tr>
<td><input type="radio"><font>坦克</font></td>
<td><input type="radio"><font>法师</font></td>
<td><input type="radio"><font>刺客</font></td>
</tr>

<tr>
<td colspan="3" class="left"><font style="color:coral;">英雄价格:</font></td>
</tr>
<tr>
<td><input type="radio"><font>2313</font></td>
<td><input type="radio"><font>4321</font></td>
<td><input type="radio"><font>1234</font></td>
</tr>
<tr>
<td><input type="radio"><font>2313</font></td>
<td><input type="radio"><font>321</font></td>
<td></td>
</tr>

<tr>
<td colspan="3" class="center"><font class="bold">物品资料</font></td>
</tr>

<tr>
<td><input type="radio"><font>生命值</font></td>
<td><input type="radio"><font>攻击速度</font></td>
<td><input type="radio"><font>护甲穿透</font></td>
</tr>
<tr>
<td><input type="radio"><font>生命值</font></td>
<td><input type="radio"><font>攻击速度</font></td>
<td><input type="radio"><font>护甲穿透</font></td>
</tr>
<tr>
<td><input type="radio"><font>生命值</font></td>
<td><input type="radio"><font>攻击速度</font></td>
<td><input type="radio"><font>护甲穿透</font></td>
</tr>
<tr>
<td><input type="radio"><font>生命值</font></td>
<td><input type="radio"><font>攻击速度</font></td>
<td><input type="radio"><font>护甲穿透</font></td>
</tr>
<tr>
<td><input type="radio"><font>生命值</font></td>
<td><input type="radio"><font>攻击速度</font></td>
<td><input type="radio"><font>护甲穿透</font></td>
</tr>
<tr>
<td><input type="radio"><font>生命值</font></td>
<td><input type="radio"><font>攻击速度</font></td>
<td><input type="radio"><font>护甲穿透</font></td>
</tr>
<tr>
<td><input type="radio"><font>生命值</font></td>
</tr>

<tr>
<td colspan="3" class="center"><font class="bold">符文资料</font></td>
</tr>
</table>

<table class="right_r">
<tr>
<td><img src="0.jpg"><p>牛头酋长</p><p>阿利斯塔</p></td>
<td><img src="0.jpg"><p>牛头酋长</p><p>阿利斯塔</p></td>
<td><img src="0.jpg"><p>牛头酋长</p><p>阿利斯塔</p></td>
<td><img src="0.jpg"><p>牛头酋长</p><p>阿利斯塔</p></td>
<td><img src="0.jpg"><p>牛头酋长</p><p>阿利斯塔</p></td>
<td><img src="0.jpg"><p>牛头酋长</p><p>阿利斯塔</p></td>
<td><img src="0.jpg"><p>牛头酋长</p><p>阿利斯塔</p></td>
</tr>

<tr>
<td><img src="0.jpg"><p>牛头酋长</p><p>阿利斯塔</p></td>
<td><img src="0.jpg"><p>牛头酋长</p><p>阿利斯塔</p></td>
<td><img src="0.jpg"><p>牛头酋长</p><p>阿利斯塔</p></td>
<td><img src="0.jpg"><p>牛头酋长</p><p>阿利斯塔</p></td>
<td><img src="0.jpg"><p>牛头酋长</p><p>阿利斯塔</p></td>
<td><img src="0.jpg"><p>牛头酋长</p><p>阿利斯塔</p></td>
<td><img src="0.jpg"><p>牛头酋长</p><p>阿利斯塔</p></td>
</tr>


<tr>
<td><img src="0.jpg"><p>牛头酋长</p><p>阿利斯塔</p></td>
<td><img src="0.jpg"><p>牛头酋长</p><p>阿利斯塔</p></td>
<td><img src="0.jpg"><p>牛头酋长</p><p>阿利斯塔</p></td>
<td><img src="0.jpg"><p>牛头酋长</p><p>阿利斯塔</p></td>
<td><img src="0.jpg"><p>牛头酋长</p><p>阿利斯塔</p></td>
<td><img src="0.jpg"><p>牛头酋长</p><p>阿利斯塔</p></td>
<td><img src="0.jpg"><p>牛头酋长</p><p>阿利斯塔</p></td>
</tr>

<tr>
<td><img src="0.jpg"><p>牛头酋长</p><p>阿利斯塔</p></td>
<td><img src="0.jpg"><p>牛头酋长</p><p>阿利斯塔</p></td>
<td><img src="0.jpg"><p>牛头酋长</p><p>阿利斯塔</p></td>
<td><img src="0.jpg"><p>牛头酋长</p><p>阿利斯塔</p></td>
<td><img src="0.jpg"><p>牛头酋长</p><p>阿利斯塔</p></td>
<td><img src="0.jpg"><p>牛头酋长</p><p>阿利斯塔</p></td>
<td><img src="0.jpg"><p>牛头酋长</p><p>阿利斯塔</p></td>
</tr>

<tr>
<td><img src="0.jpg"><p>牛头酋长</p><p>阿利斯塔</p></td>
<td><img src="0.jpg"><p>牛头酋长</p><p>阿利斯塔</p></td>
<td><img src="0.jpg"><p>牛头酋长</p><p>阿利斯塔</p></td>
<td><img src="0.jpg"><p>牛头酋长</p><p>阿利斯塔</p></td>
<td><img src="0.jpg"><p>牛头酋长</p><p>阿利斯塔</p></td>
<td><img src="0.jpg"><p>牛头酋长</p><p>阿利斯塔</p></td>
<td><img src="0.jpg"><p>牛头酋长</p><p>阿利斯塔</p></td>
</tr>

</table>





</body>
</html>

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2020-06-09 练习2

piyi

关于前端部分-CSS-综合性练习2 的提问

rt

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        #interface{
            margin: 0 auto;
            margin-top: 100px;
            width: 770px;
            height: 555px;
            background-color: #333333;
        }
        .left{
            display: inline-block;
            width: 215px;
            height: 505px;
            margin: 10px 20px 40px 7px; 
            background-color:#11141B;
            font-size: 0.7em;
            float: left;
        }
        .left table{
            width: 90%;
            height: 108px;
            text-align: center;
            color: white;
        }
        .left span{
            margin-left: 15px;
            color: #F29202;
        }
        .left caption{
            font-size: 1.1em;
            margin: 10px 0;
        }
        .left hr{
            border: 0px;
            border-bottom: dashed 2px;
            color: #1D2533;
            margin: 10px 0px;
        }
        .tab2{
            height: 54px !important;
        }
        .tab3{
            height: 189px !important;
        }
        .right{
            display: inline-block;
            width: 520px;
            height: 545px;
            background-color:#11141B;
            margin-top: 10px;
            font-size: 0.7em;
        }
        .right table{
            text-align: center;
            height: 530px;
            width: 100%;
        }
        .right span{
            display: block;
            color: #F29202;
        }
    </style>
</head>
<body>
    <div id="interface">
        <div class="left">
            <table>
                <caption>英雄资料</caption>
                <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>
            <span>英雄价格:</span>
            <hr>
            <table class="tab2">
                <tr>
                    <td><input type="checkbox" > 6300</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>
            <table class="tab3">
                <caption>物品资料</caption>
                <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>
            <table>
                <caption>符文资料</caption>
            </table>
        </div>
        <div class="right">
            <table>
                <tr>
                    <td>
                        <div>
                            <img src="lol\0.jpg" width="80%">
                        </div>
                        <span>沙漠死神</span>
                        <span>内瑟斯</span>
                    </td>
                    <td>
                        <div>
                            <img src="lol\1.jpg" width="80%">
                        </div>
                        <span>牛头酋长</span>
                        <span>阿利斯塔</span>
                    </td>
                    <td>
                        <div>
                            <img src="lol\2.jpg" width="80%">
                        </div>
                        <span>牛头酋长</span>
                        <span>阿利斯塔</span>
                    </td>
                    <td>
                        <div>
                            <img src="lol\3.jpg" width="80%">
                        </div>
                        <span>牛头酋长</span>
                        <span>阿利斯塔</span>
                    </td>
                    <td>
                        <div>
                            <img src="lol\4.jpg" width="80%">
                        </div>
                        <span>牛头酋长</span>
                        <span>阿利斯塔</span>
                    </td>
                    <td>
                        <div>
                            <img src="lol\5.jpg" width="80%">
                        </div>
                        <span>牛头酋长</span>
                        <span>阿利斯塔</span>
                    </td>
                    <td>
                        <div>
                            <img src="lol\6.jpg" width="80%">
                        </div>
                        <span>牛头酋长</span>
                        <span>阿利斯塔</span>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div>
                            <img src="lol\7.jpg" width="80%">
                        </div>
                        <span>牛头酋长</span>
                        <span>阿利斯塔</span>
                    </td>
                    <td>
                        <div>
                            <img src="lol\8.jpg" width="80%">
                        </div>
                        <span>牛头酋长</span>
                        <span>阿利斯塔</span>
                    </td>
                    <td>
                        <div>
                            <img src="lol\9.jpg" width="80%">
                        </div>
                        <span>牛头酋长</span>
                        <span>阿利斯塔</span>
                    </td>
                    <td>
                        <div>
                            <img src="lol\10.jpg" width="80%">
                        </div>
                        <span>牛头酋长</span>
                        <span>阿利斯塔</span>
                    </td>
                    <td>
                        <div>
                            <img src="lol\11.jpg" width="80%">
                        </div>
                        <span>牛头酋长</span>
                        <span>阿利斯塔</span>
                    </td>
                    <td>
                        <div>
                            <img src="lol\12.jpg" width="80%">
                        </div>
                        <span>牛头酋长</span>
                        <span>阿利斯塔</span>
                    </td>
                    <td>
                        <div>
                            <img src="lol\13.jpg" width="80%">
                        </div>
                        <span>牛头酋长</span>
                        <span>阿利斯塔</span>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div>
                            <img src="lol\14.jpg" width="80%">
                        </div>
                        <span>牛头酋长</span>
                        <span>阿利斯塔</span>
                    </td>
                    <td>
                        <div>
                            <img src="lol\15.jpg" width="80%">
                        </div>
                        <span>牛头酋长</span>
                        <span>阿利斯塔</span>
                    </td>
                    <td>
                        <div>
                            <img src="lol\16.jpg" width="80%">
                        </div>
                        <span>牛头酋长</span>
                        <span>阿利斯塔</span>
                    </td>
                    <td>
                        <div>
                            <img src="lol\17.jpg" width="80%">
                        </div>
                        <span>牛头酋长</span>
                        <span>阿利斯塔</span>
                    </td>
                    <td>
                        <div>
                            <img src="lol\18.jpg" width="80%">
                        </div>
                        <span>牛头酋长</span>
                        <span>阿利斯塔</span>
                    </td>
                    <td>
                        <div>
                            <img src="lol\19.jpg" width="80%">
                        </div>
                        <span>牛头酋长</span>
                        <span>阿利斯塔</span>
                    </td>
                    <td>
                        <div>
                            <img src="lol\20.jpg" width="80%">
                        </div>
                        <span>牛头酋长</span>
                        <span>阿利斯塔</span>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div>
                            <img src="lol\21.jpg" width="80%">
                        </div>
                        <span>牛头酋长</span>
                        <span>阿利斯塔</span>
                    </td>
                    <td>
                        <div>
                            <img src="lol\22.jpg" width="80%">
                        </div>
                        <span>牛头酋长</span>
                        <span>阿利斯塔</span>
                    </td>
                    <td>
                        <div>
                            <img src="lol\23.jpg" width="80%">
                        </div>
                        <span>牛头酋长</span>
                        <span>阿利斯塔</span>
                    </td>
                    <td>
                        <div>
                            <img src="lol\24.jpg" width="80%">
                        </div>
                        <span>牛头酋长</span>
                        <span>阿利斯塔</span>
                    </td>
                    <td>
                        <div>
                            <img src="lol\25.jpg" width="80%">
                        </div>
                        <span>牛头酋长</span>
                        <span>阿利斯塔</span>
                    </td>
                    <td>
                        <div>
                            <img src="lol\26.jpg" width="80%">
                        </div>
                        <span>牛头酋长</span>
                        <span>阿利斯塔</span>
                    </td>
                    <td>
                        <div>
                            <img src="lol\27.jpg" width="80%">
                        </div>
                        <span>牛头酋长</span>
                        <span>阿利斯塔</span>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div>
                            <img src="lol\28.jpg" width="80%">
                        </div>
                        <span>牛头酋长</span>
                        <span>阿利斯塔</span>
                    </td>
                    <td>
                        <div>
                            <img src="lol\29.jpg" width="80%">
                        </div>
                        <span>牛头酋长</span>
                        <span>阿利斯塔</span>
                    </td>
                    <td>
                        <div>
                            <img src="lol\30.jpg" width="80%">
                        </div>
                        <span>牛头酋长</span>
                        <span>阿利斯塔</span>
                    </td>
                    <td>
                        <div>
                            <img src="lol\31.jpg" width="80%">
                        </div>
                        <span>牛头酋长</span>
                        <span>阿利斯塔</span>
                    </td>
                    <td>
                        <div>
                            <img src="lol\32.jpg" width="80%">
                        </div>
                        <span>牛头酋长</span>
                        <span>阿利斯塔</span>
                    </td>
                    <td>
                        <div>
                            <img src="lol\33.jpg" width="80%">
                        </div>
                        <span>牛头酋长</span>
                        <span>阿利斯塔</span>
                    </td>
                    <td>
                        <div>
                            <img src="lol\34.jpg" width="80%">
                        </div>
                        <span>牛头酋长</span>
                        <span>阿利斯塔</span>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    
    
</body>
</html>

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

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

提问之前请登陆

提问已经提交成功，正在审核。请于我的提问处查看提问记录，谢谢

关于前端部分-CSS-综合性练习2 的提问

尽量提供截图、代码和异常信息，有助于分析和解决问题。也可进本站QQ群交流: 635924385

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