赞
踩
附加html和css代码:
- <!DOCTYPE html>
- <html lang="en">
-
- <head>
- <meta charset="UTF-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>CSS案例</title>
- </head>
- <style>
- * {
- margin: 0;
- padding: 0;
- list-style: none;
- text-decoration: none;
- }
- /* 动画 */
- @keyframes banner{
- 0%{
- top:50px
- }
- 50%{
- top: 220px;
- }
- 100%{
- top: 50px;
- }
- }
- /* 公共标题 */
- .title{
- margin-top: 80px;
- }
- .title h3{
- font-size: 30px;
- color: #333;
- font-weight: 100;
- }
- .title p{
- font-size: 14px;
- color: #888;
- margin: 10px 0 25px;
- }
- .title b{
- display: block;
- width: 70px;
- height: 2px;
- background: #444;
- margin: 0 auto;
- }
- /* 头部区域 */
- .header {
- width: 1160px;
- height: 80px;
- margin: 0 auto;
- }
-
- .logo {
- float: left;
- margin-top: 10px;
- }
-
- .nav {
- float: left;
- margin-left: 80px;
- }
-
- .nav li{
- float: left;
- position:relative;
- }
-
- .nav li a {
- display: block;
- line-height: 80px;
- padding: 0 25px;
- font-size: 16px;
- color: #333;
- }
- .nav li:hover a{
- color: #009ee6;
- }
- .down{
- width: 150px;
- background: #333;
- border-top: 2px solid #009ee6;
- position: absolute;
- top: 80px;
- left: 0;
- display: none;
- }
- .down .list{
- height: 40px;
- line-height: 40px;
- }
- .list p{
- float: left;
- margin-left: 10px;
- color: #ccc;
- }
- .list .box{
- width: 10px;
- height: 10px;
- border-radius:50%;
- border: 2px solid #ccc;
- float: left;
- margin-top: 12px;
- margin-left: 5px;
- }
- .list:hover{
- background: #fff;
- }
- .list:hover .box{
- border-color: #009ee6;
- }
- .nav li:hover .down{
- display: block;
- }
- .tel {
- float: right;
- text-align: right;
- margin-top: 15px;
- }
-
- .tel p {
- font-size: 14px;
- color: #666;
- }
-
- .tel span {
- font-size: 22px;
- color: #333;
- }
- /* 海报区域 */
- .banner{
- width: 100%;
- height: 1270px;
- background:url(/image/1160.jpg) no-repeat center;
- position:relative;
- }
- .banner img{
- position: absolute;
- right: 10%;
- top: 10px;
- animation: banner 3s linear infinite;
- }
- /* 产品区域 */
- .pro{
- width: 1920px;
- height: 680px;
- margin: 0 auto;
- text-align: center;
- overflow: hidden;
- }
- .pro_con{
- width: 1160px;
- height: 350px;
- margin: auto;
- margin-top: 40px;
- }
- .pro_con li{
- width: 290px;
- height: 350px;
- position: relative;
- float: left;
- }
- .pro_con .black{
- width: 290px;
- height: 350px;
- background: rgba(0, 0, 0, 1);
- position: absolute;
- left: 0;
- top: 0;
- overflow: hidden;
- }
- .black img{
- margin-top: 95px;
- transition: 0.3s;
- }
- .black i{
- display: block;
- width: 20px;
- height: 2px;
- background: #fff;
- margin: 27px auto 20px;
- transition: 0.3s
- }
- .black h4{
- font-size: 22px;
- color: #fff;
- font-weight: 100;
- }
- .black p{
- padding: 0 10px;
- color: #fff;
- font-size: 14px;
- margin: 38px 0 40px;
- opacity: 0;
- transition: 0.3s
- }
- .black a{
- display: block;
- width: 98px;
- height: 28px;
- color: #fff;
- font-size: 14px;
- border: 1px solid #fff;
- margin:0 auto;
- opacity: 0;
- transition: 0.3s;
- line-height: 28px;
- }
- .pro_con li:hover .black{
- background: rgba(31, 133, 244, 0.5);
- }
- .pro_con li:hover .black img{
- margin-top: 45px;
- }
- .pro_con li:hover .black i{
- opacity: 0;
- margin-top: 0;
- }
- .pro_con li:hover .black p{
- opacity: 1;
- }
- .pro_con li:hover .black a{
- opacity: 1;
- }
-
- .btn{
- width: 130px;
- height: 32px;
- color: #009ee6;
- font-size: 14px;
- border: 1px solid #009ee6;
- display: block;
- text-align: center;
- line-height: 32px;
- margin: 30px auto 0;
- border-radius: 16px;
- }
- .btn:hover{
- background: #009ee6;
- color: #fff;
- }
-
- /* 底部区域 */
- .footer1{
- width: 1920px;
- height: 230px;
- background: #413e3e;
- margin: auto;
- }
- .ft_center{
- width: 1160px;
- height: 230px;
- border: 1px solid #fff;
- margin: 0 auto;
- }
- .ft_center h1{
- text-align: center;
- color: #fff;
- margin-top: 50px;
- }
- </style>
-
- <body>
- <!-- 头部区域 -->
- <div class="header">
- <a href="#" class="logo"><img src="image/Logo.jpg" alt=""></a>
- <ul class="nav">
- <li><a href="#">首页</a></li>
- <li><a href="#">关于我们</a>
- <div class="down">
- <div class="list">
- <div class="box"></div>
- <p>公司简历</p>
- </div>
- <div class="list">
- <div class="box"></div>
- <p>公司简历</p>
- </div>
- </div>
- </li>
- <li><a href="#">解决方案</a></li>
- <li><a href="#">成功案例</a></li>
- <li><a href="#">新闻中心</a></li>
- <li><a href="#">联系我们</a></li>
- </ul>
- <div class="tel">
- <p>全国统一电话:<br><span>123-456-789</span></p>
- </div>
- </div>
-
- <!-- 海报区域 -->
- <div class="banner">
- <img src="/image/002.jpg" alt="">
- </div>
-
- <!-- 产品区域 -->
- <div class="pro">
- <div class="title">
- <h3>《智慧校园》解决方案</h3>
- <p>Solution Show</p>
- <b></b>
- </div>
- <ul class="pro_con">
- <li>
- <img src="/image/1.jpg" alt="">
- <div class="black">
- <img src="/image/Logo.jpg" alt="">
- <i></i>
- <h4>智慧中心</h4>
- <p>专注健康,关注校园,服务校园...</p>
- <a href="#">了解详情</a>
- </div>
- </li>
- <li>
- <img src="/image/1.jpg" alt="">
- <div class="black">
- <img src="/image/Logo.jpg" alt="">
- <i></i>
- <h4>智慧中心</h4>
- <p>专注健康,关注校园,服务校园...</p>
- <a href="#">了解详情</a>
- </div>
- </li>
- <li>
- <img src="/image/1.jpg" alt="">
- <div class="black">
- <img src="/image/Logo.jpg" alt="">
- <i></i>
- <h4>智慧中心</h4>
- <p>专注健康,关注校园,服务校园...</p>
- <a href="#">了解详情</a>
- </div>
- </li>
- <li>
- <img src="/image/1.jpg" alt="">
- <div class="black">
- <img src="/image/Logo.jpg" alt="">
- <i></i>
- <h4>智慧中心</h4>
- <p>专注健康,关注校园,服务校园...</p>
- <a href="#">了解详情</a>
- </div>
- </li>
- </ul>
- <a href="#" class="btn">查看更多</a>
- </div>
-
- <!-- 底部区域 -->
- <div class="footer1">
- <div class="ft_center">
- <h1>底部展示</h1>>
- </div>
- </div>
- <div class="footer2">
-
- </div>
- </body>
-
- </html>

运行效果图如下:
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。