经过360多分钟的打磨。精品仿FANFOU博客园主题横空出世。。。he tui
展示效果如下：
额 好吧，这是一款花里胡哨的 博客主题。纯 css 实现。不外加任何 图片 及 js 文件。本来打算仿 FANFOU的模板，结果发现 官方早已不让注册了。只能仿了首页的布局。效果可以看我 的博客。。。
下面进入主题：
第一步：设置 博客默认 皮肤
如上图所示：这里默认选用模板 “SimpleMemory”，注意选择其他模板样式不会生效；
第二步：勾选模板默认样式
在页面定制css选项下 勾选禁用模板默认css
第三步：设置自定义样式
复制下面 css 代码，粘贴到 “页面定制输入框选项下 ”
.navbar, #top_nav, #blogCalendar, #lnkBlogLogo, .blogStats, #under_post_card1, #likecs_c2, #under_post_card2, #likecs_c1, #blogTitle h2, #sidebar_search, #sidebar_recentcomments, #sidebar_topcommentedposts, .buryit, #EntryTag, .entrylistDescription { display: none; } *, * html * { font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif; } body { margin: 0px; padding: 0px; background: linear-gradient(40deg, #155263 9%, #155263 43%, #FF6F3C calc(43% + 1px), #FF6F3C 52%, #FF9A3C calc(52% + 1px), #FF9A3C 80%, #FFC93C calc(80% + 1px), #FFC93C 100%); } a { text-decoration: none; } #home { width: 70%; margin: 0 auto; display: flex; flex-direction: column; } #header { display: flex; justify-content: space-between; align-items: center; } #blogTitle h1 a { text-decoration: none; color: rgb(13, 0, 77); text-shadow: rgb(13 0 77 / 8%) 0px 1px 2px, rgb(13 0 77 / 8%) 0px 2px 4px, rgb(13 0 77 / 8%) 0px 4px 8px, rgb(13 0 77 / 6%) 0px 6px 12px; font-size: 30px; font-family: "幼圆"; letter-spacing: 8px } #navigator { background: linear-gradient(125deg, #ECFCFF 0%, #ECFCFF 40%, #B2FCFF calc(40% + 1px), #B2FCFF 60%, #5EDFFF calc(60% + 1px), #5EDFFF 72%, #3E64FF calc(72% + 1px), #3E64FF 100%); padding: 7px 0; border-radius: 8px; text-shadow: rgb(13 0 77 / 8%) 0px 1px 2px, rgb(13 0 77 / 8%) 0px 2px 4px, rgb(13 0 77 / 8%) 0px 4px 8px, rgb(13 0 77 / 6%) 0px 6px 12p; } #navigator ul { list-style: none; margin: 0px; padding: 0px; margin-right: 15px; } #navigator ul li { text-decoration: none; float: left; margin-left: 15px; } #navigator ul li a { text-decoration: none; color: rgb(13, 0, 77); text-shadow: rgb(13 0 77 / 8%) 0px 1px 2px, rgb(13 0 77 / 8%) 0px 2px 4px, rgb(13 0 77 / 8%) 0px 4px 8px, rgb(13 0 77 / 6%) 0px 6px 1 } #main { display: flex; background: #ffffff; border-radius: 8px; text-shadow: rgb(13 0 77 / 8%) 0px 1px 2px, rgb(13 0 77 / 8%) 0px 2px 4px, rgb(13 0 77 / 8%) 0px 4px 8px, rgb(13 0 77 / 6%) 0px 6px 12p; } #mainContent { width: 70%; padding: 20px; } .dayTitle, .entrylistTitle, .PostListTitle { width: auto; background: linear-gradient(125deg, #ECFCFF 0%, #ECFCFF 40%, #B2FCFF calc(40% + 1px), #B2FCFF 60%, #5EDFFF calc(60% + 1px), #5EDFFF 72%, #3E64FF calc(72% + 1px), #3E64FF 100%); border-radius: 8px; padding: 5px; margin-bottom: 15px; } .dayTitle a { color: #8590a6; } .postTitle { margin-bottom: 15px; } .postTitle2 span { color: black; font-size: 18px; } .postCon, .entrylistPostSummary { background: rgba(41, 41, 41, 0.4); border-radius: 8px; padding: 12px; font-size: 13px; } .c_b_p_desc { font-weight: 600; color: rgb(255, 255, 255); text-shadow: rgb(13 0 77 / 8%) 0px 1px 2px, rgb(13 0 77 / 8%) 0px 2px 4px, rgb(13 0 77 / 8%) 0px 4px 8px, rgb(13 0 77 / 6%) 0px 6px 12 } .c_b_p_desc a { color: rgb(255, 255, 255); } .postDesc, .entrylistItemPostDesc { font-size: 12px; color: rgba(41, 41, 41, 0.4); margin: 10px 0px 20px 0px; } .postDesc a, .entrylistItemPostDesc a { font-size: 12px; color: rgba(41, 41, 41, 0.4); } #nav_next_page { background: linear-gradient(125deg, #ECFCFF 0%, #ECFCFF 40%, #B2FCFF calc(40% + 1px), #B2FCFF 60%, #5EDFFF calc(60% + 1px), #5EDFFF 72%, #3E64FF calc(72% + 1px), #3E64FF 100%); font-size: 12px; padding: 12px; border-radius: 8px; } #nav_next_page a { color: rgb(13, 0, 77); } #homepage_top_pager .pager a, .forFlow .pager a { color: rgb(13, 0, 77); background: linear-gradient(125deg, #ECFCFF 0%, #ECFCFF 40%, #B2FCFF calc(40% + 1px), #B2FCFF 60%, #5EDFFF calc(60% + 1px), #5EDFFF 72%, #3E64FF calc(72% + 1px), #3E64FF 100%); border: none; padding: 4px 10px; border-radius: 8px; } #homepage_bottom_pager .pager a { color: rgb(13, 0, 77); background: linear-gradient(125deg, #ECFCFF 0%, #ECFCFF 40%, #B2FCFF calc(40% + 1px), #B2FCFF 60%, #5EDFFF calc(60% + 1px), #5EDFFF 72%, #3E64FF calc(72% + 1px), #3E64FF 100%); border: none; padding: 4px 10px; border-radius: 8px; } .catListTitle { font-size: 18px; letter-spacing: 3px; } #sideBar { width: 30%; background: linear-gradient(125deg, #ECFCFF 0%, #ECFCFF 40%, #B2FCFF calc(40% + 1px), #B2FCFF 60%, #5EDFFF calc(60% + 1px), #5EDFFF 72%, #3E64FF calc(72% + 1px), #3E64FF 100%); border-top-right-radius: 8px; border-bottom-right-radius: 8px; border-left: 1px solid #5EDFFF; padding: 20px; } #footer { text-shadow: rgb(13 0 77 / 8%) 0px 1px 2px, rgb(13 0 77 / 8%) 0px 2px 4px, rgb(13 0 77 / 8%) 0px 4px 8px, rgb(13 0 77 / 6%) 0px 6px 12p; background: #fff; font-size: 12px; margin: 1.25em 0; padding: 10px; border-radius: 8px; text-align: center; } .notice { font-size: 12px; border-radius: 3px; padding: 13px; letter-spacing: 3px; background: #8590a6; color: rgb(255, 255, 255); box-shadow: 5px 1px 5px #888888; } #profile_block { margin-top: 15px; display: flex; flex-wrap: wrap; font-size: 11px; justify-content: center; background: radial-gradient(ellipse farthest-side at 76% 77%, rgba(245, 228, 212, 0.25) 4%, rgba(255, 255, 255, 0) calc(4% + 1px)), radial-gradient(circle at 76% 40%, #fef6ec 4%, rgba(255, 255, 255, 0) 4.18%), linear-gradient(135deg, #ff0000 0%, #000036 100%), radial-gradient(ellipse at 28% 0%, #ffcfac 0%, rgba(98, 149, 144, 0.5) 100%), linear-gradient(180deg, #cd6e8a 0%, #f5eab0 69%, #d6c8a2 70%, #a2758d 100%); background-blend-mode: normal, normal, screen, overlay, normal; color: rgb(255, 255, 255); text-shadow: rgb(13 0 77 / 8%) 0px 1px 2px, rgb(13 0 77 / 8%) 0px 2px 4px, rgb(13 0 77 / 8%) 0px 4px 8px, rgb(13 0 77 / 6%) 0px 6px 12p; padding-top: 80px; border-radius: 3px; } #profile_block br { display: none; } #profile_block a { margin-right: 10px; color: rgb(255, 255, 255); } .catListLink ul { list-style: none; margin: 0px; padding: 0px; font-size: 12px; padding: 10px; border-radius: 3px; letter-spacing: 3px; background: linear-gradient(55deg, #212121 0%, #212121 40%, #323232 calc(40% + 1px), #323232 60%, #008F95 calc(60% + 1px), #008F95 70%, #14FFEC calc(70% + 1px), #14FFEC 100%); } .catListLink ul li a { color: #ffffff; a } #sidebar_categories ul, #sidebar_toptags ul { margin: 0px; padding: 0px; } #sidebar_categories ul li, #sidebar_toptags ul li { background: rgba(41, 41, 41, 0.4); padding: 5px; border-radius: 3px; text-shadow: rgb(13 0 77 / 8%) 0px 1px 2px, rgb(13 0 77 / 8%) 0px 2px 4px, rgb(13 0 77 / 8%) 0px 4px 8px, rgb(13 0 77 / 6%) 0px 6px 12p; margin-bottom: 4px; list-style-type: none; } #sidebar_categories ul li a, #sidebar_toptags ul li a { color: #ffffff; font-size: 12px; } .post>.postTitle { background: linear-gradient(125deg, #ECFCFF 0%, #ECFCFF 40%, #B2FCFF calc(40% + 1px), #B2FCFF 60%, #5EDFFF calc(60% + 1px), #5EDFFF 72%, #3E64FF calc(72% + 1px), #3E64FF 100%); font-size: 12px; padding: 12px; border-radius: 8px; } #green_channel { font-size: 12px; text-align: right; background: #f1f1f1; padding: 12px; border-radius: 8px; border: 0px; width: auto; } .blogpost-body-html { letter-spacing: 2px; } #green_channel #green_channel_digg, #green_channel #green_channel_follow, #green_channel #green_channel_favorite { background: none; box-shadow: none; border: none; color: #323232; } #green_channel a:link, #green_channel a:visited, #green_channel a:active { color: #515879 !important; border: none !important; text-shadow: none !important; font-weight: 400 !important; } #BlogPostCategory { position: relative; top: 46px; left: 20px; width: 200px; font-size: 13px; color: #515879; } #BlogPostCategory a { color: #515879; } #author_profile { background: linear-gradient(123deg, #2E99B0 0%, #2E99B0 40%, #FCD77F calc(40% + 1px), #FCD77F 60%, #FF2E4C calc(60% + 1px), #FF2E4C 75%, #1E1548 calc(75% + 1px), #1E1548 100%); border-radius: 8px; padding: 12px; width: auto; float: none; } .author_avatar { border-radius: 20px; border: 1px solid #ffffff; text-shadow: #14FFEC; } .author_profile_info a { color: #fff; } #div_digg { position: relative; top: -87px; width: auto; margin-right: 15px; margin-bottom: 0px; } .diggit { border-radius: 3px; text-shadow: #14FFEC; } #comment_nav { background: #f1f1f1; padding: 12px; border-radius: 8px; margin-bottom: 15px; } #comment_nav a { color: #515879; font-size: 10px; } #blog-comments-placeholder { font-size: 13px; color: #515879; margin: 10px 0; letter-spacing: 2px; } #blog-comments-placeholder a { color: #515879; } .blog_comment_body { background: #f1f1f1; padding: 5px 20px; margin: 10px; border-radius: 8px; } .feedbackManage { margin-bottom: 10px; margin-left: 0px; } .feedback_area_title { font-size: 18px; color: #000; } .comment_btn { color: rgb(13, 0, 77); background: linear-gradient(125deg, #ECFCFF 0%, #ECFCFF 40%, #B2FCFF calc(40% + 1px), #B2FCFF 60%, #5EDFFF calc(60% + 1px), #5EDFFF 72%, #3E64FF calc(72% + 1px), #3E64FF 100%); border: none; padding: 4px 10px; border-radius: 8px; } .entrylist>.entrylistTitle { display: none; } .entrylistItemTitle span { color: black; font-size: 18px; } .entrylistPosttitle { margin-bottom: 20px; } #myposts .postTitl2 { margin-bottom: 15px; } #myposts .postTitl2 a { color: black; font-size: 18px; margin-bottom: 15px; } #myposts .postDesc2 { background: #f1f1f1; padding: 12px; border-radius: 8px; margin-bottom: 15px; } #TopViewPostsBlock ul, #TopDiggPostsBlock ul { margin: 0px; padding: 0px; } #TopViewPostsBlock ul li, #TopDiggPostsBlock ul li { list-style-type: none; background: rgba(41, 41, 41, 0.4); padding: 6px; border-radius: 8px; margin-bottom: 7px; } #TopViewPostsBlock ul li a, #TopDiggPostsBlock ul li a { font-size: 13px; color: #fff; } .comment_textarea { width: auto; }