新闻网站项目静态页面--登录页
Posted 叉歪叉
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了新闻网站项目静态页面--登录页相关的知识，希望对你有一定的参考价值。
外联css login.css：
body{
background-image:url(../images/login/backgroundimg.png);
background-size: cover;
background-repeat: no-repeat;
}
.ui.basic.segment.container.content{
width: 425px;
margin-left: 50%;
margin-top: 389px;
}
.ui.header{
color:red;
font-size: 50px !important;
height: 75px;
}
input{
border-radius: 31.5px!important;
height: 31px!important;
background-color: #ffffff!important;
border: solid 1px #ededed!important;
}
.field{
position: relative;
}
.two.fields > .field{
position: relative;
}
.ui.image.top{
position: absolute;
left: -20px;
top:10px;
}
.ui.image.bottom{
width: 10px;
height: 10px;
position: absolute;
left: -20px;
margin: 0;
}
label{
font-size: 12px!important;
color: #9b9b9b !important;
}
.ui.right.floated.red.circular.button{
width: 102px;
height: 31px;
background-color: #f30c28;
margin-top: 6px;
margin-right: 5px;
font-size: 16px!important;
font-weight: bold;
padding-top: 7px;
}
.ui.basic.segment.container.footer{
position: relative;
margin-top: 150px;
}
.ui.circular.red.button.backtoindex{
width: 31px!important;
height: 62px;
border-radius: 15.5px;
background-color: #f30c28;
position: absolute;
transform: translate(-50%,-50%);
left: 50%;
top:30px;
padding: 0;
}
img{
margin-left: 2px;
}
h4{
font-size: 12px!important;
color: #ffffff;
margin-left: 2px;
}
.ui.image.title{
position: relative;
transform: translate(-50%);
left: 50%;
top:45px;
}
html文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登录页</title>
<link rel="stylesheet" href="css/semantic.css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="css/login.css" media="screen" title="no title" charset="utf-8">
</head>
<body>
<div class="ui basic segment container content">
<h1 class="ui center aligned header">登录</h1>
<div class="ui form">
<div class="field">
<div class="ui image top">
<img src="images/login/usericon.png" />
</div>
<input type="text" placeholder="注册邮箱">
</div>
<div class="field">
<div class="ui image top">
<img src="images/login/lockicon.png" />
</div>
<input type="text" placeholder="密码">
</div>
<div class="two fields">
<div class="field">
<div class="ui image bottom" style="top:6px;">
<img src="images/login/checkboxicon.png" />
</div>
<label>记住我</label>
<div class="ui image bottom" style="top:29px;">
<img src="images/login/passwordicon.png" />
</div>
<label>忘记密码</label>
</div>
<div class="field">
<button class="ui right floated red circular button"type="button" name="button">登录</button>
</div>
</div>
</div>
</div>
<div class="ui basic segment container footer">
<div class="bottom">
<div class="ui divider"></div>
<button type="button" name="button" class="ui circular red button backtoindex">
<img src="images/login/homeicon.png" style="position:absolute;left:18%;top:10%;">
<h4>首页</h4>
</button>
<div class="ui image title">
<img src="images/login/zhiribao.png" />
</div>
</div>
</div>
</body>
</html>
新样式：two fields
以上是关于新闻网站项目静态页面--登录页的主要内容，如果未能解决你的问题，请参考以下文章