用HTML+CSS實現百度靜態首頁

說一下,底部和頂部的一些小字最好用<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>


好累好累,雖然還不完善,但是肝不動了

以後再說,以後再說

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章