看程序学css-4 综合应用

于 2019-06-08 18:41:03 发布
阅读量208 收藏
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tujiahao1/article/details/91346735
版权 

## 1、

<!DOCTYPE html>
<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、

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<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>
</body>
</html>

## 3、

<!DOCTYPE html>


<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>
涂家豪
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值