Demo 一 、 导航练习
精灵图实际使用，与图片背景定位的使用方法。
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body,ul{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
a{
text-decoration: none;
}
.nav{
height: 40px;
background-color: #ccc;
margin-top: 60px;
}
.wrapper{
width:1200px;
background-color:pink;
margin: 0 auto;
}
.wrapper li{
float: left;
}
.wrapper a{
height: 40px;
/*这里需要转行内块因为a 是行内元素*/
display: inline-block;
background-color: orange;
line-height: 40px;
/*需要使用内边距撑开距离上下为零*/
padding:0 16px;
}
.home a {
background-color: pink;
}
.wrapper a:hover{
background-color: pink;
}
.hot,.new{
position: relative;
}
.hot div,.new div{
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
top: -20px;
width: 26px;
height: 20px;
background-color: green;
/*背景图像*/
background-image: url(images/) no-repeat;
}
.hot div{
background-position: -50px 0;
}
.new div{
background-position: -160px 0;
}
</style>
</head>
<body>
<div class="nav">
<div class="wrapper">
<ul>
<li class="home"><a href="">首页</a></li>
<li><a href="">Java</a></li>
<li><a href="">ios</a></li>
<li><a href="">UI设计</a></li>
<li class="hot">
<a href="">前端与移动端开发</a>
<div></div>
</li>
<li><a href="">PHP</a></li>
<li><a href="">C/C++</a></li>
<li class="new">
<a href="">python</a>
<div></div>
</li>
<li><a href="">网路营销</a></li>
<li><a href="">问答</a></li>
</ul>
</div>
</div>
</body>
</html>
Demo 二 、练习 滑动门
核心技术就是利用css 精灵 和盒子padding 撑开宽度，以便能适应不同字数的导航栏
一般的经典布局都是这样
<li>
<a href="">
<span>导航栏内容</span>
</a>
</li>
1、a 设置背景左侧，padding撑开合适宽度
2、span 设置背景右侧，padding 撑开合适宽度剩下由文字继续撑开宽度
3、之所以a包含span 就是因为整个导航都是可以点击的
滑动门核心知识点
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
a {
background-color: green;
margin-left: 100px;
padding-left: 50px;
}
span{
background-color: red;
padding-right: 50px;
}
</style>
</head>
<body>
<a href="#">
<span>帮助与反馈</span>
</a>
</body>
</html>
全部滑动门核心知识点 重点
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body,ul {
margin: 0;
padding: 0;
}
li{
list-style: none;
}
a{
text-decoration: none;
}
body {
background: url(images/weixin.jpg) repeat-x;
}
.nav{
height: 74px;
}
.wrapper{
width: 1200px;
margin:0 auto;
background-color: red;
}
.nav li{
float: left;
margin-top:23px;
/*左面的圆角*/
margin-right: 20px;
}
.nav a {
display:inline-block;
height: 33px;
line-height: 33px;
background: url(images/bg.png) 0 -144px;
padding-left: 17px;
}
.nav span{
/*后面不能在写零了要写right 需要给高度 也需要转行内块*/
display: inline-block;
height: 33px;
background: url(images/bg.png) right -144px;
padding-right: 17px;
}
.nav a:hover{
background: url(images/bg.png) 0 -192px;
}
/* 当鼠标悬停到 nav 下的 a 上的时候 span 的状态*/
.nav a:hover span{
background: url(images/bg.png) right -192px;
}
</style>
</head>
<body>
<div class="nav">
<div class="wrapper">
<ul>
<li>
<a href="">
<span>首页</span>
</a>
</li>
<li>
<a href="">
<span>回家过年</span>
</a>
</li>
<li>
<a href="">
<span>人生为了一件大事</span>
</a>
</li>
<li>
<a href="">
<span>而来</span>
</a>
</li>
</ul>
</div>
</div>
</body>
</html>
CSS 样式初始化
css 初始化 是为了解决浏览器 兼容性样式不一致的问题
body,ul,p,h1,h2,h3,h4,h5,h6,ol,input,dl,dt,dd{
margin: 0;
padding: 0;
}
li{
list-style:none;
}
a{
text-decoration:none;
}
img{
border:0 none; /*清除ie6默认图片边框*/
vertical-align:middle; /*清除图片默认底部缝隙*/
}
input,textarea{
outline:none; /*清除默认轮廓线*/
border:0 none; /*清除默认边框*/
}
/*清除浮动*/
.clearfix:before,.clearfix:after{
content:"";
display:table;
}
.clearfix:after{
clear:both;
}
.clearfix{
*zoom:1;
}
