CSS设置背景图片位置应用小小小案例
本帖最后由 肖-肖 于 2021-4-25 22:21 编辑案例目的::
知识点清单
<!--由于图片太大,而有使用者的屏幕大小不一。导致如果直接使用img插入图片
1.会使图片的加载速度变慢 2.会导致图片只能显示一部分加入屏幕<图片
所以要使用背景图片的方式来解决这个问题，用背景位置的方式来实现显示图片的核心内容
-->
源代码(源代码中有所有详细的解释)
鹅 再写一个小应用不然太小了{:10_324:}
案例目的
源代码
好好努力学啊，后期我会请教你，教我画前端
我现在画的界面都狠丑 wp231957 发表于 2021-4-26 07:22
好好努力学啊，后期我会请教你，教我画前端
我现在画的界面都狠丑
大多数人学的都不一样，导致各有长短，所以只能说是互相请教了 wp231957 发表于 2021-4-26 07:22
好好努力学啊，后期我会请教你，教我画前端
我现在画的界面都狠丑
大多数人学的都不一样，导致各有长短，所以只能说是互相请教了 肖-肖 发表于 2021-4-26 11:42
大多数人学的都不一样，导致各有长短，所以只能说是互相请教了
我画了几个div 因为我在谷歌下做的测试，所以谷歌下正常显示，可是到了360浏览器下，容器不能正常显示，咋弄？ wp231957 发表于 2021-4-26 11:48
我画了几个div 因为我在谷歌下做的测试，所以谷歌下正常显示，可是到了360浏览器下，容器不能正常显示， ...
你发下代码吧{:10_324:} 肖-肖 发表于 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:16 编辑
wp231957 发表于 2021-4-26 13:09
那个div的 先放放吧
你如果有空 先帮我看看这个代码，这个代码最下面的4个按钮的位置，总是随着浏览器的 ...
改了一小下，你看下吧 虽然不是很华丽但是是居中了 {:10_324:}
代码如下附加解释
<!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>
页:
[1]