首页 > 代码库 > DIV + CSS综合实例【传智PHP首页】
DIV + CSS综合实例【传智PHP首页】
1.首页结构
2.准备工作
所有素材放到与当前网页同级的目录下；
网页背景色、背景图；
主页宽度：1000px；
创建CSS文件，将CSS文件引入到当前的HTML文件中。
3.实现
效果图：
源代码：
HTML代码：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>实例:PHP学院</title> 6 <link href="css/public.css" rel="stylesheet" type="text/css"/> 7 </head> 8 9 <body> 10 <div class="box"> 11 12 <!-- top --> 13 <div class="top"> 14 <span>专业的IT培训机构!</span> 15 <ul> 16 <li><a href="#">就业宣言</a></li> 17 <li><a href="#">报名流程</a></li> 18 <li><a href="#">免费公开课</a></li> 19 <li><a href="#" class="red">中国好毕设</a></li> 20 <li><a href="#">免费学习光盘</a></li> 21 <li><a href="#">原创教材</a></li> 22 <li><a href="#">传智特刊</a></li> 23 <li><a href="#">人才服务</a></li> 24 <li><a href="#" class="noline">技术论坛</a></li> 25 </ul> 26 </div> 27 28 <!-- logo --> 29 <div class="logo"> 30 <div class="div1"><a href="#"><img src="images/logo.gif" alt="logo" /></a></div> 31 <div class="div3"><img src="images/topword.gif" alt="topword" /></div> 32 <div class="div2"> 33 <h4>PHP学院</h4> 34 <ul> 35 <li>北京校区</li> 36 <li>上海校区</li> 37 <li>广州校区</li> 38 <li>武汉校区</li> 39 <li>郑州校区</li> 40 <li class="xiala1">西安校区</li> 41 <li class="xiala1">哈尔滨校区</li> 42 </ul> 43 </div> 44 </div> 45 46 <!-- menu --> 47 <div class="menu"> 48 <ul> 49 <li><a href="#" class="current">首页</a></li> 50 <li><a href="#" class="a1">PHP培训课程</a></li> 51 <li><a href="#" class="a1">PHP视频下载</a></li> 52 <li><a href="#">人才服务</a></li> 53 <li><a href="#">校园生活</a></li> 54 <li><a href="#">师资力量</a></li> 55 <li><a href="#">就业信息</a></li> 56 <li><a href="#">报名流程</a></li> 57 <li><a href="#">原创教材</a></li> 58 <li><a href="#">常见问题</a></li> 59 <li><a href="#">来校路线</a></li> 60 <li><a href="#">技术论坛</a></li> 61 </ul> 62 </div> 63 64 <!-- share --> 65 <div class="share"> 66 <img src="images/share.jpg" alt="分享一下" title="分享一下" usemap="#Map"/> 67 <map name="Map" id="Map"> 68 <area shape="rect" coords="330,6,403,29" href="#" alt="新浪微博"/> 69 <area shape="rect" coords="259,6,332,29" href="#" alt="新浪微博"/> 70 <area shape="rect" coords="191,6,259,29" href="#" alt="腾讯微博"/> 71 <area shape="rect" coords="131,6,192,29" href="#" alt="QQ空间"/> 72 <area shape="rect" coords="72,6,132,29" href="#" alt="QQ好友"/> 73 </map> 74 <ul> 75 <li><a href="#">java学院</a></li> 76 <li><a href="#">.net学院</a></li> 77 <li><a href="#">ios学院</a></li> 78 <li><a href="#">c/c++学院</a></li> 79 <li><a href="#">网页平面设计学院</a></li> 80 </ul> 81 <h4>其他学院入口:</h4> 82 <div class="clear"></div> 83 </div> 84 85 <!-- left --> 86 <div class="left"> 87 <!-- 我们开学啦 --> 88 <div class="kaixue"> 89 <div class="title"> 90 <span class="span1 blue">我们开学啦</span> 91 <span class="span2">今天,我终于来到了心中向往已久的神圣学府——传智播客,开始了改变命运的征途<a href="#"><img src="images/jiantou.jpg" alt="" /></a></span> 92 <div class="clear"></div> 93 </div> 94 <div class="content"> 95 <img src="images/ppt1.jpg" alt="" /> 96 <ul> 97 <li> 98 <a href="#"><img src="images/img01.jpg" alt="" /></a><br /> 99 <a href="#">曹磊:玩酷我的程序人生</a> 100 </li> 101 <li> 102 <a href="#"><img src="images/img02.jpg" alt="" class="img01"/></a><br /> 103 <a href="#">张巍专题:我为创业狂</a> 104 </li> 105 <li> 106 <a href="#"><img src="images/img03.jpg" alt="" /></a><br /> 107 <a href="#">小林催人泪下经历</a> 108 </li> 109 <li> 110 <a href="#"><img src="images/img04.jpg" alt="" class="img01"/></a><br /> 111 <a href="#">陈建立专题:我有我原则</a> 112 </li> 113 </ul> 114 <div class="clear"></div> 115 </div> 116 </div> 117 118 <!--学院消息--> 119 <div class="message"> 120 <div class="title"> 121 <img src="images/college.jpg" alt="" /> 122 </div> 123 <div class="content"> 124 <ul> 125 <li><a href="#" class="red">最新版PHP学习路线霸气上线</a></li> 126 <li><a href="#" class="red">PHP1016班,毕业3天,入职18人平均薪资7500元!</a></li> 127 <li><a href="#">从辍学到PHP技术总监——4个月,月薪15000元!</a></li> 128 <li><a href="#">学PHP更要来传智,看我们的学员“另类”原因</a></li> 129 <li><a href="#">实力教学赢口碑,学员感激赠锦旗!!</a></li> 130 <li><a href="#">传智PHP项目答辩,群雄竞技牛人辈出</a></li> 131 <li><a href="#">传智播客中级PHP项目答辩,学员应对自如!</a></li> 132 </ul> 133 <ul class="right"> 134 <li><a href="#" class="red">霸气揭秘:凭什么传智PHP一个班能超过100人?<img src="images/hot.gif" alt="" /></a></li> 135 <li><a href="#" class="red">学PHP,冲击月薪10000+你也可以!</a></li> 136 <li><a href="#">PHP0701班,毕业8天,入职25人,平均薪资6240元!</a></li> 137 <li><a href="#">PHP0525班,毕业10天,入职23人,平均薪资6435元!</a></li> 138 <li><a href="#">PHP0421班,毕业35天,入职48人,平均薪资6294元!</a></li> 139 <li><a href="#" class="red">传智PHP口碑如何,请听听我们学员的心声!</a></li> 140 <li><a href="#">学PHP编程,不做孬种程序员!</a></li> 141 </ul> 142 <div class="clear"></div> 143 <a href="#"><img src="images/more01.gif" alt="" /></a> 144 </div> 145 </div> 146 147 <!-- 校园动态 --> 148 <div class="dynamic"> 149 <div class="title"> 150 <span class="span1"><span class="blue">校园</span>动态</span> 151 <span class="span2"><a href="#"><img src="images/jiantou.jpg" alt="" /></a></span> 152 <div class="clear"></div> 153 </div> 154 <div class="content"> 155 <div class="left"> 156 <img src="images/img06.jpg" alt="" /><br /> 157 <span>开拓视野,展现自我,非你莫属,我们来啦!</span> 158 </div> 159 <div class="right"> 160 <span>班级活动</span> 161 <ul> 162 <li><a href="#">PHP学员26期就业班开业,我们为何选择传智!</a></li> 163 <li><a href="#">PHP学院班级联袂金滏山自助烧烤</a></li> 164 <li><a href="#" class="red">PHP学院IT专场招聘会成功举办</a></li> 165 <li><a href="#">PHP学院学员参与录制,“非你莫属”我们来啦</a></li> 166 <li><a href="#">PHP学院2.28班海澳森HAPPY徒步之旅</a></li> 167 <li><a href="#">PHP学院3.30班学员香山一日游</a></li> 168 <li><a href="#">PHP学院12.29元旦晚会——不做孬种程序员</a></li> 169 </ul> 170 </div> 171 <div class="clear"></div> 172 <a href="#"><img src="images/more01.gif" alt="" /></a> 173 </div> 174 </div> 175 176 <!-- 论坛热帖 --> 177 <div class="bbs"> 178 <div class="title"> 179 <span class="span1"><span class="blue">论坛</span>热帖</span> 180 <span class="span2"><a href="#">+MORE</a></span> 181 <div class="clear"></div> 182 </div> 183 <div class="content"> 184 <ul> 185 <li><a href="#"><span class="red">PHP初学者想了解“伪静态”,必须看这个贴</span></a></li> 186 <li><a href="#"><span class="red">PHP能如何实现全面优化?不懂,看这贴就</span></a></li> 187 <li><a href="#">学习PHP需要什么收费软件</a><</li> 188 <li><a href="#"><span class="red">霸气揭秘:凭什么传智PHP一个班能超过100人</span></a></li> 189 </ul> 190 <ul class="ul01"> 191 <li><a href="#">PHP新手必看,PHP常见错误提示</a></li> 192 <li><a href="#">如何单间PHP-5.6.8</a></li> 193 <li><a href="#"><span class="red">PHP34期零基础大龄loser男干货分享,月薪25</span></a></li> 194 </ul> 195 <div class="clear"></div> 196 </div> 197 </div> 198 199 <!-- PHP培训学员呐喊 --> 200 <div class="job"> 201 <div class="title"> 202 <span class="span1"><span class="blue">PHP培训</span>学员呐喊</span> 203 <span class="span2"><a href="#">+MORE</a></span> 204 <div class="clear"></div> 205 </div> 206 <div class="content"> 207 <div class="left"> 208 <a href="#"><img src="images/img07.jpg" alt="" /><br /></a> 209 <span>传智PHP学员就业明星——张巍</span> 210 </div> 211 <div class="right"> 212 <span>就业信息</span> 213 <ul> 214 <li><a href="#">张* 2014.10.22 北京树蛙** 6000</a></li> 215 <li><a href="#">贾** 2014.10.21 智恒** 5000</a></li> 216 <li><a href="#">王** 2014.10.20 陶伟**公司 6000</a></li> 217 <li><a href="#">李* 2014.10.17 北京通达**公司 6000</a></li> 218 <li><a href="#">张** 2014.10.16 北京通达**公司 5000</a></li> 219 <li><a href="#">曹* 2014.10.14 国度**公司 7000</a></li> 220 <li><a href="#">陈** 2014.10.13 北京弗兰**公司 5000</a></li> 221 <li><a href="#" id="more">>>查看更多就业信息</a></li> 222 </ul> 223 </div> 224 <div class="clear"></div> 225 </div> 226 </div> 227 228 <!-- 学员感言 --> 229 <div class="thanks"> 230 <div class="title"> 231 <span class="span1"><span class="blue">学员</span>感言</span> 232 <span class="span2"><a href="#">+MORE</a></span> 233 <div class="clear"></div> 234 </div> 235 <div class="content left"> 236 <a href="#"><img src="images/img08.jpg" alt="学员感言" /></a> 237 <p><a href="#">[PHP学院]钟玲玉:传智,我人生中重要的一站</a></p> 238 <div class="clear"></div> 239 <ul> 240 <li><span class="red">[PHP学员]</span> <a href="#">李久杨:90后,月薪10k,一封迟来..</a></li> 241 <li><span class="red">[PHP学员]</span> <a href="#">杜宏海:同学到其他机构学完..</a></li> 242 <li><span class="red">[PHP学员]</span> <a href="#">杨*斌:一个 小学生的奋斗史..</a></li> 243 <li><span class="red">[PHP学员]</span> <a href="#">黄*:传智播客,让我月薪增长到..</a></li> 244 <li><span class="red">[PHP学员]</span> <a href="#">刘哲华,我人生中的转折点..</a></li> 245 </ul> 246 </div> 247 <div class="content right"> 248 <a href="#"><img src="images/img09.jpg" alt="学员感言" /></a> 249 <p><a href="#">[PHP学院]王艳:美女网编:毕业薪水6500..</a></p> 250 <div class="clear"></div> 251 <ul> 252 <li><span class="red">[PHP学员]</span> <a href="#">李久杨:90后,月薪10k,一封迟来..</a></li> 253 <li><span class="red">[PHP学员]</span> <a href="#">杜宏海:同学到其他机构学完..</a></li> 254 <li><span class="red">[PHP学员]</span> <a href="#">杨*斌:一个 小学生的奋斗史..</a></li> 255 <li><span class="red">[PHP学员]</span> <a href="#">黄*:传智播客,让我月薪增长到..</a></li> 256 <li><a href="#" id="more">>>查看更多学员感言</a></li> 257 </ul> 258 </div> 259 <div class="clear"></div> 260 </div> 261 262 <!-- PHP培训名师答疑 --> 263 <div class="answer"> 264 <div class="title"> 265 <span class="span1"><span class="blue">PHP培训</span>名师答疑</span> 266 <span class="span2"><a href="#">+MORE</a></span> 267 <div class="clear"></div> 268 </div> 269 <div class="content"> 270 <img src="images/img10.jpg" alt="" /> 271 <ul class="ul01"> 272 <li><a href="" id="red">PHP应该学什么,如何学好PHP(三)?</a></li> 273 <li><a href="" id="red">PHP应该学什么,如何学好PHP(二)?</a></li> 274 <li><a href="">一个渴求学习但不知如何下手学生咨询</a></li> 275 <li><a href="">印度哥们答疑tomcat配置问题</a></li> 276 <li><a href="">请教先学习PHP还是JAVA的问题</a></li> 277 <li><a href="">怎么设计自己做好的自定义404错误页面</a></li> 278 </ul> 279 <ul class="ul02"> 280 <li><a href="">传智PHP视频教程手册大全<img src="images/new.jpg" alt="" /></a></li> 281 <li><a href="">韩老师回答大一学生如何选择专业问题</a></li> 282 <li><a href="">传智PHP视频的几点问题,请韩老师回复</a></li> 283 <li><a href="">韩老师,能把PHP视频笔记发给我吗?</a></li> 284 <li><a href="">一个农民工流动人员给韩老师一封信</a></li> 285 <li><a href="#" id="more">>>查看更多答疑信息</a></li> 286 </ul> 287 <div class="clear"></div> 288 </div> 289 </div> 290 </div> 291 292 <!-- right --> 293 <div class="right"> 294 <!-- PHP培训开班信息 --> 295 <div class="kaiban-info"> 296 <div class="title">PHP培训开班信息</div> 297 <div class="content"> 298 <h4>PHP基础班</h4> 299 <ul> 300 <li><a href="#">北京——第39期(2015年07月09日)</a><span class="red">预约报名</span></li> 301 <li><a href="#">北京——第38期(2015年06月08日)</a><span class="blue">爆满已开班</span></li> 302 <li><a href="#">北京——第37期(2015年05月08日)</a><span class="blue">爆满已开班</span></li> 303 <li><a href="#">北京——第10期(2015年04月22日)</a><span class="blue">爆满已开班</span></li> 304 </ul> 305 <h4>PHP就业班</h4> 306 <ul> 307 <li><a href="#">北京——第39期(2015年07月09日)</a><span class="red">预约报名</span></li> 308 <li><a href="#">北京——第38期(2015年06月08日)</a><span class="blue">爆满已开班</span></li> 309 <li><a href="#">北京——第37期(2015年05月08日)</a><span class="blue">爆满已开班</span></li> 310 <li><a href="#">北京——第10期(2015年04月22日)</a><span class="blue">爆满已开班</span></li> 311 </ul> 312 <h4>PHP远程班</h4> 313 <ul> 314 <li><a href="#">北京——第39期(2015年07月09日)</a><span class="red">预约报名</span></li> 315 <li><a href="#">北京——第38期(2015年06月08日)</a><span class="blue">爆满已开班</span></li> 316 <li><a href="#">北京——第37期(2015年05月08日)</a><span class="blue">爆满已开班</span></li> 317 <li><a href="#">北京——第10期(2015年04月22日)</a><span class="blue">爆满已开班</span></li> 318 </ul> 319 <div class="clear"></div> 320 </div> 321 </div> 322 323 <!-- 最新企业招聘 --> 324 <div class="zhaopin"> 325 <div class="title"> 326 <span class="span1"><span class="blue">最新</span>企业招聘信息</span> 327 <span class="span2"><a href=""><img src="images/jiantou.jpg" alt="" /></a></span> 328 <div class="clear"></div> 329 </div> 330 <div class="content"> 331 <img src="images/img11.jpg" alt="" /> 332 <ul> 333 <li><a href="#">北京华图弘扬科技公司招聘<span class="span">若干 06.12</span></a></li> 334 <li><a href="#">内蒙古华腾科技公司招聘<span class="span">若干 06.12</span></a></li> 335 <li><a href="#">北京无忧创想信息公司招聘<span class="span">若干 06.12</span></a></li> 336 <li><a href="#">北京雅普兰科技公司招聘<span class="span">若干 06.12</span></a></li> 337 <li><a href="#">中鼎博华投资公司招聘<span class="span">若干 06.12</span></a></li> 338 <li><a href="#">中科软科技股份集团招聘<span class="span">若干 06.12</span></a></li> 339 <li><a href="#">北京中搜网络技术公司招聘<span class="span">若干 06.12</span></a></li> 340 <li><a href="#">中品高科信息科技公司招聘<span class="span">若干 06.12</span></a></li> 341 <li><a href="#">北京科立特信息公司招聘<span class="span">若干 06.105</span></a></li> 342 <li><a href="#">北京蓝果网络技术招聘<span class="span">若干 06.05</span></a></li> 343 <li><a href="#">北京律和同盟科技公司招聘<span class="span">若干 06.05</span></a></li> 344 <li><a href="#">磐谷集团招聘<span class="span">若干 06.05</span></a></li> 345 <li><a href="#">北京市玩互娱信息技术公司招聘<span class="span">若干 06.05</span></a></li> 346 <li><a href="#" id="more">更多企业信息请点击......<span class="span">查看 更多</span></a></li> 347 </ul> 348 <div class="clear"></div> 349 </div> 350 </div> 351 352 <!-- 常见问题 --> 353 <div class="question"> 354 <div class="title"> 355 <span class="span1"><span class="blue">常见问题</span></span> 356 <span class="span2"><a href=""><img src="images/jiantou.jpg" alt="" /></a></span> 357 <div class="clear"></div> 358 </div> 359 <div class="content"> 360 <ul> 361 <li><a href="#">贵校PHP教学与**学校相比有哪些特色 <span>NEW</span></a></li> 362 <li><a href="#">你们的PHP培训为什么那么便宜? <span>NEW</span></a></li> 363 <li><a href="#">你们入学需要什么样的基础 <span>NEW</span></a></li> 364 <li><a href="#">你们的师资力量是什么样子的? <span>NEW</span></a></li> 365 <li><a href="#">你们的课程内容质量是怎么样的?</a></li> 366 <li><a href="#">你们的PHP的学习模式是怎么样的?</a></li> 367 <li class="li01"><a href="#">你们PHP培训的费用这么低,不怕别人说“便宜没好货”,签协议工作有保障吗?</a></li> 368 <li><a href="#">你们的PHP培训质量有保证吗?</a></li> 369 <li><a href="#">你们的课程安排,是怎么样的?</a></li> 370 <li><a href="#">你们有没有阳光扶持政策,可以后交学费?</a></li> 371 <li><a href="#">官网上为什么公布那么少的PHP招生公司?</a></li> 372 <li><a href="#">用PHP做出来的比较有名气的网站或者作品?</a></li> 373 <li><a href="#">怎么在短时间内充分掌握老师讲解的知识</a></li> 374 <li><a href="#">基础班学完以后可以做什么</a></li> 375 <li><a href="#">PHP入门简单是不是后期学习难?</a></li> 376 <li><a href="#">传智播客PHP培训远程班学费与课程安排</a></li> 377 <li><a href="#">学PHP需要具备哪些条件?</a></li> 378 </ul> 379 <a href="#"><img src="images/more01.gif" alt="" /></a> 380 </div> 381 </div> 382 383 <!-- 课程咨询 --> 384 <div class="refer"> 385 <div class="title"><span class="blue">课程</span>咨询</div> 386 <div class="content"> 387 <ul> 388 <li> 389 <img src="images/qqbg01.gif" alt="" /> 390 <span>北京传智播客</span><br /> 391 <a href="#"><img src="images/qq01.jpg" alt="" /></a> 392 <a href="#"><img src="images/qq02.jpg" alt="" /></a> 393 </li> 394 <li> 395 <img src="images/qqbg02.gif" alt="" /> 396 <span>广州传智播客</span><br /> 397 <a href="#"><img src="images/qq03.jpg" alt="" /></a> 398 <a href="#"><img src="images/qq04.jpg" alt="" /></a> 399 </li> 400 <li> 401 <img src="images/qqbg03.gif" alt="" /> 402 <span>上海传智播客</span><br /> 403 <a href="#"><img src="images/qq05.jpg" alt="" /></a> 404 <a href="#"><img src="images/qq03.jpg" alt="" /></a> 405 </li> 406 <li class="li01"> 407 <img src="images/qqbg04.gif" alt="" /> 408 <span>武汉传智播客</span><br /> 409 <a href="#"><img src="images/qq04.jpg" alt="" /></a> 410 <a href="#"><img src="images/qq05.jpg" alt="" /></a> 411 </li> 412 </ul> 413 <div class="clear"></div> 414 415 </div> 416 </div> 417 </div> 418 <div class="clear"></div> 419 420 <!-- 友情链接 --> 421 <div class="links"> 422 <div class="content"> 423 <ul> 424 <li><a href="#" id="blue">深圳网站建设</a></li> 425 <li><a href="#" id="blue">北风网</a></li> 426 <li><a href="#" id="blue">网络教育</a></li> 427 <li><a href="#" id="blue">澳洲留学DIY</a></li> 428 <li><a href="#" id="blue">青岛家教网</a></li> 429 <li><a href="#" id="blue">英国留学</a></li> 430 <li><a href="#" id="blue">上海外学预科</a></li> 431 <li><a href="#" id="blue">连云港家教</a></li> 432 <li><a href="#" id="blue">论文格式</a></li> 433 <li><a href="#" id="blue">CFO培训</a></li> 434 <li><a href="#" id="blue">百科知识</a></li> 435 <li><a href="#" id="blue">宁波电脑培训</a></li> 436 <li><a href="#" id="blue">吉林省公务员考试网</a></li> 437 <li><a href="#" id="blue">大学生网</a></li> 438 <li><a href="#" id="blue">优质课网</a></li> 439 <li><a href="#" id="blue">深圳教育网</a></li> 440 <li><a href="#" id="blue">职业医师成绩查询</a></li> 441 <li><a href="#" id="blue">江苏信用社招聘考试</a></li> 442 <li><a href="#" id="blue">武汉培训网</a></li> 443 <li><a href="#" id="blue">澳洲留学DIY</a></li> 444 <li><a href="#" id="blue">在线课程</a></li> 445 <li><a href="#" id="blue">连云港家教</a></li> 446 <li><a href="#" id="blue">郑州家教</a></li> 447 <li><a href="#" id="blue">网络教育</a></li> 448 <li><a href="#" id="blue">宁波电脑培训</a></li> 449 <li><a href="#" id="blue">AIA培训</a></li> 450 <li><a href="#" id="blue">深圳化妆培训</a></li> 451 </ul> 452 </div> 453 </div> 454 </div> 455 456 <!-- 页脚 --> 457 <div class="footer"> 458 <div class="content"> 459 <div class="subbox"> 460 <ul> 461 <li><a href="#" id="blue">传智简介</a></li> 462 <li><a href="#" id="blue">官方微博</a></li> 463 <li><a href="#" id="blue">传智快报</a></li> 464 <li><a href="#" id="blue">传智简介</a></li> 465 <li><a href="#" id="blue">官方微博</a></li> 466 <li><a href="#" id="blue">传智快报</a></li> 467 <li><a href="#" id="blue">传智简介</a></li> 468 <li><a href="#" id="blue">官方微博</a></li> 469 <li><a href="#" id="blue" class="a1">传智快报</a></li> 470 </ul> 471 <div class="clear"></div> 472 </div> 473 <ul> 474 <li>传智播客——专业Java培训、.net培训、php培训、ios培训、C++培训、网页设计、平面设计、网络营销培训机构</li> 475 <li>版权所有 2006 - 1015 北京传智播客教育科技有限公司</li> 476 <li>地址:北京市昌平区建材路西城金燕龙办公楼一层 邮编:10096</li> 477 <li>电话:010-82935150/60/70 传真:010-82935100 邮箱:zhanghj+itcast.cn</li> 478 <li class="li01">京ICP备08001421号 京公网安备110108007702</li> 479 </ul> 480 </div> 481 </div> 482 483 <!-- 广告位 --> 484 <!-- 在线QQ --> 485 <div class="qq"> 486 <img class="serviceQQ" src="images/zqq02.jpg" alt=""/> 487 488 <div class="div01"></div> 489 <div class="div02"><img src="images/zqq03.jpg" alt="" usemap="#Map2" border="0" /></div> 490 <div class="div03"></div> 491 492 <div class="div01"></div> 493 <div class="div02" id="qq02"><img src="images/zqq04.jpg" alt="" usemap="#Map3" border="0" /></div> 494 <div class="div03"></div> 495 496 <div class="div01"></div> 497 <div class="div02"><img src="images/zqq05.jpg" alt="" /></div> 498 <div class="div03"></div> 499 500 <!-- 2幅图像映射 --> 501 <map name="Map2" id="Map2"> 502 <area shape="rect" coords="15,83,94,106" href="#" alt="0元入学" /> 503 <area shape="rect" coords="15,47,94,70" href="#" alt="匿名交谈" /> 504 </map> 505 <map name="Map3" id="Map3"> 506 <area shape="rect" coords="3,6,99,30" href="#" alt="QQ咨询" /> 507 </map> 508 </div> 509 </body> 510 </html>
CSS代码：
1 /*全局CSS样式*/ 2 body, ul, li, h4, a { 3 margin: 0; 4 padding: 0; 5 } 6 ul, ol, li { 7 list-style: none; 8 } 9 a:link, a:visited { 10 color: #444; 11 text-decoration: none; 12 } 13 a:hover { 14 color: red; 15 } 16 img { 17 border: none; 18 } 19 body { 20 font-size: 12px; 21 color: #444; 22 font-family: Arial, 宋体; 23 text-align: center; /*IE5.5主页居中（div和文本都居中）*/ 24 background: #ccc url(../images/bg-body.gif) repeat-x; 25 } 26 .box { 27 width: 1000px; 28 margin: 0 auto; 29 text-align: left; /*恢复所有文本的左对齐（仅保留div居中）*/ 30 } 31 32 33 34 /*类样式*/ 35 .red, #red { 36 color: red; 37 } 38 .blue, #blue{ 39 color: #0574c5; 40 } 41 .clear { 42 clear: both; 43 } 44 .title a img{ 45 vertical-align: middle; 46 } 47 #more{ 48 color: red; 49 font-weight: bold; 50 } 51 li{ 52 line-height: 220%; 53 } 54 55 56 57 /*top*/ 58 .top { 59 height: 27px; 60 line-height: 27px; 61 } 62 .top span { 63 float: left; 64 padding-right: 21px; 65 color: #0174c7; 66 background: url(../images/hot.png) no-repeat right center; 67 } 68 .top ul { 69 float: right; 70 } 71 .top li { 72 float: left; 73 } 74 .top li .red{ 75 color: red; 76 } 77 .top a { 78 border-right: 1px dotted gray; 79 padding: 0 5px; 80 } 81 .top .noline { 82 border: none; 83 } 84 85 86 87 /*logo*/ 88 .logo { 89 height: 122px; 90 background: url(../images/bg-logo.jpg) no-repeat right bottom; 91 } 92 .logo .div1 { 93 padding-top: 23px; 94 width: 202px; 95 height: 99px; 96 float: left; 97 } 98 .logo .div2 { 99 width: 380px; 100 height: 122px; 101 float: right; 102 } 103 .logo .div3 { 104 padding-top: 16px; 105 width: 358px; 106 height: 106px; 107 float: right; 108 } 109 .logo .div2 h4 { 110 font-size: 24px; 111 color: #006ec7; 112 padding: 10px 0; 113 } 114 .logo .div2 li { 115 width: 75px; 116 height: 20px; 117 line-height: 20px; 118 color: #fff; 119 float: left; 120 padding: 0 10px 10px 10px; 121 background: url(../images/bg_xiala.png) no-repeat; 122 } 123 .logo .div2 .xiala1 { 124 background: url(../images/bg_xiala1.png) no-repeat; 125 } 126 127 128 129 /*menu*/ 130 .menu { 131 height: 47px; 132 line-height: 47px; 133 } 134 .menu li { 135 float: left; 136 line-height: inherit; 137 margin-right: 8px; 138 } 139 .menu a { 140 height: 47px; 141 line-height: 47px; 142 display: block; /*块显示*/ 143 width: 73px; /*设置尺寸*/ 144 height: 47px; 145 text-align: center; 146 /*color: #fff;*/ 147 font-weight: bold; 148 } 149 .menu a:link, .menu a:visited{ 150 color: white; /*IE6下设置伪类样式，覆盖全局设置链接的伪类样式*/ 151 } 152 .menu a:hover { 153 background: url(../images/menu2.gif) no-repeat; 154 } 155 .menu a.a1 { 156 width: 85px; 157 } 158 159 .menu a.a1:hover { 160 background: url(../images/menu1.gif) no-repeat; 161 } 162 .menu a.current { 163 background: url(../images/menu2.gif) no-repeat; 164 } 165 166 167 168 /*share*/ 169 .share { 170 position: relative; 171 height: 60px; 172 line-height: 60px; 173 background-color: #f1f1f1; 174 } 175 .share img{ 176 float: left; 177 position: absolute; 178 left: 0; 179 top: 20%; 180 } 181 .share h4 { 182 float: right; 183 } 184 .share ul { 185 float: right; 186 } 187 .share li { 188 float: left; 189 padding: 0 5px; 190 line-height: inherit; 191 list-style: url(../images/li02.jpg) inside; 192 } 193 .left{ 194 float: left; 195 width: 695px; 196 } 197 198 199 /*我们开学啦*/ 200 .kaixue{ 201 padding: 20px 20px 0 20px; 202 background-color: white; 203 } 204 .kaixue .title { 205 height: 30px; 206 line-height: 30px; 207 border-bottom: 1px solid #ccc; 208 } 209 .kaixue .title .span1 { 210 float: left; 211 font-size: 16px; 212 font-weight: bold; 213 } 214 .kaixue .title .span2 { 215 float: right; 216 position: relative; 217 letter-spacing: 1px; 218 color: gray; 219 } 220 .kaixue .content{ 221 padding: 20px 0; 222 } 223 .kaixue .content >img{ 224 float: left; 225 padding-right: 10px; 226 } 227 .kaixue .content li{ 228 float: left; 229 text-align: center; 230 } 231 .kaixue .content li >a img{ 232 width: 142px; 233 height: 88px; 234 padding: 0 10px 10px; 235 } 236 .kaixue .content li .img01{ 237 padding-right: 0; 238 } 239 240 241 242 /*学院消息*/ 243 .message{ 244 padding: 0 20px; 245 background-color: white; 246 } 247 .message .content{ 248 position: relative; 249 padding: 20px 0; 250 } 251 .message .content ul{ 252 float: left; 253 } 254 .message .content ul.right{ 255 padding-left: 50px; 256 } 257 .message .content li{ 258 list-style: url(../images/li03.jpg) inside; 259 } 260 .message .content >a{ 261 position: absolute; 262 right: 0; 263 bottom: 10px; 264 } 265 .message .content a.red{ 266 color: red; 267 } 268 269 270 271 /*校园动态*/ 272 .dynamic{ 273 margin-top: 10px; 274 padding: 20px; 275 background-color: white; 276 } 277 .dynamic .title { 278 font-size: 16px; 279 font-weight: bold; 280 border-bottom: 1px solid #ccc; 281 } 282 .dynamic .title a{ 283 float: right; 284 } 285 .dynamic .content{ 286 position: relative; 287 } 288 .dynamic .content .left{ 289 float: left; 290 width: 286px; 291 text-align: center; 292 font-weight: bold; 293 } 294 .dynamic .content .right{ 295 float: right; 296 padding: 20px 30px 45px 0; 297 } 298 .dynamic .content >a{ 299 position: absolute; 300 right: 0; 301 bottom: 0; 302 } 303 .dynamic .content .left img{ 304 padding: 20px 0 10px; 305 } 306 .dynamic .content .right >span{ 307 display: block; 308 padding-bottom: 5px; 309 font-size: 16px; 310 } 311 .dynamic .content .right li{ 312 list-style: disc inside; 313 } 314 .dynamic .content .right li a.red{ 315 color: red; 316 } 317 318 319 320 /*论坛热帖*/ 321 .bbs{ 322 margin-top: 10px; 323 padding: 20px 20px 0 20px; 324 background-color: white; 325 } 326 .bbs .title{ 327 height: 34px; 328 line-height: 34px; 329 padding-left: 20px; 330 border-bottom: 1px solid #ccc; 331 background: url(../images/bg01.gif) no-repeat; 332 } 333 .bbs .title .span1{ 334 float: left; 335 font-size: 16px; 336 font-weight: bold; 337 } 338 .bbs .title .span2{ 339 float: right; 340 } 341 .bbs .content ul{ 342 float: left; 343 padding: 20px 0; 344 } 345 .bbs .content .ul01{ 346 padding-left: 70px; 347 } 348 .bbs .content li{ 349 list-style: url(../images/li05.gif) inside; 350 } 351 352 353 354 /*PHP培训学员呐喊 */ 355 .job{ 356 margin-top: 10px; 357 padding: 20px; 358 background-color: white; 359 } 360 .job .title{ 361 height: 34px; 362 line-height: 34px; 363 padding-left: 20px; 364 border-bottom: 1px solid #ccc; 365 background: url(../images/bg01.gif) no-repeat; 366 } 367 .job .title .span1{ 368 float: left; 369 font-size: 16px; 370 font-weight: bold; 371 } 372 .job .title .span2{ 373 float: right; 374 } 375 .job .content .left{ 376 float: left; 377 width: 286px; 378 text-align: center; 379 font-weight: bold; 380 } 381 .job .content .right{ 382 float: right; 383 padding: 15px 25px 0 0; 384 } 385 .job .content .left img{ 386 padding: 20px 0 10px; 387 } 388 .job .content .right >span{ 389 font-size: 16px; 390 } 391 .job .content .right li{ 392 list-style: disc inside; 393 } 394 395 396 397 /*学员感言*/ 398 .thanks{ 399 margin-top: 10px; 400 padding: 20px; 401 background-color: white; 402 } 403 .thanks .title{ 404 height: 34px; 405 line-height: 34px; 406 padding-left: 20px; 407 border-bottom: 1px solid #ccc; 408 background: url(../images/bg01.gif) no-repeat; 409 } 410 .thanks .title .span1{ 411 float: left; 412 font-size: 16px; 413 font-weight: bold; 414 } 415 .thanks .title .span2{ 416 float: right; 417 } 418 .thanks .title .span1{ 419 font-size: 16px; 420 float: left; 421 } 422 .thanks .title .span2{ 423 float: right; 424 } 425 .thanks .content{ 426 width: 310px; 427 padding-top: 20px; 428 } 429 .thanks .left{ 430 float: left; 431 } 432 .thanks .right{ 433 float: right; 434 } 435 .thanks .content p{ 436 width: 180px; 437 float: right; 438 text-indent: 2em; 439 background: url(../images/li06.gif) no-repeat left 3px; 440 } 441 .thanks .content ul{ 442 background: url(../images/li07.gif) no-repeat left 8px; 443 } 444 .thanks .content li{ 445 line-height: 29px; 446 padding-left: 20px; 447 } 448 449 450 451 /*PHP培训名师答疑*/ 452 .answer{ 453 margin-top: 10px; 454 padding: 20px; 455 background-color: white; 456 } 457 .answer .title{ 458 height: 34px; 459 line-height: 34px; 460 padding-left: 20px; 461 border-bottom: 1px solid #ccc; 462 background: url(../images/bg01.gif) no-repeat; 463 } 464 .answer .title .span1{ 465 float: left; 466 font-size: 16px; 467 font-weight: bold; 468 } 469 .answer .title .span2{ 470 float: right; 471 } 472 .answer .title .span1{ 473 font-size: 16px; 474 float: left; 475 } 476 .answer .title .span2{ 477 float: right; 478 } 479 .answer .content{ 480 padding: 20px 0; 481 } 482 .answer .content >img{ 483 float: left; 484 } 485 .answer .content .ul01{ 486 float: left; 487 } 488 .answer .content .ul02{ 489 float: right; 490 padding-right: 80px; 491 } 492 .answer .content li{ 493 line-height: 220%; 494 list-style: url(../images/li03.jpg) inside; 495 } 496 .right{ 497 float: right; 498 width: 295px; 499 } 500 501 502 503 /*开班信息*/ 504 .kaiban-info{ 505 background-color:#fff; 506 } 507 .kaiban-info .title{ 508 height:35px; 509 line-height: 35px; 510 color:white; 511 font-size:16px; 512 padding-left:40px; 513 background-image:url(../images/righttitle.gif) 514 } 515 .kaiban-info .content{ 516 padding:5px 15px; 517 } 518 .kaiban-info .content h4{ 519 line-height: 220%; 520 } 521 .kaiban-info .content li a{ 522 color: #0574c5; 523 } 524 .kaiban-info .content li .blue{ 525 color: blue; 526 } 527 .kaiban-info .content span{ 528 font-weight:bold; 529 float:right; /*右浮动*/ 530 } 531 532 533 534 /*最新企业招聘*/ 535 .zhaopin{ 536 margin-top: 10px; 537 padding: 5px 15px; 538 background-color: white; 539 } 540 .zhaopin .title{ 541 height: 35px; 542 line-height: 35px; 543 font-size:16px; 544 border-bottom: 1px solid #ccc; 545 } 546 .zhaopin .title .span2{ 547 float: right; 548 position: relative; 549 right: 0; 550 top: 6px; 551 } 552 .zhaopin .content{ 553 padding-top: 10px; 554 } 555 .zhaopin .content li{ 556 padding-left: 15px; 557 height: 27px; 558 line-height: 27px; 559 background: url(../images/li04.jpg) no-repeat left 50%; 560 } 561 .zhaopin .content .span{ 562 float: right; 563 } 564 565 566 567 /*常见问题*/ 568 .question{ 569 margin-top: 10px; 570 padding: 5px 15px; 571 background-color: white; 572 } 573 .question .title{ 574 height: 35px; 575 line-height: 35px; 576 font-size:16px; 577 border-bottom: 1px solid #ccc; 578 } 579 .question .title .span2{ 580 float: right; 581 position: relative; 582 right: 0; 583 top: 6px; 584 } 585 .question .content{ 586 padding-top: 10px; 587 position: relative; 588 padding-bottom: 20px; 589 } 590 .question .content li{ 591 padding-left: 15px; 592 height: 27px; 593 line-height: 27px; 594 background: url(../images/li04.jpg) no-repeat left 50%; 595 } 596 .question .content >a{ 597 position: absolute; 598 right: 0; 599 bottom: 0; 600 } 601 .question .content .li01{ 602 padding-bottom: 27px; 603 background-position: left 25%; 604 } 605 .question .content span{ 606 color:black; 607 font-size: 9px; 608 background-color: yellow; 609 } 610 611 612 613 /*课程咨询*/ 614 .refer{ 615 margin-top: 10px; 616 padding: 5px 15px 45px; 617 background-color: white; 618 } 619 .refer .title{ 620 height: 35px; 621 line-height: 35px; 622 font-size:16px; 623 border-bottom: 1px solid #ccc; 624 } 625 .refer .title .span2{ 626 float: right; 627 position: relative; 628 right: 0; 629 top: 6px; 630 } 631 .refer .content li{ 632 padding-top: 10px; 633 border-bottom: 1px dashed #ccc; 634 } 635 .refer .content li span{ 636 float: right; 637 font-size: 16px; 638 font-weight: bold; 639 } 640 .refer .content li a>img{ 641 padding: 20px 0 20px 20px; 642 } 643 .refer .content .li01{ 644 border: none; 645 } 646 647 648 649 /*友情链接*/ 650 .links{ 651 position: relative; 652 margin-top: 10px; 653 width: 1000px; 654 height: 160px; 655 background: white url(../images/links.jpg) no-repeat 20px 50%; 656 overflow: hidden; 657 } 658 .links .content{ 659 position: absolute; 660 left: 70px; 661 top: 22%; 662 } 663 .links .content li{ 664 float: left; 665 padding:0 10px; 666 } 667 .links .content li a#blue:hover{ 668 color: red; 669 } 670 671 672 673 /*页脚*/ 674 .footer{ 675 margin-top: 10px; 676 background-color: #000; 677 } 678 .footer .content{ 679 width: 1000px; 680 margin: 0 auto; 681 padding-top: 20px; 682 text-align: center; 683 } 684 .footer .content .subbox{ 685 width: 90%; 686 margin:inherit; 687 } 688 .footer .content .subbox li{ 689 float: left; 690 } 691 .footer .content .subbox li a{ 692 border-right: 1px dotted gray; 693 padding: 0 20px; 694 } 695 .footer .content .subbox li a#blue:hover{ 696 color: red; 697 } 698 .footer .content .subbox a.a1{ 699 border: none; 700 } 701 .footer .content >ul li.li01{ 702 color: #0574c5; 703 } 704 705 706 707 /*广告位*/ 708 /*在线QQ*/ 709 .qq{ 710 position: fixed; 711 right: 0; 712 top: 40%; 713 width: 130px; 714 } 715 .qq div{ 716 text-align: center; 717 } 718 .qq .div01{ 719 height: 15px; 720 background: url(../images/zqq01.gif) no-repeat 0 0; 721 } 722 .qq .div02{ 723 height: 110px; 724 background: url(../images/zqq01.gif) repeat-y -262px 0; 725 } 726 .qq .div03{ 727 height: 9px; 728 background: url(../images/zqq01.gif) no-repeat -130px 0; 729 } 730 #qq02{ 731 height: 37px; 732 } 733 .qq .serviceQQ{ 734 position: absolute; 735 left: -29px; 736 top: 36%; 737 }
DIV + CSS综合实例【传智PHP首页】
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。