这次做的主页是对上一次的升级，功能增加了许多。并且使用的图片减少了，不用挨个保存使用。
只需要保存这两张图片，名称从上到下依次是22.jpg，21.jpg，放在同一个文件夹下即可。
代码部分:
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/x-icon" href="23.jpg">
<title>浏览器主页</title>
<style type="text/css">
.input-box {
position: relative;
display: inline-block;
}
form .input{
position:absolute;
top:410px;
left:60px;
padding: 0 40px 0 20px;
width: 800px;
height: 100px;
font-size: 50px;
border: 1px solid #eee;
border-radius: 80px;
border:7px solid rgba(0,0,255,0.6);
}
form .search{
outline: none;
position: absolute;
top: 417px;
left:827px;
width: 100px;
height: 100px;
line-height: 30px;
padding: 0;
color: #969696;
text-align: center;
background: #222;
border-radius: 50%;
font-size: 15px;
cursor: pointer;
border:3px solid orange;
}
.input:focus{
outline:none;
border:4px solid cayn;
box-shadow:10px 10px 25px #000000;
}
.input:focus+.search {
background-color:orange;
border:3px solid yellow;
color: #fff;
}
a{
text-decoration: none;
font-size:35px;
color:gray;
}
.hello{
position:absolute;
top:125px;
left:50px;
}
.boy{
position:absolute;
top:220px;
left:30px;
}
.a,.apple,.hello,.girl,.woman,.cousin,.father,.dad,.uncle,.q,.e ,.t,.u,.o,.j,.l,.x,.v,.er,.rt,.ty.yu,.ui,.io{
border-radius:25% 25% 25% 25%
}
.girl{
position:absolute;
top:125px;
left:300px;
}
.man{
position:absolute;
top:230px;
left:300px;
}
.woman{
position:absolute;
top:125px;
left:560px;
}
.brother{
position:absolute;
top:220px;
left:540px;
}
.cousin{
position:absolute;
top:125px;
left:800px;
}
.sister{
position:absolute;
top:220px;
left:780px;
}
.father{
position:absolute;
top:380px;
left:50px;
}
.mother{
position:absolute;
top:480px;
left:60px;
}
.dad{
position:absolute;
top:380px;
left:300px;
}
.mom{
position:absolute;
top:480px;
left:300px;
}
.uncle{
position:absolute;
top:380px;
left:560px;
}
.aunt{
position:absolute;
top:480px;
left:530px;
}
.apple{
position:absolute;
top:380px;
left:800px;
}
.banana{
position:absolute;
top:480px;
left:815px;
}
.q{
position:absolute;
top:635px;
left:50px;
}
.w{
position:absolute;
top:740px;
left:50px;
}
.e{
position:absolute;
top:635px;
left:300px;
}
.r{
position:absolute;
top:740px;
left:315px;
}
.t{
position:absolute;
top:635px;
left:560px;
}
.y{
position:absolute;
top:740px;
left:541px;
}
.u{
position:absolute;
top:635px;
left:800px;
}
.i{
position:absolute;
top:740px;
left:813px;
}
.o{
position:absolute;
top:890px;
left:50px;
}
.p{
position:absolute;
top:990px;
left:65px
}
.a{
position:absolute;
top:890px;
left:300px;
}
.s{
position:absolute;
top:990px;
left:285px;
}
.d{
position:absolute;
top:890px;
left:560px;
}
.f{
position:absolute;
top:990px;
left:570px;
}
.g{
position:absolute;
top:890px;
left:800px;
}
.h{
position:absolute;
top:990px;
left:800px;
}
.j{
position:absolute;
top:1145px;
最低0.47元/天 解锁文章
扫一扫
724
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
