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

【web前端开发】HTML及CSS简单页面布局练习

作者：盐析白兔 | 2024-02-15 13:17:15

赞

踩

【web前端开发】HTML及CSS简单页面布局练习

案例一 网页课程

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>案例一 网页课程</title>
  8. </head>
  9. <body>
  10.     <p>课程体系</p>
  11.     <hr>
  12.     <img src="week1/1001/1.png" height="200px">
  13.     <img src="week1/1001/2.png" height="200px">
  14.     <p>实战课程</p>
  15.     <hr>
  16.     <img src="week1/1001/3.png" height="200px">
  17.     <img src="week1/1001/4.png" height="200px">
  18.     <img src="week1/1001/5.png" height="200px">
  19. </body>
  20. </html>

案例二 商品详情页

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>案例二 商品详情</title>
  8. </head>
  9. <body>
  10.     <h1>商品详情</h1>
  11.     <hr>
  12.     <p>产品参数：</p>
  13.     <p>产品名称：HTML5+CSS3网页设计&nbsp;&nbsp;ISBN编号：9787302480723&nbsp;&nbsp;书名：HTML5+CSS3网页设计</p>
  14.     <p>作者：刘玉红，蒲娟&nbsp;出版时间：2017-09&nbsp;&nbsp;定价：78.00元</p>
  15.     <p>出版社名称：清华大学出版社&nbsp;&nbsp;开本：16开&nbsp;&nbsp;&nbsp;是否是套装：否</p>
  16.     <hr>
  17.     <img src="img.week1/1002/1.jpg" height="150px" width="800px">
  18.     <img src="img.week1/1002/2.jpg" width="800px">
  19.  
  20. </body>
  21. </html>

案例三：自定义视频

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>视频播放</title>
  8.     <script>
  9.         function p(){
  10.             var v=document.getElementById("video1");
  11.             if (v.paused) {
  12.                v.play();} 
  13.             else {
  14.                 v.pause();}         
  15.         }
  16.         function small(){
  17.             var v=document.getElementById("video1");
  18.             v.width = v.width * 0.5;
  19.             v.height = v.height * 0.5;              
  20.         }
  21.         function big(){
  22.             var v=document.getElementById("video1");
  23.             v.width = v.width * 2;
  24.             v.height = v.height *2;   
  25.         }
  26.         function same(){
  27.             var v=document.getElementById("video1");
  28.             v.width = 500;
  29.             v.height = 300;   
  30.         }
  31.     </script>
  32.     <style>
  33.         .cont{
  34.             margin: 0,auto;
  35.             height: 300px;
  36.             width: 500px;
  37.         }
  38.       
  39.     </style>
  40. </head>
  41. <body>
  42.     <div class="cont">
  43.         <video id="video1" src="../img/video.mp4" width="500" height="300" ></video>
  44.         <div>
  45.             <center>
  46.                 <button onclick="p()">播放/暂停</button>
  47.                 <button onclick="big()">放大</button>
  48.                 <button onclick="small()">缩小</button>
  49.                 <button onclick="same()">普通</button>
  50.             </center>
  51.         </div>
  52.     </div>
  53. </body>
  54. </html>

案例四：登录页面

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>登录页面</title>
  8.     <style>
  9.         *{
  10.             padding: 0;
  11.             margin: 0;
  12.         
  13.         }
  14.         .c1{
  15.             background-color: gainsboro;
  16.             height: 40px;
  17.             width: 300px;
  18.         }
  19.         .c2{
  20.             background-color: gainsboro;
  21.             height: 40px;
  22.             width: 300px;
  23.             margin-top: 20px;
  24.         }
  25.         form{
  26.             background: url(../img/4001.png) no-repeat;
  27.             height: 550px;
  28.             width: 600px;
  29.             position: absolute;
  30.             background-color: gainsboro;
  31.         }
  32.         .all{
  33.             position: relative;
  34.             margin-top: 110px;
  35.             margin-left: 110px;
  36.         }
  37.         [type="button"]{
  38.             background-color: yellow;
  39.             border: none;
  40.             border-radius:12px;
  41.             width: 70px;
  42.             height: 40px;
  43.             font-size: 20px;
  44.             margin-top: 20px;
  45.             margin-left: 30px;
  46.  
  47.         }
  48.       
  49.       
  50.     </style>
  51. </head>
  52. <body>
  53.     <form>
  54.         <div class="all">
  55.             <div class="c1">
  56.                 <img src="../img/user.png" height="30px" >
  57.                 <label><input style="border: 0px;background-color: gainsboro;height: 25px;" type="text" ></label>
  58.             </div>
  59.             <div class="c2">
  60.                 <img src="../img/pass.png" height="30px" >
  61.                 <label><input style="border: 0px;background-color: gainsboro;height: 25px;" type="text"></label>
  62.             </div>
  63.             <input type="button" value="登录">
  64.             <a href="#" style="height: 10px;color: rgb(0, 179, 255);font-size: 15px;margin-left: 10px;">注册</a>
  65.             <a href="#" style="height: 10px;color: rgb(0, 179, 255);font-size: 15px;margin-left: 10px;">忘记密码？</a>
  66.         </div>
  67.     </form>
  68. </body>
  69. </html>

案例五：祝福瓶 

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>漂流瓶</title>
  8.     <style>
  9.         *{
  10.             bottom: 0;
  11.             padding: 0;
  12.         }
  13.         .cont{
  14.             background: url(../img/bg.png);
  15.             position:relative;
  16.             width:1000px;
  17.             height:600px;
  18.             background-size:100%;
  19.             background-position:bottom center;
  20.             position:absolute;
  21.         }
  22.          form{
  23.             background-color: papayawhip;
  24.             border-radius: 25px;
  25.             width: 700px;
  26.             height: 350px;
  27.             margin:70px 100px;
  28.             border: 3px solid peachpuff;
  29.             position:absolute;
  30.         }
  31.         
  32.         .addr{
  33.             background-color: #FFF8D7;
  34.             height: 50px;
  35.             width: 620px;
  36.             margin-left: 32px;
  37.         }
  38.         .little{
  39.             padding-top: 15px;
  40.         }
  41.         .end{
  42.                 
  43.             margin-top: 30px;
  44.             height: 50px;
  45.             background-color: bisque;
  46.             width: 700px;
  47.             border-radius: 0 0 25px 25px;
  48.         }
  49.         .title{
  50.           margin-top: 93px;
  51.          margin-left: 400px;
  52.         }
  53.  
  54.     </style>
  55. </head>
  56. <body>
  57.     <div class="cont">
  58.         <div class="title">
  59.             <p style="float:left;margin-top:30px;height:30px;background-color: papayawhip;font-size: 15px;padding-top: 10px;">
  60.                 <span style="font-size: 20px;font-weight: bolder;">祝福瓶</span>
  61.                 <span>祝福瓶，准确无误的送去你的祝福</span>
  62.             </p>
  63.             <img src="../img/bot.png">
  64.         </div>   
  65.         <form>
  66.             <p style="margin: 20px 10px;color:DarkOliveGreen;font-size: 18px;">&nbsp;&nbsp;&nbsp;祝福远在他乡的你幸福安康...</p>
  67.             <div class="addr">
  68.                 <p style="float: left;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;我要祝福的他在：</p>
  69.                 <div class="little">
  70.                     <select>
  71.                         <option>吉林</option>
  72.                         <option>安徽</option>
  73.                     </select>
  74.                     <select>
  75.                         <option>咸阳</option>
  76.                         <option>合肥</option>
  77.                     </select>
  78.                     <label><input type="text" value="请输入地址信息" style="color:gainsboro";></label>
  79.                 </div>
  80.             </div>
  81.             <textarea cols="90" rows="7" style="background-color:#FFFFDF;margin:20px 30px;"></textarea>
  82.             <div class="end">
  83.                 <label ><input type="checkbox" style="margin: 20px;">转发到微博</label>
  84.                 <label ><input type="checkbox">同时扔给很多人</label>
  85.                 <input type="button" value="关闭" style="background-color: 	#FFF0AC;margin-left:250px;width: 70px;height: 30px;border: 2px solid 	#FFDCB9 ;">
  86.                 <input type="button" value="扔出去" style="background-color:skyblue;width: 70px;height: 30px;color: white;border-radius: 10px;border: 2px solid #2894FF;">
  87.             </div>
  88.             
  89.         </form>
  90.    </div>
  91. </body>
  92. </html>

案例六：商品评价

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>商品评价</title>
  8.     <style>
  9.         *{
  10.             padding: 0;
  11.             margin: 0;
  12.         }
  13.         .cont{
  14.             background: url(../img/4003/bg\ .png) no-repeat;
  15.             width: 800px;
  16.             height: 500px;
  17.             margin: 20px auto;
  18.         }
  19.         .pic{
  20.             margin: 9px 200px;
  21.             width: 300px;
  22.             height: 40px;
  23.             padding-top:60px;
  24.         }
  25.         textarea{
  26.             margin-left: 200px;
  27.         }
  28.         .button{
  29.             margin-left: 200px;
  30.             padding-left: 20px;
  31.             background-color: aliceblue;
  32.             height: 50px;
  33.             line-height:50px;
  34.             width: 570px;
  35.         }
  36.         .b1{
  37.             height:25px;
  38.             width: 70px;
  39.             line-height:25px;
  40.             font-size: 14px;
  41.             font-weight: bolder;
  42.             color: white;
  43.             background-color: gainsboro;
  44.             border: none;
  45.         }
  46.         .b2{
  47.             height:25px;
  48.             width: 70px;
  49.             line-height:25px;
  50.             font-size: 14px;
  51.             color: white;
  52.             background-color: orange;
  53.             border: none;
  54.         }
  55.     </style>
  56. </head>
  57. <body>
  58.     <div class="cont">
  59.         <div class="pic">
  60.             <label><input type="radio" name="judge" ><img src="../img/4003/red.png"></label>
  61.             &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  62.             <label><input type="radio" name="judge"><img src="../img/4003/yellow.png"></label>
  63.             &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  64.             <label><input type="radio" name="judge"><img src="../img/4003/black.png"></label>
  65.         </div>
  66.         <textarea rows="9" cols="83"></textarea>
  67.         <div class="button">
  68.             <button class="b1">我要晒图</button>
  69.             <button class="b2">发表评价</button>
  70.             &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  71.             <label><input type="radio" name="choose">公开</label>
  72.             <label><input type="radio" name="choose">匿名</label>
  73.         </div>
  74.     </div>
  75. </body>
  76. </html>

案例七：邮件发送

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>发送邮件</title>
  8.     <style>
  9.         *{
  10.             padding: 0;
  11.             margin: 0;
  12.         }
  13.         .button{
  14.             float: left;
  15.         }
  16.         .cont{
  17.             margin-top: 100px;
  18.             margin-left:300px;
  19.             background-color:skyblue;
  20.             height: 270px;
  21.             width: 700px;
  22.             padding-left:40px;
  23.             padding-top: 20px;
  24.         }.theme{
  25.             padding-left: 4px;
  26.             padding-top: 10px;
  27.         }
  28.         .a1{
  29.             margin-left: 80px;
  30.             color: #000;
  31.             font-size: 10px;
  32.         }
  33.         .a2{
  34.             color: #000;
  35.             font-size: 10px;
  36.             margin-left: 0px;
  37.         }
  38.         a:link{
  39.             text-decoration:none;
  40.         }
  41.         .main{
  42.             padding-top:4px ;
  43.         }
  44.         .button{
  45.            padding-left: 70px;
  46.            font-size: 10px;
  47.            font-weight: bolder;
  48.         }
  49.         button{
  50.             background-color:#39c0d4;
  51.             border:none;
  52.             height: 30px;
  53.             line-height: 30px;
  54.             border-radius: 10%;
  55.         }
  56.         .choose{
  57.             font-size: 10px;
  58.             padding-top: 4px;
  59.         }
  60.     </style>
  61. </head>
  62. <body>
  63.     <div class="cont">
  64.         <div class="reciver">
  65.             <span>收件人&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></span>
  66.             <textarea rows="1" cols="50"></textarea>
  67.         </div>
  68.         <div class="theme">
  69.             <span>主&nbsp;&nbsp;题&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
  70.             <textarea rows="1" cols="50"></textarea>
  71.         </div>
  72.         <a href="" class="a1">添加附件</a>
  73.        &nbsp;&nbsp;
  74.         <a href="" class="a2">在线文档</a>
  75.         <div class="main">
  76.             <span style="float: left;">正&nbsp;&nbsp;文&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
  77.             <textarea rows="10" cols="83"></textarea>
  78.         </div>
  79.         <div class="button">
  80.             <button>直接发送</button>
  81.             <button>存草稿</button>
  82.             <button>其它选项</button>
  83.         </div>
  84.         <div class="choose">
  85.             &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  86.             <span>是否保存到已发送</span>&nbsp;&nbsp;&nbsp;
  87.             <label><input type="radio" name="choose">是</label>
  88.             <label><input type="radio" name="choose">否</label>
  89.         </div>
  90.     </div>
  91. </body>
  92. </html>

案例八：个人讲师

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>问卷调查</title>
  8.     <style>
  9.         
  10.         *{
  11.             padding: 0;
  12.             margin: 0;
  13.         }    
  14.         form{
  15.             background-image: url(../img/back.png);
  16.             height: 500px;
  17.             padding: 200px;
  18.         }
  19.         p{
  20.             background-color:rgba(28, 164, 226, 0.614);
  21.             color: white;
  22.             font-size: 20px;
  23.             margin-top: 20px;
  24.         }
  25.         label{
  26.             margin-top:15px;
  27.             padding-top: 1px;
  28.             font-size: 12px;
  29.             display: block;
  30.             margin-left: 30px;
  31.         }
  32.        
  33.     </style>
  34. </head>
  35. <body> 
  36.         <form>
  37.             <p>申请个人讲师</p>
  38.             <label><input type="checkbox">为企业宣传</label>
  39.             <label><input type="checkbox">上传文档至网站</label>
  40.             <label><input type="checkbox">个人需要</label>
  41.             <label><input type="checkbox">团购个人会员</label>
  42.             <label><input type="checkbox">扩充自身网站内容</label>
  43.             <label><input type="checkbox">借助明日科技技术，搭建企业内部平台</label>
  44.        
  45.             <p>您所在企业名称</p>
  46.             <label>请输入您的回答 <input type="text"></label>
  47.       
  48.             <p>您所在单位的规模</p>
  49.             <label><input type="radio" name="count">100人以内</label>
  50.             <label><input type="radio" name="count">100-500人</label>
  51.             <label><input type="radio" name="count">500人-1000人</label>
  52.             <label><input type="radio" name="count">1000人-5000人</label>
  53.             <label><input type="radio" name="count">5000人以上</label>
  54.        
  55.             <p>你是机构的负责人吗</p>
  56.             <label><input type="radio" name="que">是</label>
  57.             <label><input type="radio" name="count">不是</label>
  58.        
  59.     </form>
  60.    
  61. </body>
  62. </html>
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/84802
推荐阅读
相关标签

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

  

闽ICP备14008679号