Day2

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

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

成果

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

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

  3. 了解了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

百度一下，你就知道