html+css静态页面学习 首页demo

1、最终效果图
在这里插入图片描述
2、html结构代码

<div class="header">
			<div class="top clearfix">
				<a href="javascript:;" class="logo fl">
					<img src="img/logo.jpg">
				</a>
				<div class="search fl">
					<input type="text" placeholder="请输入关键字" class="fl"/>
					<div class="search_btn fr">
						<img src="img/icon_search.png">
					</div>
				</div>
				<div class="skin fr">
					<div class="sk skin01 curr"></div>
					<div class="sk skin02"></div>
					<div class="sk skin03"></div>
					<div class="sk skin04"></div>
					<div class="sk skin05"></div>
				</div>
			</div>
			<div class="nav">
				<div class="nav_con">
					<ul>
						<li class="curr"><a href="javascript:;">首页</a></li>
						<li><a href="javascript:;">导航标题</a></li>
						<li><a href="javascript:;">导航标题</a></li>
						<li><a href="javascript:;">导航标题</a></li>
						<li><a href="javascript:;">导航标题</a></li>
						<li><a href="javascript:;">导航标题</a></li>
						<li><a href="javascript:;">导航标题</a></li>
						<li><a href="javascript:;">导航标题</a></li>
					</ul>
				</div>
			</div>
		</div>
		<div class="main clearfix">
			<div class="left fl">
				<div class="title">
					分类标题
				</div>
				<div class="title_list">
					<p>标题</p>
					<a href="javascript:;">列表标题</a>
					<a href="javascript:;">列表标题</a>
					<a href="javascript:;">列表标题</a>
					<a href="javascript:;">列表标题</a>
					<a href="javascript:;">列表标题</a>
					<a href="javascript:;">列表标题</a>
					<a href="javascript:;">列表标题</a>
					<a href="javascript:;">列表标题</a>
				</div>
				<div class="title_list">
					<p>标题</p>
					<a href="javascript:;">列表标题</a>
					<a href="javascript:;">列表标题</a>
					<a href="javascript:;">列表标题</a>
					<a href="javascript:;"&g