????：<!DOCTYPE html><html lang="zh_cn"><head> <meta charset="UTF-8"><!-- <link rel="stylesheet" href="static/css/s
<!DOCTYPE html>
<html lang="zh_cn">
<head>
<meta charset="UTF-8">
<!-- <link rel="stylesheet" href="static/css/style1.css">-->
<title>php中文網(wǎng)簡易仿站</title>
<style>
/*把頁面的所有屬性的外邊距清除*/
* {
margin: 0;
padding: 0;
}
/*給header定義高度和背景色*/
.header {
height: 60px;
background-color: black;
}
/*將h1變成行內(nèi)元素*/
h1{
display: inline;
color: red;
}
/*設(shè)置導(dǎo)航欄的左邊內(nèi)容*/
.nav_left {
width: 1300px;
height: 60px;
margin: 0 10px;
text-align: left;
position: relative;
float: left;
}
/*設(shè)置a標(biāo)簽的屬性*/
a {
text-decoration: none;
color: #eeeeee;
font-size: 20px;
height: 60px;
margin-left: 25px ;
}
/*設(shè)置導(dǎo)航欄的二級(jí)導(dǎo)航為行內(nèi)塊元素*/
.nav_show {
display: inline-block;
}
/*設(shè)置列表樣式*/
.hide {
width: 100px;
height: 60px;
margin-top: 8px;
display: none;
list-style: none;
}
/*設(shè)置li的顯示屬性*/
li{
background-color: black;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 15px;
}
/*設(shè)置導(dǎo)航欄右邊的屬性*/
.nav_right {
min-height: 60px;
display: inline-block;
mso-grid-left: -25px;
}
/*設(shè)置光標(biāo)懸停效果，觸發(fā)二級(jí)導(dǎo)航欄顯示*/
.nav_left a:hover ul{
color: white;
background-color: #444444;
display:block;
position: absolute;
}
/*設(shè)置光標(biāo)在二級(jí)導(dǎo)航欄的顯示效果*/
ul li:hover{
background-color: #C3C3C3;
color: #FF5000;
}
/*設(shè)置導(dǎo)航欄右邊內(nèi)容，并向右浮動(dòng)*/
.nav_right {
float: right;
line-height: 60px;
width: 80px;
}
/*清除浮動(dòng)*/
.clear {
clear: both;
}
/*主體內(nèi)容，只是圖片一張*/
.main {
background-image: url("../image/沒有導(dǎo)航條的php中文網(wǎng).png");
width: 1200px;
height: 826px;
margin: 0 auto;
}
/*QQ客服用固定地位在網(wǎng)頁的右下角顯示*/
.QQ {
width: 260px;
height: 86px;
position: fixed;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<!--頭部導(dǎo)航欄-->
<div class="header">
<div class="nav_left">
<a><h1>PHP中文網(wǎng)</h1></a>
<a href="">首頁</a>
<a href="">視頻教程</a>
<a href="">社區(qū)問答</a>
<a href="" class="nav_show">技術(shù)文章
<ul class="hide">
<li>php教程</li>
<li>mysql教程</li>
<li>javascript教程</li>
<li>html教程</li>
<li>css教程</li>
</ul>
</a>
<a href="">編程詞典</a>
<a href="">資源下載</a>
<a href="">特色課程</a>
<a href="">菜鳥學(xué)堂</a>
</div>
<div class="nav_right"><a href="">登錄</a></div>
<div class="clear">
<!-- 本來想做一個(gè)按登錄之后彈出登錄二維碼圖片的效果，但是找不到屬性實(shí)現(xiàn)-->
</div>
<!-- 網(wǎng)頁主體-->
<div class="main"></div>
<!-- 網(wǎng)頁右下角的QQ客服-->
<div class="QQ"><img src="static/image/QQ客服.png" alt=""></div>
</body>
</html>
?? ???：查無此人?? ??：2019-05-05 10:18:37
???? ??：完成的不錯(cuò)。常用的css樣式，可以寫到一個(gè)公用文件里，隨時(shí)可以使用。繼續(xù)加油。