一、首先找到模板
二、勾画框架(写div)，切图(ps)
三、实战开始
这一次共花了一下午时间，利用html、css做出静态网页
在外观，布局，动画都有一点改善
四、静态网页效果
倒数第二的div是一组图片滚动动画(仿js)，利用css3写出(缺点是兼容性并不是很好)
五、部分源码(需要完整的可以联系我)
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阿水的阿里</title>
<link href="静态开发.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="header">
<div class="top">
<div class="M">
<div class="logo">
<img src="logo.jpg">
</div>
<div class="dianhua R">
<span>Tel:10088208820</span>
</div>
</div>
</div>
<div class="daohang">
<div class="M">
<ul>
<li>
<a href="#">网站首页</a>
</li>
<li>
<a href="#">关于我们</a>
</li>
<li>
<a href="#">新闻动态</a>
</li>
<li>
<a href="#">主营项目</a>
</li>
<li>
<a href="#">设备展示</a>
</li>
<li>
<a href="#">合作伙伴</a>
</li>
<li>
<a href="#">人才招聘</a>
</li>
<li>
<a href="#">给我留言</a>
</li>
<li>
<a href="#">联系我们</a>
</li>
</ul>
</div>
</div>
<div class="tubiao M">
<img src="tubiao.jpg" alt="hhhhh">
</div>
</div>
<div class="center">
<div class="gonggao M">
<span><img src="gonggao.jpg"></span>
<span id="g">最新公告:</span>
<span id="k">阿水的阿里成为世界第一首富</span>
<span id="j">
<form>
<input type="search" name="search" placeholder="search">
<input type="submit" value="搜索">
</form>
</span>
</div>
<div class="jianjie M">
<span id="i">主营项目</span>
<hr/>
<span id="q">
<a href="#"><img src="1.jpg"></a>
<a href="#"><img src="2.jpg"></a>
<a href="#"><img src="3.jpg"></a>
<a href="#"><img src="4.jpg"></a>
</span>
</div>
<div class="xinwen M">
<div class="zuo">
<div id="e">新闻动态</div>
<hr/>
<div class="xinwen1">
<ul>
<a href="#"><li>阿水的阿里最帅</li></a>
<a href="#"><li>阿水的阿里最厉害</li></a>
<a href="#"><li>阿水的阿里好厉害</li></a>
<a href="#"><li>阿水的阿里好强</li></a>
<a href="#"><li>阿水的阿里真牛逼</li></a>
<a href="#"><li>阿水的阿里真的好</li></a>
</ul>
</div>
</div>
<div class="you">
<div id="r">合作伙伴</div>
<hr/>
<img src="5.jpg" alt="广告">
</div>
</div>
</div>
<div class="bofang">
<div class="img">
<ul class="nav">
<li><a href="#"><img src="1.jpg"></a></li>
<li><a href="#"><img src="1.jpg"></a></li>
<li><a href="#"><img src="1.jpg"></a></li>
<li><a href="#"><img src="1.jpg"></a></li>
</ul>
</div>
</div>
<div class="dibu">
<p><span id="f">地址：阿水的阿里 电话：932834897</span></p>
<p><span id="o">Copyright?samxinnet.com 2001-2015 All Right Reserved</span></p>
</div>
</body>
</html>css
*{
margin: 0px;
padding: 0px;
font-family: 微软雅黑;
}
body{
background-color: #e8e4e6;
}
.L{
float: left;
}
.M{
width: 960px;
margin: 0px auto;
}
.R{
float: right;
}
.cl{
clear: both;
}
.top{
width: 100%;
height: 100px;
}
.logo{
margin-top: 25px;
}
.dianhua span{
position: absolute;
top: 30px;
left: 890px;
font-size: 30px;
text-shadow: 5px 5px 1px #ffeb55;
}
/*导航*/
.daohang{
background-color: #25220c;
width: 100%;
height: 55px;
}
.daohang li{
list-style-type: none;
display: inline;
line-height: 55px;
}
.daohang a{
text-decoration: none;
color: #f8f4f6;
font-size: 15px;
margin: 20px;
}
.daohang a:hover{
color: cadetblue;
}
/*内容*/
.gonggao{
background-color: #25220c;
width: 100%;
height: 40px;
margin-bottom: 20px;
}
.gonggao span{
position: absolute;
left: 350px;
margin-top: 10px;
}
#g{
position: absolute;
left: 400px;
color: #faf6f8;
font-size: 20px;
}
#k{
position: absolute;
left: 500px;
color: #faf6f8;
font-size: 15px;
margin-top: 15px;
}
#j{
position: absolute;
left: 800px;
}
#i{
font-size: 20px;
}
.jianjie a:hover{
border-color: #25220c;
border-style: groove;
}
.xinwen{
background-color: #25220c;
width: 100%;
height: 320px;
}
.zuo{
float: left;
}
#e{
float: left;
font-size: 22px;
color: #faf6f8;
margin-top: 7px;
position: absolute;
left: 200px;
}
.zuo hr{
position: relative;
top: 40px;
left:170px;
width: 350px;
}
.xinwen1{
position: relative;
top: 60px;
left: 190px;
color: #f9faaf;
}
.xinwen li{
list-style-type: armenian;
}
.xinwen1 a{
text-decoration: none;
color: #f9faaf;
line-height: 30px;
}
.you{
float: left;
}
#r{
font-size: 22px;
color: #faf6f8;
margin-top: 7px;
position: absolute;
left: 700px;
}
.you hr{
position: relative;
top: 40px;
left:310px;
width: 350px;
}
.you img{
position: relative;
top: 60px;
left:310px;
}
.bofang{
margin-top: 20px;
position: relative;
left: 200px;
}
.bofang li{
display: inline;
}
.nav{
position: absolute;
z-index: 9;
width: 2000px;
height: 200px;
animation:myfirst 6s infinite;
}
@keyframes myfirst{
0%{
left: 0px;
}
26.6%{
left: 0px;
}
33%{
left:-320px;
}
44%{
left:-620px;
}
50%{
left:-2000px;
}
65%{
left:-0px;
}
74%{
left:320px;
}
84%{
left: 640px;
}
95%{
left: 2000px;
}
100%{
left: 0px;
}
}
/*底部*/
.dibu{
margin-top: 200px;
float: left;
background-color: #25220c;
width: 100%;
height: 100px;
padding: 30px;
}
六、素材演示
七、动画部分提炼
代码中动画是利用css3来写（仿js&jQ）
最好多加-webkit-，-o-，-moz-
也可以自己需求去更改
这里就不上gif了，总之它是左右一直在变化的
时间： 2024-10-18 21:16:36