Day2 和前一天的頁面一樣, 但是改了一些規範, 並且加上了彈出框(簡陋版). 主要是改了首尾的引航欄, 將原來的直接使用a標簽變成使用ul>(li>a)標簽 成果 修改了首尾的引航欄, 將原來的直接使用a標簽變成使用ul>(li>a)標簽: 將ul>li標簽通過css的display: inli ...
Day2
和前一天的頁面一樣, 但是改了一些規範, 並且加上了彈出框(簡陋版).
主要是改了首尾的引航欄, 將原來的直接使用a標簽變成使用ul>(li>a)標簽
成果
-
修改了首尾的引航欄, 將原來的直接使用
a標簽變成使用ul>(li>a)標簽: 將ul>li標簽通過css的display: inline-block標簽修改為內聯塊標簽, 使其可以在同一行排序. -
實現了彈出視窗的使用 (見下<彈出視窗>)
-
瞭解了
text-align: center的使用方法(塊級元素使用才能居中, 內聯元素無法居中), 也就是:
<img src="" alt="" style="display:block; text-align:center"/>實現圖片居中 -
css中通過(
width:1000px; margin:0 auto;): 在塊元素中限定元素寬度, 然後可以使用margin:0 auto實現水平居中.
問題
-
依舊無法實現水平垂直居中.
-
/* 為什麼這個標簽組合能實現底部水平居中 */ #footer { text-align: center; position: absolute; left: 0;bottom: 0;right: 0; } -
搜索欄的間隔問題還沒有解決
彈出視窗
彈出視窗其實主要是兩個塊級元素的組合. 也就是, 顯示一個塊級元素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>
