本周是暑期学习前端开发的最后一周，今天开始进入最后大作业的编写。
首先计划完成的是二手交易平台手机端登录界面的编写，大概内容就是标题，然后账号密码输入，再然后就是登录提交按钮，最后附加了一些其他的登录方式。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0 "/>
<title>小暨手机端</title>
<style>
*{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
}
input[type="text"]{
width: 180px;height: 35px;font-size: 20px;text-align: center;
}input[type="password"]{
width: 180px;height: 35px;font-size: 20px;text-align: center;
}
#div1{
text-align: center;font-size:35px;margin-top: 80px;
}
#div2{
text-align: center;margin-top: 15px;line-height: 60px;
}
#div3{
text-align: center;line-height: 60px;
}
#div4{
text-align: center;
}
#div5{
line-height: 60px;
}
#div6{
text-align: center;
}
#div7{
margin-left: 120px;float: left;margin-top: 20px;
}
#div8{
margin-left: 220px;margin-top: 0px;
}
button{
width: 150px;height: 30px;border-radius: 40px;font-size: 20px;text-align: center;background-color;
}
</style>
</head>
<body>
<div>
<div id="div1">
小暨二手物品交易平台
<br />
<a href="">
<font size="5">
xiaojijiaoyi.com
</font>
</a>
<br />
</div>
<div id="div2">
<font size="5">
用户名：
</font>
<input type="text" align="center" placeholder="请输入用户名" />
<br />
<font size="5">
密码：
</font>
<input type="password" placeholder="请输入登录密码" />
</div>
<div id="div3">
<button>登录</button>
</div>
<div id="div4">
<a href="#">
<font size="2">
没有账号？点这里注册账号
</font>
</a>
</div>
<div id="div5">
<br />
<hr />
</div>
<div id="div6">
<font>
其他登录方式
</font>
</div>
<br />
<div id="div7" >
<img src="img/wechatlogo.jpg"/ width="40px" height="40px">
</div>
<br />
<div id="div8" >
<img src= "img/QQlogo.jpg" ="40px" height="40px">
</div>
</div>
</body>
</html>
以上便是手机端的效果图和代码，由于才疏学浅没有加入JS功能，准备在主界面再添加一些负责的操作。
扫一扫
131
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
