其他分享
首页 > 其他分享> > 第十四周课程学习

第十四周课程学习

作者:互联网

今天实现效果
在这里插入图片描述
乱七八糟的代码,重新建的文件夹,然后写了改,改了写,

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>百度一下,你就知道</title>
		
		<style type="text/css">
		.submit{
			background-color:#3385ff;
			height:38px;
			font-size:20px;
			color:white;
			border:0
		}
		.input{
			    border: 1px solid #b6b6b6;
			width:474px;
			height:36px;
			font-size:20px;
		}
		
				</style>
		
		
		
		
		
		
		<link  rel="stylesheet" href="main.css" type="text/css"/>
	</head>
	<body>
		<header>
			<div id="d1" style="text-align:left">
				<div class="menu">
					<a href="http://news.baidu.com/">新闻</a>
					<a href="https://www.hao123.com/">hao123</a>
					<a href="https://map.baidu.com/@13035085.64,4303516.59,12z">地图</a>
					<a href="https://live.baidu.com/">直播</a>
					<a href="https://haokan.baidu.com/?sfrom=baidu-top">视频</a>
					<a href="https://tieba.baidu.com/index.html">贴吧</a>
					<a href="https://xueshu.baidu.com/">学术</a>
					<a href="https://www.baidu.com/more/">更多</a>
			    </div>
				</div>
			<div style="text-align:right ">
			<a href="https://www.baidu.com/more/">登录</a>
			
						<select>
							<option>设置</option>
											<option>搜索设置</option>
											<option>高级搜索</option>
											<option>关闭预测</option>
											<option>隐私设置</option>
											<option>关闭热榜</option>
										</select>

				</ul>
			</div>
				<!--搜索区域-->
			

			
			<div class="middle">
					<form action="http://www.baidu.com/baidu" target="_blank">
						<div style="text-align:center" >
						     <div>
								<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">
									<img src="../第三次作业\logo.png">
								</a>
								
							</div>
				
						<br>
						<input type="text" class="input"  name="word">
						<input type="submit" value="百度一下" class="submit" href="https://www.baidu.com/" > 
			 
					</form>
				</div>
				
	
			
			
			
			
			
	
			
			<!--页面导航nav元素-->
		</header>
		<!--中部百度热搜-->
			<div>
				
				<table align="center">
					<tr></tr><div><h4><a href="https://top.baidu.com/board?platform=pc&sa=pcindex_entry">百度热搜<a><h4></div></tr>
						<tr>
							<td>
								
								<a href="https://www.baidu.com/s?cl=3&tn=baidutop10&fr=top1000&wd=%E5%B9%BF%E5%B7%9E%E5%8D%97%E6%B2%99%E6%96%B0%E5%A2%9E6%E4%BE%8B%E6%84%9F%E6%9F%93%E8%80%85%E4%B8%BA%E4%B8%80%E5%AE%B6%E4%BA%BA&rsv_idx=2&rsv_dl=fyb_n_homepage&hisfilter=1">1.广州南沙新增6例感染者为一家人</a>
								
								</td>
								<td>
									<a href="https://www.baidu.com/s?cl=3&tn=baidutop10&fr=top1000&wd=%E7%A7%91%E5%85%B4%3A%E6%8E%A5%E7%A7%8D%E7%AC%AC3%E9%92%88%E7%96%AB%E8%8B%97%E6%8A%97%E4%BD%93%E6%8F%90%E5%8D%8710%E5%80%8D&rsv_idx=2&rsv_dl=fyb_n_homepage&hisfilter=1">2.科兴:接种第3针疫苗抗体提升10倍<a>
									</td>
						</tr>
						<tr>
							<td>
								
								<a href="https://www.baidu.com/s?cl=3&tn=baidutop10&fr=top1000&wd=%E7%A6%BB%E5%BC%80%E5%B9%BF%E5%B7%9E%E5%87%BA%E7%9C%81%E9%9C%80%E6%8C%8148%E5%B0%8F%E6%97%B6%E5%86%85%E9%98%B4%E6%80%A7%E8%AF%81%E6%98%8E&rsv_idx=2&rsv_dl=fyb_n_homepage&hisfilter=1">3.离开广州出省需持48小时内阴性证明</a>
								
								</td>
								<td>
									<a href="https://www.baidu.com/s?cl=3&tn=baidutop10&fr=top1000&wd=%E7%BE%8E%E8%AE%AE%E5%91%98%E6%90%AD%E4%B9%98%E5%86%9B%E7%94%A8%E8%BF%90%E8%BE%93%E6%9C%BA%E7%AA%9C%E8%AE%BF%E5%8F%B0%E6%B9%BE&rsv_idx=2&rsv_dl=fyb_n_homepage&hisfilter=1">4.美议员搭乘军用运输机窜访台湾<a>
									</td>
						</tr>
						
		        <table>
			</div>
			
			
			
			
			
			
			<div align="center" style="bottom:0;margin-top:300px;">
					<div>
						<a id="setf" href="//www.baidu.com/cache/sethelp/help.html" target="blank">把百度设为主页</a>
						<a href="http://home.baidu.com">关于百度</a>
						<a href="http://ir.baidu.com">About&nbsp;&nbsp;Baidu</a>
						<a href="http://e.baidu.com/?refer=888">百度推广</a>
						@2021&nbsp;Baidu&nbsp;<a href="http://www.baidu.com/duty/">使用百度前必读</a>&nbsp;<a href="http://jianyi.baidu.com/">意见反馈</a>&nbsp;京ICP证030173号&nbsp;
						<a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11000002000001" target="_blank">京公网安备11000002000001号</a>
					</div>
				</div>
		
			
			
			
			
			
			
			
			
		
		
		
	</body>
</html>

写了不少无效的东西,但是有效的东西还是起来了作用

#d1{
			    position: absolute;
		 		left: 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: #0000ff;
		 		color: white;
		 	}
		 	#d1 input[type="button"]:hover{
		 		cursor: pointer;
		 	}
		 	#d2{
		 		position:relative;
		 		text-align: center;
		 		top: 100px
		 	}


		 	#d3{
		 		top: 280px;
		 		position: relative;
		 	}
		 	#d4{
		 		position: relative;
		 		top:290px;
		 		text-align: center;
		 		color:#999999;
		 	}
		 	#d4 a{
		    	font-family: "微软雅黑";
		    	color:#999999;
		    	font-size: 16px;
		    }
		    #d4 ul{
		 		list-style: none;
		 	}
		 	#d4 li{
		 		float: left;
		 		margin-left: 15px;
		 	}
		 	#a1{
		 		margin-bottom:100px;
		 	}
		 	#t:active{
		 		border-color: #3388FF;
		 	}
			p a {
				text-decoration: none;
			}
			div a {
				text-decoration: none;
			}
			a {
				color: gray;
			}
            a:hover {
				color: #3388FF;
			}
			.container 
			{
			    width: 500px;
			
  height: 50px;
  margin: 100px auto;
			
			            }
			
			 
			
			            .parent {
			                width: 100%;
			
			                height: 42px;
			
			                top: 4px;
			
			                position: relative;
			
			            }
			
			 
			
			            .parent>input:first-of-type {
			                /*输入框高度设置为40px, border占据2px,总高度为42px*/
			
			                width: 380px;
			
			                height: 40px;
			
			                border: 1px solid #ccc;
			
			                font-size: 16px
			 outline: none;
			
			            }
			
			 
			
			            .parent>input:first-of-type:focus {
			                border: 1px solid #317ef3;
			
			                padding-left: 10px;
			
			            }
			
			 
			
			            .parent>input:last-of-type {
			                /*button按钮border并不占据外围大小,设置高度42px*/
			
			                width: 100px;
			
			                height: 44px;
			
			                position: absolute;
			
			                background: #317ef3;
			
			                border: 1px solid #317ef3;
			
			                color: #fff;
			
			                font-size: 16px;
			
			                outline: none;
			
			            }

今日份学习内容:

1、emmet插件:自动生成HTML代码片段,vscode敲一个!之后点击tab 2、块级元素独占一行,行级元素不换行,块级元素可以包含行级元素,行级元素不可以包含块级元素,a元素(行级元素)除外,现在已经没有这种叫法了,现在的元素包含关系取决于元素的相关类别。 3、头部容器元素:
\<header><header>

十四周学习总结:把尚硅谷上有关css的内容学了一遍,然后跟着腾讯课堂走了一段时间。晚上或者有空的时候敲了敲代码。完成这些效果的时候采用了以下两种方式:从外部引入到样式分为两种:(注意写在head标签里面) 当样式需要应用于很多页面时,就需要用到外部样式表,首先需要创建一个css文件,然后引用到页面中。
  Link样式表式: <link rel=”stylesheet” type=”text/css” href=”my.css”(href表示路径)>

  Html式: <style type="text/css">@import url("css.css");></style>
了解了一些框架结构以及相互引用之间的关系,发现还得一步一步来,尽量在用已有的知识去实现。最后,这里说的用代码改颜色其实和我上个星期所记录的手机调色器是一样的。回顾最初,想到HTML+css+javascript=web,也明白了为什么我们普通人去看百度源代码时有好多重要信息看不到,因为他使用了css隐藏的方式。

标签:color,元素,学习,课程,nbsp,第十四,font,border,d1
来源: https://blog.csdn.net/qq_51082388/article/details/117632548