gpt4 book ai didi

javascript - HTML CSS - 不可拖动的图像和整洁的代码

转载 作者:行者123 更新时间:2023-11-28 03:00:50 25 4
gpt4 key购买 nike

我需要帮助我从事网络开发,我对此有点陌生,但是我如何使图像不可拖动,我已经使它不可拖动,但是当我选择所有文本和整个页面以及该图像时,它处于可拖动状态帮助。

drag image

我需要建议或批评。我的工作整洁吗?它是干净的还是什么?谢谢大家:)

body {
background-color: #CEF6CE;
}
* {
font-family: 'Helvetica', 'Arial', sans-serif;
margin: 0px;
}
.wrapper {
background-color: white;
height: 642px;
width: 900px;
margin: 0 auto;
}
.login {
background-color: red;
width: 235px;
height: 295px;
margin-top: 150px;
margin-left: 545px;
margin-right: 200px;
position: fixed;
font-size: 20px;
}
.loginform {
margin-top: 25px;
}
.txts td {
white-space: nowrap;
}
.footer {
background-color: #4A4A4A;
width: 100%;
height: 25px;
position: absolute;
margin: 0 auto;
bottom: 0;
font-size: 11px;
}
.copyright {
background-color: transparent;
position: absolute;
color: #E0E0E0;
margin-left: 1000px;
}
a:link {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
button.loginBtn {
width: 80px;
height: 30px;
font-weight: bold;
color: white;
background-color: #3399ff;
border-color: #3399ff;
border-radius: 3px;

}
button.loginBtn:hover {
background-color: #1a8cff;
}
a.frgtPass {
text-decoration: none;
color: red;
}
a.frgtPass:hover {
color: #ff6666;
}
p.frmt {
color: #757575;
}
p.frmtnum {
color: #8898B5;
}
input.inputs {
border-radius: 3px;
border: 1px solid #BFBFBF;
height: 20px;
width: 100%;
position: relative;
}
img.logo {
pointer-events: none;
margin-top: 150px;
margin-left: 75px;
position: absolute;
-khtml-user-select: none;
-o-user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
}
<!doctype html>
<html>
<head>
<title>Insight - Saint Vincent High School Community Portal</title>
<link rel="stylesheet" type="text/css" href="css\main_design.css">
</head>

<body>
<div class="main">
<div class="wrapper">
<img class="logo" src="img/smple.png" style="width:304px;height:228px;">
<div class="login">
<table class="txts">
<tr>
<td><p>Saint Vincent High School</p></td>
</tr>
<tr>
<td><p>Online Community Portal</p></td>
</tr>
</table>
<div class="loginform">
<table>
<tr>
<td><p style="font-size:15px">Username / ID</p></td>
</tr>
<tr>
<td><input type="text" class="inputs" name="username" size="30"></td>
</tr>
<tr>
<td><p style="font-size:15px">Password</p></td>
</tr>
<tr>
<td><input type="text" class="inputs" name="password" size="30"></td>
</tr>
<tr>
<td><button type="submit" style="cursor: pointer" class="loginBtn">Login</button>
<a class="frgtPass" href=" " style="font-size:12px">Forgot password?</a></td>
</tr>
<tr>
<td><br><p class="frmt" style="font-size:16px">Student ID format:</p></td>
</tr>
<tr>
<td><p class="frmtnum" style="font-size:16px">101-2016-0000</p></td>
</tr>
</table>
</div>
</div>
</div>

<div class="footer">
<div class="copyright">
<table class="txts" cellpadding="4">
<tr>
<td>Insight &#169; 2016</td>
</tr>
</table>
</div>
<table cellpadding="4">
<tr>
<td><a href=" " style="color: #E0E0E0">About</a></td>
<td><font color="#E0E0E0">&bull;</font></td>
<td><a href=" " style="color: #E0E0E0">Privacy</a></td>
<td><font color="#E0E0E0">&bull;</font></td>
<td><a href=" " style="color: #E0E0E0">Terms</a></td>
<td><font color="#E0E0E0">&bull;</font></td>
<td><a href=" " style="color: #E0E0E0">Help</a></td>
<td><font color="#E0E0E0">&bull;</font></td>
<td><a href=" " style="color: #E0E0E0">Feedback</a></td>
</tr>
</table>
</div>
</div>

</body>

</html>

最佳答案

  • 提示 #1:不要使用表格。学习 bootstrap,因为它更容易,如果正确实现,它会做出响应。
  • 提示 #2:除非确实需要,否则尽量避免使用红色。这种颜色让人觉得有错误,很快就会吓跑用户。
  • 提示 3:确保登录名和密码的安全,因为它们很容易被黑客攻击。
  • 提示 4:使用相互衬托的颜色。

关于你的问题,你可以设置图片的CSS属性

-webkit-user-drag: none;
-moz-user-select: none;
user-drag: none;
user-select: none;
-webkit-user-select: none;
-ms-user-select: none;

关于javascript - HTML CSS - 不可拖动的图像和整洁的代码,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34759563/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com