CSS设置背景图片位置应用小小小案例

肖-肖 · 发表于 2021-4-25 21:51:04

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由肖-肖于 2021-4-25 22:21 编辑

案例目的::

知识点清单

<!--由于图片太大,而有使用者的屏幕大小不一。导致如果直接使用img插入图片 
    1.会使图片的加载速度变慢 2.会导致图片只能显示一部分加入屏幕<图片
    所以要使用背景图片的方式来解决这个问题，用背景位置的方式来实现显示图片的核心内容
 -->

源代码(源代码中有所有详细的解释)

背景图片应用小小小案例.zip (456.69 KB, 下载次数: 0, 售价: 1 鱼币)
鹅再写一个小应用不然太小了

案例目的

源代码

背景图片精确定位.zip (512.82 KB, 下载次数: 0, 售价: 1 鱼币)

wp231957 · 发表于 2021-4-26 07:22:01

好好努力学啊，后期我会请教你，教我画前端
我现在画的界面都狠丑

肖-肖 · 发表于 2021-4-26 11:41:30

wp231957 发表于 2021-4-26 07:22
好好努力学啊，后期我会请教你，教我画前端
我现在画的界面都狠丑

大多数人学的都不一样，导致各有长短，所以只能说是互相请教了

肖-肖 · 发表于 2021-4-26 11:42:09

wp231957 发表于 2021-4-26 07:22
好好努力学啊，后期我会请教你，教我画前端
我现在画的界面都狠丑

大多数人学的都不一样，导致各有长短，所以只能说是互相请教了

wp231957 · 发表于 2021-4-26 11:48:18

肖-肖发表于 2021-4-26 11:42
大多数人学的都不一样，导致各有长短，所以只能说是互相请教了

我画了几个div 因为我在谷歌下做的测试，所以谷歌下正常显示，可是到了360浏览器下，容器不能正常显示，咋弄？

肖-肖 · 发表于 2021-4-26 11:54:06

wp231957 发表于 2021-4-26 11:48
我画了几个div 因为我在谷歌下做的测试，所以谷歌下正常显示，可是到了360浏览器下，容器不能正常显示， ...

你发下代码吧

wp231957 · 发表于 2021-4-26 13:09:14

肖-肖发表于 2021-4-26 11:54
你发下代码吧

那个div的先放放吧
你如果有空先帮我看看这个代码，这个代码最下面的4个按钮的位置，总是随着浏览器的变化而变化
导致页面很丑

<!DOCTYPE.html>
<html>

<head>
    <title>CHENGUOFENG's PAGE</title>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <style type="text/css">
        .style1 {
            font-size: x-large;
            font-weight: bold;
            color: #FF0000;
        }
        
        .style2 {
            text-align: center;
        }
        
        #btn_1 {
            width: 75px;
        }
        
        .style3 {
            color: #0000FF;
            font-weight: 700;
        }
    </style>

</head>

<body id="mainbody">

    <div class="style2">
        <label for="input_1"><span class="style1">
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            乾安联通实时经营信息系统         <br />
            </span></label><br> 员工姓名: <input type="text" id="name" /><br />
        <br> 系统密码: <input type="password" id="pwd" />
    </div>
    <div class="form-group">
    </div>

    <p>
         </p>
    <p>
                                                                                                             
        <button id="denglu" class="style3" type="button"><b>发展录入</b></button>      
        <button id="chaxun" class="style3" type="button">日报查询 </button>      
        <button id="ybchaxun" class="style3" type="button">月报查询 </button>      
        <button id="weihu" class="style3" type="button"><b>系统维护</b></button>
    </p>

    <script>
        $('#denglu').on('click', function() {
            var name = document.getElementById("name").value;
            var pwd = document.getElementById("pwd").value;
            console.log(name);
            if (name == "" || pwd == "") {
                alert("帐号和密码不能为空");
            } else {
                //console.log(htmlname) ;
                $.ajax({
                    type: "get",
                    url: "/login",
                    data: {
                        'name': name,
                        "pwd": pwd
                    },
                    ContentType: 'text/html',
                    dataType: "html",
                    success: function(hdata) {
                        if (hdata) {
                            if (hdata === "error") {
                                console.log("hello is wo ");
                                console.log(typeof(hdata));
                            }
                            console.log("come in 121");
                            console.log(typeof(hdata));
                            //console.log(hdata);
                            //$("#main").html(hdata);
                            var html2 = "";
                            html2 += hdata;
                            //alert("html2");
                            $("#mainbody").html(hdata);

                        } else {
                            console.log("失败了");
                        }
                    },
                    error: function(data, XMLHttpRequest, textStatus, errorThrown) {
                        console.log(data);
                        console.log(XMLHttpRequest.status);
                        console.log(XMLHttpRequest.readyState);
                        console.log(textStatus);
                    }


                });
            }
        });

        /////////////维护界面//////////////////////////////
        $('#weihu').on('click', function() {
            var name = document.getElementById("name").value;
            var pwd = document.getElementById("pwd").value;
            console.log(name);
            if (name == "" || pwd == "") {
                alert("帐号和密码不能为空");
            } else {
                //console.log(htmlname) ;
                $.ajax({
                    type: "get",
                    url: "/weihu",
                    data: {
                        'name': name,
                        "pwd": pwd
                    },
                    ContentType: 'text/html',
                    dataType: "html",
                    success: function(hdata) {
                        if (hdata) {
                            if (hdata === "error") {
                                console.log("hello is wo ");
                                console.log(typeof(hdata));
                            }
                            console.log("come in 121");
                            console.log(typeof(hdata));
                            console.log(hdata);
                            //$("#main").html(hdata);
                            var html2 = "";
                            html2 += hdata;
                            //alert("html2");
                            $("#mainbody").html(hdata);

                        } else {
                            console.log("失败了");
                        }
                    },
                    error: function(data, XMLHttpRequest, textStatus, errorThrown) {
                        console.log(data);
                        console.log(XMLHttpRequest.status);
                        console.log(XMLHttpRequest.readyState);
                        console.log(textStatus);
                    }


                });
            }
        });
        ////////////////////////查询界面//////////////////////////////////
        $('#chaxun').on('click', function() {
            var name = document.getElementById("name").value;
            var pwd = document.getElementById("pwd").value;
            console.log(name);
            if (name == "" || pwd == "") {
                alert("帐号和密码不能为空");
            } else {
                //console.log(htmlname) ;
                $.ajax({
                    type: "get",
                    url: "/chaxun",
                    data: {
                        'name': name,
                        "pwd": pwd
                    },
                    ContentType: 'text/html',
                    dataType: "html",
                    success: function(hdata) {
                        if (hdata) {
                            if (hdata === "error") {
                                console.log("hello is wo ");
                                console.log(typeof(hdata));
                            }
                            console.log("come in 121");
                            console.log(typeof(hdata));
                            console.log(hdata);
                            //$("#main").html(hdata);
                            var html2 = "";
                            html2 += hdata;
                            //alert("html2");
                            $("#mainbody").html(hdata);

                        } else {
                            console.log("失败了");
                        }
                    },
                    error: function(data, XMLHttpRequest, textStatus, errorThrown) {
                        console.log(data);
                        console.log(XMLHttpRequest.status);
                        console.log(XMLHttpRequest.readyState);
                        console.log(textStatus);
                    }


                });
            }
        });
    </script>

</body>

</html>

肖-肖 · 发表于 2021-4-26 14:14:57

本帖最后由肖-肖于 2021-4-26 14:16 编辑

wp231957 发表于 2021-4-26 13:09
那个div的先放放吧
你如果有空先帮我看看这个代码，这个代码最下面的4个按钮的位置，总是随着浏览器的 ...

改了一小下，你看下吧虽然不是很华丽但是是居中了

代码如下附加解释

<!DOCTYPE.html>
<html>

<head>
    <title>CHENGUOFENG's PAGE</title>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <style type="text/css">
        .style1 {
            font-size: x-large;
            font-weight: bold;
            color: #FF0000;
        }
        
        .style2 {
            text-align: center;
        }
        
        #btn_1 {
            width: 75px;
        }
        
        .style3 {
            color: #0000FF;
            font-weight: 700;
        }
        .btn{
            width:1200px;
            margin:0 auto;/*(1200-470)/2=365*/
            padding-left: 446px;
        }
        .btn button{
            margin-left: 47px;
        }
    </style>

</head>

<body id="mainbody">

    <div class="style2">
        <label for="input_1"><span class="style1">
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            乾安联通实时经营信息系统         <br />
            </span></label><br> 员工姓名: <input type="text" id="name" /><br />
        <br> 系统密码: <input type="password" id="pwd" />
    </div>
    <div class="form-group">
    </div>

    <br>
    <p>
        <div class="btn">
            <button id="denglu" class="style3" type="button"><b>发展录入</b></button>      
            <button id="chaxun" class="style3" type="button">日报查询 </button>      
            <button id="ybchaxun" class="style3" type="button">月报查询 </button>      
            <button id="weihu" class="style3" type="button"><b>系统维护</b></button>
        </div>
    </p>

    <script>
        $('#denglu').on('click', function() {
            var name = document.getElementById("name").value;
            var pwd = document.getElementById("pwd").value;
            console.log(name);
            if (name == "" || pwd == "") {
                alert("帐号和密码不能为空");
            } else {
                //console.log(htmlname) ;
                $.ajax({
                    type: "get",
                    url: "/login",
                    data: {
                        'name': name,
                        "pwd": pwd
                    },
                    ContentType: 'text/html',
                    dataType: "html",
                    success: function(hdata) {
                        if (hdata) {
                            if (hdata === "error") {
                                console.log("hello is wo ");
                                console.log(typeof(hdata));
                            }
                            console.log("come in 121");
                            console.log(typeof(hdata));
                            //console.log(hdata);
                            //$("#main").html(hdata);
                            var html2 = "";
                            html2 += hdata;
                            //alert("html2");
                            $("#mainbody").html(hdata);

                        } else {
                            console.log("失败了");
                        }
                    },
                    error: function(data, XMLHttpRequest, textStatus, errorThrown) {
                        console.log(data);
                        console.log(XMLHttpRequest.status);
                        console.log(XMLHttpRequest.readyState);
                        console.log(textStatus);
                    }


                });
            }
        });

        /////////////维护界面//////////////////////////////
        $('#weihu').on('click', function() {
            var name = document.getElementById("name").value;
            var pwd = document.getElementById("pwd").value;
            console.log(name);
            if (name == "" || pwd == "") {
                alert("帐号和密码不能为空");
            } else {
                //console.log(htmlname) ;
                $.ajax({
                    type: "get",
                    url: "/weihu",
                    data: {
                        'name': name,
                        "pwd": pwd
                    },
                    ContentType: 'text/html',
                    dataType: "html",
                    success: function(hdata) {
                        if (hdata) {
                            if (hdata === "error") {
                                console.log("hello is wo ");
                                console.log(typeof(hdata));
                            }
                            console.log("come in 121");
                            console.log(typeof(hdata));
                            console.log(hdata);
                            //$("#main").html(hdata);
                            var html2 = "";
                            html2 += hdata;
                            //alert("html2");
                            $("#mainbody").html(hdata);

                        } else {
                            console.log("失败了");
                        }
                    },
                    error: function(data, XMLHttpRequest, textStatus, errorThrown) {
                        console.log(data);
                        console.log(XMLHttpRequest.status);
                        console.log(XMLHttpRequest.readyState);
                        console.log(textStatus);
                    }


                });
            }
        });
        ////////////////////////查询界面//////////////////////////////////
        $('#chaxun').on('click', function() {
            var name = document.getElementById("name").value;
            var pwd = document.getElementById("pwd").value;
            console.log(name);
            if (name == "" || pwd == "") {
                alert("帐号和密码不能为空");
            } else {
                //console.log(htmlname) ;
                $.ajax({
                    type: "get",
                    url: "/chaxun",
                    data: {
                        'name': name,
                        "pwd": pwd
                    },
                    ContentType: 'text/html',
                    dataType: "html",
                    success: function(hdata) {
                        if (hdata) {
                            if (hdata === "error") {
                                console.log("hello is wo ");
                                console.log(typeof(hdata));
                            }
                            console.log("come in 121");
                            console.log(typeof(hdata));
                            console.log(hdata);
                            //$("#main").html(hdata);
                            var html2 = "";
                            html2 += hdata;
                            //alert("html2");
                            $("#mainbody").html(hdata);

                        } else {
                            console.log("失败了");
                        }
                    },
                    error: function(data, XMLHttpRequest, textStatus, errorThrown) {
                        console.log(data);
                        console.log(XMLHttpRequest.status);
                        console.log(XMLHttpRequest.readyState);
                        console.log(textStatus);
                    }


                });
            }
        });
    </script>

</body>

</html>

账号		自动登录	找回密码
密码			立即注册

[分享] CSS设置背景图片位置应用小小小案例

马上注册，结交更多好友，享用更多功能^_^