html实例-CSDN博客

本文链接：https://blog.csdn.net/valder__/article/details/127157716

html部分

<html>
	<head>
		<title>百度一下，你就知道</title>
		<meta charset="UTF-8"/>
		<link rel="icon" href="img/百度.ioc" type="image/x-icon"><!--在网页标题前加图片-->
		<link rel="stylesheet" type="text/css" href="css/百度.css"/>
	</head>
	<body>
		<div id="div01">
			<a href="https://news.cctv.com/" target="_blank">央视新闻</a>
			<a href="https://www.hao123.com/" target="_blank">hao123</a>
			<a href="https://map.baidu.com/@12529930.9,4535569.28,12z" target="_blank">地图</a>
			<a href="https://tv.cctv.com/live/cctv13/" target="_blank">直播</a>
			<a href="https://www.bilibili.com/index.php" target="_blank">视频</a>
			<a href="https://tieba.baidu.com/index.html" target="_blank">贴吧</a>
			<a href="https://xueshu.baidu.com/" target="_blank">学术</a>
			<a href="" target="_blank">更多</a>
			<a href="https://passport.baidu.com/v2/?login" target="_blank">
					<button id="d1">登录</button>
			</a>
			<div id="div02">
				<a href="http://www.weather.com.cn/">天气预报</a>
					<!--设置在鼠标悬浮时出现下拉框一样的选择框-->
					<div id="menu">
						设置
						<ul>
							<li>搜索设置</li>
							<li>高级搜索</li>
							<li>关闭预测</li>
							<li>隐私设置</li>
							<li>隐藏资讯</li>
							<li>关闭播报</li>
						</ul>
					</div>
			</div>
		</div>
		<a title="百度一下，你就知道" href="https://www.baidu.com/s?wd=%E7%99%BE%E5%BA%A6%E7%83%AD%E6%90%9C&sa=ire_dl_gh_logo_texing&rsv_dl=igh_logo_pc"  target="_blank">
			<div id="div03"></div>
		</a>
		<div id="div04">
			<input type="text" id="i1"/>
		</div>
		<div id="div07">
			<div id="div05">
				<span>
					<a href="" target="_blank">我的关注</a>
					<a href="" target="_blank">推荐</a>
					<a href="" target="_blank">导航</a><br/><br/>
				</span>
				<span id="s8">
					（我真的实在不会写那个，没关系，咋们来看看csdn）
				</span>
				<iframe src="https://www.csdn.net/" width="48%" height="400px"></iframe>
			</div>
			<div id="div06">
				<a href="https://top.baidu.com/board?platform=pc&sa=pcindex_entry" target="_blank" id="a1"><span id="s1">百度热搜 &gt;</span></a>
				<span><a href="" target="_blank" style="float:right;" color="grey" id="a2">&#10227;换一换</a></span>
				<br/><br/>
				<ul>
					<li><span id="s2">1 &nbsp;</span><a href="http://www2017.tyut.edu.cn/" target="_blank">太原理工大学官网</a><span id="s9">热</span></li><br/>
					<li><span id="s3">2 &nbsp;</span><a href="http://rjxy.tyut.edu.cn/" target="_blank">太原理工大学软件学院官网</a></li><br/>
					<li><span id="s4">3 &nbsp;</span><a href="https://cn.bing.com/images/search?q=%e9%9c%87%e6%83%8a&qpvt=%e9%9c%87%e6%83%8a&form=IGRE&first=1&tsc=ImageBasicHover" target="_blank">震惊！！！！！！！</a></li><br/>
					<li><span id="s5">4 &nbsp;</span><a href="" target="_blank">12岁花季少女6年后竟18岁！</a></li><br/>
					<li><span id="s6">5 &nbsp;</span><a href="https://zhuanlan.zhihu.com/p/37187239" target="_blank">可口可乐 or 百事可乐？</a></li><br/>
					<li><span id="s7">6 &nbsp;</span><a href="https://www.zhihu.com/topic/20238320/hot" target="_blank">阿萨姆奶茶</a></li><br/>
				</ul>
			</div>
		</div>
		<a href="#"><div id="div08"></div></a>
	</body>
</html>

css部分

#div01{
	width:100%;
	height:40px;
	line-height:40px;
}
a{
	margin-right:20px;
	text-decoration:none;
	color:black;
}
a:visited{
	color:blank;
}
a:hover{
	color:#84C1FF;
}
#div02{
	float:right;
	width:150px;
	height:40px;
}
#div03{
	margin:auto;
	width:250px;
	height:98px;
	background-image:url(img/baidu.jpg);
	margin-top:50px;
}
#div04{
	margin:auto;
	width:700px;
	height:40px;
}
input{
	width:700px;
	height:40px;
	border-radius:10px;
	border:2px solid grey;
}
input:focus{
	border:2px solid #2894FF;
}
#i1{
	background:url(img/百度一下.jpg) no-repeat right;
	background-size:100px 40px;
}
#div07{
	margin:auto;
	width:80%;
	height:1000px;
	margin-top:70px;
}
#div05{
	width:650px;
	height:1000px;
	float:left;
	font-style:grey;
}
iframe{
	width:100%;
	height:95%;
	border:0;
}
#div06{
	width:320px;
	height:500px;
	float:right;
}
#a1{
	font-size:15px;
	font-family:arial;
}
ul a:hover{
	text-decoration:underline;
}
ul li{
	list-style:none;
}
#s1{
	font-size:18px;
	font-weight:bold;
}
span a:visited{
	color:grey;
}
span a:hover{
	color:#84C1FF;
}
#s2{
	color:#FF2D2D;
}
#s3{
	color:#FFA042;
}
#s4{
	color:#FFE153;
}
#s5,#s6,#s7{
	color:grey;
}
#div08{
	width:50px;
	height:50px;
	background:url(img/d.jpg) no-repeat;
	background-size:100%;
	position:fixed;
	bottom:50px;
	right:50px;
}
#d1{
	background-color:#84C1FF;
	border-radius:10px;
	width:80px;
	height:25px;
	font-size:15px;
	border:solid 0.5px;
	float:right;
	margin-top:8px;
	margin-right:30px;
}
#s8{
	font-size:5px;
	color:grey;
}
#s9{
	background-color:#FF5809;
	border-radius:5px;
	color:white;
	font-size:13px;
}
/*设置在鼠标悬浮时出现下拉框一样的选择框的样式*/
*{
	padding: 0px;
	margin: 0px;
}
ul{
	list-style: none;
}
#menu{
	width:70px;
	height:20px;
	margin:auto;
	border:solid 0px;
	position:relative;
	background-color:white;
	text-align:center;
	top:-40px;
	margin-right:10px;
}
#menu ul{
	width:80px;
	border:grey 1px solid;
	position:absolute;
	left:-1px;
	top:30px;
	border-radius:10px;
	background-color:white;
	font-size:13px;
	display:none;
}
#content{
	text-align:center;
}
#menu:hover ul{
	display:block;
}
#menu ul li:hover{
	background-color:grey;
}