您的位置：首页 > Web前端 > CSS

用HTML+CSS实现百度静态首页

2020-04-02 18:48 134 查看

说一下，底部和顶部的一些小字最好用
<div>
来，我那样子太粗制烂造了（其实整体都是），以后有时间再修改吧

欢迎指正

低仿低仿，先放图

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>百度一下，你就知道</title>
<style type="text/css">
a{color: black;}
.right{
font-size: 12px;
text-align: right;
margin-top:15px;
margin-right:30px;
}
*{			<!--好像是不推荐使用 * -->
padding: 0;
margin: 0;
}
.box{
width:650px;
height:0px;
margin:200px auto 100px;
position:relative;
}
input{
height:35px;
width:550px;
box-sizing: border-box;
text-indent:6px;
font-size:16px;
}
.gd{
color: #fff;
background: #38f;
line-height: 24px;
font-size: 13px;
text-align: center;
border-bottom: 1px solid #38f;
margin-left: 7px;
margin-top: 10px;
cursor:default;
}
button{
height:35px;
width:100px;
border:none;
color:white;
box-sizing: border-box;
background-color:#38f;
position: absolute;
left:550px;
cursor:pointer;
}
.imges{
position: absolute;
top:-140px;
left:180px;
}
.cen{
text-align:center;
margin-bottom:80px;
}
.buttom{
text-align:center;
font-size:10px;
color:grey;
}
</style>
</head>
<body style="font-family:'小米兰亭'">
<div class="right">
<a href="https://voice.baidu.com/act/newpneumonia/newpneumonia/?from=osari_pc_1" target="_blank" style="color:red"><strong><ins>抗击肺炎</ins></strong></a>
<a href="http://news.baidu.com/" target="blank"><strong><ins>新闻</ins></strong></a>
<a href="https://www.hao123.com/" target="blank"><strong><ins>hao123</ins></strong></a>
<a href="https://map.baidu.com/" target="blank"><strong><ins>地图</ins></strong></a>
<a href="http://v.baidu.com/" target="blank"><strong><ins>视频</ins></strong></a>
<a href="https://tieba.baidu.com/index.html" target="blank"><strong><ins>贴吧</ins></strong></a>
<a href="http://xueshu.baidu.com/" target="blank"><strong><ins>学术</ins></strong></a>
<ins>登录</ins>
<ins>设置</ins>
<strong class="gd">更多产品</strong>
</div>
<div class="box">
<div class="imges"><img src="http://baidulogo.bj.bcebos.com/logo/hn7ymrh1c20xf99f5pj95v7d29auyaog.png" alt="百度logo" title="百度一下，你就知道" height="129" width="270"/>
</div>
<input type="text"/><button><strong>百度一下</strong></button>
</div>
<div class="cen">
<img src="https://ftp.bmp.ovh/imgs/2020/03/8b44e9b2612c464e.png" width="100px" /><br/>
<p>下载百度APP</p>
<font color="#999999">有事搜一搜，没事看一看</font>
</div>
<div class="buttom">
<a href="https://www.baidu.com/cache/sethelp/help.html">设为首页</a>&nbsp;&nbsp;
<a href="http://home.baidu.com/">关于百度</a>&nbsp;&nbsp;
<a href="http://ir.baidu.com/phoenix.zhtml?c=188488&p=irol-irhome">About Baidu</a>&nbsp;&nbsp;
<a href="http://e.baidu.com/ebaidu/home?refer=888">百度推广</a>&nbsp;&nbsp;
<a href="https://www.baidu.com/duty/">使用百度前必读</a>&nbsp;&nbsp;
<a href="http://jianyi.baidu.com/"> 意见反馈</a>&nbsp;&nbsp;
<a href="https://help.baidu.com/">帮助中心</a>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
©2020 Baidu&nbsp;&nbsp;
京ICP证030173号&nbsp;&nbsp;
<a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11000002000001">京公网安备11000002000001号</a>&nbsp;&nbsp;
京ICP证030173号
</div>
</body>
</html>

好累好累，虽然还不完善，但是肝不动了

以后再说，以后再说

  • 点赞 1
  • 收藏
  • 分享
  • 文章举报
ychunx 发布了18 篇原创文章 · 获赞 16 · 访问量 1777 私信 关注
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航