2016.12.12产品官网
2017-01-02 14:24
399 查看
在伯爵实验室通宵敲了13个半钟写出来的产品官网，50多个小时没有睡觉，算是对这段时间HTML&CSS学习的总结，接下来的时间要好好学习Javascript了。
但是由于目前技术问题
没有实现的部分有：
1.图片的轮播
2.关联下拉列表
HTML部分
但是由于目前技术问题
没有实现的部分有：
1.图片的轮播
2.关联下拉列表
HTML部分
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <!--引入reset.css用来消去浏览器默认的样式--> <link rel="stylesheet" type="text/css" href="css/reset.css"/> <link rel="stylesheet" type="text/css" href="css/page-index.css"/> </head> <body> <div class="header clearfix"> <div class="logo"> <a href="#" ><img src="img/header_logo.png"/></a> </div> <h1>新世界</h1> <a href="#" class="login">登录</a> <div class="login_logo"> <img src="img/登录.png"/> </div> <ul class="nav"> <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 class="banner"> <h2>Time of new life</h2> <h3>新时代，年轻的人们让我们一起<br />体验新生活，享受新生活</h3> <a href="#" class="btn01">开始体验</a> </div> <div class="function"> <div class="fct01"> <div class="circle"></div> <p class="no-border">打造全新世界观，让你更<br />爱你的生活</p> </div> <div class="fct02"> <div class="flag"></div> <p>丰富多彩的公益活动，发<br />挥新世界的主人公意识</p> </div> <div class="fct03"> <div class="flower"></div> <p>时尚的新理念，超前体验<br />未知的生活</p> </div> <div class="fct04"> <div class="square"></div> <p>完善的培养机制，培养你<br />全新的世界观</p> </div> </div> <div class="tummy clearfix"> <div class="tummy-logo"><img src="img/tummy-logo.png"/></div> <p>关于新世界，你不知道的还有什么？</p> </div> <div class="inquire"> <h2>查找新世界城市活动信息</h2> <div class="inquire-line"><img src="img/inquire-line.jpg"/></div> <h3>每个城市的有不同的活动信息，请自主查询您所需要了解的城市</h3> <form action="#" > <select name="country" class="choice01" > <option value="China">中国</option> <option value="Britain">英国</option> <option value="U.S.A">美国</option> <option value="Japan">日本</option> <option value="Thailand">泰国</option> <option value="Korea">韩国</option> </select> <select name="province" class="choice02" > <option value="Beijing">北京</option> <option value="Tianjin">天津</option> <option value="Hebei">河北</option> <option value="Shanxi">陕西</option> <option value="Inner Mongolia">内蒙古自治区</option> <option value="Liaoning">辽宁省</option> </select> <select name="city" class="choice03" > <option value="Beijing">北京</option> <option value="Tianjin">天津</option> <option value="Hebei">河北</option> <option value="Shanxi">陕西</option> <option value="Inner Mongolia">内蒙古自治区</option> <option value="Liaoning">辽宁省</option> </select> <input type="submit" value="搜 索" class="choice04"/> </form> </div> <div class="activity clearfix"> <div class="activity02"> <p>新世界/<span id="number">01</span></p> <div class="content">新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界</div> <a href="#" class="btn03">更多详情</a> <ul class="btn04"> <li><img src="img/button02.png"/></li> <li>& 4000 lt;img src="img/button03.jpg"/></li> <li><img src="img/button03.jpg"/></li> </ul> </div> <div class="activity-Beijing"> <h2>新世界</h2> <h3>TIME</h3> <h4>@新世界-北京<br />2016.04.01 </h4> </div> </div> <div class="readmore clearfix"> <div class="red"> <h3>新时代<br/>关于爱生活的我们</h3> <div id="readmore-line01"><img src="img/remore-line01.png"/></div> <a href="#" class="btn05">查看更多</a> </div> <div class="white"> <h3>新时代<br/>关于爱生活的我们</h3> <div id="readmore-line02"><img src="img/remore-line02.png"/></div> <a href="#" class="btn06">查看更多</a> </div> <div class="yellow"></div> </div> <div class="volunteer"> <h2>成为我们的志愿者</h2> <div class="volunter-line"><img src="img/volunter-line.png"/></div> <h3>新世界的大家庭需要每一个爱生活的人的加入，如果你够年轻，有梦想，有激情<br />那就不要犹豫，快来加入我们，成为改变所有人生活的人 </h3> </div> <div class="information clearfix"> <div class="explain"> <h3>新世界志愿者协议</h3> <h4>加入新世界志愿者的人员必须遵守中华人民共共和国的<br/>相关法律法规，并且本着平等资源的原则 ...... </h4> <h3>新世界志愿者权利</h3> <h4>加入新世界志愿者的人员必须遵守中华人民共共和国的<br/>相关法律法规，并且本着平等资源的原则 ......</h4> <h3>更多条款</h3> </div> <div class="write"> <div class="name-age"> <form action="#"> <input type="txt" name="name" placeholder="姓名：" class="btn07"/> <input type="txt" name="age" placeholder="年龄：" class="btn07"/><br /><br /> <input type="txt" name="contect" placeholder="联系方式：" class="btn07"/> <input type="txt" name="address" placeholder="联系地址：" class="btn07"/><br /><br /> <textarea name="dream" placeholder="请简单描述您梦想的生活：" class="btn08"></textarea> <button class="btn09">提交申请</button> </form> </div> </div> </div> <div class="bottom clearfix"> <h2>联系我们</h2> <p>为了更好的获取我们最新的产品资讯，您可以留下您的电子邮箱快速订阅我们的产品资讯<br />也可以通过以下任何方式关注我们动态</p> <form action="#""> <input type="txt" name="e-mail" placeholder="someone@email.com" class="btn10" /><button class="btn11">提交</button> </form> <ul class="tools"> <li><a href="#"><img src="img/QQ.jpg"/></a></li> <li><a href="#"><img src="img/weibo.jpg"/></a></li> <li><a href="#"><img src="img/tiwwer.jpg"/></a></li> <li><a href="#"><img src="img/earth.jpg"/></a></li> </ul> </div> <div class="footer"> <div class="left">@2016新世界</div> <a href="#" class="right">Back to top</a> </div> </body> </html>
CSS部分
body{
/*height: 5000px;*/
/*overflow-x: hidden;*/
}
/*header开始*/
.header{
/*height: 56px;*/
/*background-color: #bfa;*/
}
/*解决高度塌陷*/
.clearfix:before,
.clearfix:after{
content: "";
display: table;
clear: both;
}
.clearfix{
zoom: 1;
}
/*设置logo*/
.header .logo{
float: left;
margin: 13px 11px 12px 59px;
}
/*设置文字*/
.header h1{
color: #393a3a;
font: 21px/56px 黑体;
display: inline
}
/*设置导航条*/
.header .nav{
float: right;
padding:16px 32px 23px 0;
}
.header li{
float: left;
padding-left: 40px;
}
.header li a{
color: #787b83;
font: 14px 微软雅黑;
}
.nav a:hover{
color: #e74f4d;
border-bottom: solid 1px #e74f4d;
}
/*设置登录*/
.header .login_logo{
float: right;
padding: 16px 6px 23px 0;
}
.header .login{
float: right;
color: #e74f4d;
font: 14px "微软雅黑";
padding: 16px 67px 23px 0px;
}
.header .login:hover{
color: #f67d7b;
}
/*header结束*/
/*banner开始*/
.banner{
height: 690px;
/*width: 1349px;*/
background: url(../img/picture01.jpg) no-repeat;
position: relative;
}
/*设置h2*/
.banner h2{
position: absolute;
top: 231px;
left: 117px;
color: #fff;
font: 60px "微软雅黑";
}
/*设置h3*/
.banner h3{
position: absolute;
top: 311px;
left: 124px;
color: #fff;
font: 21px/32px "微软雅黑";
}
/*设置按钮*/
.banner .btn01{
position: absolute;
top: 429px;
left: 125px;
width: 331px;
height: 65px;
background: url(../img/button01.jpg) no-repeat;
color: #fff;
font: 30px/65px "微软雅黑";
text-align: center;
display: block;
}
.banner .btn01:hover{
color: #ab3b3a;
}
/*banner结束*/
/*function开始*/
.function{
height: 250px;
}
.function .fct01,.function .fct02,
.function .fct03,.function .fct04{
width: 25%;
height: 250px;
float: left;
/*padding-top: 44px;*/
position: relative;
}
/*设置fct01*/
.fct01 .circle{
width: 42px;
height: 42px;
background: url(../img/circle.png) no-repeat;
position: absolute;
top: 45px;
left: 145px;
}
.fct01 p{
position: absolute;
top: 134px;
left: 0px;
color: #767777;
font: 14px/1.5 "黑体";
text-align: center;
margin-bottom: 87px;
}
/*设置fct02*/
.fct02 .flag{
width: 42px;
height: 42px;
background: url(../img/flag.png) no-repeat;
position: absolute;
top: 45px;
left: 145px;
}
.fct02 p{
position: absolute;
top: 134px;
left: 0px;
color: #767777;
font: 14px/1.5 "黑体";
text-align: center;
margin-bottom: 87px;
}
/*设置fct03*/
.fct03 .flower{
width: 42px;
height: 42px;
background: url(../img/flower.png) no-repeat;
position: absolute;
top: 45px;
left: 145px;
}
.fct03 p{
position: absolute;
top: 134px;
left: 0px;
color: #767777;
font: 14px/1.5 "黑体";
text-align: center;
margin-bottom: 87px;
}
/*设置fct04*/
.fct04 .square{
width: 42px;
height: 42px;
background: url(../img/square.png) no-repeat;
position: absolute;
top: 45px;
left: 145px;
}
.fct04 p{
position: absolute;
top: 134px;
left: 0px;
color: #767777;
font: 14px/1.5 "黑体";
text-align: center;
margin-bottom: 87px;
}
/*设置fct01,fct02，fct03，fct04中p的左边框*/
.fct01 p,.fct02 p,.fct03 p,.fct04 p{
padding-left: 90px;
border-left: rgb(118,119,119) 1px solid;
}
/*设置fct01中p没有左边框*/
.fct01 .no-border{
border-left:none;
}
/*function结束*/
/*tummy开始*/
.tummy{
background: url(../img/tummy-bg.jpg) repeat-x;
height: 360px;
position: relative;
}
.tummy .tummy-logo{
position: absolute;
top: 89px;
left:595px;
}
.tummy p{
color: #323333;
font: 53.59px 黑体;
position: absolute;
top: 229px;
left: 213px;
}
/*tummy结束*/
/*inquire开始*/
.inquire{
background: url(../img/inquire-bg.jpg) no-repeat;
height: 341px;
position: relative;
}
/*设置h2*/
.inquire h2{
color: #fff;
font: 21px "微软雅黑";
position: absolute;
top: 53px;
left: 502px;
}
/*设置h2下面的横线*/
.inquire .inquire-line{
position: absolute;
top: 83px;
left: 601px;
}
/*设置h3*/
.inquire h3{
color: #fff;
font: 12px "微软雅黑";
position: absolute;
top: 116px;
left: 449px;
}
/*设置下拉列表*/
.choice01{
height: 36px;
width: 236px;
color:#a8aaaa;
font: 12px "微软雅黑";
position: absolute;
top: 180px;
left:126px;
}
.choice02{
height: 36px;
width: 236px;
color:#a8aaaa;
font: 12px "微软雅黑";
position: absolute;
top: 180px;
left:390px;
}
.choice03{
height: 36px;
width: 236px;
color:#a8aaaa;
font: 12px "微软雅黑";
position: absolute;
top: 180px;
left:655px;
}
.choice04{
height: 36px;
width: 236px;
background-color: rgb(190,78,72);
color: #FFFFFF;
font: 14px "微软雅黑";
position: absolute;
left: 920px;
top: 180px;
}
/*inquire结束*/
/*activity开始*/
.activity{
height: 567px;
}
/*设置文字*/
.activity .activity02{
float: right;
width: 33.3%;
height: 567px;
}
.activity02 p{
float: left;
color: black;
font: bold 20px 黑体;
margin: 167px 178px 33px;
}
#number{
color: rgb(231,79,77);
}
.activity02 .content{
color: #323333;
font: 14px/30px "微软雅黑";
margin: 0 55px 50px;
}
/*设置大按钮*/
.activity02 .btn03{
padding: 9px 27px;
border: solid 1px #e25c60;
color: #e25c60;
font: 12px "微软雅黑";
margin: 0 168px;
}
/*设置小圆按钮*/
.activity02 .btn04{
float: left;
margin: 24px 0 0 190px;
}
.btn04 li{
float: left;
margin-right: 14px;
}
.btn04 li:hover{
background: url(../img/button02.png) no-repeat;
}
/*设置图片*/
.activity .activity-Beijing{
float: left;
background: url(../img/activity-bg.jpg) no-repeat;
height: 567px;
width: 66.7%;
}
.activity-Beijing h2{
color: #fff;
font:49.47px "微软雅黑";
margin: 123px 0 0 380px;
}
.activity-Beijing h3{
color: #fff;
font: 157.79px/107.79px "微软雅黑";
margin: 11px 0 0 265px;
}
.activity-Beijing h4{
color: #FFF;
font: 21.91px/1.75 "微软雅黑";
margin: 40px 0 0 377px;
}
/*activity结束*/
/*readmore开始*/
.readmore{
height: 521px;
}
.readmore .red{
float: left;
background-color: #e74f4d;
height: 521px;
width: 33.3%;
}
.red h3{
color: #ffffff;
font: 21px/1.5 黑体;
text-align: center;
margin-top: 174px;
}
#readmore-line01{
padding: 16px 0 36px 208px;
}
.readmore .btn05{
color: #fff;
font: 21px 黑体;
padding: 12px 42px;
border: solid 1px #fff;
margin-left: 140px;
}
.readmore .white{
float: left;
background-color: #fff;
height: 521px;
width: 33.4%;
}
.white h3{
color: #e74f4d;
font: 21px/1.5 黑体;
text-align: center;
margin-top: 174px;
}
#readmore-line02{
padding: 16px 0 36px 208px;
}
.readmore .btn06{
color: #e74f4d;
font: 21px 黑体;
padding: 12px 42px;
border: solid 1px #e74f4d;
margin-left: 140px;
}
.readmore .yellow{
float: left;
height: 521px;
width: 33.3%;
background: url(../img/picture02.jpg) no-repeat;
}
/*readmore结束*/
/*volunteer开始*/
.volunteer h2{
font: 21px 黑体;
color: #323333;
text-align: center;
margin-top: 119px;
}
.volunteer .volunter-line{
padding: 0px 0px 10px 660px;
}
.volunteer h3{
color: #aaaaaa;
font: 12px "微软雅黑";
text-align: center;
margin-bottom: 105px;
}
/*volunteer结束*/
/*information开始*/
.information{
/*height: 500px;*/
}
.information .explain{
float: left;
width: 317px;
height: 420px;
padding-left:139px ;
}
.explain h3{
color: #5c5451;
font: 14px 黑体;
margin-bottom: 18px;
}
.explain h4{
color: #323333;
font: 12px/2.5 宋体;
margin-bottom: 47px;
}
.information .write{
float: left;
width: 753px;
height: 420px;
padding: 0 80px 0 60px;
}
.information .btn07{
background: url(../img/button04.jpg) no-repeat;
width: 311px;
height: 41px;
border: none;
margin-left:17px ;
text-indent:1em ;
font: 12px/41px 宋体;
color: #5c5451;
}
.information .btn08{
background: url(../img/button05.jpg) no-repeat;
border: none;
resize: none;
width: 639px;
height: 114px;
color: #5c5451;
font: 12px 宋体;
margin-left:17px ;
text-indent:1em ;
overflow: hidden;
padding-top: 7px;
}
.information .btn09{
background: url(../img/button06.jpg) no-repeat;
width: 639px;
height: 41px;
color: #323333;
font: 14px 黑体;
margin-left: 18px;
margin-top:13px ;
}
.information .btn09:hover{
color: #e74f4d;
}
/*information结束*/
/*bottom开始*/
.bottom{
height: 357px;
background: url(../img/bottom-bg.jpg) repeat-x;
}
.bottom h2{
color: #ffffff;
font: 21px 黑体;
text-align: center;
margin: 90px 0 11px 0;
}
.bottom p{
color: #fff;
font: 12px 宋体;
text-align: center;
}
.bottom .btn10{
height: 41px;
width: 431px;
margin: 31px 0 0 420px;
color: #aaaaaa;
font: 14px "微软雅黑";
text-indent: 1em;
}
.bottom .btn11{
width: 80px;
height: 44px;
background-color: rgb(111,113,120);
color: #ffffff;
font: 15px "微软雅黑";
text-align: center;
/*border: none;*/
margin: 30px 0 0 0;
}
.bottom .tools{
float: left;
padding: 37px 0 0 572px;
}
.tools li{
float: left;
margin-right:28px ;
}
/*bottom结束*/
/*footer开始*/
.footer{
background: url(../img/footer-bg.jpg) repeat-x;
height: 58px;
}
.footer .left{
color: #fff;
font: 12px 宋体;
float: left;
padding: 31px 0 0 100px;
}
.footer .right{
color: #fff;
font: 12px 宋体;
float: right;
padding: 31px 40px 0 0;
}
/*footer结束*/
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 有个困扰我很久问题想让前辈们帮帮忙分析！！
- 看了很长时间都找不出为什么运行不成功，求教各位朋友
- dubbo2.5-spring4-mybastis3.2-springmvc4-mongodb3.4-redis3.2整合（四）Spring AOP中使用log4j实现http请求日志入mongodb
- hibernate 缓存会不会脏数据
- Android Studio 利用GsonFormat插件解析gson格式问题
- java设计模式之组合模式(Composite)
- httpd安全控制
- coreplot 中怎样给固定点设置符号symbol（就是圆圈、五星、雪花那些），它里面是全部设置，我之需要Y值较大的设置，有没有好的方法，谢谢！
- 我使用zxing的jar包，在6.0系统上（Nexus 5x，安卓6.0.1官方系统）扫描时成像是反的？
- Hdfs上传文件dataNode无法启动
- as使用自动导入v7包，一直没使用as创建过项目，哎
- 程序员面试金典： 9.4树与图 4.7找出二叉树种某两个结点的第一个共同祖先---O(N^2)解法
- 80C51学习 流水灯
- jQuery表单验证以及将表单序列化为json对象小练习
- BZOJ 1226: [SDOI2009]学校食堂Dining
- Win7中怎么不经确认直接删除文件至回收站
- mongodb,ngrok,nginx在 Linux上的相关命令和Linux相关线程命令
- ZCMU-1774-最短的串
- Memory Management (DXE) 代码简析
- JDBC：通过 ResultSet 执行查询操作