CSS练习实例2

1.完成如图效果
材料地址
在这里插入图片描述

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

<style>
body{
    font-family:"宋体";
    font-size:13px;
    color:#666666;
    width:643px;
    }

    .bold{
    font-weight:bold;
    }

    div.topdiv{
      border-bottom-style:solid;
      border-bottom-color:silver;
      border-bottom-width:1;
      padding-bottom:10px;
      margin-bottom:15px;
    }
    .floatright{
    	float:right;
    }

    .floatleft{
    	float:left;
    }

    .show{
     border:1px solid red;
    }

    div1{
    border:1px solid green;
    }

    a{
    text-decoration: none;
    color:#336699;
    }
    .text{
      color:#333;
    }

    div#thirdDiv span{
        color:darkgray;
    }

    div.clearLeft{
	clear:left;
    }

</style>

<body>
   <div class="topdiv"> 
	<img style="margin-right:5px" src="1.png"> 
	<span class="bold">最新动态</span> 
	<span  class="floatright" >设置</span> 
	<img  style="margin-right:5px" class="floatright" src="2.png"> 
   </div>


  <div id="left" class="floatleft" style="margin-right:15px">
    <img src="4.png"/> <br>
    <br>
    <span style="background-image:url(5.png); padding:5px">6551</span>
  </div>
  
  <div id="right" class="floatleft show1">
    <div style="margin-bottom:5px">
    	<span>热门回答,来自 机械</span> 
    <a href="#">关注话题</a>
    <img src="3.png" class="floatright">
    </div>
    <a class="bold">人类史上令人叹为观止的极限精度制造成果有哪些?</a>
    <p class="text"><strong>Vincent Fu</strong>, Materials Science, PhD</p>
    <img class="floatleft" src="6.png"/>
    <div  class="floatleft text" style="line-height:170%;margin-left:15px;width:367px"">		
	
		说到精度,就不得不提在材料学中最重要的一个方面:表征。要项研究一种材料性能,握在手里把玩时远远不够的,就算你拿出放大镜离近了看,也只能看到表面的一些坑坑洼洼,而为了知晓一种材料的纤维结构,科学家至少要下到纳米级(放大千倍),如果要获得更深... 	
	
	<a href="">显示全部 </a> 
	<br>
      &nbsp; 
    </div>
   	
    <div id="thirdDiv"> 
		<img src="7.png"> 
		<span>关注问题</span> 
		<img src="8.png"> 
		<span>867条评论</span>
	    <img src="9.png"> 
		<span>作者保留权利</span> 
     </div>
  </div>
<div class="clearLeft" >
</div>
<div id="bottom" style="margin-top:20px;border-top-style:solid;border-top-width:1px;border-top-color:#ddd"> 
</div>


</body>
</html>

2.实现如下效果
在这里插入图片描述

<html>
    <head>
        <meta charset="GB2312">
        <title>综合性练习3</title>
    <style>
        div.yidong{
            margin:auto;
            width:700px;
            height:600px;
            padding:20px
        }
        div.background{
            width:610px;
            height:480px;
            border:2px solid lightblue;
        }
        span.biaoti{
            display:block;
            background-color:lightblue;
            margin:2px;
            font-size:15px;
            font-weight:bold;
            color:steelblue;
        }
        .red{
            color:red;
        }
        table{
            /*border:1px solid red;*/
            width:100%;
            border-bottom:2px solid lightcyan;
            margin:1px;
            padding:1px;
        }
        td{
            height:70px;
            padding:6px;
            margin:2px;
        }
        .pt_ziti{
            font-size:12px;
            letter-spacing:1px;
        }
        a.lj_ziti{
            font-size:11px;
            letter-spacing:1.5px;
        }
        td.background{
            background-color:whitesmoke;
            width:330px;
        }
        input{
            width:120px;
        }
        tr
        td.one{
            width:20%
        }
        td.two{
            width:20%
        }
        td.thr{
            width:60%
        }
    </style>
    </head>
    <body>
        <div class="yidong">
        <span class="pt_ziti red">请注意:带有“*”的项目必须填写</span>
        <div class="background">
            <span class="biaoti">填写您的用户名:</span>
            <table class="a">
                <tr>
                    <td class="pt_ziti one"><font color="red">*</font>通行证用户名:</td>
                    <td class="two"><input type="text" value="请输入用户名" onfocus="if(value=='请输入用户名') {value=''}" onblur="if (value=='') {value='请输入用户名'}" style="background-color:ghostwhite ; color:lightgray" /><br/><a class="lj_ziti" href="#";>查看用户名是否被占用</a></td>
                    <td class="pt_ziti background thr">用户名由a~z的英文字母(不区分大小写)、0~9的数字、<b>点、减号</b><b>下划线</b>组成,长度为3~18个字符,只能以数字或者字母开头和结尾,例如:kyzy_001.</td>
                </tr>
            </table>
            <span class="biaoti">请填写安全设置:<span style="font-size:small; font-weight:normal">(安全设置用于验证帐号和找回密码)</span></span>
            <span class="pt_ziti red">以下信息对保证您帐号的安全极为重要,请您务必认真填写.</span>
            <table>
                <tr>
                    <td class="pt_ziti one"><span class="red">*</span>输入登录密码:<br/><span class="red">*</span>登录密码确认:</td>
                    <td class="two"><input type="text"style=" background-color:ghostwhite";><br style="margin:5px"/><input type="text" style=" background-color:ghostwhite";></td>
                    <td class="pt_ziti background thr">密码长度为6~16位,区分字母大小写,登录密码可以由字母、数字、特殊字符组成.【<a class="lj_ziti" href="#";>更多说明</a></td>
                </tr>
            </table>
            <table>
                <tr>
                    <td class="pt_ziti one"><span class="red">*</span>密码提示问题:<br/><span class="red">*</span>密码提示答案:</td>
                    <td class="two"><input type="text" style=" background-color:ghostwhite";><br/ style="margin:5px"><input type="text" style=" background-color:ghostwhite";></td>
                    <td class="pt_ziti background thr">当您忘记密码时可以由找回密码.例如,问题是“我的哥哥是谁”,答案为“peter2”.问题长度<b>不大于36</b>个字符,一个汉子占两个字符,答案长度在6~30位之间,区分大小写.【<a class="lj_ziti" href="#">更多说明</a></td>
                </tr>
            </table>
            <table>
                <tr>
                    <td class="pt_ziti one"><span class="red">*</span>输入安全码:<br/><span class="red">*</span>安全码确认:</td>
                    <td class="two"><input type="text" style=" background-color:ghostwhite";><br/ style="margin:5px"><input type="text" style=" background-color:ghostwhite";></td>
                    <td class="pt_ziti background thr">安全码时您找回密码的重要途径,安全码长度为6~16位,区分字母大小写,由字母,数字特殊字符组成.<span class="red">特别提醒:安全码一旦设定,将不可自行修改.</span><a class="lj_ziti" href="#">更多说明</a></td>
                </tr>
            </table>
            <center></span><input style="margin:10px;" type="button" value="提 交 表 单"></center>
        </div>
        </div>
         
    </body>
</html>

3.实现如下效果
在这里插入图片描述

材料下载

<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312">
</head>
<style>
.table1{



}
.tr{	
background-color:#11141B;
border-top-color:#11141B;



}
div.gold{

color:#FF9100;
text-align:center;
font-size:10px;
}
div.gold1{
color:#FF9100;
text-align:left;
font-size:10px;
font-style:bold;
}

div.fond{

background-color:#333333;
width:800px;
height:550px;
}	
div.boldwhite{

font:"宋体" bold;
color: #F4F4F4;
text-align:center;
font-size:15px;
margin:10px;
margin-bottom:15;

}

div.white{
font:"宋体";
color: #F4F4F4;
margin-top:5px;
margin-bottom:5px;

}

div.dark{


background-color:#11141B;

}

.floatleft{

float:left;

}
span.option{


margin-right:15px;
font-size:10px;	

}


</style>

<div class="fond" >
<div style="padding-bottom:20px;" class="dark floatleft">
<div class="boldwhite">
英雄资料
</div>

<div style="margin-left:10px" class="white ">
<span class="option"><input type="checkbox" > 坦克 </span>
<span class="option"><input type="checkbox" > 法师 </span>
<span class="option"><input type="checkbox" > 刺客 </span>
</div>           
<div style="margin-left:10px" class="white ">
<span class="option"><input type="checkbox" > 辅助 </span> 
<span class="option"><input type="checkbox" > 新手 </span>
<span class="option"><input type="checkbox" > 近战 </span>
</div>
<div style="margin-left:10px" class="white ">
<span class="option"><input type="checkbox" > 远程 </span> 
<span class="option"><input type="checkbox" > 推进 </span>
<span class="option"><input type="checkbox" > 打野 </span>
</div>
<div style="margin-left:10px" class="white ">
<span class="option"><input type="checkbox" > 后期 </span> 
<span class="option"><input type="checkbox" > 潜行 </span>
<span class="option"><input type="checkbox" > 战士 </span>
</div>
       
	   <div  style="margin-top:15px;margin-left:15px" class="gold1" ><strong>英雄价格:</strong></div>
	   <div style="border-top-style:dashed; border-color:#666666;border-width:1; margin-bottom:10px; 			        margin-top: 10px"> </div>
	   <div style="margin-left:10px" class="white ">
	   <span class="option"><input type="checkbox" > 6300 </span>
	   <span class="option"><input type="checkbox" > 4800 </span>
	   <span class="option"><input type="checkbox" > 3150 </span>
	   </div>
	   <div style="margin-left:10px" class="white ">
	   <span class="option"><input type="checkbox" > 1350 </span>
	   <span class="option"><input type="checkbox" > 450  </span>
	   </div>
	   <div style="margin-top:20px;margin-bottom:20px" class="boldwhite">
		物品资料
	</div>
	   <div style="margin-left:10px" class="white ">
	   <span class="option"><input type="checkbox" > 生命值 </span>
	   <span style="margin-left:-10px" class="option"><input type="checkbox" > 攻击速度 </span>
	   <span style="margin-left:-20px" class="option"><input type="checkbox" > 护甲穿透 </span>
	   </div>
	    <div style="margin-left:10px" class="white ">
	   <span class="option"><input type="checkbox" > 暴击 </span>
	   <span class="option"><input type="checkbox" > 法术穿透 </span>
	   <span style="margin-left:-20px" class="option"><input type="checkbox" > 魔法抗性 </span>
	   </div>
	   <div style="margin-left:10px" class="white ">
	   <span class="option"><input type="checkbox" > 法术伤害 </span>
	   <span style="margin-left:-20px" class="option"><input type="checkbox" > 物理伤害 </span>
	   <span style="margin-left:-20px" class="option"><input type="checkbox" > 消耗品 </span>
	   </div>
	    <div style="margin-left:10px" class="white ">
	   <span class="option"><input type="checkbox" > 韧性 </span>
	   <span class="option"><input type="checkbox" > 法力值 </span>
	    <span style="margin-left:-10px" class="option"><input type="checkbox" > 生命偷取 </span>
	   </div>
	    <div style="margin-left:10px" class="white ">
	   <span class="option"><input type="checkbox" > 冷却缩减 </span>
	   <span style="margin-left:-20px" class="option"><input type="checkbox" > 生命回复 </span>
	   <span style="margin-left:-20px" class="option"><input type="checkbox" > 附魔 </span>
	   </div>
	    <div style="margin-left:10px" class="white ">
	   <span class="option"><input type="checkbox" > 法力回复 </span>
	    <span style="margin-left:-20px" class="option"><input type="checkbox" > 法术吸血 </span>
	   <span style="margin-left:-20px" class="option"><input type="checkbox" > 移动速度 </span>
	   </div>
	    <div style="margin-left:10px" class="white ">
		<span class="option"><input type="checkbox"> 护甲值 </span>	
		</div>
		<div style="margin-top:25px" class="boldwhite">
		符文资料
		</div>
		
		
</div>
<table align="right" style="background-color:#11141B; margin-right:5px;" class="table1">
  <tr>
    <td  style="padding:8px;"><img style="border:#666666 solid; border-width:thin;"src="0.jpg" width="60" height="60" /></td>
    <td  style="padding:8px;"><img style="border:#666666 solid; border-width:thin;"src="1.jpg" width="60" height="60" /></td>
    <td style="padding:8px;"><img style="border:#666666 solid; border-width:thin;"src="2.jpg" width="60" height="60" /></td>
    <td style="padding:8px;"><img style="border:#666666 solid; border-width:thin;"src="3.jpg" width="60" height="60" /></td>
    <td style="padding:8px;"><img style="border:#666666 solid; border-width:thin;"src="4.jpg" width="60" height="60" /></td>
    <td style="padding:8px;"><img style="border:#666666 solid; border-width:thin;"src="5.jpg" width="60" height="60" /></td>
    <td style="padding:8px;"><img style="border:#666666 solid; border-width:thin;"src="6.jpg" width="60" height="60" /></td>
  </tr>
  <tr>
    <td ><div class="gold">牛头酋长</div>
        <div class="gold">阿里斯塔</div></td>
    <td ><div class="gold">钢铁大侠</div>
        <div class="gold">波比</div></td>
    <td><div class="gold">殇之木乃伊</div>
        <div class="gold">阿木木</div></td>
    <td><div class="gold">冰晶凤凰</div>
        <div class="gold">艾尼维亚</div></td>
    <td><div class="gold">黑暗之女</div>
        <div class="gold">安妮</div></td>
    <td><div class="gold">寒冰猎手</div>
        <div class="gold">艾希</div></td>
    <td><div class="gold">蒸汽机机器人</div>
        <div class="gold">布里茨</div></td>
  </tr>
  <tr style="margin:10px">
    <td style="padding:8px;"><img src="7.jpg" style="border:#666666 solid; border-width:thin;" width="60" height="60" /></td>
    <td style="padding:8px;"><img src="8.jpg" style="border:#666666 solid; border-width:thin;"width="60" height="60" /></td>
    <td style="padding:8px;"><img src="9.jpg" style="border:#666666 solid; border-width:thin;"width="60" height="60" /></td>
    <td style="padding:8px;"><img src="10.jpg" style="border:#666666 solid; border-width:thin;"width="60" height="60" /></td>
    <td style="padding:8px;"><img src="11.jpg" style="border:#666666 solid; border-width:thin;"width="60" height="60" /></td>
    <td style="padding:8px;"><img src="12.jpg" style="border:#666666 solid; border-width:thin;"width="60" height="60" /></td>
    <td style="padding:8px;"><img src="13.jpg" style="border:#666666 solid; border-width:thin;"width="60" height="60" /></td>
  </tr>
  <tr>
    <td><div class="gold">虚空恐惧</div>
        <div class="gold">科.加斯</div></td>
    <td><div class="gold">英雄投弹手</div>
        <div class="gold">库奇</div></td>
    <td><div class="gold">祖安狂人</div>
        <div class="gold">家多医生</div></td>
    <td><div class="gold">寡妇制造者</div>
        <div class="gold">伊芙琳</div></td>
    <td><div class="gold">末日使者</div>
        <div class="gold">费德提客</div></td>
    <td><div class="gold">海洋之灾</div>
        <div class="gold">普朗克</div></td>
    <td><div class="gold">酒桶</div>
        <div class="gold">古拉加斯</div></td>
  </tr>
  <tr >
    <td style="padding:8px;"><img style="border:#666666 solid; border-width:thin;"src="14.jpg" width="60" height="60" /></td>
    <td style="padding:8px;"><img style="border:#666666 solid; border-width:thin;"src="15.jpg" width="60" height="60" /></td>
    <td style="padding:8px;"><img style="border:#666666 solid; border-width:thin;"src="16.jpg" width="60" height="60" /></td>
    <td style="padding:8px;"><img style="border:#666666 solid; border-width:thin;"src="17.jpg" width="60" height="60" /></td>
    <td style="padding:8px;"><img style="border:#666666 solid; border-width:thin;"src="18.jpg" width="60" height="60" /></td>
    <td style="padding:8px;"><img style="border:#666666 solid; border-width:thin;"src="19.jpg" width="60" height="60" /></td>
    <td style="padding:8px;"><img style="border:#666666 solid; border-width:thin;"src="20.jpg" width="60" height="60" /></td>
  </tr>
  <tr >
    <td><div class="gold">大发明家</div>
        <div class="gold">黑默丁格</div></td>
    <td><div class="gold">风暴之怒</div>
        <div class="gold">迦娜</div></td>
    <td><div class="gold">武器大师</div>
        <div class="gold">贾克斯</div></td>
    <td><div class="gold">死亡颂唱着</div>
        <div class="gold">卡尔萨斯</div></td>
    <td><div class="gold">虚空行者</div>
        <div class="gold">卡萨丁</div></td>
    <td><div class="gold">不祥之刃</div>
        <div class="gold">卡特琳娜</div></td>
    <td><div class="gold">审判天使</div>
        <div class="gold">凯尔</div></td>
  </tr>
  <tr>
    <td style="padding:8px;"><img style="border:#666666 solid; border-width:thin;"src="21.jpg" width="60" height="60" /></td>
    <td style="padding:8px;"><img style="border:#666666 solid; border-width:thin;"src="22.jpg" width="60" height="60" /></td>
    <td style="padding:8px;"><img style="border:#666666 solid; border-width:thin;"src="23.jpg" width="60" height="60" /></td>
    <td style="padding:8px;"><img style="border:#666666 solid; border-width:thin;"src="24.jpg" width="60" height="60" /></td>
    <td style="padding:8px;"><img style="border:#666666 solid; border-width:thin;"src="25.jpg" width="60" height="60" /></td>
    <td style="padding:8px;"><img style="border:#666666 solid; border-width:thin;"src="26.jpg" width="60" height="60" /></td>
    <td style="padding:8px;"><img style="border:#666666 solid; border-width:thin;"src="27.jpg" width="60" height="60" /></td>
  </tr>
  <tr>
    <td><div class="gold">熔岩巨兽</div>
        <div class="gold">墨菲特</div></td>
    <td><div class="gold">无极剑圣</div>
        <div class="gold"></div></td>
    <td><div class="gold">堕落天使</div>
        <div class="gold">莫甘娜</div></td>
    <td><div class="gold">沙漠死神</div>
        <div class="gold">内瑟斯</div></td>
    <td><div class="gold">狂野女猎手</div>
        <div class="gold">奈德丽</div></td>
    <td><div class="gold">雪人骑士</div>
        <div class="gold">努努</div></td>
    <td><div class="gold">战争之王</div>
        <div class="gold">潘森</div></td>
  </tr>
  <tr>
    <td style="padding:8px;"><img style="border:#666666 solid; border-width:thin;"src="28.jpg" width="60" height="60" /></td>
    <td style="padding:8px;"><img style="border:#666666 solid; border-width:thin;"src="29.jpg" width="60" height="60" /></td>
    <td style="padding:8px;"><img style="border:#666666 solid; border-width:thin;"src="30.jpg" width="60" height="60" /></td>
    <td style="padding:8px;"><img style="border:#666666 solid; border-width:thin;"src="31.jpg" width="60" height="60" /></td>
    <td style="padding:8px;"><img style="border:#666666 solid; border-width:thin;"src="32.jpg" width="60" height="60" /></td>
    <td style="padding:8px;"><img style="border:#666666 solid; border-width:thin;"src="33.jpg" width="60" height="60" /></td>
    <td style="padding:8px;"><img style="border:#666666 solid; border-width:thin;"src="34.jpg" width="60" height="60" /></td>
  </tr>
  <tr >
    <td><div class="gold">披甲龙兔</div>
        <div class="gold">拉莫斯</div></td>
    <td><div class="gold">流浪法师</div>
        <div class="gold">瑞兹</div></td>
    <td><div class="gold">恶魔小丑</div>
        <div class="gold">萨科</div></td>
    <td><div class="gold">炼金术士</div>
        <div class="gold">辛古德</div></td>
    <td><div class="gold">亡灵勇士</div>
        <div class="gold">塞恩</div></td>
    <td><div class="gold">战争女神</div>
        <div class="gold">希维尔</div></td>
    <td><div class="gold">众星之子</div>
        <div class="gold">索拉卡</div></td>
  </tr>
</table>
</div>
</div>

©️2020 CSDN 皮肤主题: 黑客帝国 设计师:上身试试 返回首页