1. firstpage.html文件：
立即学习“前端免费学习笔记（深入）”；
<span style="font-size:14px;"><!doctype html><html> <head> <meta http-equiv="Content-Type" content="text/html"> <title> 标准的页面布局首页 </title> <link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" type="text/css" href="content.css"> </head> <body> <div id="container"> <div id="header"> <div id="logo"> <!--!!是href, 不是herf!!! --> <a class="logo_img" href="http://www.csdn.net/"><img src="logo.jpg" alt="11-页面布局网站首页设计实例终极版（仿csdn首页）_html/css_WEB-ITnose" ></a> </div> <div id="bar"> <a href="https://www.wilddog.com/"><img src="ad.jpg" alt="11-页面布局网站首页设计实例终极版（仿csdn首页）_html/css_WEB-ITnose" ></a> </div> <div id="nav"> <ul> <li class="style_li"><a href="http://www.baidu.com">联系我们</a></li> <div class="gap"></div> <li class="style_li"><a href="http://www.baidu.com">联系我们</a></li> <div class="gap"></div> <li class="style_li"><a href="http://www.baidu.com">联系我们</a></li> <div class="gap"></div> <li class="style_li"><a href="http://www.baidu.com">联系我们</a></li> <div class="gap"></div> <li class="style_li"><a href="http://www.baidu.com">联系我们</a></li> <div class="gap"></div> <li class="style_li"><a href="http://www.baidu.com">联系我们</a></li> <div class="gap"></div> <li class="style_li"><a href="http://www.baidu.com">联系我们</a></li> <div class="gap"></div> <li class="style_li"><a href="http://www.baidu.com">联系我们</a></li> </ul> </div> </div> <div class="space"> </div> <div id="content"> <div class="main"> <div class="main_left"> <div class="tit"><a href="">极客头条</a> </div> <div class="con con_1"><span class="dot">01 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con con_1"><span class="dot">02 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con con_1"><span class="dot">03 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con con_1"><span class="dot">04 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con con_1"><span class="dot">05 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con con_1"><span class="dot">06 </span><a href="">再别康桥---徐志摩</a> </div> </div> <div class="main_right"> <div class="tit"><a href="">滚动</a> </div> <div class="con"><span class="dot">01 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">02 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">03 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">04 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">05 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">06 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">07 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">08 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">09 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">10 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">11 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">12 </span><a href="">再别康桥---徐志摩</a> </div> </div> <div class="space"> </div> <div class="main_left"> <div class="tit"><a href="">极客头条</a> </div> <div class="con con_1"><span class="dot">01 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con con_1"><span class="dot">02 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con con_1"><span class="dot">03 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con con_1"><span class="dot">04 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con con_1"><span class="dot">05 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con con_1"><span class="dot">06 </span><a href="">再别康桥---徐志摩</a> </div> </div> <div class="main_right"> <div class="tit"><a href="">滚动</a> </div> <div class="con"><span class="dot">01 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">02 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">03 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">04 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">05 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">06 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">07 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">08 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">09 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">10 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">11 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">12 </span><a href="">再别康桥---徐志摩</a> </div> </div> </div> <div class="sidebar sidebar_1"> <div class="tit"><a href="">精品课程</div> <div class="one_sidebar"><span class="dot">01 </span><a href="">操作系统---北京大学</a> </div> <div class="one_sidebar"><span class="dot">02 </span><a href="">操作系统---北京大学</a> </div> <div class="one_sidebar"><span class="dot">03 </span><a href="">操作系统---北京大学</a> </div> <div class="one_sidebar"><span class="dot">04 </span><a href="">操作系统---北京大学</a> </div> <div class="one_sidebar"><span class="dot">05 </span><a href="">操作系统---北京大学</a> </div> <div class="one_sidebar"><span class="dot">06 </span><a href="">操作系统---北京大学</a> </div> <div class="one_sidebar"><span class="dot">07 </span><a href="">操作系统---北京大学</a> </div> <div class="one_sidebar"><span class="dot">08 </span><a href="">操作系统---北京大学</a> </div> <div class="one_sidebar"><span class="dot">09 </span><a href="">操作系统---北京大学</a> </div> <div class="one_sidebar"><span class="dot">10 </span><a href="">操作系统---北京大学</a> </div> <div class="one_sidebar"><span class="dot">11 </span><a href="">操作系统---北京大学</a> </div> <div class="one_sidebar"><span class="dot">12 </span><a href="">操作系统---北京大学</a> </div> <div class="one_sidebar"><span class="dot">13 </span><a href="">操作系统---北京大学</a> </div> </div> <div class="space"> </div> <div class="ad"><a href="http://www.redocn.com"><img src="ad_1.jpg" alt="11-页面布局网站首页设计实例终极版（仿csdn首页）_html/css_WEB-ITnose" ></a></div> <div class="space"></div> <div class="main"> <div class="main_left"> <div class="tit"><a href="">极客头条</a> </div> <div class="con con_1"><span class="dot">01 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con con_1"><span class="dot">02 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con con_1"><span class="dot">03 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con con_1"><span class="dot">04 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con con_1"><span class="dot">05 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con con_1"><span class="dot">06 </span><a href="">再别康桥---徐志摩</a> </div> </div> <div class="main_right"> <div class="tit"><a href="">滚动</a> </div> <div class="con"><span class="dot">01 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">02 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">03 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">04 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">05 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">06 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">07 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">08 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">09 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">10 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">11 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">12 </span><a href="">再别康桥---徐志摩</a> </div> </div> <div class="space"> </div> <div class="main_left"> <div class="tit"><a href="">极客头条</a> </div> <div class="con con_1"><span class="dot">01 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con con_1"><span class="dot">02 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con con_1"><span class="dot">03 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con con_1"><span class="dot">04 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con con_1"><span class="dot">05 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con con_1"><span class="dot">06 </span><a href="">再别康桥---徐志摩</a> </div> </div> <div class="main_right"> <div class="tit"><a href="">滚动</a> </div> <div class="con"><span class="dot">01 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">02 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">03 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">04 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">05 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">06 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">07 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">08 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">09 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">10 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">11 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">12 </span><a href="">再别康桥---徐志摩</a> </div> </div> <div class="space"> </div> <div class="main_left"> <div class="tit"><a href="">极客头条</a> </div> <div class="con con_1"><span class="dot">01 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con con_1"><span class="dot">02 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con con_1"><span class="dot">03 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con con_1"><span class="dot">04 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con con_1"><span class="dot">05 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con con_1"><span class="dot">06 </span><a href="">再别康桥---徐志摩</a> </div> </div> <div class="main_right"> <div class="tit"><a href="">滚动</a> </div> <div class="con"><span class="dot">01 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">02 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">03 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">04 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">05 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">06 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">07 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">08 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">09 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">10 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">11 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">12 </span><a href="">再别康桥---徐志摩</a> </div> </div> </div> <div class="sidebar sidebar_2"> <div class="tit"><a href="">活动在线</a></div> <div class="activity_1"> <div class="date_loc">2016/3/29 上海</div> <div class="con_sidebar"><a href="">LinkSprite全球硬创马拉松CSDN专场（基于开源硬件）</a></div> </div> <div class="activity_2"> <div class="date_loc">2016/3/29 上海</div> <div class="con_sidebar"><a href="">LinkSprite全球硬创马拉松CSDN专场（基于开源硬件）</a></div> </div> <div class="activity_1"> <div class="date_loc">2016/3/29 上海</div> <div class="con_sidebar"><a href="">LinkSprite全球硬创马拉松CSDN</a></div> </div> <div class="activity_2"> <div class="date_loc">2016/3/29 上海</div> <div class="con_sidebar"><a href="">LinkSprite全球硬创马拉松CSDN专场（基于开源硬件）</a></div> </div> <div class="activity_1"> <div class="date_loc">2016/3/29 上海</div> <div class="con_sidebar"><a href="">LinkSprite全球硬创马拉松CSDN专场（基于开源硬件）</a></div> </div> <div class="activity_2"> <div class="date_loc">2016/3/29 上海</div> <div class="con_sidebar"><a href="">LinkSprite全球硬创马拉松CSDN专场（基于开源硬件）</a></div> </div> </div> <div class="space"> </div> <div class="ad"><img src="ad_2.jpg" alt="11-页面布局网站首页设计实例终极版（仿csdn首页）_html/css_WEB-ITnose" ></div> <div class="space"></div> <div class="main"> <div class="main_left"> <div class="tit"><a href="">极客头条</a> </div> <div class="con con_1"><span class="dot">01 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con con_1"><span class="dot">02 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con con_1"><span class="dot">03 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con con_1"><span class="dot">04 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con con_1"><span class="dot">05 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con con_1"><span class="dot">06 </span><a href="">再别康桥---徐志摩</a> </div> </div> <div class="main_right"> <div class="tit"><a href="">滚动</a> </div> <div class="con"><span class="dot">01 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">02 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">03 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">04 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">05 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">06 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">07 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">08 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">09 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">10 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">11 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">12 </span><a href="">再别康桥---徐志摩</a> </div> </div> <div class="space"> </div> <div class="main_left"> <div class="tit"><a href="">极客头条</a> </div> <div class="con con_1"><span class="dot">01 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con con_1"><span class="dot">02 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con con_1"><span class="dot">03 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con con_1"><span class="dot">04 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con con_1"><span class="dot">05 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con con_1"><span class="dot">06 </span><a href="">再别康桥---徐志摩</a> </div> </div> <div class="main_right"> <div class="tit"><a href="">滚动</a> </div> <div class="con"><span class="dot">01 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">02 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">03 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">04 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">05 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">06 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">07 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">08 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">09 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">10 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">11 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">12 </span><a href="">再别康桥---徐志摩</a> </div> </div> <div class="space"> </div> <div class="main_left"> <div class="tit"><a href="">极客头条</a> </div> <div class="con con_1"><span class="dot">01 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con con_1"><span class="dot">02 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con con_1"><span class="dot">03 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con con_1"><span class="dot">04 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con con_1"><span class="dot">05 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con con_1"><span class="dot">06 </span><a href="">再别康桥---徐志摩</a> </div> </div> <div class="main_right"> <div class="tit"><a href="">滚动</a> </div> <div class="con"><span class="dot">01 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">02 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">03 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">04 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">05 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">06 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">07 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">08 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">09 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">10 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">11 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">12 </span><a href="">再别康桥---徐志摩</a> </div> </div> </div> <div class="sidebar sidebar_2"> <div class="tit"><a href="">行业热点</a></div> <div class="three_sidebar"><span class="dot">01 </span><a href="">JetBrains全套工具包，超值超乎你想象！</a> </div> <div class="three_sidebar"><span class="dot">02 </span><a href="">JetBrains全套工具包，超值超乎你想象！</a> </div> <div class="three_sidebar"><span class="dot">03 </span><a href="">JetBrains全套工具包，超值超乎你想象！</a> </div> <div class="three_sidebar"><span class="dot">04 </span><a href="">JetBrains全套工具包，超值超乎你想象！</a> </div> <div class="three_sidebar"><span class="dot">05 </span><a href="">JetBrains全套工具包，超值超乎你想象！</a> </div> <div class="three_sidebar"><span class="dot">06 </span><a href="">JetBrains全套工具包，超值超乎你想象！</a> </div> <div class="three_sidebar"><span class="dot">07 </span><a href="">JetBrains全套工具包，超值超乎你想象！</a> </div> <div class="three_sidebar"><span class="dot">08 </span><a href="">JetBrains全套工具包，超值超乎你想象！</a> </div> <div class="three_sidebar"><span class="dot">09 </span><a href="">JetBrains全套工具包，超值超乎你想象！</a> </div> <div class="three_sidebar"><span class="dot">10 </span><a href="">JetBrains全套工具包，超值超乎你想象！</a> </div> </div> <div class="space"> </div> <div class="ad"><img src="ad_3.jpg" alt="11-页面布局网站首页设计实例终极版（仿csdn首页）_html/css_WEB-ITnose" ></div> <div class="space"> </div> <div class="main"> <div class="main_left"> <div class="tit"><a href="">极客头条</a> </div> <div class="con con_1"><span class="dot">01 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con con_1"><span class="dot">02 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con con_1"><span class="dot">03 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con con_1"><span class="dot">04 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con con_1"><span class="dot">05 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con con_1"><span class="dot">06 </span><a href="">再别康桥---徐志摩</a> </div> </div> <div class="main_right"> <div class="tit"><a href="">滚动</a> </div> <div class="con"><span class="dot">01 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">02 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">03 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">04 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">05 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">06 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">07 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">08 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">09 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">10 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">11 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">12 </span><a href="">再别康桥---徐志摩</a> </div> </div> <div class="space"> </div> <div class="main_left"> <div class="tit"><a href="">极客头条</a> </div> <div class="con con_1"><span class="dot">01 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con con_1"><span class="dot">02 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con con_1"><span class="dot">03 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con con_1"><span class="dot">04 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con con_1"><span class="dot">05 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con con_1"><span class="dot">06 </span><a href="">再别康桥---徐志摩</a> </div> </div> <div class="main_right"> <div class="tit"><a href="">滚动</a> </div> <div class="con"><span class="dot">01 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">02 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">03 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">04 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">05 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">06 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">07 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">08 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">09 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">10 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">11 </span><a href="">再别康桥---徐志摩</a> </div> <div class="con"><span class="dot">12 </span><a href="">再别康桥---徐志摩</a> </div> </div> </div> <div class="sidebar sidebar_1"> <div class="tit"><a href="">下载专辑</a></div> <div class="four_sidebar"><span class="dot">01 </span><a href="">Android项目源码用例</a> </div> <div class="four_sidebar"><span class="dot">02 </span><a href="">Android项目源码用例</a> </div> <div class="four_sidebar"><span class="dot">03 </span><a href="">Android项目源码用例</a> </div> <div class="four_sidebar"><span class="dot">04 </span><a href="">Android项目源码用例</a> </div> <div class="four_sidebar"><span class="dot">05 </span><a href="">Android项目源码用例</a> </div> <div class="four_sidebar"><span class="dot">06 </span><a href="">Android项目源码用例</a> </div> <div class="four_sidebar"><span class="dot">07 </span><a href="">Android项目源码用例</a> </div> <div class="four_sidebar"><span class="dot">08 </span><a href="">Android项目源码用例</a> </div> <div class="four_sidebar"><span class="dot">09 </span><a href="">Android项目源码用例</a> </div> <div class="four_sidebar"><span class="dot">10 </span><a href="">Android项目源码用例</a> </div> <div class="four_sidebar"><span class="dot">11 </span><a href="">Android项目源码用例</a> </div> <div class="four_sidebar"><span class="dot">12 </span><a href="">Android项目源码用例</a> </div> <div class="four_sidebar"><span class="dot">13 </span><a href="">Android项目源码用例</a> </div> </div> </div> <div class="space"> </div> <div id="bottomer"> <div class="bottom_tit"><a href="">核心技术类目</a> </div> <div class="bottom_gap"></div> <div id="bottom_list"> <ul> <li class="bottom_li"><a href="">Hadoop</a></li> <li class="bottom_li"><a href="">AWS</a></li> <li class="bottom_li"><a href="">移动游戏</a></li> <li class="bottom_li"><a href="">Java</a></li> <li class="bottom_li"><a href="">Android</a></li> <li class="bottom_li"><a href="">IOS</a></li> <li class="bottom_li"><a href="">Hadoop</a></li> <li class="bottom_li"><a href="">AWS</a></li> <li class="bottom_li"><a href="">移动游戏</a></li> <li class="bottom_li"><a href="">Java</a></li> <li class="bottom_li"><a href="">Android</a></li> <li class="bottom_li"><a href="">IOS</a></li> <li class="bottom_li"><a href="">Hadoop</a></li> <li class="bottom_li"><a href="">AWS</a></li> <li class="bottom_li"><a href="">移动游戏</a></li> <li class="bottom_li"><a href="">Java</a></li> <li class="bottom_li"><a href="">Android</a></li> <li class="bottom_li"><a href="">IOS</a></li> <li class="bottom_li"><a href="">Hadoop</a></li> <li class="bottom_li"><a href="">AWS</a></li> <li class="bottom_li"><a href="">移动游戏</a></li> <li class="bottom_li"><a href="">Java</a></li> <li class="bottom_li"><a href="">Android</a></li> <li class="bottom_li"><a href="">IOS</a></li> <li class="bottom_li"><a href="">Hadoop</a></li> <li class="bottom_li"><a href="">AWS</a></li> <li class="bottom_li"><a href="">移动游戏</a></li> <li class="bottom_li"><a href="">Java</a></li> <li class="bottom_li"><a href="">Android</a></li> <li class="bottom_li"><a href="">IOS</a></li> <li class="bottom_li"><a href="">Hadoop</a></li> <li class="bottom_li"><a href="">AWS</a></li> <li class="bottom_li"><a href="">移动游戏</a></li> <li class="bottom_li"><a href="">Java</a></li> <li class="bottom_li"><a href="">Android</a></li> <li class="bottom_li"><a href="">IOS</a></li> <li class="bottom_li"><a href="">Hadoop</a></li> <li class="bottom_li"><a href="">AWS</a></li> <li class="bottom_li"><a href="">移动游戏</a></li> <li class="bottom_li"><a href="">Java</a></li> <li class="bottom_li"><a href="">Android</a></li> <li class="bottom_li"><a href="">IOS</a></li> <li class="bottom_li"><a href="">Hadoop</a></li> <li class="bottom_li"><a href="">AWS</a></li> <li class="bottom_li"><a href="">移动游戏</a></li> <li class="bottom_li"><a href="">Java</a></li> <li class="bottom_li"><a href="">Android</a></li> <li class="bottom_li"><a href="">IOS</a></li> <li class="bottom_li"><a href="">Hadoop</a></li> <li class="bottom_li"><a href="">AWS</a></li> <li class="bottom_li"><a href="">移动游戏</a></li> <li class="bottom_li"><a href="">Java</a></li> <li class="bottom_li"><a href="">Android</a></li> <li class="bottom_li"><a href="">IOS</a></li> <li class="bottom_li"><a href="">Hadoop</a></li> <li class="bottom_li"><a href="">AWS</a></li> <li class="bottom_li"><a href="">移动游戏</a></li> <li class="bottom_li"><a href="">Java</a></li> <li class="bottom_li"><a href="">Android</a></li> <li class="bottom_li"><a href="">IOS</a></li> <li class="bottom_li"><a href="">Hadoop</a></li> <li class="bottom_li"><a href="">AWS</a></li> <li class="bottom_li"><a href="">移动游戏</a></li> <li class="bottom_li"><a href="">Java</a></li> <li class="bottom_li"><a href="">Android</a></li> <li class="bottom_li"><a href="">IOS</a></li> <li class="bottom_li"><a href="">Hadoop</a></li> <li class="bottom_li"><a href="">AWS</a></li> <li class="bottom_li"><a href="">移动游戏</a></li> <li class="bottom_li"><a href="">Java</a></li> </ul> </div> </div> </div> </body></html></span>
2. style.css:布局文件
立即学习“前端免费学习笔记（深入）”；
立即学习“前端免费学习笔记（深入）”；
<span style="font-size:14px;">body { margin:0; padding:0; text-align:center;}.space { width:650px; height:10px; overflow:hidden;}#container { width:900px; margin:0 auto;}#header { width:900px; height:150px;}.dot { padding-left:6px; margin:auto; font-size:13.3px; font-weight:bold; color:#6D22DD;}.style_li { width:100px; height:18px; float:left; margin:17.5px auto;}.gap { width:2px; height:20px; background:#000; margin:15px 0; float:left; overflow:hidden;}.date_loc { width:100%; float:left; text-align:left; padding-top:15px;}.con_sidebar { width:100%; float:left; text-align:left; padding-top:15px; margin-bottom:13px;}.one_sidebar { float:left; width:100%; height:21px; text-align:left; margin:3.9px 0; border-bottom:1px dotted lightgray;}.three_sidebar { width:100%; height:48px; text-align:left; margin:10px 0; border-bottom:1px dotted lightgray;}.four_sidebar { float:left; width:100%; height:21px; text-align:left; margin:3.9px 0; border-bottom:1px dotted lightgray;}.bottom_tit { width:100%; height:15px; text-align:left; padding:5px; float:left; margin-bottom:5px; //border-bottom:1px solid;}.bottom_gap { width:100%; float:left; border-bottom:1px solid gray;}.bottom_li { //width:20px; height:15px; float:left; margin:3px 11px; }#content { width:900px;}.ad { float:left;}.main { width:650px; float:left; border-right:1px solid lightgray;}.main_left { width:250px; height:200px; float:left; //border:1px dotted;}.main_right { width:390px; height:200px; //border:1px dotted; float:right;}.tit { width:97%; height:30px; text-align:left; margin-bottom:2px; border-bottom:2px solid;}.con { float:left; width:48.5%; height:21px; text-align:left; border-bottom:1px dotted lightgray; margin:3.9px 0;}.con_1 { width:97%;}.sidebar { width:240px; //border:1px dotted black; float:right;}.activity_1 { width:100%; float:left; border-bottom:1px dotted lightgray;}.activity_2 { width:100%; float:left; background:lightgreen; border-bottom:1px dotted lightgray;}.sidebar_1 { height:412px; float:right;}.sidebar_2 { height:624px; float:right;}#logo { width:230px; height:100px; float:left;}#bar { width:660px; height:100px; float:left; margin-left:10px;}#nav { width:900px; height:50px; background:#f0f8ff; float:left; margin-top:10px; }#bottomer { width:900px; height:150px; background:#f0f8ff;}</span>立即学习“前端免费学习笔记（深入）”；
3.content.css:具体内容样式文件：
立即学习“前端免费学习笔记（深入）”；
<span style="font-size:14px;">img { padding:0; margin:0; border:0;}ul { padding:0; margin:0; border:0; font-size:15px; list-style:none;}#nav ul li a { text-decoration:none; //去除超链接a的下划线 color:#0a0;}.tit a { padding-left:6px; color:#ea0000; font-family:"华文仿宋"; font-size:20px; font-weight:bold; text-decoration:none; line-height:30px;}.con a { color:#0a0; font-family:KaiTi; text-decoration:none;}.logo_img { float:left; margin:4.5px auto;}.one_sidebar a { color:#0aa; font-size:13px; text-decoration:none;}.three_sidebar a { color:#0aa; font-size:13.6px; text-decoration:none;}.con_sidebar a { color:#0aa; text-decoration:none;}.four_sidebar a { color:#0aa; font-size:13.3px; text-decoration:none;}.bottom_tit a { font-family:"华文仿宋"; font-weight:bold; color:black; text-decoration:none;}.bottom_li a { color:#a0a; text-decoration:none;}</span>4.网站涉及图片：
立即学习“前端免费学习笔记（深入）”；
