今天做了一个浏览器主页，功能不是太强大，跨平台性不是太好，本文涉及的图片可以自行百度查找，本次是用AIDE web写的
1.先看效果
2.代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.input-box {
position: relative;
display: inline-block;
}
form .input{
position:absolute;
top:410px;
left:100px;
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:867px;
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;
}
.girl,.woman,.cousin,.father,.dad,.uncle,.q,.e ,.t,.u,.o,.j,.l,.x,.v{
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;
left:50px;
}
.k{
position:absolute;
top:1245px;
left:65px;
}
.l{
position:absolute;
top:1145px;
left:300px;
}
.z{
position:absolute;
top:1245px;
left:300px;
}
.x{
position:absolute;
top:1145px;
left:560px;
}
.c{
position:absolute;
top:1245px;
left:570px;
}
.v{
position:absolute;
top:1145px;
left:800px;
}
.b{
position:absolute;
top:1245px;
left:780px;
}
.my{
position:absolute;
top:200px;
left:220px;
}
.me{
position:absolute;
top:200px;
left:270px;
}
#h{
font-size:70px;
color:purple;
position:absolute;
top:300px;
left:380px;
}
#m{
font-size:70px;
color:pink;
position:absolute;
top:300px;
left:480px;
}
#s{
font-size:70px;
color:brown;
position:absolute;
top:300px;
left:580px;
}
#years{
font-size:30px;
color:white;
position:absolute;
top:370px;
left:400px;
}
#bread{
position:absolute;
top:550px;
left:80px;
width:920px;
background-color:rgba(0,0,0,0.3);
border-radius:40px;
}
.bjimg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -10;
object-fit: cover;
}
</style>
<script>
var t = null;
function time() {
dt = new Date();
var y = dt.getFullYear();
var M = dt.getMonth() + 1;
var d = dt.getDate();
var h = dt.getHours();
var m = dt.getMinutes();
var s = dt.getSeconds();
M=checkTime(M);
d=checkTime(d);
h=checkTime(h);
m=checkTime(m);
s=checkTime(s);
document.getElementById("years").innerHTML=y+"年"+M+"月"+d+"日";
document.getElementById("h").innerHTML = h + ":" ;
document.getElementById("m").innerHTML = m + ":" ;
document.getElementById("s").innerHTML = s;
t = setTimeout(time, 1000);
}
window.onload = function () {
time();
};
function checkTime(i){
if(i<10){
i="0"+i;
}
return i;
}
function search() {
if (document.querySelector(".input").value != "") {
window.location.href = "https://www.baidu.com/s?wd=" + document.querySelector(".input").value;
document.querySelector(".input").value = "";
}
return false;
}
</script>
</head>
<body style="background-image:url(22.jpg);background-size:1080px 1920px;">
<div style="position:absolute;top:100px;left:270px;"><a href="http://www.baidu.com"><img src="21.jpg" width=500px></a></div>
<div id="years"></div>
<div id="h"></div>
<div id="m"></div>
<div id="s"></div>
<div id="bread" style="height:1350px;">
<a href="http://www.bilibili.com"><img src="10.jpg" width=100px height=100px class="hello"></a>
<a href="http://www.bilibili.com" class="boy">哔哩哔哩</a>
<a href="http://www.hao123.com"><img src="12.png" class="girl" width=100px height=100px></a>
<a href="http://www.hao123.com" class="man">hao123</a>
<a href="https://fanyi.baidu.com"><img src="11.jpg" width=100px height=100px class="woman"></a>
<a href="https://fanyi.baidu.com/" class="brother">百度翻译</a>
<a href="https://map.baidu.com/@12548182,3866416,13z"><img src="13.png" width=100px height=100px class="cousin"></a>
<a href="https://map.baidu.com/@12548182,3866416,13z" class="sister">百度地图</a>
<a href="https://www.csdn.net/" ><img src="14.png" width=100px height=100px class="father"></a>
<a href="https://www.csdn.net/" class="mother">CSDN</a>
<a href="https://m.iqiyi.com/"><img src="15.png" width=100px height=100px class="dad"></a>
<a href="https://m.iqiyi.com/" class="mom">爱奇艺</a>
<a href="https://music.163.com/"><img src="16.jpg" width=100px height=100px class="uncle"></a>
<a href="https://music.163.com/" class="aunt">网易云音乐</a>
<a href="https://m.douban.com/home_guide"><img src="17.png" width=100px height=100px class="apple"></a>
<a href="https://m.douban.com/home_guide" class="banana">豆瓣</a>
<a href="https://www.nowcoder.com/"><img src="23.jpg" width=100px height=100px class="q"></a>
<a href="https://www.nowcoder.com/" class="w">牛客网</a>
<a href="https://www.zhihu.com/"><img src="24.jpg" width=100px height=100px class="e"></a>
<a href="https://www.zhihu.com/" class="r">知乎</a>
<a href="https://v.qq.com/"><img src="25.jpg" width=100px height=100px class="t"></a>
<a href="https://v.qq.com/" class="y">腾讯视频</a>
<a href="https://www.qimao.com/"><img src="26.jpg" width=100px height=100px class="u"></a>
<a href="https://www.qimao.com/" class="i">小说</a>
<a href="https://www.163.com/"><img src="27.jpg" width=100px height=100px class="o"></a>
<a href="https://www.163.com/" class="p">网易</a>
<a href="https://m.sohu.com/mil"><img src="28.jpg" width=100px height=100px class="a"></a>
<a href="https://m.sohu.com/mil" class="s">搜狐军事</a>
<a href="https://m.tianqi.com/"><img src="29.jpg" width=100px height=100px class="d"></a>
<a href="https://m.tianqi.com/" class="f">天气</a>
<a href="http://www.people.com.cn/"><img src="30.jpg" width=100px height=100px class="g"></a>
<a href="http://www.people.com.cn/" class="h">人民网</a>
<a href="https://www.youku.com/"><img src="31.jpg" width=100px height=100px class="j"></a>
<a href="https://www.youku.com/" class="k">优酷</a>
<a href="http://app.yangkeduo.com/"><img src="32.jpg" width=100px height=100px class="l"></a>
<a href="http://app.yangkeduo.com/" class="z">拼多多</a>
<a href="https://m.taobao.com/"><img src="33.jpg" width=100px height=100px class="x"></a>
<a href="https://m.taobao.com/" class="c">淘宝</a>
<a href="https://www.runoob.com/"><img src="34.jpg" width=100px height=100px class="v"></a>
<a href="https://www.runoob.com/" class="b">菜鸟编程</a>
</div>
<div>
<form οnsubmit="return search()">
<input type="text" placeholder="请输入搜索词" name="word" class="input" autocomplete="off"/>
<input type="submit" value="搜索" class="search" style="font-size:30px" >
</form>
</div>
</body>
</html>
1585
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
