html html示例-CSDN博客

本文链接：https://blog.csdn.net/zhanghanqmx/article/details/120231286

html示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>百度一下，你就知道</title>
		 <link rel="shortcut icon" href="https://www.baidu.com/favicon.ico" type="image/x-icon" />
         <link rel="stylesheet" href="css.css">
	</head>
	<body>
		<div id="d1">
			<div align="center">
		<ul>
			<li><a href="http://news.baidu.com/" class="s">新闻</a></li>
			<li><a href="https://www.hao123.com/" class="s">hao123</a></li>
            <li><a href="http://map.baidu.com/" class="s">地图</a></li>
            <li><a href="https://live.baidu.com/" class="s">直播</a></li>
			<li><a href="http://v.baidu.com/" class="s">视频</a></li>
			<li><a href="http://tieba.baidu.com/" class="s">贴吧</a></li>
			<li><a href="http://xueshu.baidu.com/" class="s">学术</a></li>
			<li><a href="" >更多</a></li>
			<li><a href="http://www.baidu.com/gaoji/preferences.html">设置</a></li>
			<li><input type="button" value="登录"></li>
		</ul>
		</div>
		</div>
		<div id="d2">
			<a href="https://www.baidu.com/s?wd=%E4%BB%8A%E6%97%A5%E6%96%B0%E9%B2%9C%E4%BA%8B&tn=SE_PclogoS_8whnvm25&sa=ire_dl_gh_logo&rsv_dl=igh_logo_pcs" id="a1">
				<img src="https://www.baidu.com/img/baidu_resultlogo@2.png">
		  </a><br />
		  <form action="http://www.baidu.com/s">
		  	    <div>
			  	 <input type="text" name="wd">
			  	 <input type="submit" value="百度一下">
			  	 	</div>
		  </form>
	    <div id="d4" align="center">
	        <a href="https://www.baidu.com/cache/sethelp/help.html">设为首页</a>&nbsp;&nbsp;&nbsp;&nbsp;
	    	<a href="http://home.baidu.com/">关于百度</a>&nbsp;&nbsp;&nbsp;&nbsp;
	    	<a href="http://ir.baidu.com/">About Baidu</a>&nbsp;&nbsp;&nbsp;&nbsp;
	    	<a href="https://isite.baidu.com/site/e.baidu.com/d38e8023-2131-4904-adf7-a8d1108f51ef?refer=888">百度营销</a>&nbsp;&nbsp;&nbsp;&nbsp;
	        <a href="http://www.baidu.com/duty/">使用百度前必读</a>&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="http://jianyi.baidu.com/">意见反馈</a>&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="https://help.baidu.com/">帮助中心</a>&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11000002000001">京公网安备11000002000001号</a>&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="https://beian.miit.gov.cn/#/Integrated/index">京ICP证030173号&nbsp;&nbsp;&nbsp;&nbsp;
            &copy;2021 Baidu&nbsp;&nbsp;&nbsp;&nbsp; (京)-经营性-2017-0020
        </p>
    </div> 
	</body>
</html>

CSS

#d1{
    position: absolute;
    right: 10px;
}
#d1 ul{
    list-style: none;
}
#d1 a{
    font-family: "微雅软黑";
    color: black;
    font-size: 13px;
    
}
#d1 li{
    float: left;
    margin-left: 18px;
    text-align: center;
}
#d1 input[type="button"]{
    background-color: #3388FF;
    border-bottom: none;
    border-left: none;
    border-right: none;
    border-top: none;
    color: white;
}
#d1 input[type="button"]:hover{
    cursor: pointer;
}
#d2{
    position:relative;
    text-align: center;
    top: 100px
}
#d2 input[type="text"]{
    width:541px;
    height:32px;
    margin-top: 41px;
    font-size: 20px;
    border-width: 1px;
    background: url(../img/照相机.png) no-repeat 510px;
}
#d2 input[type="submit"]{
    height: 36px;
    width:100px;
    background-color: #3388FF;
    border-width: 0px;
    font-size: 15px;
    color: white;
    margin-left: -5px;
}
#d2 input[type="submit"]:hover{
    cursor: pointer;
}
#d3{
    top: 280px;
    position: relative;
}
#d4{
    position: relative;
    top:290px;
    text-align: center;
    color:#999999;
}
#d4 a{
   font-family: "微雅软黑";
   color:#999999;
   font-size: 4px;
}
#d4 ul{
    list-style: none;
}
#d4 li{
    float: right;
    margin-left: 15px;
}
#a1{
    margin-bottom:100px;
}
.s{
    font-weight: bold;
}

#t:active{
    border-color: #3388FF;
}