IMWeb小白-百度登录界面

最新推荐文章于 2024-08-04 20:38:28 发布

qq_30407907

最新推荐文章于 2024-08-04 20:38:28 发布

阅读量378

点赞数

分类专栏：前端文章标签： html 百度

本文链接：https://blog.csdn.net/qq_30407907/article/details/70561347

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

HTML结构：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>百度登录界面</title>

</head>
<body>
<div class="container">

<div class="top">
<img src="images/百度.png" alt="手机图标" />
<p>登录百度账号</p>
</div>

<div class="second">
<img src="images/手机.png" alt="手机" />
<p>短信快捷登录</p>
</div>

<div class="third">
<div class="嵌入">
<img src="images/人头.png" alt="人头" />
</div>
</div>

<div class="fourth">
<div class="嵌入2">
<img src="images/锁.png" alt="锁" />
</div>
</div>

<div class="fifth">
<div class="嵌入3">
</div>
<div class="嵌入4">
</div>
<p>换一张</p>
</div>
<div class="six">
<p id="a">下次自动登录</p>
<p id="b">登录遇到问题</p>
</div>
<div class="seven">
<div class="嵌入5">
<p>登录</p>
</div>
</div>

</div>
</body>
</html>

css样式：

body{

background-color:#d9d9d9;
}

.container{

width:390px;
height:500px;
margin:0 auto;
margin-top:67px;

}

.top{

height:47px;
background-color:#f7f7f7;
}

.top img{

padding:5px;
width:9%;
float:left;
}

.top p{

position:absolute;
margin-left:50px;
margin-top:12px;
}

.second{

height:50px;
background-color:white;
}
.second img{
margin-left:280px;
margin-top:20px;
width:4%;
float:left;
}

.second p{

position:absolute;
margin-left:300px;
margin-top:20px;
font-size:10px;
}

.third{

height:50px;
background-color:white;
}

.嵌入{

border:1px solid #dddddd;
height:35px;
width:350px;
margin:0 auto;

}

.嵌入 img{

padding:8px;
width:6%;
}
.fourth{
height:50px;
background-color:white;
}

.嵌入2{

border:1px solid #dddddd;
height:35px;
width:350px;
margin:0 auto;
}

.嵌入2 img{

padding:8px;
width:6%;
}
.fifth{
height:50px;
background-color:white;
}

.嵌入3{

border:1px solid #dddddd;
height:35px;
width:190px;
margin-left:19px;
float:left;
}

.嵌入4{

border:1px solid #dddddd;
height:35px;
width:90px;
margin-left:12px;
float:left;
}

.fifth p{

position:absolute;
margin-left:325px;
margin-top:7px;
height:35px;
}

.six{

height:30px;
background-color:white;
}

.six p{

position:absolute;
margin-left:20px;
margin-top:3px;
height:25px;
font-size:10px;
}

b{

position:absolute;
margin-left:310px;
margin-top:3px;
height:25px;
}

.seven{

height:223px;
background-color:white;
}

.嵌入5{

border:1px solid #dddddd;
height:48px;
width:350px;
margin:0 auto;
background-color:#3f89ec;
text-align:center;
}

.嵌入5 p{

color:white;
margin-top:13px;
}

效果如下：

这里写图片描述

qq_30407907

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
IMWeb小白-百度登录界面

HTML结构：<!DOCTYPE html><html><head><meta charset="utf-8"><title>百度登录界面</title></head><body><div class="container"><div class="top"><img src="images/百度.png" alt="手机图标" /><p>登录百度账号</p></div><div
复制链接

扫一扫