博雅互动第三遍代码：<!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>Document</title><style type="text/css">*{margin: 0px;padding: 0px;}body{font-family: "微软雅黑","宋体";}.cl{clear: both;}.header{height: 58px;background-color: #191D3A;}.header .inner_c{height: 58px;width: 1000px;margin: 0 auto;}.header .inner_c h1{padding-left: 15px;float: left;width: 170px;height: 58px;margin-right: 40px;}.header .inner_c .nav{height: 58px;width: 607px;float: left;}.header .inner_c .nav ul{list-style: none;}.header .inner_c .nav ul li{width: 100px;height: 58px;border-left: 1px solid #252947;float: left;text-align: center;line-height: 58px;font-size: 14px;}.header .inner_c .nav ul li.last{border-right: 1px solid #252947;}.header .inner_c .nav ul li a{display: block;width: 100px;height: 58px;color: white;font-size: 14px;text-decoration: none;}.header .inner_c .nav ul li a:hover{background-color: #252947;}.header .inner_c a.jrwm{display: block;float: left;width: 100px;height: 34px;margin-left: 48px;line-height: 34px;text-align: center;background-color: #38B774;position: relative;top: 12px;left: 0px;text-decoration: none;color: white;border-radius: 4px;font-size: 14px;}.header .inner_c a.jrwm:hover{background-color: orange;}.banner{height: 463px;background: url(images/banner.jpg) no-repeat center top;position: relative;}.banner .circles{width: 120px;height: 12px;_font-size: 0px;position: absolute;left: 50%;margin-left: -60px;bottom: 20px;}.banner .circles ul{list-style: none;}.banner .circles ul li{float: left;width: 12px;height: 12px;background:url(images/dian1.png) no-repeat;margin-right: 15px;cursor: pointer;} .banner .circles ul li.last{margin-right: 0px;}.banner .circles ul li.current{background:url(images/dian2.png) no-repeat;}.content{height: 700px;background: url(images/indexmainbg.jpg) no-repeat center bottom;}.content .inner_c{width: 1000px;height: 700px;margin: 0 auto;padding-top: 50px;}.content .inner_c .product{height: 229px;width: 100%;border-bottom: 1px solid gray;position: relative;}.content .inner_c .product .circles{width: 117px;height: 12px;background-color: white;position: absolute;bottom: -6px;left: 50%;margin-left: -59px;}.content .inner_c .product .circles ul{list-style: none;padding-left: 17px;}.content .inner_c .product .circles ul li{width: 11px;height: 11px;background: url(images/dian1.png) no-repeat;margin-right: 14px;cursor: pointer;}.content .inner_c .product .circles ul li.current{background:url(images/dian2.png) no-repeat;}.content .inner_c .product ul{list-style: none;}.content .inner_c .product ul li{width: 218px;height: 229px;float: left;margin-right: 43px;}.content .inner_c .product ul li .image img{display: block;height: 130px;width: 100%;}.content .inner_c .product ul li.last{width: 217px;margin-right: 0px;}.content .inner_c .product ul li h3{font-size: 14px;line-height: 38px;text-align: center;}.content .inner_c .product ul li .djbf{line-height: 12px;height: 12px;text-align: center;}.content .inner_c .product ul li .djbf a{font-size: 14px;line-height: 12px;text-decoration: none;color: green;padding-right: 10px;background: url(images/sanjiaoxing.png) no-repeat center right;}.content .inner_c .info{padding-top: 53px;}.content .inner_c .info .news{width: 500px;height: 314px;background: url(images/bynewsbg.jpg) no-repeat;float: left;padding-top: 110px;position: relative;}.content .inner_c .info .news .more{width: 66px;height: 28px;background: url(images/icons.png) no-repeat -7px -9px;position: absolute;top: 40px;left: 218px;text-indent: -9999em;}.content .inner_c .info .news ul{list-style: none;}.content .inner_c .info .news ul li{float: left;line-height: 50px;padding: 0 20px;border-bottom: 1px solid #DBE1E7;}.content .inner_c .info .news ul li a{text-decoration: none;color: #444866;font-size: 14px;}.content .inner_c .info .news ul li span{font-size: 14px;margin-right: 22px;}.content .inner_c .info .jobs{width: 500px;height: 314px;background:url(images/byhrbg3.jpg) no-repeat;float: left;position: relative;padding-top: 105px;}.content .inner_c .info .jobs h3{padding-left: 20px;color: white;line-height: 26px;}.content .inner_c .info .jobs ul{list-style: none;padding-left: 20px;padding-right: 200px;}.content .inner_c .info .jobs ul li{line-height: 38px;border-bottom: 1px solid #6FDEA3;}.content .inner_c .info .jobs ul li a{color: white;text-decoration: none;}.content .inner_c .info .jobs .zczp {position: absolute;top: 40px;left: 78px;}.content .inner_c .info .jobs .more2{width: 66px;height: 28px;background: url(images/icons.png) no-repeat -7px -39px;position: absolute;left: 218px;top: 45px;}.footer{height: 91px;width: 100%;background-color: #191D3A;}.footer .inner_c{width: 1000px;margin: 0 auto;color: #6C6E7E;}.footer .inner_c .left{width: 300px;height: 91px;float: left;line-height: 91px;}.footer .inner_c .left a{color: #6C6E7E;text-decoration: none;}.footer .inner_c .right{line-height: 91px;width: 700px;height: 91px;float: left;text-align: right;}.footer .inner_c .right img{width: 40px;height: 40px;position: relative;top: 15px;}</style></head><body><div class="header"><div class="inner_c"><h1 class="logo"><img src="images/logo.png"></h1><div class="nav"><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 class="last"><a href="#">网页栏目</a></li></ul></div><a href="#" class="jrwm">加入我们</a></div></div><div class="banner"><div class="circles"><ul><li class="current"></li><li></li><li></li><li></li><li class="last"></li></ul></div></div><div class="cl"></div><div class="content"><div class="inner_c"><div class="product"><ul><li><p class="image"><img src="images/pro1.jpg"></p><h3>BPT宣传片</h3><p class="djbf"><a href="#">点击播放</a></p></li><li><p class="image"><img src="images/pro2.jpg"></p><h3>BPT宣传片</h3><p class="djbf"><a href="#">点击播放</a></p></li><li><p class="image"><img src="images/pro3.jpg"></p><h3>BPT宣传片</h3><p class="djbf"><a href="#">点击播放</a></p></li><li class="last"><p class="image"><img src="images/pro4.jpg"></p><h3>BPT宣传片</h3><p class="djbf"><a href="#">点击播放</a></p></li></ul><div class="circles"><ul><li class="current"></li><li></li><li></li><li></li></ul></div></div><div class="info"><div class="news"><ul><li><span>09 / 28</span><a href="#">新闻内容新闻内容新闻内容新闻内容</a></li><li><span>09 / 28</span><a href="#">新闻内容新闻内容新闻内容新闻内容</a></li><li><span>09 / 28</span><a href="#">新闻内容新闻内容新闻内容新闻内容</a></li><li><span>09 / 28</span><a href="#">新闻内容新闻内容新闻内容新闻内容</a></li></ul><a href="#" class="more">more</a></div><div class="jobs"><a href="#" class="zczp"><img src="images/zczp.png"></a><a href="#" class="more2"></a><h3>专场招聘岗位：</h3><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="cl"></div><div class="footer"><div class="inner_c"><div class="left"><a href="#">网站地图</a><a href="#">免费声明</a></div><div class="right"><span>明天上课啊，别不来啊，明天不休息啊。JS第一天好好听课。CSS先放放，别激动。</span><img src="images/govIcon.gif"></div></div></div></body>
<!-- **博雅互动页面要点**------------<div class="header">1.通栏，height，background-color，2.通栏内设置版心inne_c，width，margin：0 auto ，height 3. 分三个大div,分别左浮动；第一个div, logo切图，margin-right ，height, width ; 第二个div nav导航条, ul , li , a , width ,height, border-left , 第一个li.first高亮，最后一个li.last borde-right , a转block；第三个div 加入我们, padding-left , padding-right , 小div,backgound-color,width,height ; a , a转block, </div><div class="banner">1. 通栏，height ，background：url() no-repeat center top 2. positoon:relative <div class="circles">1. circles width height background-color position:absolute bottom left:50% margin-left:2. ul , li , float:left , margin-right , li.last margin-right: 0 backgound:url(images/dian1.jpg) no-repeat cursor:pointer </div></div><div class="content"><div class="inner_c">1. padding-top<div class="product">border-bottomcircles: 1. circles width height background-color position:absolute bottom left:50% margin-left:2. ul , li , float:left , margin-right , li.last margin-right: 0 backgound:url(images/dian1.jpg) no-repeat cursor:pointer 1. ul li backgound-color width height margin-right li.last margin-right:0 float:left2. <p></p>3. <p><a href="#"></a></p> a转block padding-right background:url() no-repeat right center</div><div class="info"><div class="news">float: left;background:;width:;height:;<a href="#">css精灵，子绝父相</a><div><ul>margin-left<li><span></span><span></span></li></ul></div></div><div class="jobs">float: left;background:;width:;height:;<a href="#">css精灵，子绝父相,backgroud</a><a href="#">css精灵，子绝父相<img src=""></a><div class="title"> <h1></h1><ul><li></li></ul></div></div></div> -->
0 0
