菜单 搜索
首页 前端知识 【web前端开发】HTML及CSS简单页面布局练习

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

2024-03-18 11:03:42 前端知识 前端哥 341 581 我要收藏

案例一 网页课程

<!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>
复制
转载请注明出处或者链接地址：https://www.qianduange.cn//article/3926.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

jQuery获取更改标签内容、操作标签属性：html()、text()、val()、attr()、prop()

2024-04-13 09:04:32

jQuery 资源管理错误漏洞CVE-2021-21252附修复方案

2024-04-13 09:04:32

jQuery事件绑定

2024-04-13 09:04:31

Jquery——基础

2024-04-03 12:04:28

Jquery中$，前端开发课程培训

2024-04-13 09:04:05

jquery实现全选、反选、取消全部等操作(复选框checkbox)

2024-04-13 09:04:59

js,jquery,vue设置html标签隐藏不显示

2024-04-13 09:04:59

关于动态循环生成多张图表echarts，resize()失效，不能所有的都能自适应问题

2024-04-13 09:04:56

Echarts 设置Y轴 || X轴的刻度只显示整数

2024-04-13 09:04:53

Echarts 中的 clear() 和 dispose()

2024-04-13 09:04:53

广告位招租：QQ85750956
大家推荐的文章
1

js数组常用方法（19种）|你会的到底有多少呢？

2024-04-08 11:04:211000
2

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011000
3

ECharts 饼状图颜色设置

2024-02-16 14:02:001000
4

echarts实现动态渲染多柱图

2024-02-12 14:02:341000
5

移动端css布局大全

2024-02-06 15:02:421000
6

使用HTML5和JS实现日期下拉框功能

2024-02-04 11:02:521000
7

JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js

2024-01-27 01:01:181000
8

vue实现可输入可下拉选择的组件

2024-04-05 09:04:35999
9

echarts 图表，定时器实现数据实时动态

2024-03-13 00:03:28999
10

jQuery事件处理

2024-03-12 01:03:32999

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！