devbox
盐析白兔
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

第二十七章HTML.CSS综合案例

作者：盐析白兔 | 2024-06-09 03:54:12

赞

踩

第二十七章HTML.CSS综合案例

1.产品介绍

效果图如下：

代码部分如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>产品介绍</title>
  7.     <style>
  8.       
  9.         *{ /* 通用选择器 */
  10.             margin: 0;
  11.             padding: 0;
  12.         }
  13.         body{
  14.             background-color: #f5f5f5;
  15.         }
  16.         a{
  17.             color: #333333;
  18.             text-decoration: none;
  19.         }
  20.         .box{
  21.             height: 500px;
  22.             width: 500px;
  23.             background-color: rgb(236, 236, 236);
  24.             margin: 100px auto;
  25.         }
  26.         .box img{ 
  27.             width: 100%;
  28.         }
  29.         .tushu{
  30.             height: 50px;
  31.             font-size: 20;
  32.             padding: 0 15px; /* 外间距（上下  左右） */
  33.             margin-top: 30px ;/* 内间距（上下  左右） */
  34.             font-weight: bold; /* 字体加粗 */
  35.         }
  36.         .pingjia{
  37.             font-size: 10px;
  38.             color: #bbb;
  39.             margin-top: 0;
  40.             padding: 10px 25px;
  41.         }
  42.         .redmi{
  43.             padding: 0px 25px;
  44.             font-size: 10px;
  45.             font-weight: bold; /* 字体加粗 */
  46.         }
  47.         .hongse{
  48.             color: #ff0000;
  49.             font-weight: bold; /* 字体加粗 */
  50.         }
  51.       
  52.     </style>
  53. </head>
  54. <body>
  55.     <div class="box">
  56.         <img src="../../C4D素材文件/人物图片·.png" alt="">
  57.     <div class="tushu">图书写的真的很棒，书，人类发出的最美妙的声音。书，人类发出最美妙的声音。</div>
  58.     <div class="pingjia">来自于152379个人的评价</div>
  59.     <div class="redmi">
  60.         <span>Redmi Air Dots真无线蓝.....</span>    
  61.         <span> &emsp; | &emsp; </span>
  62.         <span class="hongse">10元</span>
  63.     </div>
  64.  
  65.     </div>
  66. </body>
  67. </html>

2.表单登录页面

效果图如下：

代码如下：

  1. <body>
  2.     <div class="tupian">
  3.     <h3 align="center">60秒完成注册，幸福一辈子！</h3>
  4.     <form action="new_file.html" >
  5.         <table border="0" align="center" cellpadding"0" cellspacing"5" >
  6.             <tr>
  7.                 <td>昵称：</td>
  8.                 <td>
  9.                     <input type="text" name="wen" />
  10.                 </td>
  11.             </tr>
  12.             <tr>
  13.                 <td>性别:</td>
  14.                 <td>
  15.                     <input type="radio" name="sex" value="0" ><img src="../../C4D素材文件/小男孩.png" alt="" width="30" height="30">男
  16.                     <input type="radio" name="sex" value="0" ><img src="../../C4D素材文件/小女孩.png" alt="" width="30" height="30">女
  17.                 </td>
  18.             </tr>
  19.             <tr>
  20.                 <td>生日：</td>
  21.                 <td>
  22.                     <select name="nian" id="">
  23.                         <option value="">请输入年份</option>
  24.                         <option value="">1997</option>
  25.                         <option value="">1998</option>
  26.                         <option value="">1999</option>
  27.                         <option value="">2000</option>
  28.                     </select>
  29.                     <select name="yue" id="">
  30.                         <option value="">请输入月份</option>
  31.                         <option value="">一月</option>
  32.                         <option value="">四月</option>
  33.                         <option value="">九月</option>
  34.                     </select>
  35.                     <select name="日" id="">
  36.                         <option value="">请输入几号</option>
  37.                         <option value="">1</option>
  38.                         <option value="">2</option>
  39.                         <option value="">3</option>
  40.                     </select>
  41.                 </td>
  42.             </tr>
  43.             <tr>
  44.                 <td>婚姻状况：</td>
  45.                 <td>
  46.                     <input type="radio" name="hun" value="1">未婚
  47.                     <input type="radio" name="hun" value="1">已婚
  48.                     <input type="radio" name="hun" value="1">离异
  49.                 </td>
  50.             </tr>
  51.             <tr>
  52.                 <td>学历：</td>
  53.                 <td>
  54.                     <select name="xueli" id="">
  55.                         <option value="">幼儿园</option>
  56.                         <option value="">小学</option>
  57.                         <option value="">初中</option>
  58.                         <option value="">高中</option>
  59.                         <option value="">大学</option>
  60.                     </select>
  61.                 </td>
  62.             </tr>
  63.             <tr>
  64.                 <td>喜欢的类型：</td>
  65.                 <td>
  66.                     <input type="checkbox" name="duoxuan">妩媚的
  67.                     <input type="checkbox" name="duoxuan">帅气的
  68.                     <input type="checkbox" name="duoxuan">油腻的
  69.                     <input type="checkbox" name="duoxuan">腹肌男
  70.                     <input type="checkbox" name="duoxuan">搞笑女
  71.                 </td>
  72.             </tr>
  73.             <tr>
  74.                 <td>自我介绍：</td>
  75.                 <td>
  76.                     <textarea name="10" id="10"></textarea>
  77.                 </td>
  78.             </tr>
  79.             <tr>
  80.                 <td></td>
  81.                 <td>
  82.                     <input type="submit" value="立即注册">
  83.                 </td>
  84.             </tr>
  85.             <tr>
  86.                 <td></td>
  87.                 <td>
  88.                     <input type="checkbox" name="fu">我同意注册条款和会员加入标准
  89.                 </td>
  90.             </tr>
  91.             <tr>
  92.                 <td></td>
  93.                 <td>
  94.                     <a href="#">我是会员立即注册</a>
  95.                 </td>
  96.             </tr>
  97.         </table></div>
  98.     </form>
  99. </body>
  100. </html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/692507
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号