div+css页面布局课堂笔记11---页面布局网站首页设计实例_

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.csdn.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全球硬创马拉松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"></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.网站涉及图片：

div+css页面布局课堂笔记11---页面布局网站首页设计实例__终极版（仿csdn首页）相关推荐

DIV+CSS:页脚永远保持在页面底部
页脚永远保持在页面底部有时候,我们用CSS创建一个高度自适应布局,如何保证页脚(footer)在内容不超过一屏的情况下始终保持在布局最下方是一个比较头疼的事.我看过一些利用绝对定位的例子,但总感觉不 ...
HTML变列自适应布局三行,div自适应居中_典型的DIV CSS三行二列居中高度自适应布局...
摘要腾兴网为您分享:典型的DIV CSS三行二列居中高度自适应布局,弈玩游戏,携程,悟空单车,我和你等软件知识,以及驾考精灵,指尖遥控,广告拦截,浙江学习网,360主题桌面,平板电脑qq,咖啡厅室内 ...
数字信号处理翻转课堂笔记11
数字信号处理翻转课堂笔记11 The Flipped Classroom11 of DSP 对应教材:<数字信号处理(第五版)>西安电子科技大学出版社,丁玉美.高西全著一.要点 1.数字 ...
css背景上能添加文字,如何利用div+css来给背景图片上文字布局
这段时间设计了一个专题页面,上传到网站上去,打开这个网页一看,问题来了,这网页只是一个图片,没有文字,在后台添加的时候才知道只能在图片的下面显示文字. 我想到了可以将图片设为背景,然后在上面添加问题, ...
Web前端开发之CSS学习笔记11—文本格式和动画设计
目录 1.文本对齐text -align 2.保留空白字符white-space 3.设置文本方向direction 4.设置文本缩进text-indent 4.设置字符间距letter-spacin ...
潭州课堂25班：Ph201805201 WEB 之 CSS 第二课 (课堂笔记)
CSS 的引入方法: 第一种 : <p style="color: yellow">CSS的第一种引入方法</p> ...
Android学习笔记(11):线性布局LinearLayout
线性布局LinearLayout是指在横向或是竖向一个接一个地排列.当排列的组件超出屏幕后,超出的组件将不会再显示出来. LinearLayout支持的XML属性和相应方法如表所看到的: Attrib ...
课堂笔记(常用软件，网站资源)
常用软件:钉钉--沟通交流 office办公软件--熟练编写文档,PPT和数据统计有道词典--解决常用代码中单词问题印象笔记--在线记录个人笔记思维导图xmind--保存和分享思路鲁大师--系 ...
课堂笔记(一些知识散点)但很有用(*^__^*)
在android开发过程中,编写java代码中的常量过一般情况下,我们是定义在string.xml这个文件中.这样修改起来也很方便,而且做国际化也很简单. 这个string.xml的值会被R文件映射, ...

div+css页面布局课堂笔记11---页面布局网站首页设计实例__终极版（仿csdn首页）

div+css页面布局课堂笔记11---页面布局网站首页设计实例__终极版（仿csdn首页）相关推荐

最新文章

热门文章