1、打开软件，文件，新建，html文件，命名随意，我这里命名hday。软件自动生成html的基本构造。首先保存一张背景图片放在img文件夹。
2、在<head>里声明<style>body{background-attachment: fixedbackground-image: url(../img/a3.jpg) }。
3、现在背景设置好了，加入内容，看看效果。在<body>内写入内容。运行。滚动鼠标图片是不是不动的。
4、点击运行。点击文件，新建，css文件。命名。输入body{background-image: url(../img/a3.jpg)background-attachment: fixed}。
5、返回html。在<head>内输入<link rel="stylesheet" type="text/css" href="new_file.css" />，保存，运行。效果和之前一样。
<html><head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title></title>
<style>
*{
margin: 0
padding: 0
}
#div{
width: 183px
height: 32px
background: #ffffff
border: 1px solid #444444
overflow: hidden
}
a{
color: #979797
font: bold 14px
text-decoration: none
}
#div,#div ul{
width: 200px
border: none
height: 36px
float: left
}
#div1 {
width: 1200px
float: right
}
#div ul li:hover a{
background: #ff7d93
color: #f6fffc
}
#div ul li a{
display: block
width: 183px
padding-top: 8px
padding-bottom: 8px
background: #ffffff
border: 1px solid #444444
padding: 8px 0 8px 0
margin: 0
}
#div:target{
width: 183px
height: 318px
}
#div1 ul:nth-child(1){
width: 300px
height: 500px
float: right
}
#div1 ul:nth-child(1) li{
width: 300px
height: 100px
clear: both
}
#div1 ul:nth-child(2){
width: 900px
height: 500px
overflow: hidden
float: right
}
#div1 ul:nth-child(2) li{
width: 900px
height: 500px
clear: both
text-align: center
}
</style>
</head>
<body>
<div id="div">
<ul>
<li><a href="#div">友情链接</a></li>
<li><a href="#a1">图一</a></li>
<li><a href="#a2">图二</a></li>
<li><a href="#a3">图三</a></li>
<li><a href="#a4">图四</a></li>
<li><a href="#a5">图五</a></li>
</ul>
</div>
<div id="div1">
<ul>
<li><a href="#a1"><img src="../IMAGE/images(1)/team/member1.jpg" alt="logo..." width="300px"height="100px"/></a></li>
<li><a href="#a2"><img src="../IMAGE/images(1)/team/member2.jpg" alt="logo..." width="300px"height="100px"/></a></li>
<li><a href="#a3"><img src="../IMAGE/images(1)/team/staff1.jpg" alt="logo..." width="300px"height="100px"/></a></li>
<li><a href="#a4"><img src="../IMAGE/images(1)/team/staff2.jpg" alt="logo..." width="300px"height="100px"/></a></li>
<li><a href="#a5"><img src="../IMAGE/images(1)/team/staff3.jpg" alt="logo..." width="300px"height="100px"/></a></li>
</ul>
<ul>
<li id="a1"><img src="../IMAGE/images(1)/team/member1.jpg" alt="logo..."/></li>
<li id="a2"><img src="../IMAGE/images(1)/team/member2.jpg" alt="logo..."/></li>
<li id="a3"><img src="../IMAGE/images(1)/team/staff1.jpg" alt="logo..."/></li>\
<li id="a4"><img src="../IMAGE/images(1)/team/staff2.jpg" alt="logo..."/></li>
<li id="a5"><img src="../IMAGE/images(1)/team/staff3.jpg" alt="logo..."/></li>
</ul>
</div>
</body>
</html>
基本就这样
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）