HTML5静态网页实战开发—企业网页

首页 > 代码库 > HTML5静态网页实战开发—企业网页

HTML5静态网页实战开发—企业网页

2024-09-13 17:09:22 217人阅读

一、首先找到模板

二、勾画框架(写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;
}