代码编织梦想

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;
}

图片得自己找,放在相应文件中就会打开

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/Valder__/article/details/127157716

html表格(table)实例_hj1993的博客-爱代码爱编程_html table 案例

实例1:课程表 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

html表单整理,实例_chen983234416的博客-爱代码爱编程_html表单

    首先通过一个实例来表明表单的一些基本的使用,然后详细讲解表单里面的属性,最后再做出总结。   接下来解析上面的例子  1、表单的作用:用来搜集不同类型的用户输入 2、<form action="#" method="get"> </form> : form标签表示表单。action="#":设置数据的提交地址,就是提

简单的html实例_cgl_dong的博客-爱代码爱编程_html简单网页代码实例

HTML文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title

HTML实例—以一个简单网页为例-爱代码爱编程

HTML实例 1、原型与实例对比 (1)原型 (2)实例 2、详情 2.1 布局总览 2.2 布局分述 (1)标题+搜索 分两块内容,用<span> span1:文字:gsonya-HTML span2:输入框+按钮 (2)导航栏 将这四个内容设置为链接,首页刷新当前页面;HTML实例链接到第(5)块

简单HTML网页制作 实例-爱代码爱编程

HTML网页制作 1.新建文本文档,以“html”结尾。 2.用html网页逻辑器打开,这里我们用Sublime Text打开。 Tips:使用 !+Tab 按键 那么就可以自动生成HTML文档模板 推荐大家使用的前端工具有 Vscode hbuilder sublime_text 等等在标签<body></body>里写文

HTML实例--制作表单-爱代码爱编程

        运用表格和表单基础知识简单制作一个表单         表单制作使用表格来对表单进行排版美化 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-C

HTML简单实例-爱代码爱编程

简单的单身🐕消失网站 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <me