IMWeb前端学习笔记——Day5

来源：互联网发布：软件系统维护收费标准编辑：程序博客网时间：2024/06/04 17:58
学习css第五天，写了一个静态页面，充分利用了position、float等属性，并巩固了盒子模型的知识。
demo链接：点击打开链接
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>仿博雅首页</title><style type="text/css">*{margin: 0;padding: 0;}.cl{clear: both;}body{font-family: "Microsoft YaHei","SimSun";}.inner_c{width: 1100px;margin: 0 auto;}.header{height: 58px;background-color: #191D3A;}.header .logo{float: left;padding-left: 12px;margin-right: 39px;width: 174px;height: 58px;}.header .logo a{display: block;width: 174px;height: 58px;background:url(images/logo.png) no-repeat;text-indent: -999em;}.header .nav{float: left;width: 607px;height: 58px;}.header .nav ul{list-style: none;}.header .nav ul li{float: left;width: 100px;height: 58px;border-left: 1px solid #252947;}.header .nav ul li.last{border-right: 1px solid #252947;}.header .nav ul li a{display: block;width: 100px;height: 58px;text-align: center;line-height: 58px;color:#818496;text-decoration: none;font-size: 14px;}.header .nav ul li a:hover{background-color: #252947;color:#E2E4ED;}.header .nav ul li.current a{background-color: #252947;color:#E2E4ED;}.header .jrwm{float: left;padding-top: 12px;padding-left: 28px;}.header .jrwm a{display: block;width: 98px;height: 32px;background-color: #38B774;border: 1px solid #3ACA7A;border-radius: 4px;text-align: center;line-height: 32px;text-decoration: none;color:white;font-size: 14px;}.header .jrwm a:hover{background-color: #48C784;}.header .language {float: left;padding-top: 20px;padding-left: 28px;}.header .language span{padding-left: 10px;}.header .language span a{font-size: 14px;text-decoration: none;outline: none;cursor: pointer;color: #38B774;}.header .language span a:hover{color: #ccc;}.header .language span a.CN{color: #ccc;padding-right: 5px;}.banner{height: 465px;background: url(images/banner.jpg) no-repeat center center;}.content{padding-top: 50px;height: 650px;background:url(images/indexmainbg.jpg) no-repeat center bottom;}.content .product{height: 229px;border-bottom: 1px solid #DBE1E7;}.content .product ul{list-style: none;}.content .product ul li{float: left;width: 218px;height: 229px;margin-right: 43px;}.content .product ul li.last{margin-right: 0;width: 217px;}.content .product ul li p.pro_image img{width: 100%;height: 130px;}.content .product ul li h3{text-align: center;line-height: 38px;font-size: 14px;font-weight: bold;}.content .product ul li p.play{text-align: center;}.content .product ul li p.play a{font-size: 12px;line-height: 12px;color:#38B774;text-decoration: none;padding-right: 10px;background: url(images/sanjiaoxing.png) no-repeat right center;}.content .info{padding-top: 53px;}.content .info .boyaanews{float: left;width: 500px;background:url(images/bynewsbg.jpg) no-repeat;padding-top: 111px;position: relative;}.content .info .boyaajobs{float: left;width: 500px;height: 314px;background:url(images/byhrbg3.jpg) no-repeat;}.content .info .boyaanews ul{list-style: none;padding: 0 20px;}.content .info .boyaanews .more{position: absolute;top: 40px;left: 218px;background-color: blue;}.content .info .boyaanews ul li{line-height: 50px;border-bottom: 1px solid #DBE1E7;font-size: 12px;}.content .info .boyaanews ul li span{color:#AFBECF;margin-right: 22px;}.content .info .boyaanews ul li a{color:#444866;text-decoration: none;font-size: 14px;}.content .info .boyaanews ul li a:hover{color:orange;}.content .info .boyaajobs{position: relative;}.content .info .boyaajobs .title{padding-top: 40px;padding-left: 78px;}.content .info .boyaajobs .more2{position: absolute;top: 40px;left: 218px;background-color: blue;}.content .info .boyaajobs .title h3{width: 119px;height: 51px;background:url(images/zczp.png) no-repeat;text-indent: -999em;}.content .info .boyaajobs h4{padding-top: 18px;padding-left: 20px;color:white;font-size: 14px;font-weight: bold;}.content .info .boyaajobs ul{padding-left: 20px;width: 305px;list-style: none;}.content .info .boyaajobs ul li{border-bottom: 1px solid #6FDEA3;line-height: 37px;}.content .info .boyaajobs ul li a{font-size: 14px;color:white;text-decoration: none;}.content .info .boyaajobs ul li a:hover{background-color: orange;}.foot{height: 91px;background-color: #191D3A;}.foot .map{float: left;width: 371px;height: 91px;}.foot .map p{text-align:center;line-height: 91px;}.foot .map p a{text-decoration: none;font-size: 12px;color: #526E68;}.foot .right{float: left;width: 888px;height: 91px;position: relative;}.foot .right p{float: left;text-align: center;line-height: 91px;font-size: 12px;color: #526E68;}.foot .right a{position: absolute;right: 150px;top: 20px;}</style></head><body><div class="header"><div class="inner_c"><h1 class="logo"><a href="#">博雅互动-世界上最好的游戏公司</a></h1><div class="nav"><ul><li class="current"><a href="#">首页</a></li><li><a href="#">博雅游戏</a></li><li class="xiaoming"><a href="#">博雅新闻</a></li><li><a href="#">关于我们</a></li><li><a href="#">客服中心</a></li><li class="last"><a href="#">投资者关系</a></li></ul></div><div class="jrwm"><a href="#">加入我们</a></div><div class="language"><span><a class="CN" href="#">中</a><a class="EN"href="#">EN</a></span></div></div></div><div class="cl"></div><div class="banner"></div><div class="content"><div class="inner_c"><div class="product"><ul><li><p class="pro_image"><img src="images/bpt.jpg" alt="" /></p><h3>BPT宣传片</h3><p class="play"><a href="">点击播放</a></p></li><li><p class="pro_image"><img src="images/gamepic1.jpg" alt="" /></p><h3>BPT宣传片</h3><p class="play"><a href="">点击播放</a></p></li><li><p class="pro_image"><img src="images/gamepic3.jpg" alt="" /></p><h3>BPT宣传片</h3><p class="play"><a href="">点击播放</a></p></li><li class="last"><p class="pro_image"><img src="images/video.jpg" alt="" /></p><h3>BPT宣传片</h3><p class="play"><a href="">点击播放</a></p></li></ul></div><div class="info"><div class="boyaanews"><a href="" class="more"><img src="images/more.png" alt="" /></a><ul><li><span>09 / 28</span><a href="">博雅互动公布2016全年业绩，经调整纯利增长46.5%</a></li><li><span>09 / 28</span><a href="">博雅互动出席“TOP棋牌智力游戏联盟”启动仪式</a></li><li><span>09 / 28</span><a href="">博雅互动荣获“2016年度最佳棋牌游戏&棋牌大厅金苹果奖”</a></li><li><span>09 / 28</span><a href="">博雅互动泰国分公司携手玩家开展公益赈灾行动</a></li></ul></div><div class="boyaajobs"><a href="" class="more2"><img src="images/more2.png" alt="" /></a><div class="title"><h3>博雅招聘</h3></div><h4>专场招聘岗位:</h4><ul><li><a href="#">PHP开发工程师</a></li><li><a href="#">C++开发工程师</a></li><li><a href="#">WEB前端开发工程师</a></li><li><a href="#">大数据开发工程师</a></li></ul></div></div></div></div><div class="foot"><div class="map"><p><a href="#">网站地图|免责声明</a></p></div><div class="right"><p>Copyright 2004-2017 博雅互动（Boyaa Interactive）粤ICP备05062536号 增值电信业务经营许可证：粤B2-20110503</p><a href="#" target="_blank"><img border="0" width="36" height="50" src="images/govIcon.gif" alt="" /></a></div></div></body></html>
0 0