node2:/django/mysite/news/templates#cat index.html
<html>
<head>
<title>Index</title>
<link rel='stylesheet' type='text/css' href='/static/news/Css/Index/index.css'/>
</head>
<body>
<h1>布丁运维管理平台</h1>
<!--图片标签-->
<img class="img_bk" src="/static/news/scan.jpg"/>
<!--表单提交-->
<form action="/login/" method="post" >
<table cellspacing="0" cellpadding="0">
<tr>
<td class="td1">用户名:</td>
<td><input type="text" name="username"/></td>
<td class="td3"></td>
<td class="td4"></td>
<tr/>
<tr>
<td class="td1">密码:</td>
<td><input type="password" name="password"/></td>
<td class="td3"></td>
<td class="td4"></td>
<tr/>
<!-- <tr> -->
<!-- <td class="td1">验证码:</td> -->
<!-- <td> <input type='text' name='code' /></td> -->
<!-- <td class="td3"><img src="__APP__/Public/code" οnclick='this.src=this.src+"?"+Math.random()'/></td> -->
<!-- <td class="td4"></td> -->
<!-- </tr> -->
<tr>
<td class="td1"></td>
<td><input type="submit" value="" name="imgLogin" /></td>
<td class="td3"></td>
<td class="td4"></td>
</tr>
</table>
</form>
</body>
</html>
node2:/django/mysite/static/news/Css/Index#cat index.css
* {
margin: 0;
padding: 0;
}
table{
margin: 0 auto;
}
table tr{
text-align:left
}
table tr td{
width: 200px;
padding:100px auto;
padding-top: 10px;
}
.img_bk{
width:100%;
height:60%;
}
.td1{
width:100px;
text-align: right;
padding-right: 20px;
}
.td3{
width:110px;
}
.checktext{
color: #4384BA;
font-size: 15px;
}
input[type="text"]{
width: 180px;
height: 20px;
}
input[type="password"]{
width: 180px;
height: 20px;
}
input[type="button"]{
margin-right: 50px;
width: 70px;
height: 30px;
}
table tr td img{
height: 22px;
margin-top:4px;
}
table input[name="imgLogin"]{
width:75px;
height: 29px;
background-size:69px 23px;
background-repeat: no-repeat;
margin-left: 50px;
background-image: url(/static/news/login.jpg );
}
html 加载css和图片
转载本文章为转载内容,我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题,欢迎原作者联系我们进行内容更正或删除文章。
下一篇:django 登陆页配置
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
有趣的CSS - 加载的圆
由4个圆组成的一个小清新的动态加载动画效果。
css 加载动画 loading 圆点加载 ux -
有趣的CSS - 文字加载动画效果
用 css 实现多字符模拟加载动画效果。
css 加载动画 交互 ux 动效 -
有趣的css - 图片懒加载小动效
用 css 实现图片内容懒加载小动效,适用于图片列表懒加载等场景。
css 动效设计 交互设计 加载动画 ux/ui -
【CSS】759- 图片加载失败后CSS样式处理最佳实践
相信还有很多朋友不知道怎么处理吧。
f5 css 图片加载 -
图片加载失败后CSS样式处理最佳实践
/wordpress/2020/10/css-
f5 css 图片加载