草庐IT

1.2 仿百度Web Day2

Yiero 2023-03-28 原文

Day2

和前一天的页面一样, 但是改了一些规范, 并且加上了弹出框(简陋版).

主要是改了首尾的引航栏, 将原来的直接使用a标签变成使用ul>(li>a)标签

成果

  1. 修改了首尾的引航栏, 将原来的直接使用a标签变成使用ul>(li>a)标签: 将ul>li标签通过css的display: inline-block标签修改为内联块标签, 使其可以在同一行排序.

  2. 实现了弹出窗口的使用 (见下<弹出窗口>)

  3. 了解了text-align: center的使用方法(块级元素使用才能居中, 内联元素无法居中), 也就是:
    <img src="" alt="" style="display:block; text-align:center"/>实现图片居中

  4. css中通过(width:1000px; margin:0 auto;): 在块元素中限定元素宽度, 然后可以使用margin:0 auto实现水平居中.

问题

  1. 依旧无法实现水平垂直居中.

  2.  /* 为什么这个标签组合能实现底部水平居中 */
 #footer {
     text-align: center;
     position: absolute;
     left: 0;bottom: 0;right: 0;
 }

  3. 搜索栏的间隔问题还没有解决

弹出窗口

弹出窗口其实主要是两个块级元素的组合. 也就是, 显示一个块级元素a, 不显示另外一个块级元素b(display: none;), 同时将这个不显示的块级元素添加上浮动position独立于其它元素, 当鼠标移动到a时, 使用伪类a:hover .b {display:block}将b显示出来, 就有弹出窗口的效果了.

源码

css

/* 初始化 */
body, ul, li, div, span, a, form, input {
	margin: 0px;
	padding: 0px;
}
a {
	text-decoration: none;
}

/* 顶部 */
#header {
	padding: 10px;
}

ul.nav > li {
	display: inline-block;
	padding: 10px;
}

#header a {
	color: black;
	font-size: 12px;
}
#header a:hover {
	color: rgb(32, 120, 179);
}

/* 弹出窗口 */
.dropdown {
	position: relative;
	display: inline-block;
}
.dropdownMoreContent {
	display: none;
	position: absolute;
}
.dropdown:hover .dropdownMoreContent{
	display: block;
}

/* 图片 */
.image1 {
	text-align: center;
}

/* 搜索栏 */
.search {
	width:810px;
	height: 30px;
	margin: 0 auto;
}

.search > form > input:first-child{
	border-radius: 10px;
	width: 700px;
	height: 30px;
}

.search > form > input:nth-child(2){
	background-color: blue;
	color: white;
	border-radius: 10px;
	width: 100px;
	height: 30px;
	margin: 0;
	padding: 0;
}



/* 底部 */
#footer {
    text-align: center;
    position: absolute;
    left: 0;bottom: 0;right: 0;
}

#footer > ul > li > * {
	font-size: 5px;
	color: gray;
}

#footer a:hover {
	color: black;
}

html

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>百度一下，你就知道</title>

	<link rel="stylesheet" href="./css/style.css">
</head>
<body>

	<!-- 顶部导航栏 -->
	<div id="header">
		<ul class="nav">
			<li><a href="http://news.baidu.com/" target="_blank">新闻</a></li>
			<li><a href="https://www.hao123.com/?src=from_pc_logon" target="_blank">hao123</a></li>
			<li><a href="http://map.baidu.com/" target="_blank">地图</a></li>
			<li><a href="http://tieba.baidu.com/" target="_blank">贴吧</a></li>
			<li><a href="https://haokan.baidu.com/?sfrom=baidu-top" target="_blank">视频</a></li>
			<li><a href="http://image.baidu.com/" target="_blank">图片</a></li>
			<li><a href="https://pan.baidu.com/?from=1026962h" target="_blank">网盘</a></li>
			<li>
				<div class="dropdown">
					<a href="http://www.baidu.com/more/" target="_blank">更多</a>
					<div class="dropdownMoreContent">
						<a href="" class="more1">翻译</a>
						<a href="" class="more2">学术</a>
						<a href="" class="more3">文库</a>
						<a href="" class="more4">百科</a>
						<a href="" class="more5">知道</a>
						<a href="" class="more6">健康</a>
						<a href="" class="more7">营销推广</a>
						<a href="" class="more8">直播</a>
						<a href="" class="more9">音乐</a>
						<a href="" class="more10">查看全部百度产品</a>
					</div>
				</div>
			</li>
		</ul>
	</div>


	<!-- 图片 -->
	<div class="image1">
		<a href="https://www.baidu.com/s?wd=%E4%BA%8C%E5%8D%81%E5%A4%A7&sa=ire_dl_gh_logo_texing&rsv_dl=igh_logo_pc" target="_blank">
			<img src="https://www.baidu.com/img/pc_675fe66eab33abff35a2669768c43d95.png" alt="百度搜索" title="二十大" style="zoom:50%">
		</a>
	</div>

	<!-- 搜索栏 -->
	<div class="search">
		<form action="https://cn.bing.com/search" method="get">
			<input type="text" name="q" >
			<input type="submit" value="百度一下">
		</form>
	</div>

	<!-- 底层栏 -->
	<div id="footer">
		<ul class="nav">
			<li><a href="https://home.baidu.com/" target="_blank">关于百度</a></li>
			<li><a href="http://ir.baidu.com/" target="_blank">About Baidu</a></li>
			<li><a href="https://www.baidu.com/duty" target="_blank">使用百度前必读</a></li>
			<li><a href="https://help.baidu.com/" target="_blank">帮助中心</a></li>
			<li><a href="https://e.baidu.com/?refer=1271" target="_blank">企业推广</a></li>
			<li><a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11000002000001" target="_blank">京公网安备11000002000001号</a></li>
			<li><a href="https://beian.miit.gov.cn/" target="_blank">京ICP证030173号</a></li>
			<li><a href="https://www.baidu.com/licence/" target="_blank">信息网络传播视听节目许可证 0110516</a></li>
			<li><span>互联网宗教信息服务许可证编号：京（2022）0000043</span></li>
		</ul>
	</div>

</body>
</html>
Day21.2gtltcodeHtml/Css

有关1.2 仿百度Web Day2的更多相关文章

  1. ruby - 名称错误 : undefined - have parsing rules for local variables changed in Ruby 2. 1.2？ - 2

    我得到NameError:undefinedlocalvariableormethodwithruby​​2.1.2正如在thisquestion中观察到的那样,表达式如:barifbar=true引发未定义的局部变量错误(前提是bar之前未定义)，因为bar在分配之前被解析器读取。而且我相信以前用这个表达式没有什么区别:barifbar=false两者之间的区别在于主体是否被求值，但如果遇到未定义的局部变量会在求值条件之前立即引发错误，那应该无关紧要。但是当我在Ruby2.1.2上运行第二个代码时，它没有引发错误。以前也是这样吗？如果是这样，那么解析讨论的内容是什么？如果没有，Rub

  2. ruby-on-rails - 在 ruby​​/rails 中将 1200 转换为 1.2K - 2

    我认为ruby​​或rails中有一种方法可以执行此操作，但我不记得在哪里可以找到它或如何搜索它，所以我希望stackoverflow的集体智慧可能有所帮助。我不介意编写一个方法来执行此操作，但我确信有人有更好的解决方案。 最佳答案 number_to_human(1200,:format=>'%n%u',:units=>{:thousand=>'K'})#1200=>1.2K 关于ruby-on-rails-在ruby​​/rails中将1200转换为1.2K，我们在StackOver

  3. win10系统下Edge浏览器搜索引擎[必应]和新建标签页被篡改百度的一种解决方式 - 2

    一、我的情况：win10系统下Edge浏览器搜索引擎[必应]和新建标签页被篡改百度的搜索引擎和百度的页面我的解决方案步骤如下：1.检查电脑管家的浏览器保护检查一下你的电脑是否后台开启了电脑管家；如果是，则检查一下是否开启了浏览器保护。由于我是联想的笔记本，自带联想管家，一直没有关闭过它，以我的电脑为例，进行关闭，如下图所示。其他的电脑管家软件，应该也有类似的功能，耐心找一下就能找到啦。2.在Edge浏览中进行相关设置先点击浏览器右上角的三个点，然后找到“设置”，然后进入设置界面。在当前页面手动搜索“搜索引擎”，然后选择需要的搜索引擎“必应”，然后点击管理搜索引擎。进入管理搜索引擎界面后，理论上

  4. javascript - attrs.$set ('ngClick' , 函数名 + '()' );不再适用于 angular 1.2rc3 - 2

    我有一个开源项目，正在升级以使用angular1.2rc3。本质上它处理表单按钮上的promise。在这个plnkrhttp://plnkr.co/edit/vQd97YEpYO20YHSuHnN0?p=preview您应该能够单击右侧的“保存”并在控制台中看到“已单击”，因为它应该在指令中执行此代码:scope[functionName]=function(){console.log('clicked');//ifit'salreadybusy,don'tacceptanewclickif(scope.busy===true){return;}scope.busy=true;varr

  5. javascript - AngularJS 1.2 中的随机 orderBy 返回 'infdig' 错误 - 2

    在thisquestion中使用随机orderBy排序技术在AngularJS1.1中工作正常。varmyApp=angular.module('myApp',[]);functionMyCtrl($scope){$scope.list=['a','b','c','d','e','f','g'];$scope.random=function(){return0.5-Math.random();}}但是，在1.2中，它会将infdig错误放入控制台，并且需要更长的时间来返回排序结果:http://jsfiddle.net/mblase75/jVs27/控制台中的错误如下所示:Error:

  6. javascript - 创建一个新选项并使用 mootools 1.2 注入(inject)选择框 - 2

    我有一个返回国家列表的AJAX函数。它工作正常。我的问题是，想要在已经是HTML且为空的选择框中加载国家/地区意味着其中没有选项值。我想知道如何使用moo工具1.2创建一个新的选项元素并注入(inject)到选择框中我使用了下面的代码，但它在IE中不起作用。varNewOption=newOption("SelectSubCategory",'0');NewOption.inject($('nSub_nIndustryID'))谢谢阿维纳什 最佳答案 没有必要创建变量，除非您稍后要使用它。newElement('option',{'

  7. javascript - 防止 ng-click 触发确认对话框(在 Angular 1.2 RC3 中停止工作) - 2

    我使用这个脚本在实际触发ng-click函数之前有一个确认对话框Directives.directive('ngConfirmClick',[function(){return{priority:100,restrict:'A',link:function(scope,element,attrs){element.bind('click',function(e){varmessage=attrs.ngConfirmClick;if(message&&!confirm(message)){e.stopImmediatePropagation();e.preventDefault();}}

  8. javascript - Echarts3(百度)工具提示中的彩色圆形 - 2

    Echarts3(baidu)工具提示中的彩色圆形默认情况下，工具提示具有与图形相同颜色的圆形，如下所示:http://echarts.baidu.com/gallery/editor.html?c=candlestick-brush但是，如果我自定义工具提示，它会像本例中那样删除颜色编码的圆形:https://ecomfe.github.io/echarts/doc/example/tooltip.html#-en有没有办法使用自定义工具提示并将颜色放回原处。这是另一种解释方式。转到此链接pie-simple并且您会发现没有彩色圆形的图表。删除以下行:formatter:"{a}{b

  9. 最新！AI第一次有了国家标准，北大、华为、百度等单位共同编制 - 2

    最近，国家标准全文公开系统网站正式发布了国家标准《神经网络表示与模型压缩第一部分：卷积神经网络》（GB/T42382.1-2023），此标准由北京大学、鹏城实验室、华为、百度等16家单位共同编制。（来源：全国标准信息公共服务平台）英文标准名称：Informationtechnology—Neuralnetworkrepresentationandmodelcompression—Part1:Convolutionalneuralnetwork，将于2023年10月1日正式实施，这是国内首个面向人工智能（AI）模型表示与压缩技术的国家标准。最关键的是，这一标准的制定与推进采用了特殊的国际国内“两

  10. javascript - 将 Angular 从 1.2 更新到 1.3 破坏了我的指令 - 2

    我将以下指令放在使用angular-ui-bootstrap日期选择器的输入字段上:angular.module('directives.validators.date',[]).directive('validDate',['$filter',function($filter){return{restrict:'A',require:'ngModel',link:function(scope,el,attrs,ngModel){varpattern=/^(0[1-9]|[12][0-9]|3[01])\.(0[1-9]|1[012])\.(19|20)\d\d$/;ngModel.s

随机推荐