<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>CodingLife的CSS样式整理 - jepson6669 - 博客园</title> <link type="text/css" rel="stylesheet" href="/bundles/blog-common.css?v=ON3Mxdo4-HlSMqbNDBZXhFIcGLon3eZDvU8zBESgwkk1"/> <link id="MainCss" type="text/css" rel="stylesheet" href="/skins/CodingLife/bundle-CodingLife.css?v=g4Oce5UBaUn_FUwadcT09ICEg5NkULQGtUpNhTtrI8U1"/> <link type="text/css" rel="stylesheet" href="/blog/customcss/407290.css?v=oXaLMjctFfywGJJ%2f7%2fm3qFj%2bIJ4%3d"/> <link id="mobile-style" media="only screen and (max-width: 767px)" type="text/css" rel="stylesheet" href="/skins/CodingLife/bundle-CodingLife-mobile.css?v=Xay8b9tTSw814nBzbOgvS6rrbcxrobMhvHJHdZAO9vI1"/> <link title="RSS" type="application/rss+xml" rel="alternate" href="http://www.cnblogs.com/jepson6669/rss"/> <link title="RSD" type="application/rsd+xml" rel="EditURI" href="http://www.cnblogs.com/jepson6669/rsd.xml"/> <link type="application/wlwmanifest+xml" rel="wlwmanifest" href="http://www.cnblogs.com/jepson6669/wlwmanifest.xml"/> <script src="//common.cnblogs.com/scripts/jquery-2.2.0.min.js"></script> <script type="text/javascript">var currentBlogApp = ‘jepson6669‘, cb_enable_mathjax=false;var isLogined=false;</script> <script src="/bundles/blog-common.js?v=O-NTEmnhjbG7lSYLc3yeqkrVxfMJyY9iXf4xyjlKikw1" type="text/javascript"></script> </head> <body> <a name="top"></a> <!--PageBeginHtml Block Begin--> <style> #back-top { position: fixed; bottom: 10px; right: 5px; z-index: 99; } #back-top span { width: 50px; height: 64px; display: block; background:url(http://images.cnblogs.com/cnblogs_com/jepson6669/1150450/o_rocket.png) no-repeat center center; } #back-top a{outline:none} </style> <script type="text/javascript"> $(function() { // hide #back-top first $("#back-top").hide(); // fade in #back-top $(window).scroll(function() { if ($(this).scrollTop() > 500) { $(‘#back-top‘).fadeIn(); } else { $(‘#back-top‘).fadeOut(); } }); // scroll body to 0px on click $(‘#back-top a‘).click(function() { $(‘body,html‘).animate({ scrollTop: 0 }, 800); return false; }); }); </script> <p id="back-top" style="display:none"><a href="#top"><span></span></a></p> <!--PageBeginHtml Block End--> <!--done--> <div id="home"> <div id="header"> <div id="blogTitle"> <a id="lnkBlogLogo" href="http://www.cnblogs.com/jepson6669/"><img id="blogLogo" src="/Skins/custom/images/logo.gif" alt="返回主页" /></a> <!--done--> <h1><a id="Header1_HeaderTitle" class="headermaintitle" href="http://www.cnblogs.com/jepson6669/">jepson6669</a></h1> <h2></h2> </div><!--end: blogTitle 博客的标题和副标题 --> <div id="navigator"> <ul id="navList"> <li><a id="blog_nav_sitehome" class="menu" href="http://www.cnblogs.com/">博客园</a></li> <li><a id="blog_nav_myhome" class="menu" href="http://www.cnblogs.com/jepson6669/">首页</a></li> <li><a id="blog_nav_newpost" class="menu" rel="nofollow" href="https://i.cnblogs.com/EditPosts.aspx?opt=1">新随笔</a></li> <li><a id="blog_nav_contact" class="menu" rel="nofollow" href="https://msg.cnblogs.com/send/jepson6669">联系</a></li> <li><a id="blog_nav_rss" class="menu" href="http://www.cnblogs.com/jepson6669/rss">订阅</a> <!--<a id="blog_nav_rss_image" class="aHeaderXML" href="http://www.cnblogs.com/jepson6669/rss"><img src="//www.cnblogs.com/images/xml.gif" alt="订阅" /></a>--></li> <li><a id="blog_nav_admin" class="menu" rel="nofollow" href="https://i.cnblogs.com/">管理</a></li> </ul> <div class="blogStats"> <div id="blog_stats"> <span id="stats_post_count">随笔 - 8 </span> <span id="stats_article_count">文章 - 0 </span> <span id="stats-comment_count">评论 - 0</span> </div> </div><!--end: blogStats --> </div><!--end: navigator 博客导航栏 --> </div><!--end: header 头部 --> <div id="main"> <div id="mainContent"> <div class="forFlow"> <div id="post_detail"> <!--done--> <div id="topics"> <div class = "post"> <h1 class = "postTitle"> <a id="cb_post_title_url" class="postTitle2" href="http://www.cnblogs.com/jepson6669/p/8306945.html">CodingLife的CSS样式整理</a> </h1> <div class="clear"></div> <div class="postBody"> <div id="post_body" class="blogpost-body"><p><a href="#name1">1 首页的超链接鼠标悬停效果</a></p> <p><a href="#name2">2 正文标题鼠标悬停效果</a></p> <p><a href="#name3">3 页面目录超链接显示样式</a></p> <h1><a name="name1"></a><span style="font-family: 隶书">1 首页的超链接鼠标悬停效果</span></h1> <p><img src="https://images2017.cnblogs.com/blog/1320077/201801/1320077-20180118002747521-1945525023.png" alt=""></p> <div class="code"> <pre><span style="color: #800000"><span style="background-color: #ff0000">.postTitle a</span>:hover </span>{<span style="color: #ff0000"> color</span>:<span style="color: #0000ff">red</span>;<span style="color: #ff0000"> text-decoration</span>:<span style="color: #0000ff">none </span>}</pre> </div> <h1> <a name="name2"></a><span style="font-family: 隶书">2 正文标题鼠标悬停效果</span></h1> <p><span style="font-family: 隶书"><img src="https://images2017.cnblogs.com/blog/1320077/201801/1320077-20180118003657178-1116047257.png" alt=""></span></p> <div class="code"> <pre><span style="color: #800000"><span style="background-color: #ff0000">#topics .postTitle a</span>:hover </span>{<span style="color: #ff0000"> color</span>:<span style="color: #0000ff">red</span>; }</pre> </div> <h1><span style="font-family: 隶书"> <a name="name3"></a>3 页面目录超链接显示样式</span></h1> <p><span style="font-family: 隶书"><img src="https://images2017.cnblogs.com/blog/1320077/201801/1320077-20180118004636209-147609539.png" alt=""></span></p> <div class="Highlighter"> <pre class="brush:css;gutter:true;"><span style="background-color: #ff0000"><strong>#cnblogs_post_body p a</strong></span>:hover{ color: red; } </pre> </div> <p> </p></div><div id="MySignature"></div> <div class="clear"></div> <div id="blog_post_info_block"> <div id="BlogPostCategory"></div> <div id="EntryTag"></div> <div id="blog_post_info"> </div> <div class="clear"></div> <div id="post_next_prev"></div> </div> </div> <div class = "postDesc">posted @ <span id="post-date">2018-01-18 00:30</span> <a href=‘http://www.cnblogs.com/jepson6669/‘>jepson6669</a> 阅读(<span id="post_view_count">...</span>) 评论(<span id="post_comment_count">...</span>) <a href ="https://i.cnblogs.com/EditPosts.aspx?postid=8306945" rel="nofollow">编辑</a> <a href="#" onclick="AddToWz(8306945);return false;">收藏</a></div> </div> <script type="text/javascript">var allowComments=false,cb_blogId=407290,cb_entryId=8306945,cb_blogApp=currentBlogApp,cb_blogUserGuid=‘b6c0f0da-3071-4f79-3026-08d54dba4453‘,cb_entryCreatedDate=‘2018/1/18 0:30:00‘;loadViewCount(cb_entryId);var cb_postType=1;</script> </div><!--end: topics 文章、评论容器--> </div><a name="!comments"></a><div id="blog-comments-placeholder"></div><script type="text/javascript">var commentManager = new blogCommentManager();commentManager.renderComments(0);</script> <div id=‘comment_form‘ class=‘commentform‘> <a name=‘commentform‘></a> <div id=‘divCommentShow‘></div> <div id=‘comment_nav‘><span id=‘span_refresh_tips‘></span><a href=‘javascript:void(0);‘ onclick=‘return RefreshCommentList();‘ id=‘lnk_RefreshComments‘ runat=‘server‘ clientidmode=‘Static‘>刷新评论</a><a href=‘#‘ onclick=‘return RefreshPage();‘>刷新页面</a><a href=‘#top‘>返回顶部</a></div> <div id=‘comment_form_container‘></div> <div class=‘ad_text_commentbox‘ id=‘ad_text_under_commentbox‘></div> <div id=‘ad_t2‘></div> <div id=‘opt_under_post‘></div> <div id=‘cnblogs_c1‘ class=‘c_ad_block‘></div> <div id=‘under_post_news‘></div> <div id=‘cnblogs_c2‘ class=‘c_ad_block‘></div> <div id=‘under_post_kb‘></div> <div id=‘HistoryToday‘ class=‘c_ad_block‘></div> <script type=‘text/javascript‘> fixPostBody(); setTimeout(function () { incrementViewCount(cb_entryId); }, 50); deliverAdT2(); deliverAdC1(); deliverAdC2(); loadNewsAndKb(); loadBlogSignature(); LoadPostInfoBlock(cb_blogId, cb_entryId, cb_blogApp, cb_blogUserGuid); GetPrevNextPost(cb_entryId, cb_blogId, cb_entryCreatedDate, cb_postType); loadOptUnderPost(); GetHistoryToday(cb_blogId, cb_blogApp, cb_entryCreatedDate); </script> </div> </div><!--end: forFlow --> </div><!--end: mainContent 主体内容容器--> <div id="sideBar"> <div id="sideBarMain"> <div id="blog-calendar" style="display:none"></div><script type="text/javascript">loadBlogDefaultCalendar();</script> <div id="leftcontentcontainer"> <div id="blog-sidecolumn"></div><script type="text/javascript">loadBlogSideColumn();</script> </div> </div><!--end: sideBarMain --> </div><!--end: sideBar 侧边栏容器 --> <div class="clear"></div> </div><!--end: main --> <div class="clear"></div> <div id="footer"> <!--done--> Copyright ©2018 jepson6669 </div><!--end: footer --> </div><!--end: home 自定义的最大容器 --> </body> </html>
