博雅互動第三遍代碼：<!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-bottom 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 1. ul li backgound-color width height margin-right li.last margin-right:0 float:left 2. <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> -->
