1.2 仿百度Web Day2

  • 1.2 仿百度Web Day2已关闭评论
  • 14 次浏览
  • A+
所属分类:Web前端
摘要

和前一天的页面一样, 但是改了一些规范, 并且加上了弹出框(简陋版).主要是改了首尾的引航栏, 将原来的直接使用a标签变成使用ul>(li>a)标签


Day2

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

1.2 仿百度Web 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="1.2 仿百度Web Day2" 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>