澳门新葡萄京www27111com

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

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


步骤 1 :

练习效果图

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


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


问答区域    
2018-03-01 交作业 哈哈
篮子鱼



交作业 哈哈
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312">
</head>
<style>

div#div1{
width:769px;
height:554px;
background-color:#333;

}

div#div2{
width:212px;
height:506px;
background-color:#11141b;
margin:7px 0px 40px 5px;

}

div#div3{
width:514px;
height:547px;
background-color:#11141b;
margin:7px 18px 0px 0px;


}

.floatleft{
float:left;

}

.floatright{
float:right;
}

.table1{
font-size:10px;
color:#fff;
margin: 0 auto;

}


table tr td.Title1{
text-align:center;
font-size:12px;
height:40px;
font-weight:bold;

}


table tr td.Title2{
font-size:11px;
font-weight:bold;
height:40px;
color:#ff9900;
border-bottom-style:dashed;
border-bottom-width:1px;
border-bottom-color:#263145;

}



table tr td.T2{
width:53px;
height53px;


}

.img1{
width:53px;
height:53px;
border-style:solid;
border-width:1px;
border-color:#484d53;
}


.table2{
width:400px;
text-align:center;
font-size:10px;
margin: 0 auto;
padding-top:5px;
border-spacing:15px;
color:#ff9100;
line-height:150%;



}
table tr td p {

    margin-top:5px;

}


}


</style>

<body>

<div id="div1">

<div id="div2" class="floatleft">
<table class="table1">

<tr>
<td colspan="3" class="Title1">英雄资料</td>
</tr>

<tr>
<td><input type="checkbox" value="坦克" >&nbsp&nbsp坦克</td>
<td><input type="checkbox" value="法师" >&nbsp&nbsp法师</td>
<td><input type="checkbox" value="刺客" >&nbsp&nbsp刺客</td>
</tr>
<tr>
<td><input type="checkbox" value="辅助" >&nbsp&nbsp辅助</td>
<td><input type="checkbox" value="新手" >&nbsp&nbsp新手</td>
<td><input type="checkbox" value="近战" >&nbsp&nbsp近战</td>
</tr>
<tr>
<td><input type="checkbox" value="远程" >&nbsp&nbsp远程</td>
<td><input type="checkbox" value="推进" >&nbsp&nbsp推进</td>
<td><input type="checkbox" value="打野" >&nbsp&nbsp打野</td>
</tr>
<tr>
<td><input type="checkbox" value="后期" >&nbsp&nbsp后期</td>
<td><input type="checkbox" value="潜行" >&nbsp&nbsp潜行</td>
<td><input type="checkbox" value="战士" >&nbsp&nbsp战士</td>
</tr>


<tr>
<td colspan="3" class="Title2">&nbsp英雄价格:</td>
</tr>

<tr>
<td><input type="checkbox" value="6300" >&nbsp&nbsp6300</td>
<td><input type="checkbox" value="4800" >&nbsp&nbsp4800</td>
<td><input type="checkbox" value="3450" >&nbsp&nbsp3150</td>
</tr>

<tr>
<td><input type="checkbox" value="1350" >&nbsp&nbsp1350</td>
<td><input type="checkbox" value="450" >&nbsp&nbsp450</td>

</tr>


<tr>
<td colspan="3" class="Title1">物品资料</td>
</tr>
<tr>
<td><input type="checkbox" value="生命值" >生命值</td>
<td><input type="checkbox" value="攻击速度" >攻击速度</td>
<td><input type="checkbox" value="护甲穿透" >护甲穿透</td>
</tr>
<tr>
<td><input type="checkbox" value="暴击" >暴击</td>
<td><input type="checkbox" value="法术穿透" >法术穿透</td>
<td><input type="checkbox" value="魔法抗性" >魔法抗性</td>
</tr>
<tr>
<td><input type="checkbox" value="法术伤害" >法术伤害</td>
<td><input type="checkbox" value="物理伤害" >物理伤害</td>
<td><input type="checkbox" value="消耗品" >消耗品</td>
</tr>
<tr>
<td><input type="checkbox" value="韧性" >韧性</td>
<td><input type="checkbox" value="法力值" >法力值</td>
<td><input type="checkbox" value="生命偷取" >生命偷取</td>
</tr>
<tr>
<td><input type="checkbox" value="冷却缩减" >冷却缩减</td>
<td><input type="checkbox" value="生命回复" >生命回复</td>
<td><input type="checkbox" value="附魔" >附魔</td>
</tr>
<tr>
<td><input type="checkbox" value="法力回复" >法力回复</td>
<td><input type="checkbox" value="法术吸血" >法术吸血</td>
<td><input type="checkbox" value="移动速度" >移动速度</td>
</tr>
<tr>
<td><input type="checkbox" value="护甲值" >护甲值</td>

</tr>
<tr>
<td colspan="3" class="Title1">符文资料</td>
</tr>

</table>
</div>


<div id="div3"  class="floatright">

<table  class="table2">
<tr>

<td class="T2"> <img src="img/0.jpg" class="img1"> <p>沙漠死神</br>内瑟斯</P>  </td>
<td class="T2"> <img src="img/1.jpg" class="img1"> <p>冰霜女巫</br>丽桑卓</P>  </td>
<td class="T2"> <img src="img/2.jpg" class="img1"> <p>古拉加斯</br>酒桶</P>  </td>
<td class="T2"> <img src="img/3.jpg" class="img1">  <p>众星之子</br>索拉卡</P>   </td>
<td class="T2"> <img src="img/4.jpg" class="img1">   <p>暗裔剑魔</br>亚托克斯</P>  </td>
<td class="T2"> <img src="img/5.jpg" class="img1">  <p>盲僧</br>李青</P>   </td>
<td class="T2"> <img src="img/6.jpg" class="img1">  <p>雷霆咆哮</br>沃利贝尔</P>   </td> 


</tr>

<tr>

<td class="T2"> <img src="img/7.jpg" class="img1"> <p>暗影之拳</br>阿卡丽</P>  </td>
<td class="T2"> <img src="img/8.jpg" class="img1"> <p>扭曲树精</br>茂凯</P>  </td>
<td class="T2"> <img src="img/9.jpg" class="img1"> <p>流浪法师</br>瑞兹</P>  </td>
<td class="T2"> <img src="img/10.jpg" class="img1">  <p>虚空先知</br>马尔扎哈</P>   </td>
<td class="T2"> <img src="img/11.jpg" class="img1">   <p>审判天使</br>凯尔</P>   </td>
<td class="T2"> <img src="img/12.jpg" class="img1">  <p>蜘蛛女皇</br>伊莉斯</P>   </td>
<td class="T2"> <img src="img/13.jpg" class="img1">  <p>水晶先锋</br>斯卡纳</P>   </td> 


</tr>
<tr>

<td class="T2"> <img src="img/14.jpg" class="img1"> <p>诡术妖姬</br>乐芙兰</P>  </td>
<td class="T2"> <img src="img/15.jpg" class="img1"> <p>龙血武姬</br>希瓦娜</P>  </td>
<td class="T2"> <img src="img/16.jpg" class="img1"> <p>皇子</br>嘉文四世</P>  </td>
<td class="T2"> <img src="img/17.jpg" class="img1">  <p>刀锋意志</br>艾瑞莉娅</P>   </td>
<td class="T2"> <img src="img/18.jpg" class="img1">   <p>复仇焰魂</br>布兰德</P>   </td>
<td class="T2"> <img src="img/19.jpg" class="img1">  <p>狂野女猎手</br>奈德丽</P>   </td>
<td class="T2"> <img src="img/20.jpg" class="img1">  <p>蒸汽机器人</br>布里茨</P>   </td> 


</tr>
<tr>

<td class="T2"> <img src="img/21.jpg" class="img1"> <p>疾风剑豪</br>亚索</P>  </td>
<td class="T2"> <img src="img/22.jpg" class="img1"> <p>死亡颂唱者</br>卡尔萨斯</P>  </td>
<td class="T2"> <img src="img/23.jpg" class="img1"> <p>不祥之刃</br>卡特琳娜</P>  </td>
<td class="T2"> <img src="img/24.jpg" class="img1">  <p>惩戒之箭</br>维鲁斯</P>   </td>
<td class="T2"> <img src="img/25.jpg" class="img1">   <p>策士统领</br>斯维因</P>   </td>
<td class="T2"> <img src="img/26.jpg" class="img1">  <p>仙灵女巫</br>璐璐</P>   </td>
<td class="T2"> <img src="img/27.jpg" class="img1">  <p>沙漠皇帝</br>阿兹尔</P>   </td> 


</tr>
<tr>

<td class="T2"> <img src="img/28.jpg" class="img1"> <p>深渊巨口</br>克格莫</P>  </td>
<td class="T2"> <img src="img/29.jpg" class="img1"> <p>皮城女警</br>凯特琳</P>  </td>
<td class="T2"> <img src="img/30.jpg" class="img1"> <p>未来守护者</br>杰斯</P>  </td>
<td class="T2"> <img src="img/31.jpg" class="img1">  <p>光辉女郎</br>拉克丝</P>   </td>
<td class="T2"> <img src="img/32.jpg" class="img1">   <p>战争之影</br>赫卡里姆</P>   </td>
<td class="T2"> <img src="img/33.jpg" class="img1">  <p>弗雷尔卓德</br>布隆</P>   </td>
<td class="T2"> <img src="img/34.jpg" class="img1">  <p>战争女神</br>希维尔</P>   </td> 


</tr>







</table>




</div>
</div>



</body>



</html>            

							






答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





2018-03-01 交作业练习..
篮子鱼



交作业练习..
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312">
</head>
<style>

div#div1{
width:769px;
height:554px;
background-color:#333;

}

div#div2{
width:212px;
height:506px;
background-color:#11141b;
margin:7px 0px 40px 5px;

}

div#div3{
width:514px;
height:547px;
background-color:#11141b;
margin:7px 18px 0px 0px;


}

.floatleft{
float:left;

}

.floatright{
float:right;
}

.table1{
font-size:10px;
color:#fff;
margin: 0 auto;

}


table tr td.Title1{
text-align:center;
font-size:12px;
height:40px;
font-weight:bold;

}


table tr td.Title2{
font-size:11px;
font-weight:bold;
height:40px;
color:#ff9900;
border-bottom-style:dashed;
border-bottom-width:1px;
border-bottom-color:#263145;

}



table tr td.T2{
width:53px;
height53px;


}

.img1{
width:53px;
height:53px;
border-style:solid;
border-width:1px;
border-color:#484d53;
}


.table2{
width:400px;
text-align:center;
font-size:10px;
margin: 0 auto;
padding-top:5px;
border-spacing:15px;
color:#ff9100;
line-height:150%;



}
table tr td p {

    margin-top:5px;

}


}


</style>

<body>

<div id="div1">

<div id="div2" class="floatleft">
<table class="table1">

<tr>
<td colspan="3" class="Title1">英雄资料</td>
</tr>

<tr>
<td><input type="checkbox" value="坦克" >&nbsp&nbsp坦克</td>
<td><input type="checkbox" value="法师" >&nbsp&nbsp法师</td>
<td><input type="checkbox" value="刺客" >&nbsp&nbsp刺客</td>
</tr>
<tr>
<td><input type="checkbox" value="辅助" >&nbsp&nbsp辅助</td>
<td><input type="checkbox" value="新手" >&nbsp&nbsp新手</td>
<td><input type="checkbox" value="近战" >&nbsp&nbsp近战</td>
</tr>
<tr>
<td><input type="checkbox" value="远程" >&nbsp&nbsp远程</td>
<td><input type="checkbox" value="推进" >&nbsp&nbsp推进</td>
<td><input type="checkbox" value="打野" >&nbsp&nbsp打野</td>
</tr>
<tr>
<td><input type="checkbox" value="后期" >&nbsp&nbsp后期</td>
<td><input type="checkbox" value="潜行" >&nbsp&nbsp潜行</td>
<td><input type="checkbox" value="战士" >&nbsp&nbsp战士</td>
</tr>


<tr>
<td colspan="3" class="Title2">&nbsp英雄资料:</td>
</tr>

<tr>
<td><input type="checkbox" value="6300" >&nbsp&nbsp6300</td>
<td><input type="checkbox" value="4800" >&nbsp&nbsp4800</td>
<td><input type="checkbox" value="3450" >&nbsp&nbsp3150</td>
</tr>

<tr>
<td><input type="checkbox" value="1350" >&nbsp&nbsp1350</td>
<td><input type="checkbox" value="450" >&nbsp&nbsp450</td>

</tr>


<tr>
<td colspan="3" class="Title1">物品资料</td>
</tr>
<tr>
<td><input type="checkbox" value="生命值" >生命值</td>
<td><input type="checkbox" value="攻击速度" >攻击速度</td>
<td><input type="checkbox" value="护甲穿透" >护甲穿透</td>
</tr>
<tr>
<td><input type="checkbox" value="暴击" >暴击</td>
<td><input type="checkbox" value="法术穿透" >法术穿透</td>
<td><input type="checkbox" value="魔法抗性" >魔法抗性</td>
</tr>
<tr>
<td><input type="checkbox" value="法术伤害" >法术伤害</td>
<td><input type="checkbox" value="物理伤害" >物理伤害</td>
<td><input type="checkbox" value="消耗品" >消耗品</td>
</tr>
<tr>
<td><input type="checkbox" value="韧性" >韧性</td>
<td><input type="checkbox" value="法力值" >法力值</td>
<td><input type="checkbox" value="生命偷取" >生命偷取</td>
</tr>
<tr>
<td><input type="checkbox" value="冷却缩减" >冷却缩减</td>
<td><input type="checkbox" value="生命回复" >生命回复</td>
<td><input type="checkbox" value="附魔" >附魔</td>
</tr>
<tr>
<td><input type="checkbox" value="法力回复" >法力回复</td>
<td><input type="checkbox" value="法术吸血" >法术吸血</td>
<td><input type="checkbox" value="移动速度" >移动速度</td>
</tr>
<tr>
<td><input type="checkbox" value="护甲值" >护甲值</td>

</tr>
<tr>
<td colspan="3" class="Title1">符文资料</td>
</tr>

</table>
</div>


<div id="div3"  class="floatright">

<table  class="table2">
<tr>

<td class="T2"> <img src="img/0.jpg" class="img1"> <p>沙漠死神</br>内瑟斯</P>  </td>
<td class="T2"> <img src="img/1.jpg" class="img1"> <p>冰霜女巫</br>丽桑卓</P>  </td>
<td class="T2"> <img src="img/2.jpg" class="img1"> <p>古拉加斯</br>酒桶</P>  </td>
<td class="T2"> <img src="img/3.jpg" class="img1">  <p>众星之子</br>索拉卡</P>   </td>
<td class="T2"> <img src="img/4.jpg" class="img1">   <p>暗裔剑魔</br>亚托克斯</P>  </td>
<td class="T2"> <img src="img/5.jpg" class="img1">  <p>盲僧</br>李青</P>   </td>
<td class="T2"> <img src="img/6.jpg" class="img1">  <p>雷霆咆哮</br>沃利贝尔</P>   </td> 


</tr>

<tr>

<td class="T2"> <img src="img/7.jpg" class="img1"> <p>暗影之拳</br>阿卡丽</P>  </td>
<td class="T2"> <img src="img/8.jpg" class="img1"> <p>扭曲树精</br>茂凯</P>  </td>
<td class="T2"> <img src="img/9.jpg" class="img1"> <p>流浪法师</br>瑞兹</P>  </td>
<td class="T2"> <img src="img/10.jpg" class="img1">  <p>虚空先知</br>马尔扎哈</P>   </td>
<td class="T2"> <img src="img/11.jpg" class="img1">   <p>审判天使</br>凯尔</P>   </td>
<td class="T2"> <img src="img/12.jpg" class="img1">  <p>蜘蛛女皇</br>伊莉斯</P>   </td>
<td class="T2"> <img src="img/13.jpg" class="img1">  <p>水晶先锋</br>斯卡纳</P>   </td> 


</tr>
<tr>

<td class="T2"> <img src="img/14.jpg" class="img1"> <p>诡术妖姬</br>乐芙兰</P>  </td>
<td class="T2"> <img src="img/15.jpg" class="img1"> <p>龙血武姬</br>希瓦娜</P>  </td>
<td class="T2"> <img src="img/16.jpg" class="img1"> <p>皇子</br>嘉文四世</P>  </td>
<td class="T2"> <img src="img/17.jpg" class="img1">  <p>刀锋意志</br>艾瑞莉娅</P>   </td>
<td class="T2"> <img src="img/18.jpg" class="img1">   <p>复仇焰魂</br>布兰德</P>   </td>
<td class="T2"> <img src="img/19.jpg" class="img1">  <p>狂野女猎手</br>奈德丽</P>   </td>
<td class="T2"> <img src="img/20.jpg" class="img1">  <p>蒸汽机器人</br>布里茨</P>   </td> 


</tr>
<tr>

<td class="T2"> <img src="img/21.jpg" class="img1"> <p>疾风剑豪</br>亚索</P>  </td>
<td class="T2"> <img src="img/22.jpg" class="img1"> <p>死亡颂唱者</br>卡尔萨斯</P>  </td>
<td class="T2"> <img src="img/23.jpg" class="img1"> <p>不祥之刃</br>卡特琳娜</P>  </td>
<td class="T2"> <img src="img/24.jpg" class="img1">  <p>惩戒之箭</br>维鲁斯</P>   </td>
<td class="T2"> <img src="img/25.jpg" class="img1">   <p>策士统领</br>斯维因</P>   </td>
<td class="T2"> <img src="img/26.jpg" class="img1">  <p>仙灵女巫</br>璐璐</P>   </td>
<td class="T2"> <img src="img/27.jpg" class="img1">  <p>沙漠皇帝</br>阿兹尔</P>   </td> 


</tr>
<tr>

<td class="T2"> <img src="img/28.jpg" class="img1"> <p>深渊巨口</br>克格莫</P>  </td>
<td class="T2"> <img src="img/29.jpg" class="img1"> <p>皮城女警</br>凯特琳</P>  </td>
<td class="T2"> <img src="img/30.jpg" class="img1"> <p>未来守护者</br>杰斯</P>  </td>
<td class="T2"> <img src="img/31.jpg" class="img1">  <p>光辉女郎</br>拉克丝</P>   </td>
<td class="T2"> <img src="img/32.jpg" class="img1">   <p>战争之影</br>赫卡里姆</P>   </td>
<td class="T2"> <img src="img/33.jpg" class="img1">  <p>弗雷尔卓德</br>布隆</P>   </td>
<td class="T2"> <img src="img/34.jpg" class="img1">  <p>战争女神</br>希维尔</P>   </td> 


</tr>







</table>




</div>
</div>



</body>



</html>            

							






答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





2018-01-14 交作业!
2018-01-14 交作业!
2017-12-21 交作业
2017-11-25 可以使用表格嵌套,更方便的排版。
2017-11-25 在ie及edge中部分图片无法显示
2017-11-22 交作业咯!
2017-10-20 交个作业!~
2017-07-23 答案显示得有问题,那个布局。
2017-05-25 chrome显示问题
2017-04-15 关于水平居中的问题
2016-06-22 大神。跪求答案
2016-06-16 假如能把练习的答案发下就好了




提问之前请登陆
关于 前端基础-CSS-综合性练习2 的提问

尽量提供截图、代码异常信息,有助于分析和解决问题。 也可进本站QQ群交流: 389538688
站长会在每个工作日早上尽量回答提问(如果有漏掉没有回答的,请进群提醒一下)
提问尽量提供完整的代码,环境描述,越是有利于问题的重现,您的问题越能更快得到解答。
对教程中代码有疑问,请提供是哪个步骤,哪一行有疑问,这样便于快速定位问题,提高问题得到解答的速度
站长是玻璃心,提问的时候请语气温柔些 kiss~
截止2017-5-19日累计提问 1638个,站长回答了 1546个
截止2017-8-15日累计提问 2788个,站长回答了 2544个

上传截图