这是一款适用于博客、新闻、公司、图片、小说、文档、商城、资源下载、网址导航等多种类型网站的博客趣网页模板。模板具有最小和清洁的设计，易于使用，并具有有趣的功能。bokequ主题简约干净的设计、在明暗风格之间进行现场切换。
1、主页html代码
<!doctype html>
<html>
<head>
<meta charset="gbk">
<title>wordpress博客趣主题个人静态网页模板 - maolai博客</title>
<meta name="keywords" content="WordPress主题站,wordpress模板,wordpress博客主题,wordpress图片主题,maolai博客" />
<meta name="description" content="maolai博客分享各种wordpress主题下载,wordpress企业主题,wordpress cms主题,wordpress中文主题,wordpress视频主题,wordpress图片主题,wordpress博客模板,wordpress音乐主题" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/base.css" rel="stylesheet">
<link href="css/index.css" rel="stylesheet">
<link href="css/m.css" rel="stylesheet">
<script src="js/jquery.min.js" ></script>
<script src="js/hc-sticky.js"></script>
<script src="js/comm.js"></script>
<!--[if lt IE 9]>
<script src="js/modernizr.js"></script>
<![endif]-->
</head>
<body>
<header id="header">
<div class="navbar">
<div class="topbox">
<p class="welcome">您好，欢迎您访问maolai个人博客 - wordpress博客主题模板分享</p>
<div class="searchbox">
<div id="search_bar" class="search_bar">
<form id="searchform" action="http://www.bokequ/wo/e/search/index.php" method="post" name="searchform">
<input class="input" placeholder="想搜点什么呢.." type="text" name="keyboard" id="keyboard">
<input type="hidden" name="show" value="title" />
<input type="hidden" name="tempid" value="1" />
<input type="hidden" name="tbname" value="news">
<input type="hidden" name="Submit" value="搜索" />
<p class="search_ico"> <span></span></p>
</form>
</div>
</div>
</div>
</div>
<div class="header-navigation">
<nav>
<div class="logo"><a href="http://www.bokequ.com">maolai个人博客</a></div>
<h2 id="mnavh"><span class="navicon"></span></h2>
<ul id="starlist">
<li><a href="index.html">网站首页</a></li>
<li><a href="http://www.bokequ.com/wo/" target="_blank">关于我</a></li>
<li><a href="img.html">图片主题</a></li>
<li><a href="blog.html">博客主题</a></li>
<li class="menu"><a href="http://www.bokequ.com/tag/wordpress">wordpress</a>
<ul class="sub">
<li><a href="#">wordpress教程</a></li>
<li><a href="#">wordpress插件</a></li>
</ul>
</li>
<li><a href="table.html">table主题</a></li>
<li><a href="time.html">时间轴</a></li>
</ul>
</nav>
</div>
</header>
<div class="wrapper">
<main>
<!--banner begin-->
<div class="banner">
<div id="banner" class="fader">
<li class="slide" ><a href="#" title="极简WordPress个人博客主题"><img src="http://www.bokequ.com/blog/4/images/19.jpg"><span class="imginfo">极简WordPress个人博客主题</span></a></li>
<li class="slide" ><a href="#" title="Module 模块化多功能WordPress企业主题"><img src="http://www.bokequ.com/blog/4/images/21.jpg"><span class="imginfo">Module 模块化多功能WordPress企业主题</span></a></li>
<div class="fader_controls">
<div class="page prev" data-target="prev">‹</div>
<div class="page next" data-target="next">›</div>
<ul class="pager_list">
</ul>
</div>
</div>
</div>
<!--banner end-->
<div class="bloglist">
<ul>
<li> <i class="blogpic"><a href="#"><img src="images/1.jpg" alt=""> </a></i>
<dl>
<dt><a href="http://www.bokequ.com/category/theme" target="_blank">WordPress个人博客简单派Ganesa主题</a></dt>
<dd><span class="bloginfo">WordPress个人博客简单派Ganesa主题。Ganesa主题是一个具有现代设计模式、新趋势的最小WordPress个人博客主题。使用WordPress实时主题定制器可轻松定制。Ganesa中的每个元素都是完全响应的，因为可以从桌面和移动设备查看内容。...</span>
<p class="timeinfo"><span class="lanmu"><a href="http://www.bokequ.com/category/theme" target="_blank">wordpress博客主题</a></span><span class="date">2018-07-03</span></p>
<a class="read" href="/">阅读更多</a> </dd>
</dl>
</li>
<li> <i class="blogpic"><a href="#"><img src="images/2.jpg" alt=""> </a></i>
<dl>
<dt><a href="#" target="_blank">WordPress个人博客主题Gutenberg/Aldo</a></dt>
<dd><span class="bloginfo">Aldo是一个清新的WordPress基于Gutenbergpage构建器的博客。它适合于客户博客，胭脂，利基博客，赠品，指南，个人投资组合和操作博客。此外，它适合荷马，告诉一切，商业，密码货币，专业，反向，作家和世界新闻。</span>
<p class="timeinfo"><span class="lanmu"><a href="#" target="_blank">wordpress博客主题</a></span><span class="date">2018-07-03</span></p>
<a class="read" href="/">阅读更多</a> </dd>
</dl>
</li>
<li> <i class="blogpic"><a href="#"><img src="images/3.jpg" alt=""> </a></i>
<dl>
<dt><a href="#" target="_blank">WordPress杂志博客主题Octamag</a></dt>
<dd><span class="bloginfo">Octamag是一个新的、现代的杂志和博客WordPress主题。八达马格主题有一个干净的设计，一个完全响应的框架，并给你的力量，创建一个独特的外观博客与易于使用的拖放页面构建器Visual Composer，这是完全响应，视网膜准备，搜索引擎优化。
...</span>
<p class="timeinfo"><span class="lanmu"><a href="#" target="_blank">wordpress博客主题</a></span><span class="date">2018-07-03</span></p>
<a class="read" href="/">阅读更多</a> </dd>
</dl>
</li>
<li> <i class="blogpic"><a href="#"><img src="images/4.jpg" alt=""> </a></i>
<dl>
<dt><a href="#" target="_blank">WordPress主题博客杂志Saxon</a></dt>
<dd><span class="bloginfo">Saxon是一个干净、优雅、响应性强的WordPress主题，它已经准备好，并等待被转换成您自己的个人博客或动态杂志站点...</span>
<p class="timeinfo"><span class="lanmu"><a href="#" target="_blank">wordpress博客主题</a></span><span class="date">2018-07-03</span></p>
<a class="read" href="/">阅读更多</a> </dd>
</dl>
</li>
<li> <i class="blogpic"><a href="#"><img src="images/5.jpg" alt=""> </a></i>
<dl>
<dt><a href="#" target="_blank">wordpress商店购物博客主题Sada</a></dt>
<dd><span class="bloginfo">Sada博客是博客和商店的简约时尚和现代WordPress主题。它是制定考虑到所有要求和需要设计一个风景网站。Sada主题是Gutenberg准备好了。Gutenberg是一个新的WordPress编辑器，它将是WordPress 5.0中的默认WordPress编辑器。sada所有的元素都基于Gutenberg。...</span>
<p class="timeinfo"><span class="lanmu"><a href="#" target="_blank">wordpress博客主题</a></span><span class="date">2018-07-03</span></p>
<a class="read" href="/">阅读更多</a> </dd>
</dl>
</li>
<li> <i class="blogpic"><a href="#"><img src="images/6.jpg" alt=""> </a></i>
<dl>
<dt><a href="#" target="_blank">个人主页WordPress博客主题Nimbo</a></dt>
<dd><span class="bloginfo">这是一个博客主题，具有最小和清洁的设计，易于使用，并具有有趣的功能。Nimbo主题简约干净的设计、在明暗风格之间进行现场切换。</span>
<p class="timeinfo"><span class="lanmu"><a href="#" target="_blank">wordpress博客主题</a></span><span class="date">2018-07-03</span></p>
<a class="read" href="/">阅读更多</a> </dd>
</dl>
</li>
<li> <i class="blogpic"><a href="#"><img src="images/7.jpg" alt=""> </a></i>
<dl>
<dt><a href="#" target="_blank">一个杂志元素WordPress主题Neotech</a></dt>
<dd><span class="bloginfo">Neotech是杂志、博客和发行者网站的拖放元素WordPress主题。它是用元素页面构建器构建的，因此您可以进行更改并实时查看它们。包括GDRP工具，如cookies栏、同意复选框等。与用户保持联系，Neotech已经完全集成了MailChimp表单。Neotech是一个闪电般的快速主题，它非常适合移动设备。用Neotech WordPress主题构建下一个项目...</span>
<p class="timeinfo"><span class="lanmu"><a href="#" target="_blank">wordpress博客主题</a></span><span class="date">2018-07-03</span></p>
<a class="read" href="/">阅读更多</a> </dd>
</dl>
</li>
<li> <i class="blogpic"><a href="#"><img src="images/8.jpg" alt=""> </a></i>
<dl>
<dt><a href="#" target="_blank">WordPress食物食谱博客主题无限滚动Unich</a></dt>
<dd><span class="bloginfo">Unich——无限滚动WordPress博客食物食谱主题，无论你是博客/vloggers还是公司，Unich WordPress主题都非常直观，适合于部署用于各种不同的网站和项目，但是特别适合于个人博客和vlogger..</span>
<p class="timeinfo"><span class="lanmu"><a href="#" target="_blank">wordpress博客主题</a></span><span class="date">2018-07-03</span></p>
<a class="read" href="/">阅读更多</a> </dd>
</dl>
</li>
<li> <i class="blogpic"><a href="#"><img src="images/9.jpg" alt=""> </a></i>
<dl>
<dt><a href="#" target="_blank">wordpress另类杂志主题Dinova</a></dt>
<dd><span class="bloginfo">Dinova是Gutenberg的另一个博客和杂志主题。通过大量仔细考虑的主题选项、众多的布局和帖子风格组合以及Gutenberg强大的编辑功能，您可以创建读者会喜欢的非凡内容...</span>
<p class="timeinfo"><span class="lanmu"><a href="#" target="_blank">wordpress博客主题</a></span><span class="date">2018-07-03</span></p>
<a class="read" href="/">阅读更多</a> </dd>
</dl>
</li>
<li> <i class="blogpic"><a href="#"><img src="images/10.jpg" alt=""> </a></i>
<dl>
<dt><a href="#" target="_blank">wordpress当代杂志与博客主题Insider</a></dt>
<dd><span class="bloginfo">wordpress当代杂志与博客主题Insider这个强大的博客和杂志主题是为你创造的!惊人的，快速加载的现代博客主题，个人或编辑使用。基于核心WordPress特性，这个主题是从上到下精心设计的。为下一个编辑阶段做好准备——Gutenberg，但是没有它很容易使用。使用事件日历添加事件。超快速加载。非常适合小型博客或知名杂志。</span>
<p class="timeinfo"><span class="lanmu"><a href="#" target="_blank">wordpress博客主题</a></span><span class="date">2018-07-03</span></p>
<a class="read" href="/">阅读更多</a> </dd>
</dl>
</li>
<li> <i class="blogpic"><a href="#"><img src="images/11.jpg" alt=""> </a></i>
<dl>
<dt><a href="#" target="_blank">GutenMag-杂志和博客的Gutenberg WordPress主题</a></dt>
<dd><span class="bloginfo">GutenMag基于Gutenberg页面构建器，支持所有原生Gutenberg块。非常适合写博客，对新闻、杂志、报纸、出版物或评论网站都适用。它支持来自YouTube的视频、Spotify的嵌入式音频、Soundcloud、Instagram的图片提要。古腾玛格是100%AMP和移动准备就绪。GDPR遵从性插件是捆绑在一起的。主题是超快，简单...</span>
<p class="timeinfo"><span class="lanmu"><a href="#" target="_blank">wordpress博客主题</a></span><span class="date">2018-07-03</span></p>
<a class="read" href="/">阅读更多</a> </dd>
</dl>
</li>
<li> <i class="blogpic"><a href="#"><img src="images/12.jpg" alt=""> </a></i>
<dl>
<dt><a href="#" target="_blank">WordPress营销主题Sleezy Lifestyle </a></dt>
<dd><span class="bloginfo">Sleezy是一款适用于生活方式博客、个人和市场营销博客/创新设计与清洁代码.简单/响应式的wordpress主题...</span>
<p class="timeinfo"><span class="lanmu"><a href="#" target="_blank">wordpress博客主题</a></span><span class="date">2018-07-03</span></p>
<a class="read" href="/">阅读更多</a> </dd>
</dl>
</li>
</ul>
</div>
<!--bloglist end-->
</main>
<aside class="sidebar">
<div class="fenlei">
<ul class="flnav">
<li class="flselect"><a href="#" title="最新文章" class="pall"></a></li>
<li><a href="#" title="站长推荐" class="pgood"></a></li>
<li><a href="#" title="点击排行" class="pbro"></a></li>
<li><a href="#" title="头条关注" class="pfav"></a></li>
</ul>
</div>
<div class="newstw">
<ul class="sidenews">
<h2>最新主题</h2>
<li> <i><img src="images/1.jpg"></i>
<p><a href="/">mawiss WordPress博客杂志的主题</a></p>
<span>2018-05-13</span> </li>
<li> <i><img src="images/2.jpg"></i>
<p><a href="/">vidorev视频的WordPress主题</a></p>
<span>2018-05-13</span> </li>
<li> <i><img src="images/3.jpg"></i>
<p><a href="/">gridbase -新闻和博客的WordPress主题</a></p>
<span>2018-05-13</span> </li>
<li> <i><img src="images/4.jpg"></i>
<p><a href="/">minberi报纸编辑WordPress主题</a></p>
<span>2018-05-13</span> </li>
<li> <i><img src="images/5.jpg"></i>
<p><a href="/">Penta响应博客的WordPress主题</a></p>
<span>2018-05-13</span> </li>
</ul>
<ul class="sidenews">
<h2>主题推荐</h2>
<li> <i><img src="images/6.jpg"></i>
<p><a href="/">响应博客及商店的WordPress主题blggn</a></p>
<span>2018-05-13</span> </li>
<li> <i><img src="images/7.jpg"></i>
<p><a href="/">Pepper博客/迷你杂志创意的WordPress主题</a></p>
<span>2018-05-13</span> </li>
<li> <i><img src="images/8.jpg"></i>
<p><a href="/">别让这些闹心的套路，毁了你的网页设计</a></p>
<span>2018-05-13</span> </li>
<li> <i><img src="images/9.jpg"></i>
<p><a href="/">WordPress博客和杂志的主题Linx</a></p>
<span>2018-05-13</span> </li>
<li> <i><img src="images/10.jpg"></i>
<p><a href="/">trendion |个人生活博客和杂志的WordPress主题</a></p>
<span>2018-05-13</span> </li>
</ul>
<ul class="sidenews">
<h2>热门主题</h2>
<li> <i><img src="images/1.jpg"></i>
<p><a href="/">Magneto响应WordPress杂志和博客主题</a></p>
<span>2018-05-13</span> </li>
<li> <i><img src="images/2.jpg"></i>
<p><a href="/">WordPress瀑布流主题PinThis中文版</a></p>
<span>2018-05-13</span> </li>
<li> <i><img src="images/3.jpg"></i>
<p><a href="/">WordPress音乐主题Always1.8</a></p>
<span>2018-05-13</span> </li>
<li> <i><img src="images/4.jpg"></i>
<p><a href="/">Magneto响应WordPress杂志和博客主题</a></p>
<span>2018-05-13</span> </li>
<li> <i><img src="images/5.jpg"></i>
<p><a href="/">WordPress图片主题Lovephoto2.0.2分享</a></p>
<span>2018-05-13</span> </li>
</ul>
<ul class="sidenews">
<h2>主题收藏</h2>
<li> <i><img src="images/12.jpg"></i>
<p><a href="/">wordpress个人博客主题No.7极简模板分享</a></p>
<span>2018-05-13</span> </li>
<li> <i><img src="images/11.jpg"></i>
<p><a href="/">WordPress自适应淘宝客主题MiTao4.5</a></p>
<span>2018-05-13</span> </li>
<li> <i><img src="images/10.jpg"></i>
<p><a href="/">个人博客，属于我的小世界！</a></p>
<span>2018-05-13</span> </li>
<li> <i><img src="images/9.jpg"></i>
<p><a href="/">Helen响应式wordpress博客主题</a></p>
<span>2018-05-13</span> </li>
<li> <i><img src="images/8.jpg"></i>
<p><a href="/">wordpress仿微博个人博客主题tongleer</a></p>
<span>2018-05-13</span> </li>
</ul>
</div>
<div class="ad"> <img src="images/7.jpg"> </div>
<div class="about">
<h2 class="hometitle">关于我</h2>
<ul>
<div class="avatar"> <img src="images/me.jpg" alt=""> </div>
<p class="abname">bokequ | maolai</p>
<p class="abtext">无折腾,不生活。一个爱折腾，爱分享的90后。 </p>
<li><a class="xlwb" href="http://weibo.com/lai88520" target="_blank"></a></li>
<li><a class="txqq" href="http://wpa.qq.com/msgrd?v=3&uin=2195335317&site=qq&menu=yes" target="_blank"></a></li>
<li><a class="rss" href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&[email protected]" target="_blank"></a></li>
<li class="wxpic"><a class="wx" href=""></a><img src="images/pay.jpg"></li>
</ul>
</div>
<div class="tjlm">
<h2 class="hometitle">推荐栏目</h2>
<ul>
<li><a href="">关于我</a></li>
<li><a href="">模板分享</a></li>
<li><a href="">博客主题</a></li>
<li><a href="">cms主题</a></li>
<li><a href="">动漫主题</a></li>
<li><a href="http://www.bokequ.com/tag/wordpress-theme">图片主题</a></li>
</ul>
</div>
<div class="tpjx">
<h2 class="hometitle">图片主题</h2>
<ul>
<li><a href="#"><i><img src="images/1.jpg"></i><span>个人杂志博客WordPress主题Melina</span></a></li>
<li><a href="#"><i><img src="images/2.jpg"></i><span>个人杂志博客WordPress主题Melina</span></a></li>
<li><a href="#"><i><img src="images/3.jpg"></i><span>个人杂志博客WordPress主题Melina</span></a></li>
<li><a href="#"><i><img src="images/4.jpg"></i><span>个人杂志博客WordPress主题Melina</span></a></li>
<li><a href="#"><i><img src="images/5.jpg"></i><span>个人杂志博客WordPress主题Melina</span></a></li>
<li><a href="#"><i><img src="images/6.jpg"></i><span>个人杂志博客WordPress主题Melina</span></a></li>
</ul>
</div>
<div class="links">
<h2 class="hometitle">左邻右舍</h2>
<ul>
<li><a href="http://www.bokequ.com/wo/">maolai博客</a></li>
<li><a href="http://www.bokequ.com/category/theme">wordpress主题</a></li>
<li><a href="http://www.bokequ.com/blog/1/">个人博客模板</a></li>
<li><a href="#">个人博客</a></li>
</ul>
</div>
<div class="ad"> <img src="images/8.jpg"> </div>
</aside>
<!--sidebar end-->
</div>
<!--wrapper end-->
<footer>
</footer>
<a href="#" class="cd-top">Top</a>
</body>
</html>2、主页css样式
@charset "gb2312";
.wrapper { width: 1120px; margin: 130px auto 0; overflow: hidden }
/*banner*/
.banner { width: 100%; overflow: hidden; float: left; margin-bottom: 20px }
.fader { position: relative; width: 100%; padding-top: 40%; font-family: "futura", arial; overflow: hidden; }
.fader .slide { position: absolute; width: 100%; top: 0; z-index: 1; opacity: 0; height: 100%; }
.fader .slide img { width: 100%; height: 100%; }
.fader .prev, .fader .next { position: absolute; height: 80px; line-height: 55px; width: 50px; font-size: 100px; text-align: center; color: #fff; top: 50%; left: 50px; z-index: 4; margin-top: -25px; cursor: pointer; opacity: 0; transition: all 150ms; }
.fader .next { left: auto; right: 50px; }
.fader .pager_list { position: absolute; width: 100%; height: 40px; padding: 0; line-height: 40px; bottom: 0; text-align: center; z-index: 4; }
.fader .pager_list li { display: inline-block; width: 15px; height: 15px; margin: 0 7px; background: #fff; opacity: .3; text-indent: -9999px; border-radius: 999px; cursor: pointer; transition: all 150ms; }
.fader .pager_list li:hover, .fader .pager_list li.active { opacity: 1; }
.banner:hover .fader_controls .page.prev { opacity: 0.5; left: 0 }
.banner:hover .fader_controls .page.next { opacity: 0.5; right: 0 }
.imginfo { z-index: 9; position: absolute; font-size: 26px; color: #FFF; display: block; overflow: hidden; bottom: 12%; left: 0; right: 0; display: block; background: rgba(0,0,0,.4); padding: 0 40px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.bloglist { border: #ddd 1px solid; float: left; overflow: hidden; background: #fff; margin-bottom: 15px; }
.bloglist ul { padding: 20px 20px 0 20px; overflow: hidden; }
.bloglist ul li { border-bottom: dashed 1px #e5e5e5; overflow: hidden; padding-bottom: 20px; margin-bottom: 20px }
.blogpic { float: left; width: 38%; height: 150px; margin-right: 20px }
.blogpic img { width: 100%; height: 150px; }
.bloglist dl { height: 150px; position: relative; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 3; width: 58%; }
.bloglist dt { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; font-size: 20px; font-weight: normal; }
.bloglist dd { color: #989898; margin: 15px 0; display: block; font-size: 14px; line-height: 22px; overflow: hidden; }
.bloglist .timeinfo { font-size: 12px; position: absolute; left: 0; bottom: 0 }
.bloglist .timeinfo span:first-child {; border-right: #CCC 1px solid; margin-right: 10px; padding-right: 10px }
.bloglist .timeinfo .lanmu a { color: #0077dd; }
.bloglist ul li:hover dt a { color: #0077dd; }
.bloglist .read { position: absolute; display: block; background: #444; color: #FFF; bottom: 0; right: 0; padding: 5px 8px }
.sidebar { float: right; width: 28%; overflow: hidden; position: relative; z-index: 1 }
/*search*/
.search { border: 1px solid #0077dd; background: #0077dd; position: relative; border-radius: 0 5px 5px 0; }
.search input.input_submit { border: 0; background: 0; color: #fff; outline: none; position: absolute; top: 10px; right: 8% }
.search input.input_text { border: 0; line-height: 36px; height: 36px; width: 72%; padding-left: 10px; outline: none }
/*aside*/
.newstw ul { display: none }
.newstw ul:first-child { display: block }
.fenlei { background: #f8f8f8; height: 41px; line-height: 40px; }
.flnav { clear: both; border-right: 1px solid #ddd; overflow: hidden }
.fenlei li { width: 25%; float: left }
.fenlei li a { display: block; width: 100%; float: left; height: 40px; border-left: 1px solid #ddd; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; }
.fenlei .pall { background: url(http://www.bokequ.com/blog/15//images/all.png) no-repeat center center; }
.fenlei .pgood { background: url(../images/good.png) no-repeat center center; }
.fenlei .pbro { background: url(../images/browse.png) no-repeat center center; }
.fenlei .pfav { background: url(../images/favorites.png) no-repeat center center }
.fenlei .flselect a.pall { background: url(../images/allb.png) no-repeat center center #fff; border-bottom: 1px solid #fff; }
.fenlei .flselect a.pgood { background: url(../images/goodb.png) no-repeat center center #fff; border-bottom: 1px solid #fff; }
.fenlei .flselect a.pbro { background: url(../images/browseb.png) no-repeat center center #fff; border-bottom: 1px solid #fff; }
.fenlei .flselect a.pfav { background: url(../images/favoritesb.png) no-repeat center center #fff; border-bottom: 1px solid #fff; }
/*sidenews*/
.sidenews { background: #fff; padding: 20px; border: 1px solid #ddd; margin-bottom: 15px }
.sidenews h2 { font-size: 18px; padding-bottom: 20px; font-weight: normal }
.sidenews li { margin: 0 0 20px 0; overflow: hidden }
.sidenews li p { line-height: 24px; color: #888; font-size: 15px; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 2; }
.sidenews li a { color: #48494d; }
.sidenews li a:hover { color: #00A7EB; }
.sidenews i { width: 100px; height: 75px; overflow: hidden; display: block; border: #efefef 1px solid; float: left; margin-right: 10px }
.sidenews img { height: 100%; max-height: 75px; margin: auto; -moz-transition: all .5s ease; -webkit-transition: all .5s ease; -ms-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; transition: all 0.5s; }
.sidenews li:hover i img { transform: scale(1.1) }
.sidenews span { font-size: 12px; color: #9A9A9A; margin-top: 10px; display: block }
/*ad*/
.ad { border: #ddd 1px solid; background: #fff; padding: 5px; margin-bottom: 15px; }
.ad img { max-width: 100%; width: 100%; height: auto; display: block; }
/*about*/
.about { border: #ddd 1px solid; background: #fff; margin-bottom: 15px; }
.hometitle { background: #f8f8f8; font-size: 15px; padding-left: 20px; border-bottom: 1px solid #ddd; height: 38px; line-height: 38px; }
.about ul { padding: 20px; overflow: hidden }
.avatar { width: 100px; height: 100px; float: left; margin-right: 15px }
.avatar img { width: 100%; border: #ddd 1px solid; }
.abname { color: #3f3f3f; font-weight: bold; font-size: 15px; margin-bottom: 5px; }
.abtext { color: #9a9a9a; line-height: 26px; border-bottom: #f5f5f5 1px solid; padding-bottom: 20px }
.about li { width: 25%; margin: 15px 0 0; float: left; }
.about li a { color: #747F8C; width: 100%; text-align: center; padding-top: 40px; float: left; }
.about .rss { background: url(../images/ico_04.png) no-repeat center center; background-size: 40px }
.about .rss:hover { color: #000; background: url(../images/ico_04_1.jpg) no-repeat center center; background-size: 40px }
.about .xlwb { background: url(../images/ico_05.png) no-repeat scroll center center; background-size: 40px }
.about .xlwb:hover { color: #000; background: url(../images/ico_05_1.jpg) no-repeat center center; background-size: 40px }
.about .wx { background: url(../images/ico_07.png) no-repeat center center; background-size: 40px }
.about .wx:hover { color: #000; background: url(../images/ico_07_1.jpg) no-repeat center center; background-size: 40px }
.about .wxpic { position: relative }
.about .wxpic img { display: none; position: absolute; bottom: 55px; right: -10px; width: 100px; }
.about .wxpic:hover img { display: block; border: #ddd 5px solid }
.about .txqq { background: url(../images/ico_06.png) no-repeat center center; background-size: 40px }
.about .txqq:hover { color: #000; background: url(../images/ico_06_1.jpg) no-repeat center center; background-size: 40px }
/*tjlm*/
.tjlm { border: #ddd 1px solid; background: #fff; margin-bottom: 15px; }
.tjlm ul { overflow: hidden; padding: 20px }
.tjlm li { float: left; width: 49.5% !important; margin: 0 -3px -1px 2px; line-height: 28px; text-align: center; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.tjlm li a { padding: 5px 0; display: block; border: 1px solid #ddd; }
.tjlm li a:hover { background: #07d; color: #fff !important; border: 1px solid #07d; transition: all .1s ease-in 0s; }
/*tpjx*/
.tpjx { border: #ddd 1px solid; background: #fff; margin-bottom: 15px; }
.tpjx ul { padding: 10px; overflow: hidden }
.tpjx li { position: relative; float: left; width: 50%; height: 100px; overflow: hidden; }
.tpjx li i { display: block; overflow: hidden; margin: 5px 2px; }
.tpjx li img { width: 100%; min-height: 100px; -moz-transition: all .5s ease; -webkit-transition: all .5s ease; -ms-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; transition: all 0.5s }
.tpjx li span { display: block; position: absolute; bottom: -5px; margin: 5px 2px; opacity: 0; background: rgba(0,0,0,.7); font-size: 14px; padding: 0 10px; -moz-transition: all .5s ease; -webkit-transition: all .5s ease; -ms-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; transition: all 0.5s }
.tpjx li:hover span { opacity: 1; color: #FFF }
.tpjx li:hover img { transform: scale(1.1) }
/*links*/
.links { border: #ddd 1px solid; background: #fff; margin-bottom: 15px; }
.links ul { padding: 10px; overflow: hidden }
.links li { width: 47% !important; float: left; border: 1px solid #ddd; line-height: 30px; text-align: center; margin: 3px }
/*about*/
.aboutbox { margin-bottom: 15px; }
.place { background: url(../images/dw.png) no-repeat left 5px center #FFF; font-size: 14px; font-weight: normal; border: #ddd 1px solid; line-height: 38px; padding-left: 30px; margin-bottom: 10px }
.abinfos { background: #FFF; padding: 20px; border: #ddd 1px solid; }
.abinfos h3 { font-size: 18px; padding: 0 0 10px }
.abinfos p { margin: 0 0 10px }
/*pagelist*/
.pagelist { text-align: right; color: #666; width: 100%; clear: both; margin: 25px 0 5px 0; padding-top: 20px }
.pagelist a { color: #666; margin: 0 2px 10px; border: 1px solid #fff; padding: 5px 10px; background: #FFF; display: inline-block; }
.pagelist a:hover { color: #0077dd; }
.pagelist > b { border: 1px solid #0077dd; padding: 5px 10px; background: #0077dd; color: #FFF }
a.curPage { color: #19585d; font-weight: bold; }
/*sharelist*/
.sharelist { background: #fff; overflow: hidden; border: #ddd 1px solid; clear: both; }
.sharelist ul { overflow: hidden; padding: 20px 10px; position: relative }
.sharelist ul:before { content: ""; position: absolute; background: #fff; width: 1px; height: 100%; left: 10px }
.sharelist ul:after { content: ""; position: absolute; background: #fff; width: 100%; height: 1px; bottom: 20px; left: 0; }
.sharelist li { float: left; width: 27.6%; border-bottom: #ccc 1px solid; border-left: #ccc 1px solid; overflow: hidden; padding: 20px; -moz-transition: all .5s ease; -webkit-transition: all .5s ease; transition: all .5s ease; }
.sharelist .tpic { width: 100%; height: 150px; overflow: hidden; background: #CCC; }
.sharelist .tpic img { display: inline-block; width: 100%; min-height: 100%; height: auto; vertical-align: middle; transition: all .5s ease-out .1s; }
.sharelist li b { display: block; width: 100%; overflow: hidden; height: 30px; line-height: 30px; margin: 10px 0; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.sharelist li span { color: #999; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 3; font-size: 14px; height: 88px; }
.sharelist a.ayulan { float: right; color: #333; }
.sharelist .readmore { margin: 10px 0 0 0; color: #096; display: block; }
.sharelist .readmore:before { content: "+"; color: #063 }
.sharelist li:hover { background: #fff; box-shadow: #ccc 1px 1px 8px; }
.sharelist li:hover img { transform: scale(1.1) }
/*fengm*/
.fengm { background: #fff; overflow: hidden; clear: both; border: #ddd 1px solid; margin-bottom: 15px; }
.fengm h3 { background: #f8f8f8; font-size: 15px; border-bottom: 1px solid #ddd; height: 38px; line-height: 38px; padding: 0 20px }
.fengm h3 span { font-weight: normal; float: right; font-size: 14px }
.fengm .fpicbox { padding-left: 15px; clear: both; overflow: hidden }
.fengm .fpic { width: 32%; overflow: hidden; display: block; float: left; margin: 10px 8px 5px 0; height: 150px; position: relative }
.fengm .fpic i { position: absolute; font-style: normal; bottom: 0; left: 0; background: rgba(0,0,0,.7); display: block; width: 100%; color: #FFF; padding: 10px 0; opacity: 0; -moz-transition: all .5s ease; -webkit-transition: all .5s ease; -ms-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; transition: all 0.5s; }
.fengm .fpic img { width: 100%; -moz-transition: all .5s ease; -webkit-transition: all .5s ease; -ms-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; transition: all 0.5s; min-height: 150px }
.fengm .fpic:hover i { opacity: 1 }
.fengm .fpic:hover img { transform: scale(1.1) }
.fmnews { margin: 20px; clear: both }
.fmnews li { background: url(../images/li.png) no-repeat left center; padding-left: 20px; line-height: 30px; text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden; }
.fmnews li span { float: right; color: #999 }
.fmnews li:hover a { color: #00A7EB; }
/*info*/
.infosbox { border: #ddd 1px solid; overflow: hidden; background: #fff; margin-bottom: 15px }
.newsview { padding: 0 30px }
.intitle { line-height: 40px; height: 40px; font-size: 14px; ; border-bottom: #000 2px solid; }
.intitle a { font-weight: normal; }
.news_title { font-size: 24px; font-weight: normal; padding: 20px 0; color: #333; }
.infosbox .bloginfo { width: 100%; overflow: hidden; margin-bottom: 10px; clear: both }
.infosbox .bloginfo ul { overflow: hidden }
.infosbox .bloginfo li { float: left; margin-right: 20px }
.news_about { color: #888888; border: 1px solid #F3F3F3; padding: 10px; margin: 20px auto 15px auto; line-height: 23px; background: none repeat 0 0 #F6F6F6; }
.news_about strong { color: #38485A; font-weight: 400 !important; font-size: 13px; padding-right: 8px; }
.news_content { line-height: 24px; font-size: 14px; }
.news_content p { overflow: hidden; padding-bottom: 4px; padding-top: 6px; word-wrap: break-word; }
.tags a { background: #F4650E; padding: 3px 8px; margin: 0 5px 0 0; color: #fff; display: block; float: left }
.tags { width: 100%; overflow: hidden; clear: both }
.infosbox img { max-width: 620px; height: auto; }
.share { padding: 20px; }
.nextinfo { line-height: 24px; width: 100%; overflow: hidden; margin: 20px 0; background: #FFF; }/*上一篇下一篇*/
.nextinfo p { padding: 4px 10px; border-radius: 5px; }
.nextinfo a:hover { color: #000; text-decoration: underline }
/*pinglun*/
.news_pl { margin: 10px 0 20px; width: 100%; overflow: hidden; background: #FFF; }
.news_pl h2 { border-bottom: #000 2px solid; line-height: 40px; font-size: 14px; padding-left: 10px; color: #000 }
.diggit { width: 160px; margin: auto; background: #E2523A; color: #fff; box-shadow: 1px 2px 6px 0px rgba(0,0,0,.2); border-radius: 3px; line-height: 40px; text-align: center; }
.diggit a { color: #fff; }
#diggnum { margin: 5px; }
/*otherlink*/
.otherlink, .xzsm, .ffsm { width: 100%; background: #FFF; border-radius: 10px; overflow: hidden; margin: 20px 0 }
.otherlink h2 { border-bottom: #000 2px solid; line-height: 40px; font-size: 14px; padding-left: 10px; color: #000 }
.otherlink ul { margin: 10px 0 }
.otherlink li { line-height: 24px; height: 24px; display: block; width: 45%; float: left; overflow: hidden; padding-left: 10px; }
.otherlink li a:hover { text-decoration: underline; color: #000 }
/*time*/
.timebox { background: #FFF; padding: 30px }
.timebox span { position: relative; line-height: 32px; padding-right: 40px; color: #999 }
.timebox span:after { position: absolute; content: ""; width: 2px; height: 40px; background: #e0dfdf; right: 18px }
.timebox li { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.timebox li i { position: relative; font-style: normal }
.timebox li i:before { content: " "; height: 10px; width: 10px; border: 2px solid #cccaca; background: #fff; position: absolute; top: 4px; left: -26px; border-radius: 50%; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -ms-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; }
.timebox li:hover i:before { background: #3690cf }博客趣个人博客主题静态模板演示www.bokequ.com/blog/15/
标签：网页,主题,博客,height,background,overflow,border,模板 From： https://blog.51cto.com/bokequ/9175474