做一个简单的php中文网仿站
<!DOCTYPE html>
<html lang="zh_cn">
<head>
<meta charset="UTF-8">
<!-- <link rel="stylesheet" href="static/css/style1.css">-->
<title>php中文网简易仿站</title>
<style>
/*把页面的所有属性的外边距清除*/
* {
margin: 0;
padding: 0;
}
/*给header定义高度和背景色*/
.header {
height: 60px;
background-color: black;
}
/*将h1变成行内元素*/
h1{
display: inline;
color: red;
}
/*设置导航栏的左边内容*/
.nav_left {
width: 1300px;
height: 60px;
margin: 0 10px;
text-align: left;
position: relative;
float: left;
}
/*设置a标签的属性*/
a {
text-decoration: none;
color: #eeeeee;
font-size: 20px;
height: 60px;
margin-left: 25px ;
}
/*设置导航栏的二级导航为行内块元素*/
.nav_show {
display: inline-block;
}
/*设置列表样式*/
.hide {
width: 100px;
height: 60px;
margin-top: 8px;
display: none;
list-style: none;
}
/*设置li的显示属性*/
li{
background-color: black;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 15px;
}
/*设置导航栏右边的属性*/
.nav_right {
min-height: 60px;
display: inline-block;
mso-grid-left: -25px;
}
/*设置光标悬停效果，触发二级导航栏显示*/
.nav_left a:hover ul{
color: white;
background-color: #444444;
display:block;
position: absolute;
}
/*设置光标在二级导航栏的显示效果*/
ul li:hover{
background-color: #C3C3C3;
color: #FF5000;
}
/*设置导航栏右边内容，并向右浮动*/
.nav_right {
float: right;
line-height: 60px;
width: 80px;
}
/*清除浮动*/
.clear {
clear: both;
}
/*主体内容，只是图片一张*/
.main {
background-image: url("../image/没有导航条的php中文网.png");
width: 1200px;
height: 826px;
margin: 0 auto;
}
/*QQ客服用固定地位在网页的右下角显示*/
.QQ {
width: 260px;
height: 86px;
position: fixed;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<!--头部导航栏-->
<div class="header">
<div class="nav_left">
<a><h1>PHP中文网</h1></a>
<a href="">首页</a>
<a href="">视频教程</a>
<a href="">社区问答</a>
<a href="" class="nav_show">技术文章
<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="">菜鸟学堂</a>
</div>
<div class="nav_right"><a href="">登录</a></div>
<div class="clear">
<!-- 本来想做一个按登录之后弹出登录二维码图片的效果，但是找不到属性实现-->
</div>
<!-- 网页主体-->
<div class="main"></div>
<!-- 网页右下角的QQ客服-->
<div class="QQ"><img src="static/image/QQ客服.png" alt=""></div>
</body>
</html>