<div+css页面布局课堂笔记>11---页面布局网站首页设计实例__终极版（仿csdn首页）
Posted Fuego801
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了<div+css页面布局课堂笔记>11---页面布局网站首页设计实例__终极版（仿csdn首页）相关的知识，希望对你有一定的参考价值。
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首页）的主要内容，如果未能解决你的问题，请参考以下文章