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:;">列表标题</a>
<a href="javascript:;">列表标题</a>
<a href="ja