实现网页代码

最新推荐文章于 2023-12-21 17:38:09 发布

weixin_30444105

最新推荐文章于 2023-12-21 17:38:09 发布

阅读量257

点赞数 2

文章标签： javascript 数据库前端 ViewUI

原文链接：http://www.cnblogs.com/kangjunhao/p/9395651.html

版权

return top

1.点击指定字段可以实现内容跳转，图片插入

<!DOCTYPE html>

<html lang="en">

<head>
    <title>kangjunhao</title>
    <meta charset="utf8">
    <style>
        #div1{                       <!--为了是标签作用明显，用css填充内容 -->
            height: 800px;
            background: darkred;
        }
        #div2{
            height: 800px;
            background: yellow;
        }
        #div3 {
            height: 800px;
            background: black;
        }

    </style>
</head>

<body>
<!--<img src="15063K610-2.jpg" width="800px" height="500px" alt="加载失败" title="动漫图片">  &lt;!&ndash; 插入图片&ndash;&gt;-->

<div id="div_top">top</div>        <!--top页 -->
<a href="#div1">第一章</a>       <!--跳转到指定id的div标签 -->
<a href="#div2">第二章</a>
<a href="#div3">第三章</a>


<div id="div1">第一章内容</div>      <!--拥有内容的div标签 -->
<a href="#div_top">back off</a>   <!-- 实现直接返回top页-->
<div id="div2">第二章内容</div>
<a href="#div_top">back off</a>
<div id="div3">第三章内容</div>
<a href="#div_top">back off</a>



</body>

</html>

2.将一个100px100px的盒子放在300px300px盒子的正中间

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="utf8">
    <title>css_test</title>
    <!--<link type="text/css" rel="stylesheet" href="css_test.css">-->
    <style>
        #div1{
            height: 300px;
            width: 300px;
            background: yellow;
        }
        #div2{
            height: 100px;
            width: 100px;
            background: green;
            margin-top: -200px;
            margin-left: 100px;
        }
    </style>
</head>

<body>

<div id="div1">hello1</div>
<div id="div2">hello2</div>

</body>
</html>

3.抽屉网页面大概布局

<!DOCTYPE html>

<html>

<head>
    <title>test</title>
    <meta charset="utf8">
    <style>
        *{
            margin: 0;
        }
        .head{
            width: 100%;
            height: 44px;
            background-color: #2459a2;
        }
        .head_main{
            width: 1022px;
            height: 100%;
            /*background: #000;*/
            margin: 0 auto;
        }
        .head_left a{
            /*line-height: 0px;*/
            width: 60px;
            height: 30px;
            font-size: 13px;
            float: left;
            margin-top: 10px;
        }
        .head_right .register,.login{
            float: right;
            width: 60px;
            height:44px;
            /*background-color: red;*/
            margin-top: 10px;
        }
        .search{
            float: right;
            margin-top: 10px;
        }
        .middle{

            width: 100%;
            height: 650px;
            background-color: #ededed;
        }
        .middle_main{
            width: 1100px;
            height: 100%;
            background-color: white;
            margin: 0 auto;
        }
        .middle_left{
            margin-left: 10px;
            width: 800px;
            height: 100%;
            background-color: white;
            display: inline-block;
        }
        .middle_right{
            width: 270px;
            height: 100%;
            background-color:  #ededed;
            display: inline-block;
            background-image: url("5.jpg");
        }
        .top_left{

            width: 772px;
            height:66px;
            /*margin-top: 10px;*/
            background-color: #9c9c9c;
            /*display: inline-block;*/
            margin: 0 auto;
        }
        /*.top_left *{*/
            /*width: 50px;*/
            /*height:30px;*/
            /*margin-top: 10px;*/
            /*background-color: #9c9c9c;*/
            /*display: inline-block;*/
        /*}*/
        .bottom{
            text-align: center;
            margin-top: 10px;
        }

    </style>
</head>

<body>

<div class="head">        <!-- 顶部 -->
    <div class="head_main">
        <div class="head_left">
            <a class="home page">首页</a>
            <a class="all">全部</a>
            <a class="42part">42区</a>
            <a class="joke">段子</a>
            <a class="pic">图片</a>
            <a class="it1024">挨踢1024</a>
            <a class="answer">你问我答</a>
        </div>
        <div class="head_right">
            <a class="search">
                搜索<input type="text">
            </a>
            <a class="register">注册</a>
            <a class="login">登录</a>

        </div>
    </div>
</div>

<div class="middle">    <!-- 中间 -->
    <div class="middle_main">
        <div class="middle_left">
            <div class="top_left">
                <!--<a class="best_hot">最热</a>-->
                <!--<a class="best_new">最新</a>-->
                <!--<a class="people">人类发布</a>-->
            </div>
            <!--<div class="top_right">-->
                <!--<a class=""></a>-->
                <!--<a class=""></a>-->
                <!--<a class=""></a>-->
            <!--</div>-->
        </div>
        <div class="middle_right"></div>
    </div>
</div>

<div class="bottom">      <!-- 底部 -->
    <div>关于我们|联系我们|服务条款|隐私政策|抽屉新热榜工具|下载客户端|意见与反馈|友情链接|公告  </div>
    <div> 旗下站点 ©2018 chouti.com 京ICP备09053974号-3 京公网安备 110102004562</div>
    <div>违法和不良信息举报： 电话：010-58302039 邮箱：jubao@chouti.com</div>
    <div>版权所有：北京格致璞科技有限公司</div>
</div>

</body>
</html>

5.实时显示时间



<!DOCTYPE html>


<html>
<head>
    <title>test_code</title>
    <meta charset="utf8">
</head>
<form>
    <input type="text" id="input_one">
    <input type="button" value="begin" οnclick="show_time_button()">
    <input type="button" value="end" οnclick="End()">

</form>
<script>
    function get_time() {          // 获取拼接好的时间
        var time = new Date();
        var year = time.getFullYear();
        var month = time.getMonth()+1;
        var day = time.getDate();
        var hour = time.getHours();
        var minutes = time.getMinutes();
        var second = time.getSeconds();
        return year+'年'+month+'月'+day+'日'+'     '+hour+':'+minutes+':'+second;
    }
//    alert(get_time());
    function Begin() {               /* 当按下开始按钮时,开始执行这里面的代码,也就是将实时时间显示在文本输入框中*/
        var time = get_time();
        var input_obj = document.getElementById("input_one");         // 拿到输入框对象
        input_obj.value = time;         // 对输入框的内容进行赋值
    }
    var ID;             // 将ID设置为局部变量,然后在函数中修改他的值
    function show_time_button() {
        End();
        Begin();       // 为了点击按钮实时显示当前时间,所以点击按钮的时候会先执行一下Begin函数
        ID = setInterval(Begin,500);       // 间隔某时长循环的执行的某个函数
    }
    function End() {
        clearInterval(ID);
//        alert('结束计时!!!')
    }
</script>


<body>


</body>

</html>

6.根据摄氏度,输出华氏度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
    <form>
        摄氏度:<input type="text" id="sheshidu">
        <input type="button" value="计算" onclick="count()">    <!-- 设置onclick事件, 当按下值为计算的按钮时,执行count()函数中的代码-->
        <br/>            <!-- 实现换行-->
        <br/> 
        <span id ='res'>对应的华氏度</span>
    </form>
    <script type="text/javascript">


        function count(){      // 定义count函数
            var key = document.getElementById('sheshidu');
            
            var sheshidu_value = key.value;
            console.log(sheshidu_value);      // 拿到文本框输入的摄氏度的值
            result = 32 + 9/5*sheshidu_value;   // 计算出转换后的华氏度的值
            document.getElementById("res").innerHTML = '华氏度:'+result;  // 将原来的文字转换为结果值

        }
    </script>
</body>
</html>

7.输入成绩,返回等级

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style type="text/css">
        .box{

            width: 350px;
            height: 200px; 
            position: fixed;  /* 设置box相对于浏览器的大小而一直*/
            right: 533px;
            bottom: 251px;
            background-color: #cccccc;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="box">
        物理成绩:<input type="text" id="wuli">        <!-- 用于用户输入的文本框-->
        <span id="result0"></span><br/><br/>    <!-- 先将span标签内不写内容,使用id属性,在输出成绩等级的时候确定标签的位置 -->

        化学成绩:<input type="text" id="chemistry">
        <span id="result1"></span><br/><br/>

        数学成绩:<input type="text" id="math">
        <span id="result2"></span><br/><br/>

        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" value='结果' onclick="func()">      <!--连接事件函数 -->
    </div>
    <script type="text/javascript">
        function func(){
            var wuli_score = document.getElementById('wuli').value;  //   获取用户输入的每个成绩
            var chemistry_score = document.getElementById('chemistry').value;
            var math_score = document.getElementById('math').value;
            // console.log(wuli_score);   
            // console.log(typeof wuli_score);  // string
            // 
            function result(score){       // 判断成绩后输出成绩的判定等级
                if(Number(score)>=60){
                    return '及格';
                }else{
                    return '不及格';
                }
            }
            // console.log(result(chemistry_score));
            // console.log(result(40));    // 测试判断成绩的函数
            document.getElementById('result0').innerHTML = result(wuli_score);  // 调用函数,返回输出等级
            document.getElementById('result1').innerHTML = result(chemistry_score);
            document.getElementById('result2').innerHTML = result(math_score);
        }
    </script>
</body>
</html>

8.注册页面，密码必须超过8位，并且必须含有数字和字母

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    输入密码：<input type="password" id="password">
    <input type="button" onclick="func()" value="校验"><br/><br/>
    <span id="flag">此处显示密码设置结果</span><br/>   <!--输出结果和判断密码的格式是否错误-->
    <script type="text/javascript">
        function func(){
            passwd = document.getElementById('password').value;
            flag_head = document.getElementById('flag');         // 获取flag的操作句柄
            // var i = 0；
            // flag_head.innerHTML = 'sdfkskdjfk';
            
            var result = 0;    // 判断密码中是否同时具有字母和数字，如果在下面的判断中发现有数字则加一，并且还有字母的时候再加一
            while(1){
                if (passwd.length<8) {                       // 判断密码是否够8位，否则直接退出循环
                    flag_head.innerHTML = '密码不能少于8位';
                    break;
                }

                var i = 0;      //  用于遍历用户输入的字符串中的字符是否含有大写或者小写的字母                 
                while(i<passwd.length){
                    if(passwd[i].charCodeAt()>=65 && passwd[i].charCodeAt()<= 90 || passwd[i].charCodeAt()>=97 && passwd[i].charCodeAt()<= 122){
                        result += 1;
                        break;    
                    }
                    else{
                        i++;
                    }
                    
                }
                var j = 0;            // 循环查看是否有数字
                while(j<passwd.length){
                    if (passwd[j].charCodeAt()>=48 && passwd[j].charCodeAt()<= 57) {
                        result += 1;   // 有数字就result加一，然后跳出循环
                        break;    
                    }
                    else{
                        j++;      // 如果查找到数字就下标加一，循环遍历
                    }
                }
                                
                if(result == 2){
                    flag_head.innerHTML = '密码设置成功';       // 如果result等于2，那么就说明密码中同时含有数字和字母
                    break;
                }
                else{
                    flag_head.innerHTML = '密码中必须包含数字和字符';
                }
                break;
            }
            
            
        }

    </script>
</body>
</html>

9.简单的计算器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h2>请输入算式</h2>
    <input type="text" id="befor">
    <select id="symbol_way">          <!--计算类型选择-->
        <option>+</option>
        <option>-</option>
        <option>/</option>
        <option>*</option>
        <option>%</option>
    </select>
    <input type="text" id="after">=
    <span id="result">输出计算的结果</span><br/>
    <input type="button" value="计算" onclick="func()">   <!--点击触发事件函数-->

    <script type="text/javascript">
        function func(){
            symbol_value = document.getElementById('symbol_way').value;
            // console.log(test_value);
            result_head = document.getElementById('result');         // 用于输出结果文本的句柄

            while(1){

            befor_num = document.getElementById('befor').value;     // 获取用户输入的第一个数字
            var i = 0;
            while(i < befor_num.length){
                if (befor_num[i].charCodeAt() >= 47 && befor_num[i].charCodeAt() <= 57) {
                    i++;
                }
                else{
                    result_head.innerHTML = '检测到您的输入中可能有非法字符';   // 判断是否有非法字符
                    break;
                }
            }
            
            after_num = document.getElementById('after').value;   // 获取用户输入的第二个数字

            var j = 0;
            while(j < after_num.length){                // 遍历判断是否含有非法字符
                if (after_num[j].charCodeAt() >= 47 && after_num[j].charCodeAt() <= 57) {
                    j++;
                }
                else{
                    result_head.innerHTML = '检测到您的输入中可能有非法字符';   // 判断是否有非法字符
                    break;
                }
            }

            the_equation = befor_num+symbol_value+after_num;     // 对于算式的拼接
            // console.log(the_equation);
            the_result = eval(the_equation);      // 用eval直接计算
            // console.log(the_result);
            result_head.innerHTML = the_result;        // 输出结果
            break;


            }
        }
    </script>


    
</body>
</html>

10.更换浏览器页面背景

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <select onchange="change_back()" id="change">
        <option value="a">春天</option>
        <option value="b">夏天</option>
        <option value="c">秋天</option>
        <option value="d">冬天</option>

    </select>


    <script>
        document.body.style.background = 'url(001.jpg)';
        function change_back() {
            hand = document.getElementById('change');
//            console.log(hand.value);
//            console.log(typeof hand.value);  // string
            switch (hand.value){
                case 'a':
                    document.body.style.background = 'url(002.jpg)';
                    break;
                case 'b':
                    document.body.style.background = 'url(003.jpg)';
                    break;
                case 'c':
                    document.body.style.background = 'url(004.jpg)';
                    break;
                case 'd':
                    document.body.style.background = 'url(005.jpg)';
                    break;
            }
        }
    </script>
</body>
</html>

11.按钮控制一个div的移动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>move</title>
</head>


<style>
    #pic{
        background-image: url(1.png);   /* 在div中插入将要移动的图片*/
        height: 120px;
        width: 120px;
        margin: 285px auto;
    }

    #keybord{
        position: fixed;     /*设置控制键部分的margin是相对于浏览器移*/
        top: 540px;
        left: 580px;
    }
    
</style>

<body>

    <div id="pic"></div>

    <div id="keybord">

        <!-- 定义相关的控制按钮 -->

        <input type="button" value="↑" onclick="downOrUp('-')">
        <input type="button" value="↓" onclick="downOrUp('+')">
        <input type="button" value="←" onclick="leftOrRight('-')">
        <input type="button" value="→" onclick="leftOrRight('+')">
        <input type="button" value="↖" onclick="other_direction('-','-')">
        <input type="button" value="↙" onclick="other_direction('+','-')">
        <input type="button" value="↘" onclick="other_direction('+','+')">
        <input type="button" value="↗" onclick="other_direction('-','+')">

    </div>
    

<script>

    ctrl_hand = document.getElementById('pic');   // 获取pic的操作句柄,并且设置为全局变量


     // 相似方向移动的功能将会封装在这一个函数中，通过调用函数时传入相应的符号来控制移动， 下同
    function downOrUp(symbol){

        // 获取当前top大小并且根据传入的参数，决定是加或者减，实现移动
        move_top_length = eval(ctrl_hand.offsetTop + symbol + 10) + 'px';    // 使用eval计算出将要移动的具体位置的像素值
        statement = move_top_length + ' auto';    // 拼接语句
        ctrl_hand.style.margin = statement;
    }


    function leftOrRight(symbol){
        
        move_top_length = ctrl_hand.offsetTop + 'px';   
        move_left_length = eval(ctrl_hand.offsetLeft + symbol + 10) + 'px';
        statement = move_top_length + ' ' + move_left_length;    
        ctrl_hand.style.margin = statement;
    }


    function other_direction(first_symbol, second_symbol){  

        // console.log(first_symbol);
        move_top_length = eval(ctrl_hand.offsetTop + first_symbol + 10) + 'px';   
        move_left_length = eval(ctrl_hand.offsetLeft + second_symbol + 10) +'px';
        statement = move_top_length + ' ' + move_left_length;    
        // console.log(statement);
        ctrl_hand.style.margin = statement;
    }


    

</script>


</body>
</html>

12.jQuery选择器的简单应用作业

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <form action="">
        <h3>用户基本信息</h3>
        用户名：<input type="text" name="username"><br/>
        密码: <input type="password" name="pwd"><br/>
        年龄：<input type="text" name="age"><br/>
        性别：<input type="radio" value="female" name="gender" checked="true">男
              <input type="radio" value="male" name="gender">女
        <input type="button" value="确认" id="btn1" onclick="change_color()">
        <input type="button" value="取消">
    </form>

    
    <span>用户输入的结果：</span>

    <script src='./libs/jquery-3.3.1.min.js'></script>
    <script>
        //单击确认按钮，将h3标题文字改为蓝色，并且获取用户输入的用户名、密码、性别和年龄，显示在表单下方的<span>标签中
        
        //
        function change_color(){
            $('h3').css('color', 'blue');  /// 改变h3颜色

            username = $('[name]')[0].value;   // 获取用户输入的内容
            userpwd = $('[name]')[1].value;
            userage = $('[name]')[2].value;
            usersex = $('[name]')[3].checked;

            // console.log(usersex);
            // 
            if(usersex == true){   // 判断radio的值
                usersex = '男';
            }
            else{
                usersex = '女';
            }


            all_info = username+'<br/>'+userpwd+'<br/>'+userage+'<br/>'+usersex;  // 输出结果拼接

            // console.log(username);

            $('span').html(all_info);   // 显示结果


        }
        
    </script>
</body>
</html>

13.图片自动轮播，鼠标滑过事件

#   纯代码，使用需要图片和jquey


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style>
        .img{
            width: 200px;
            height: 250px;
            margin-left: 600px;
            margin-top: 250px;
            /*background-color: green;*/
            position: absolute;

        }
        .left_menu{
            width: 60px;
            height: 250px;
            margin-left: 550px;
            margin-top: 250px;
            /*background-color: pink;*/
            position: absolute;
        }
        .right_menu{
            width: 60px;
            height: 250px;
            margin-top: 250px;
            margin-left: 800px;
            /*background-color: red;*/
            position: absolute;
        }
    </style>
</head>
<body>
    <div class="img">
        <img src='./imgs/连衣裙.jpg'></img>
    </div>
    <div class="left_menu">
        <input type="button" value="连衣裙" onmouseover="test('连衣裙')">
        <input type="button" value="呢大衣" onmouseover="test('呢大衣')">
        <input type="button" value="围巾" onmouseover="test('围巾')">
        <input type="button" value="女包" onmouseover="test('女包')">
        <input type="button" value="女裤" onmouseover="test('女裤')">
        <input type="button" value="女靴" onmouseover="test('女靴')">
        <input type="button" value="棉服" onmouseover="test('棉服')">
        <input type="button" value="毛衣" onmouseover="test('毛衣')">
        <input type="button" value="牛仔裤" onmouseover="test('牛仔裤')">
    </div>
    <div class="right_menu">
        <input type="button" value="男包" onmouseover="test('男包')">
        <input type="button" value="男棉服" onmouseover="test('男棉服')">
        <input type="button" value="男毛衣" onmouseover="test('男毛衣')">
        <input type="button" value="男靴" onmouseover="test('男靴')">
        <input type="button" value="登山鞋" onmouseover="test('登山鞋')">
        <input type="button" value="皮带" onmouseover="test('皮带')">
        <input type="button" value="皮衣" onmouseover="test('皮衣')">
        <input type="button" value="羽绒服" onmouseover="test('羽绒服')">
        <input type="button" value="雪地靴" onmouseover="test('雪地靴')">

    </div>

    <script src="./libs/jquery-3.3.1.min.js"></script>   
    <script>
        var $img_handler = $('.img');  // 获取到改变图片的句柄
        function test(img_name){
            img_path = './imgs/' + img_name + '.jpg';   // 拼接每个图片的相对路径
            // console.log(img_path);
            $('.img').empty();          // 在更换一张图片的时候，删除之前一张图片
            $('.img').append("<img src="+img_path+"></img>");   // 在父标签中添加一个img标签
            // console.log('hello world');
        }
        var product_arr = new Array('连衣裙','呢大衣','围巾','女包','女裤','女靴','棉服','毛衣','牛仔裤','男包','男棉服','男毛衣','男靴','登山鞋','皮带','皮衣','羽绒服','雪地靴')

        var i = 0;    // 将作为轮播图的下标
        
        var t = setInterval('timing_change()', 1000);

        function timing_change(){
            test(product_arr[i]);  // 调用更换图片函数
            i=i+1;
            
            if(i>=product_arr.length){
                i = 0;   // 如果i大于数组长度，就让i等于0，重新开始轮播 
            }

        }
        
        // setInterval(timing_change, 100);
            
        
    </script>
</body>
</html>

14.自定义分页类主要功能代码（不包含部分css渲染）

# 自定义分页类， 使用时需要两个参数，page_num是当前访问页码，content_num_sum是数据库中所有数据的个数总和, data_num是你一页需要放置多少条数据
class PageHelper:
    def __init__(self, page_num, content_num_sum, data_num):
        self.page_num = page_num
        self.content_num_sum = content_num_sum
        self.data_num = int(data_num)

    def data_start(self):
        start_content_index = (self.page_num - 1) * self.data_num  # 每页起始数据的索引
        return start_content_index

    def data_end(self):
        end_content_index = self.page_num * self.data_num  # 每页结束数据的索引
        return end_content_index

    def page_help(self):

        pages, remain_count = divmod(self.content_num_sum, 10)  # 总共需要显示的页数和余数

        if remain_count == 0:  # 如果余数为0，那么页数为pages， 否则页数加一
            show_pages = pages
        else:
            show_pages = pages + 1

        # 每页显示十一页
        if show_pages < 11:
            start_page = 1
            end_page = show_pages
        else:
            if self.page_num < 6:
                start_page = 1
                end_page = self.page_num + 5 + 1
            else:
                if self.page_num > show_pages - 5:
                    start_page = self.page_num - 5
                    end_page = show_pages + 1
                else:
                    start_page = self.page_num - 5
                    end_page = self.page_num + 5 + 1

        pages_list = []
        if self.page_num != 1:
            pages_list.append('<a class="page" href="/classes?p=%s">上一页</a>' % (self.page_num - 1,))

        for i in range(start_page, end_page):  # 将所有的页码a标签动态的生成发送给前端进行渲染
            if i == self.page_num:  # 当前页的页码a标签变色
                pages_list.append('<a class="page active" href="/classes?p=%s">%s</a>' % (i, i))  # 拼接HTML代码
            else:
                pages_list.append('<a class="page" href="/classes?p=%s">%s</a>' % (i, i))
        if self.page_num != 13:
            pages_list.append('<a class="page" href="/classes?p=%s">下一页</a>' % (self.page_num + 1,))
        page_statement = ''.join(pages_list)

        return page_statement
        # print(pages_list)

15.bootstrap， jQuery实现登录页面

# 使用之前需要导入bootstrap和jQuery
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <style>
        #test_form {
            margin-top: 200px;
        }

        body {
            background-color: #eee;
        }
    </style>

</head>
<body>
<div class="container">
    <div class="row">
        <div id="test_form" class="col-md-4 col-md-offset-4">
            <h1 class="text-center">Login</h1>
            <form class="form-horizontal">
                <div class="form-group">
                    <label for="inputEmail3" class="col-sm-3 control-label">Email</label>
                    <div class="col-sm-9">
                        <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputPassword3" class="col-sm-3 control-label">Password</label>
                    <div class="col-sm-9">
                        <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-3 col-sm-9">
                        <div class="checkbox">
                            <label>
                                <input type="checkbox"> Remember me
                            </label>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-3 col-sm-9">
                        <button type="submit" class="btn btn-primary">Sign in</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<script src="jquery-3.3.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>

</body>
</html>

16.学生信息统计

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <style>
        #work_line {
            margin-top: 20px;
        }
        #top_row{
            margin-top: 50px;
        }
    </style>
</head>
<body>
<div class="container">
    <!--进度条-->
    <div class="row">
        <div class="col-md-12">
            <div class="progress">
                <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
                     style="width: 50%;">
                    50%
                </div>
            </div>
        </div>
    </div>
    <!--主内容框-->
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h1>Students Info Statistic</h1>
        </div>
        <div class="panel-body"  id="work_line">
            <div id="top_row" class="row">
                <div class="col-md-5 col-md-offset-2">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label for="inputName" class="col-sm-3 control-label">Name</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="inputName" placeholder="name">
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="inputPhone" class="col-sm-3 control-label">Phone</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="inputPhone" placeholder="phone">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputPassword" class="col-sm-3 control-label">Password</label>
                            <div class="col-sm-9">
                                <input type="password" class="form-control" id="inputPassword" placeholder="Password">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputEmail" class="col-sm-3 control-label">Email</label>
                            <div class="col-sm-9">
                                <input type="email" class="form-control" id="inputEmail" placeholder="email">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-3 col-sm-9">
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox"> Remember me
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-3 col-sm-9">
                                <button type="submit" class="btn btn-primary">Sign in</button>
                            </div>
                        </div>
                        ----------------------------------------------------------------------------------------------


                        <div class="row">
                            <div class="col-md-12">
                                <label class="col-md-5 control-label">Character About You  :</label>
                                <div class="col-md-7">
                                    <div class="radio">
                                        <label>
                                            <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1"
                                                   checked>
                                            I am a good boy
                                        </label>
                                    </div>
                                    <div class="radio">
                                        <label>
                                            <input type="radio" name="optionsRadios" id="optionsRadios2"
                                                   value="option2">
                                            I am a bad boy
                                        </label>
                                    </div>
                                    <div class="radio disabled">
                                        <label>
                                            <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3"
                                                   disabled>
                                            I am not a guy
                                        </label>
                                    </div>

                                </div>

                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

</div>


<script src="jquery-3.3.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

17.导航条

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="container">
    <div class="row">
        <div class="list-group">
            <a href="" class="list-group-item"><i class="fa fa-qq"></i>&nbsp;姓名</a>
            <a href="" class="list-group-item"><i class="fa fa-qq"></i>&nbsp;性别</a>
            <a href="" class="list-group-item"><i class="fa fa-qq"></i>&nbsp;年龄</a>
            <a href="" class="list-group-item"><i class="fa fa-qq"></i>&nbsp;邮箱</a>
        </div>
    </div>
</div>
<script src="jquery-3.3.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

转载于:https://www.cnblogs.com/kangjunhao/p/9395651.html

weixin_30444105

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
实现网页代码

return top1.点击指定字段可以实现内容跳转，图片插入<!DOCTYPE html><html lang="en"><head> <title>kangjunhao</title> <meta charset="utf8"> <style>...
复制链接

扫一扫