11-页面布局网站首页设计实例_终极版（仿csdn首页）
<div+css页面布局课堂笔记>11---页面布局网站首页设计实例__终极版（仿****首页）
2. style.css:布局文件
1. firstPage.html文件：
<span style="font-size:14px;"><!doctype html> <html> <head> <meta charset="utf-8" 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.****.net/"><img src="logo.jpg"></a> </div> <div id="bar"> <a href="https://www.wilddog.com/"><img src="ad.jpg"></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"></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全球硬创马拉松****专场（基于开源硬件）</a></div> </div> <div class="activity_2"> <div class="date_loc">2016/3/29 上海</div> <div class="con_sidebar"><a href="">LinkSprite全球硬创马拉松****专场（基于开源硬件）</a></div> </div> <div class="activity_1"> <div class="date_loc">2016/3/29 上海</div> <div class="con_sidebar"><a href="">LinkSprite全球硬创马拉松****</a></div> </div> <div class="activity_2"> <div class="date_loc">2016/3/29 上海</div> <div class="con_sidebar"><a href="">LinkSprite全球硬创马拉松****专场（基于开源硬件）</a></div> </div> <div class="activity_1"> <div class="date_loc">2016/3/29 上海</div> <div class="con_sidebar"><a href="">LinkSprite全球硬创马拉松****专场（基于开源硬件）</a></div> </div> <div class="activity_2"> <div class="date_loc">2016/3/29 上海</div> <div class="con_sidebar"><a href="">LinkSprite全球硬创马拉松****专场（基于开源硬件）</a></div> </div> </div> <div class="space"> </div> <div class="ad"><img src="ad_2.jpg"></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"></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.网站涉及图片：