静态页面——鸿睿思博

效果图

HTML

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="css/5.9css.css">
</head>
<body><header><a href="" class="logo"><img src="data:images/logo4.13.png"></a><a href="" class="old">老版网站入口</a><div class="nav"><a href="" class="nav_1"><p>首页</p><span>HOME</span></a><a href=""><p>网站建设</p><span>SEVICE</span></a><a href=""><p>解决方案</p><span>SOLUTION</span></a><a href=""><p>客户案例</p><span>CUSTOMER</span></a><a href=""><p>机构简介</p><span>MECHANISM</span></a><a href=""><p>联系我们</p><span>CONTACT US</span></a></div></header><div class="banner"><a href="" class="pic"><img src="data:images/banner01.jpg" alt=""></a><div class="position_box"><span class="arrow_left"></span><a></a><a></a><a></a><a class="current"></a><span class="arrow_right"></span></div></div><div class="service"><a href=""><img src="data:images/wzjs.png" alt=""></a><a href=""><img src="data:images/sjyy.png" alt=""></a><a href="" class="yyxt"><img src="data:images/yyxt.png" alt=""></a></div><div class="zixun"></div><div class="case"><div class="title_box"><div class="title"><h2>最新案例</h2><span>致力于提升客户品牌形象，实现客户商业化目标</span></div><div class="btn"><a></a><a class="btn_right"></a></div></div><div class="intro"><div class="product"><img src="data:images/anli01.png " alt=""><div class="detall"><div>清华大学-汽车工程系发动机燃烧</div><span>Date: 14-3-1</span><span class="span2">所属行业：学校案例</span></div></div><div class="product"><img src="data:images/anli02.png " alt=""><div class="detall"><div>爱情海</div><span>Date: 14-3-1</span><span class="span2">所属行业：房地产业</span></div></div><div class="product"><img src="data:images/anli03.png " alt=""><div class="detall"><div>方圆集团</div><span>Date: 14-3-1</span><span class="span2">所属行业：集团案例</span></div></div><div class="product product4"><img src="data:images/anli04.png " alt=""><div class="detall"><div>沃兰珠宝</div><span>Date: 14-3-1</span><span class="span2">所属类型：电子商务</span></div></div></div></div><div class="about_bg"><div class="about"><div class="news"><div class="news_title"><a href="">公司动态</a><a href="">行业资讯</a></div><div class="news_box"><div class="number"><i>09</i><i>NEWS</i></div><div class="outline"><h2>祝贺首都服务业协会官方网站如期上线</h2><span>2014-03-11</span><p>经过鸿睿思博团队1个半月的共同协作，于2014年3月10日首度科技服务行业协会官方网站顺利上线，鸿睿思博致力于高端网站制作服务，合作完成受到客户</p></div></div><div class="news_box"><div class="number"><i>10</i><i>NEWS</i></div><div class="outline"><h2>祝贺首都服务业协会官方网站如期上线</h2><span>2014-03-11</span><p>经过鸿睿思博团队1个半月的共同协作，于2014年3月10日首度科技服务行业协会官方网站顺利上线，鸿睿思博致力于高端网站制作服务，合作完成受到客户</p></div></div></div><div class="contact"><div class="tel_box"><span>7×24小时全国服务热线</span><h1>010-85790046</h1><a href="" class="a1">在线咨询</a><a href="" class="a2">我要留言</a></div><img src="data:images/erweima.png" alt=""><form action="" class="user"><span>项目在线监控管理系统</span><input type="text"><input type="password"><br><button>登录</button><a href="">忘记密码</a></form></div></div></div><footer><div class="footer_center"><div class="footer_nav"><ul><li><a href="">首页</a><span>|</span></li><li><a href="">网站建设</a><span>|</span></li><li><a href="">解决方案</a><span>|</span></li><li><a href="">客户案例</a><span>|</span></li><li><a href="">机构简介</a><span>|</span></li><li><a href="">联系我们</a></li></ul><p>©北京鸿睿思博科技有限公司 All Right Reserved 版权所有 京ICP备11017857号</p><b>电话：+86-010-85790046 传真：0+86-010-85790045-901 投诉电话：+86-010-85790059</b><div class="link"><span>友情链接</span><span>Links</span></div><div class="links"><a href="">◎长春网站建设</a><a href="">◎宁波网络公司</a><a href="">◎苏州网络推广</a><a href="">◎成都seo</a><a href="">◎成都网站建设</a></div></div><a href="" class="footer_logo"><img src="data:images/logo_footer.png" alt=""></a></div></footer>
</body>
</html>

CSS

body,p{margin: 0;
}
*{font-family: '微软雅黑';
}
a{text-decoration: none;
}
ul{margin: 0;padding: 0;list-style: none;
}
header{width: 980px;height: 90px;margin: auto;
}
.logo{float: left;margin: 18px 18px 0 0;
}
.old{color:#666666 ;font-size: 12px;float: left;margin-top: 60px;
}
.nav{float: right;margin-top: 20px;
}
.nav a{float: left;width: 90px;display:block ;text-align: center;height: 70px;color: #444444;
}
.nav a p{font-family: '微软雅黑';font-size: 14px;margin-top: 22px;/*color: inherit;    颜色继承*/
}
.nav a span{color: #ccc;font-size: 10px;
}
.nav .nav_1{    /*.nav_1必须带父级，否则优先级.nav a{winth:90px}*/width: 58px;background-color: brown;
}
.nav .nav_1 p{color: white;
}
.nav a:hover{    /*hover 鼠标悬停时   active 鼠标按下时*/background-color: brown;color: white;
}
.banner{width: 980px;height: 457px;margin: auto;position: relative;
}
.pic{position: absolute;left:50% ;margin-left: -662px;}
.position_box{position: absolute;left: 38%;bottom: 20px;
}
.position_box span{display: block;width: 10px;height: 15px;background-image: url(../images/arrow.png);float: left;
}
.position_box .arrow_right{background-position: -10px 0;margin-left: 56px;
}
.position_box a{display: block;width: 15px;height: 15px;background-color: #cc0000;float: left;margin-right: 10px;
}
.position_box .arrow_left{margin-right: 66px;
}
.position_box .current{background-color: white;
}
.service{width: 980px;margin: 26px auto ;overflow: hidden;
}
.service a{float: left;margin-right: 10px;
}
.service .yyxt{margin-right: 0;
}
.zixun{width: 102px;height: 111px;background-image:url(../images/zixun.png);position: fixed;right: 20px;top: 77%;
}
.case{width: 980px;margin: auto;
}
.title_box{border-bottom: 1px solid #999 ;overflow: hidden;
}
.title{float: left;
}
.title h2{font-size: 22px;color: #333333;margin: 0;margin-bottom: 10px;
}
.title span{color: #777777;font-size: 12px;
}
.btn{float: right;margin-top: 30px;margin-bottom: 10px;
}
.btn a{width: 18px;height: 19px;background-image: url(../images/more.png);display: block;float: left;
}
.btn .btn_right{background-position: -18px 0;
}
.intro{margin-top: 40px;overflow: hidden;
}
.product{float: left;margin-right: 48px;
}
.detall{width: 208px;background-color: #f1f0ee;
}
.detall div{font-size: 12px;color: #333333;margin: 0 0 10px 5px;padding-top: 10px;
}
.detall span{font-size: 12px;color: #666666;display: block;margin-left: 5px;margin-top: 5px;
}
.detall .span2{padding-bottom: 20px;
}
.product4{margin-right: 0;
}
.about_bg{background-color: #f1f0ee;margin-top: 45px;padding-top: 15px;padding-bottom: 20px;
}
.about{width: 980px;overflow: hidden;margin: auto;
}
.news{float: left;
}
.news_title a{width: 71px;height: 22px;display: block;float: left;font-size: 12px;text-align: center;line-height: 22px;color: #444444;
}
.news_title a:nth-child(1){background-image: url(../images/news_bg.png);color: white;
}
.news_title{overflow: hidden;
}
.news_box{margin-top: 20px;overflow: hidden;
}
.number{float: left;width: 62px;height: 62px;border-right: dashed #ccc 1px;
}
.number i:nth-child(1){font-size: 40px;color: #777;display: block;margin-top: -5px;
}
.number i:nth-child(2){font-size: 18px;color: #999;display: block;margin-top: -15px;
}
.outline{float: right;width: 520px;margin-left: 10px;
}
.outline h2{margin: 0;float: left;font-size: 14px;color: #444444;font-weight: normal;margin-bottom: 10px;
}
.outline span{float: right;font-size: 12px;color: #999;
}
.outline p{font-size: 12px;color: #666;clear: both;width: 428px;
}
.contact{float: right;width: 310px;
}
.tel_box{float: left;margin-bottom: 20px;
}
.tel_box span{font-size: 14px;color: #444;
}
.tel_box h1{color: #cc0000;font-size: 22px;margin: 0;margin-bottom: 10px;
}
.tel_box a{display: block;height: 16px;float: left;font-size: 12px;color: #666;padding-left: 18px;
}
.tel_box .a1{background-image: url(../images/icon1.png);background-repeat: no-repeat;margin-right: 10px;
}
.tel_box .a2{background-image: url(../images/icon2.png);background-repeat: no-repeat;
}
.contact img{float: right;
}
.user{clear: both;
}
.user span{font-size: 14px;color: #444;display: block;margin-bottom: 10px;
}
.user input{padding: 0;width: 120px;height: 28px;border: #999999 1px solid;
}
.user button{width: 52px;height: 24px;background-color: #cc0000;color: white;border: none;margin-top: 10px;margin-right: 6px;
}
.user a{font-size: 12px;color: #999999;
}
footer{background-image: url(../images/footet-bg.png);overflow: hidden;padding-top: 20px;
}
.footer_center{width: 980px;margin: auto;
}
.footer_nav{float: left;
}
.footer_logo{float: right;
}
.footer_nav ul{overflow: hidden;
}
.footer_nav ul li{float: left;
}
.footer_nav ul li a{color: white;font-size: 14px;float: left;
}
.footer_nav ul li span{font-size: 12px;color: #999;margin: 0 6px;float: left;
}
.footer_nav p{margin: 0;font-size: 12px;color: white;margin: 6px 0;
}
.footer_nav b{font-weight: normal;font-size: 12px;color: white;
}
.link span:nth-child(1){color: white;font-size: 12px;padding-left: 15px;background-image: url(../images/lianjie.png);background-repeat: no-repeat;
}
.link span:nth-child(2){font-size: 12px;color: #999;
}
link{margin: 5px 0;
}
.links a{font-size: 12px;color: #999;float: left;margin-right: 20px;
}
.links{margin-bottom: 30px;
}

静态页面——鸿睿思博相关推荐

SpringBoot--访问静态页面
原文网址:SpringBoot--访问静态页面_IT利刃出鞘的博客-CSDN博客简介位置与优先级位置 spring boot的静态资源: static目录:css.js.图片等 template ...
爬虫之静态页面和动态页面
***## 标题*爬虫有静态页面和动态页面,这里先讲解静态的选取,先看网页的源代码里面是否有需要爬取的关键词,有就是静态页面直接调用cookile get得到数据 **关于python的爬虫的一些内容 ...
github创建静态页面_如何在10分钟内使用GitHub Pages创建免费的静态站点
github创建静态页面 Static sites have become all the rage, and with good reason – they are blazingly fast a ...
ASP.Net MVC如何访问的静态页面
MVC开发中,因为View文件夹下的web.config文件默认会把任何方法的请求的任何文件,路径都交给 System.Web.HttpNotFoundHandler 去处理.起到Controller ...
php生成静态页面并预览
一.前言最近要找房子搬家,作为一名青漂,每年换房子都要成为习惯了,不过还好,偌大的城市还能容得下身体和灵魂. 这篇文章主要是记录一下php生成静态页面的大致步骤,关于页面静态化,大家想必都听说过,但 ...
SSM 返回静态页面HTML Controller 被递归调用引起的StackOverflowError
一背景最近在做工程实践,想实现这么一个效果: 前端url请求地址:localhost:8080/idevtools/search 后端返回一个静态页面HTML:search.html 按照网上说的 ...
html华为官网静态网页,Web静态页面：华为商城主页
华为商城主页(Web静态页面) 这是我的第一篇博客,主要分享一下期末大作业:华为商城主页,只涉及静态页面. 结构框架: 华为商城首页,根据每个部分的功能,可以将整个页面分为三部分: 头部header. ...
用phpcms如何将静态页面制作成企业网站（中）
上篇博客中讲到了该修改网页的中间部分中间的内容是这样的,有标题和内容,里面的内容被代码替代,运行起来就这样的里面的内容就可以在后台管理那里添加再来看代码部分 <div class=&quo ...
用phpcms如何将静态页面制作成企业网站（上）
首先,先要准备好这个静态网页的源文件,如图 bs里面是一些css和js的文件,img则是放图片的,文件中的index是网页的首页运行一下,看看是这样的然后打开phpcms文件,上篇博客中有提到, ...

静态页面——鸿睿思博

静态页面——鸿睿思博相关推荐

最新文章

热门文章