介绍 & lt; !doctype & lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=皍tf-8"/比;
& lt;元http-equiv=癤-UA-Compatible"内容=癐E=edge"比;
& lt; title>花瓣& lt;/title>
& lt;元名称=皏iewport"内容=翱矶?设备宽度,初始=1,比;
& lt;链接rel=皊tylesheet"类型=拔谋?css"媒体=皊creen"href=https://www.yisu.com/zixun/" index.css "/>
头
身体<>
小编给大家分享一下css + html仿花瓣网实现静态登陆页面的方法,希望大家阅读完这篇文章后大所收获、下面让我们一起去探讨吧!
<强>思路:
1,对页面进行分析
2,下载素材
3,对页面尺寸进行分析
4,实现
<强>下载素材
将页面素材保存到本地,方法如下图
<强>页面尺寸进行分析
只做了大概得尺寸、尺寸获取方法,使用截图得方法获取宽和高,注意获取过程中图片得大小不能有变化。将图片最大化后获取尺寸
<强>实现
写一个元素,紧接着就css付样式
<强> html实现
主要
-
<李>
使用手机/邮箱登陆
<形式类=" mail-login " action="登录"方法=" POST ">
<输入id="电子邮件" name="电子邮件"类型=拔谋尽闭嘉环?笆淙胧只呕蛴氏洹?
html,身体{
保证金:0;
填充:0;
}
身体{
background - color: rgb (86、228、221);
}
.clearn {
浮:没有;
}
# login-frame {
宽度:600 px;
身高:430 px;
保证金:100 px汽车0;
background - color: # fff;
}
#{主要
保证金:20 px 90 px的汽车;
}
#{标志
宽度:150 px;
身高:135 px;
保证金:85 px汽车0;
背景位置:0;
背景图片:url (img/logo.png);
平铺方式:不再重演;
list-style:没有;
}
.lable {
字体大小:14 px;
颜色:hsla (0、0%、63%、0.932);
text-align:中心;
位置:相对;
保证金:-30 px的汽车;
}
{前.lable::
内容:““;
border-top: #达达达固体1 px;
位置:绝对的;
宽度:138 px;
左:0;
上图:11 px;
}
{后.lable::
内容:““;
border-top: #达达达固体1 px;
位置:绝对的;
宽度:138 px;
右:0;
上图:11 px;
}
.other-login {
身高:80 px;
保证金:45 0 px汽车;
}
李.other-login> ul> {
list-style:没有;
浮:左;
高度:45 px;
宽度:20%;
保证金:0汽车;
}
.other-login> ul> li> {
宽度:60 px;
身高:70 px;
显示:块;
背景图片:url (img/login_icons_tiny.png);
平铺方式:不再重演;
}
.weibo:{徘徊
背景位置:0 -80 px;
}
.qq {
背景位置:-80 px 0;
}
.qq:{徘徊
背景位置:-80 px -80 px;
}
.wechat {
背景位置:-160 px 0;
}
.wechat:{徘徊
背景位置:-160 px -80 px;
}
.douban {
背景位置:-240 px 0;
}
.douban:{徘徊
背景位置:-240 px -80 px;
}
.renren {
背景位置:-309 px 0;
}
.renren:{徘徊
背景位置:-309 px -80 px;
}
.text-2 {
保证金:-10 px的汽车;
}
# main.mail-login {
显示:块;
宽度:100 px;
}
#{邮件
保证金:25 px汽车0;
}
输入{.mail-login>
高度:34 px;
宽度:100%;
保证金:10 px汽车0;
大纲:0;
边界:1 px固体#达达达;
border - radius: 3 px;
indent: 10 px;
大纲:没有;
}
# btn-login {
高度:34 px;
显示:块;
text-align:中心;
行高:34 px;
背景:rgb (216、83、83);
border - radius: 3 px;
字体大小:18 px;
颜色:# fff;
文字修饰:没有;
margin-top: 10 px;
}
# btn-login:{徘徊
背景:rgb(15) 221年,15日;
}
# register-forgetpsd {
保证金:10 px汽车30 px;
字体:10 px;
}
.forget-pwd .register {
颜色:rgb (158、25、25);
浮:左;
文字修饰:没有;
list-style-type:没有;
}
.forget-pwd:悬停,.register:{徘徊
文字修饰:下划线;
}
#{注册
浮:正确;
}
.register {
浮:正确;
}
.no-accounter {
颜色:# 292727;
}
