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

时间:2024-02-16 17:02:03

案例一 网页课程

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

案例二 商品详情页

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

</body>
</html>

案例三:自定义视频

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频播放</title>
    <script>
        function p(){
            var v=document.getElementById("video1");
            if (v.paused) {
               v.play();} 
            else {
                v.pause();}         
        }
        function small(){
            var v=document.getElementById("video1");
            v.width = v.width * 0.5;
            v.height = v.height * 0.5;              
        }
        function big(){
            var v=document.getElementById("video1");
            v.width = v.width * 2;
            v.height = v.height *2;   
        }
        function same(){
            var v=document.getElementById("video1");
            v.width = 500;
            v.height = 300;   
        }
    </script>
    <style>
        .cont{
            margin: 0,auto;
            height: 300px;
            width: 500px;
        }
      
    </style>
</head>
<body>
    <div class="cont">
        <video id="video1" src="../img/video.mp4" width="500" height="300" ></video>
        <div>
            <center>
                <button onclick="p()">播放/暂停</button>
                <button onclick="big()">放大</button>
                <button onclick="small()">缩小</button>
                <button onclick="same()">普通</button>
            </center>
        </div>
    </div>
</body>
</html>

案例四:登录页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录页面</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        
        }
        .c1{
            background-color: gainsboro;
            height: 40px;
            width: 300px;
        }
        .c2{
            background-color: gainsboro;
            height: 40px;
            width: 300px;
            margin-top: 20px;
        }
        form{
            background: url(../img/4001.png) no-repeat;
            height: 550px;
            width: 600px;
            position: absolute;
            background-color: gainsboro;
        }
        .all{
            position: relative;
            margin-top: 110px;
            margin-left: 110px;
        }
        [type="button"]{
            background-color: yellow;
            border: none;
            border-radius:12px;
            width: 70px;
            height: 40px;
            font-size: 20px;
            margin-top: 20px;
            margin-left: 30px;

        }
      
      
    </style>
</head>
<body>
    <form>
        <div class="all">
            <div class="c1">
                <img src="../img/user.png" height="30px" >
                <label><input style="border: 0px;background-color: gainsboro;height: 25px;" type="text" ></label>
            </div>
            <div class="c2">
                <img src="../img/pass.png" height="30px" >
                <label><input style="border: 0px;background-color: gainsboro;height: 25px;" type="text"></label>
            </div>
            <input type="button" value="登录">
            <a href="#" style="height: 10px;color: rgb(0, 179, 255);font-size: 15px;margin-left: 10px;">注册</a>
            <a href="#" style="height: 10px;color: rgb(0, 179, 255);font-size: 15px;margin-left: 10px;">忘记密码?</a>
        </div>
    </form>
</body>
</html>

案例五:祝福瓶 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>漂流瓶</title>
    <style>
        *{
            bottom: 0;
            padding: 0;
        }
        .cont{
            background: url(../img/bg.png);
            position:relative;
            width:1000px;
            height:600px;
            background-size:100%;
            background-position:bottom center;
            position:absolute;
        }
         form{
            background-color: papayawhip;
            border-radius: 25px;
            width: 700px;
            height: 350px;
            margin:70px 100px;
            border: 3px solid peachpuff;
            position:absolute;
        }
        
        .addr{
            background-color: #FFF8D7;
            height: 50px;
            width: 620px;
            margin-left: 32px;
        }
        .little{
            padding-top: 15px;
        }
        .end{
                
            margin-top: 30px;
            height: 50px;
            background-color: bisque;
            width: 700px;
            border-radius: 0 0 25px 25px;
        }
        .title{
          margin-top: 93px;
         margin-left: 400px;
        }

    </style>
</head>
<body>
    <div class="cont">
        <div class="title">
            <p style="float:left;margin-top:30px;height:30px;background-color: papayawhip;font-size: 15px;padding-top: 10px;">
                <span style="font-size: 20px;font-weight: bolder;">祝福瓶</span>
                <span>祝福瓶,准确无误的送去你的祝福</span>
            </p>
            <img src="../img/bot.png">
        </div>   
        <form>
            <p style="margin: 20px 10px;color:DarkOliveGreen;font-size: 18px;">&nbsp;&nbsp;&nbsp;祝福远在他乡的你幸福安康...</p>
            <div class="addr">
                <p style="float: left;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;我要祝福的他在:</p>
                <div class="little">
                    <select>
                        <option>吉林</option>
                        <option>安徽</option>
                    </select>
                    <select>
                        <option>咸阳</option>
                        <option>合肥</option>
                    </select>
                    <label><input type="text" value="请输入地址信息" style="color:gainsboro";></label>
                </div>
            </div>
            <textarea cols="90" rows="7" style="background-color:#FFFFDF;margin:20px 30px;"></textarea>
            <div class="end">
                <label ><input type="checkbox" style="margin: 20px;">转发到微博</label>
                <label ><input type="checkbox">同时扔给很多人</label>
                <input type="button" value="关闭" style="background-color: 	#FFF0AC;margin-left:250px;width: 70px;height: 30px;border: 2px solid 	#FFDCB9 ;">
                <input type="button" value="扔出去" style="background-color:skyblue;width: 70px;height: 30px;color: white;border-radius: 10px;border: 2px solid #2894FF;">
            </div>
            
        </form>
   </div>
</body>
</html>

案例六:商品评价

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品评价</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .cont{
            background: url(../img/4003/bg\ .png) no-repeat;
            width: 800px;
            height: 500px;
            margin: 20px auto;
        }
        .pic{
            margin: 9px 200px;
            width: 300px;
            height: 40px;
            padding-top:60px;
        }
        textarea{
            margin-left: 200px;
        }
        .button{
            margin-left: 200px;
            padding-left: 20px;
            background-color: aliceblue;
            height: 50px;
            line-height:50px;
            width: 570px;
        }
        .b1{
            height:25px;
            width: 70px;
            line-height:25px;
            font-size: 14px;
            font-weight: bolder;
            color: white;
            background-color: gainsboro;
            border: none;
        }
        .b2{
            height:25px;
            width: 70px;
            line-height:25px;
            font-size: 14px;
            color: white;
            background-color: orange;
            border: none;
        }
    </style>
</head>
<body>
    <div class="cont">
        <div class="pic">
            <label><input type="radio" name="judge" ><img src="../img/4003/red.png"></label>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <label><input type="radio" name="judge"><img src="../img/4003/yellow.png"></label>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <label><input type="radio" name="judge"><img src="../img/4003/black.png"></label>
        </div>
        <textarea rows="9" cols="83"></textarea>
        <div class="button">
            <button class="b1">我要晒图</button>
            <button class="b2">发表评价</button>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <label><input type="radio" name="choose">公开</label>
            <label><input type="radio" name="choose">匿名</label>
        </div>
    </div>
</body>
</html>

案例七:邮件发送

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>发送邮件</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .button{
            float: left;
        }
        .cont{
            margin-top: 100px;
            margin-left:300px;
            background-color:skyblue;
            height: 270px;
            width: 700px;
            padding-left:40px;
            padding-top: 20px;
        }.theme{
            padding-left: 4px;
            padding-top: 10px;
        }
        .a1{
            margin-left: 80px;
            color: #000;
            font-size: 10px;
        }
        .a2{
            color: #000;
            font-size: 10px;
            margin-left: 0px;
        }
        a:link{
            text-decoration:none;
        }
        .main{
            padding-top:4px ;
        }
        .button{
           padding-left: 70px;
           font-size: 10px;
           font-weight: bolder;
        }
        button{
            background-color:#39c0d4;
            border:none;
            height: 30px;
            line-height: 30px;
            border-radius: 10%;
        }
        .choose{
            font-size: 10px;
            padding-top: 4px;
        }
    </style>
</head>
<body>
    <div class="cont">
        <div class="reciver">
            <span>收件人&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></span>
            <textarea rows="1" cols="50"></textarea>
        </div>
        <div class="theme">
            <span>主&nbsp;&nbsp;题&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
            <textarea rows="1" cols="50"></textarea>
        </div>
        <a href="" class="a1">添加附件</a>
       &nbsp;&nbsp;
        <a href="" class="a2">在线文档</a>
        <div class="main">
            <span style="float: left;">正&nbsp;&nbsp;文&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
            <textarea rows="10" cols="83"></textarea>
        </div>
        <div class="button">
            <button>直接发送</button>
            <button>存草稿</button>
            <button>其它选项</button>
        </div>
        <div class="choose">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <span>是否保存到已发送</span>&nbsp;&nbsp;&nbsp;
            <label><input type="radio" name="choose">是</label>
            <label><input type="radio" name="choose">否</label>
        </div>
    </div>
</body>
</html>

案例八:个人讲师

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>问卷调查</title>
    <style>
        
        *{
            padding: 0;
            margin: 0;
        }    
        form{
            background-image: url(../img/back.png);
            height: 500px;
            padding: 200px;
        }
        p{
            background-color:rgba(28, 164, 226, 0.614);
            color: white;
            font-size: 20px;
            margin-top: 20px;
        }
        label{
            margin-top:15px;
            padding-top: 1px;
            font-size: 12px;
            display: block;
            margin-left: 30px;
        }
       
    </style>
</head>
<body> 
        <form>
            <p>申请个人讲师</p>
            <label><input type="checkbox">为企业宣传</label>
            <label><input type="checkbox">上传文档至网站</label>
            <label><input type="checkbox">个人需要</label>
            <label><input type="checkbox">团购个人会员</label>
            <label><input type="checkbox">扩充自身网站内容</label>
            <label><input type="checkbox">借助明日科技技术,搭建企业内部平台</label>
       
            <p>您所在企业名称</p>
            <label>请输入您的回答 <input type="text"></label>
      
            <p>您所在单位的规模</p>
            <label><input type="radio" name="count">100人以内</label>
            <label><input type="radio" name="count">100-500人</label>
            <label><input type="radio" name="count">500人-1000人</label>
            <label><input type="radio" name="count">1000人-5000人</label>
            <label><input type="radio" name="count">5000人以上</label>
       
            <p>你是机构的负责人吗</p>
            <label><input type="radio" name="que">是</label>
            <label><input type="radio" name="count">不是</label>
       
    </form>
   
</body>
</html>