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设置背景图片位置应用小小小案例

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

浏览过的版块

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