blog界面自己写了css，参考了网站设计,想要的自己拿
junhey这就把界面的代码公布下来，可以自己修改额~（ps:麻烦加个友链http://www.cnblogs.com/junhey/ 谢谢）
/* 初始化样式 */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0px; padding: 0px; border: 0px none; font-size: 100%; vertical-align: baseline;}
button, input, textarea { border: 1px solid #CCC; border-radius: 3px; font-family: inherit; padding: 0.428571rem;}
dayTitle postTitle a{ text-decoration: none;}
h1, h2, h3, h4, h5, h6 { clear: both;}
ol, ul { list-style: outside none none;}
a:focus { outline: thin dotted;}
a { outline: medium none;color: #21759B; text-decoration: none;}
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block;}
body{ font-size: 1rem;font-family: Helvetica,Arial,sans-serif;text-rendering: optimizelegibility;color: #444; margin-top: 2em;margin-bottom: 3.42857rem;background-color: #E6E6E6;}
/* 标题样式 */
#blogTitle h1 a, #blogTitle h2 a {color: #515151;display: inline-block;text-decoration: none;}
#blogTitle h1, #blogTitle h2 {text-align: left;}
#blogTitle h1 {font-size: 1.85714rem;line-height: 1.84615;margin-bottom: 0px;}
#blogTitle h2 {font-weight: normal;font-size: 0.928571rem;line-height: 1.84615;color: #757575;}
#home{ padding: 0px 2.85714rem;box-shadow: 0px 2px 6px rgba(100, 100, 100, 0.3); margin: 0px auto;max-width: 68.5714rem;overflow: hidden;background-color: #FFF;}
#main{padding-top:2.57143rem;padding-bottom:2em;}
/* 左边文章列表样式 */
#mainContent{ float: left;width: 65.1042%; }
.day,.entrylistItem{ padding-bottom: 2.57143rem;word-wrap: break-word;-moz-hyphens: auto;}
.dayTitle{ font-size: 0.928571rem;line-height: 1.84615;color: #757575;clear: both;display:none; }
.postTitle,.entrylistPosttitle,.postTitl2{ font-size: 1.57143rem;line-height: 1.2;font-weight: normal;border-bottom: 1px solid #D0D0D0;background-color: transparent; line-height: 1.84615;}
.postCon,.entrylistPostSummary{ line-height: 1.71429;margin-top: 1em; }
.postDesc,.entrylistItemPostDesc,.postDesc2{ font-size: 0.928571rem;clear: both;color: #757575;line-height: 1.84615;font-family: Helvetica,Arial,sans-serif;text-rendering: optimizelegibility; word-wrap: break-word; -moz-hyphens: auto;} .entrylist{ font-size: 1.8rem;line-height: 1.2;font-weight: normal;border-bottom: 1px solid #D0D0D0;background-color: transparent;line-height: 1.84615; }
.c_b_p_desc{ font-size:16px; }
.PostListTitle{font-size: 1.8rem;} /* 右边导航列表样式 */
#sideBar{ float: right;width: 26.0417%; }
.catListTag,.mySearch,.catListPostCategory,.catListArticleCategory,#topview_posts_wrap{-moz-hyphens: auto;margin-bottom: 2.57143rem;word-wrap: break-word;}
#blog-sidecolumn h3{ margin-bottom: 0.857143rem; }
#blog-sidecolumn li,#blog-sidecolumn p{font-size: 0.928571rem;line-height: 1.84615; white-space: nowrap;overflow: hidden;} .catListTag,.mySearch{-moz-hyphens: auto;margin-top: 2.57143rem;margin-bottom: 2.57143rem;word-wrap: break-word;}
/* 搜索按钮样式 */
.input_my_zzk{ width: 53.6667%; }
.btn_my_zzk{ cursor: pointer;padding: 0.428571rem 0.714286rem;font-size: 0.785714rem;line-height: 1.42857;font-weight: normal;
color: #7C7C7C;background-color: #E6E6E6;background-repeat: repeat-x;background-image: -moz-linear-gradient(center top , #F4F4F4, #E6E6E6);border: 1px solid #D2D2D2;border-radius: 3px;box-shadow: 0px 1px 2px rgba(64, 64, 64, 0.1); } /* 底部样式 */
#footer{border-top: 1px solid #EDEDED;clear: both;font-size: 0.857143rem;max-width: 68.5714rem;margin-top: 1.71429rem;margin-left: auto;margin-right: auto;padding: 1.71429rem 0px;}
/* 不显示的部分 */
#navList{ display:none; }
#site_nav_under,#ad_under_post_holder,#under_post_news,#google_ad_c2,#under_post_kb{ display:none; }
/* 导航样式 */
.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
border-bottom: 1px solid #ededed;
border-top: 1px solid #ededed;
display: inline-block !important;
text-align: left;
width: 100%;
}
.main-navigation ul {
margin:;
text-indent:;
}
.main-navigation li a,
.main-navigation li {
display: inline-block;
text-decoration: none;
}
.main-navigation li a {
border-bottom:;
color: #6a6a6a;
line-height: 3.692307692;
text-transform: uppercase;
white-space: nowrap;
}
.main-navigation li a:hover {
color: #000;
}
.main-navigation li {
margin: 0 40px 0 0;
margin: 0 2.857142857rem 0 0;
position: relative;
}
.main-navigation li ul {
display: none;
margin:;
padding:;
position: absolute;
top: 100%;
z-index:;
}
.main-navigation li ul ul {
top:;
left: 100%;
}
.main-navigation ul li:hover > ul {
border-left:;
display: block;
}
.main-navigation li ul li a {
background: #efefef;
border-bottom: 1px solid #ededed;
display: block;
font-size: 11px;
font-size: 0.785714286rem;
line-height: 2.181818182;
padding: 8px 10px;
padding: 0.571428571rem 0.714285714rem;
width: 180px;
width: 12.85714286rem;
white-space: normal;
}
.main-navigation li ul li a:hover {
background: #e3e3e3;
color: #444;
}
.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a,
.main-navigation .current_page_item > a,
.main-navigation .current_page_ancestor > a {
color: #636363;
font-weight: bold;
}
/* 初始化样式 */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0px; padding: 0px; border: 0px none; font-size: 100%; vertical-align: baseline;}
button, input, textarea { border: 1px solid #CCC; border-radius: 3px; font-family: inherit; padding: 0.428571rem;}
dayTitle postTitle a{ text-decoration: none;}
h1, h2, h3, h4, h5, h6 { clear: both;}
ol, ul { list-style: outside none none;}
a:focus { outline: thin dotted;}
a { outline: medium none;color: #21759B; text-decoration: none;}
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block;}
body{ font-size: 1rem;font-family: Helvetica,Arial,sans-serif;text-rendering: optimizelegibility;color: #444; margin-top: 2em;margin-bottom: 3.42857rem;background-color: #E6E6E6;}
/* 标题样式 */
#blogTitle h1 a, #blogTitle h2 a {color: #515151;display: inline-block;text-decoration: none;}
#blogTitle h1, #blogTitle h2 {text-align: left;}
#blogTitle h1 {font-size: 1.85714rem;line-height: 1.84615;margin-bottom: 0px;}
#blogTitle h2 {font-weight: normal;font-size: 0.928571rem;line-height: 1.84615;color: #757575;}
#home{ padding: 0px 2.85714rem;box-shadow: 0px 2px 6px rgba(100, 100, 100, 0.3); margin: 0px auto;max-width: 68.5714rem;overflow: hidden;background-color: #FFF;}
#main{padding-top:2.57143rem;padding-bottom:2em;}
/* 左边文章列表样式 */
#mainContent{ float: left;width: 65.1042%; }
.day,.entrylistItem{ padding-bottom: 2.57143rem;word-wrap: break-word;-moz-hyphens: auto;}
.dayTitle{ font-size: 0.928571rem;line-height: 1.84615;color: #757575;clear: both;display:none; }
.postTitle,.entrylistPosttitle,.postTitl2{ font-size: 1.57143rem;line-height: 1.2;font-weight: normal;border-bottom: 1px solid #D0D0D0;background-color: transparent; line-height: 1.84615;}
.postCon,.entrylistPostSummary{ line-height: 1.71429;margin-top: 1em; }
.postDesc,.entrylistItemPostDesc,.postDesc2{ font-size: 0.928571rem;clear: both;color: #757575;line-height: 1.84615;font-family: Helvetica,Arial,sans-serif;text-rendering: optimizelegibility; word-wrap: break-word; -moz-hyphens: auto;} .entrylist{ font-size: 1.8rem;line-height: 1.2;font-weight: normal;border-bottom: 1px solid #D0D0D0;background-color: transparent;line-height: 1.84615; }
.c_b_p_desc{ font-size:16px; }
.PostListTitle{font-size: 1.8rem;} /* 右边导航列表样式 */
#sideBar{ float: right;width: 26.0417%; }
.catListTag,.mySearch,.catListPostCategory,.catListArticleCategory,#topview_posts_wrap{-moz-hyphens: auto;margin-bottom: 2.57143rem;word-wrap: break-word;}
#blog-sidecolumn h3{ margin-bottom: 0.857143rem; }
#blog-sidecolumn li,#blog-sidecolumn p{font-size: 0.928571rem;line-height: 1.84615; white-space: nowrap;overflow: hidden;} .catListTag,.mySearch{-moz-hyphens: auto;margin-top: 2.57143rem;margin-bottom: 2.57143rem;word-wrap: break-word;}
/* 搜索按钮样式 */
.input_my_zzk{ width: 53.6667%; }
.btn_my_zzk{ cursor: pointer;padding: 0.428571rem 0.714286rem;font-size: 0.785714rem;line-height: 1.42857;font-weight: normal;
color: #7C7C7C;background-color: #E6E6E6;background-repeat: repeat-x;background-image: -moz-linear-gradient(center top , #F4F4F4, #E6E6E6);border: 1px solid #D2D2D2;border-radius: 3px;box-shadow: 0px 1px 2px rgba(64, 64, 64, 0.1); } /* 底部样式 */
#footer{border-top: 1px solid #EDEDED;clear: both;font-size: 0.857143rem;max-width: 68.5714rem;margin-top: 1.71429rem;margin-left: auto;margin-right: auto;padding: 1.71429rem 0px;}
/* 不显示的部分 */
#navList{ display:none; }
#site_nav_under,#ad_under_post_holder,#under_post_news,#google_ad_c2,#under_post_kb{ display:none; }
/* 导航样式 */
.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
border-bottom: 1px solid #ededed;
border-top: 1px solid #ededed;
display: inline-block !important;
text-align: left;
width: 100%;
}
.main-navigation ul {
margin:;
text-indent:;
}
.main-navigation li a,
.main-navigation li {
display: inline-block;
text-decoration: none;
}
.main-navigation li a {
border-bottom:;
color: #6a6a6a;
line-height: 3.692307692;
text-transform: uppercase;
white-space: nowrap;
}
.main-navigation li a:hover {
color: #000;
}
.main-navigation li {
margin: 0 40px 0 0;
margin: 0 2.857142857rem 0 0;
position: relative;
}
.main-navigation li ul {
display: none;
margin:;
padding:;
position: absolute;
top: 100%;
z-index:;
}
.main-navigation li ul ul {
top:;
left: 100%;
}
.main-navigation ul li:hover > ul {
border-left:;
display: block;
}
.main-navigation li ul li a {
background: #efefef;
border-bottom: 1px solid #ededed;
display: block;
font-size: 11px;
font-size: 0.785714286rem;
line-height: 2.181818182;
padding: 8px 10px;
padding: 0.571428571rem 0.714285714rem;
width: 180px;
width: 12.85714286rem;
white-space: normal;
}
.main-navigation li ul li a:hover {
background: #e3e3e3;
color: #444;
}
.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a,
.main-navigation .current_page_item > a,
.main-navigation .current_page_ancestor > a {
color: #636363;
font-weight: bold;
}
blog界面自己写了css，参考了网站设计,想要的自己拿的更多相关文章
- 使用html和CSS进行网页网站设计 -- 简明步骤
网页制作流程: 1. 心中有规划,网站的骨架结构,页面布局layout. 2. 创建一个用于创建模板dwt的html页: main.html 3. 制作main.html: (1) 在html文件中依 ...
- css 参考手册 部署到本地
* 到css参考手册网站 http://css.doyoe.com/ 下载chm手册 * 到github下载对应的html页面 cd /Applications/XAMPP/htdocs git cl ...
- CSS规范--春风十里不如写好CSS
先吟几句: 最近看了看春风十里不如你,本来很少看剧的,暑假有点闲就看了,感觉不错,挺喜欢这部剧,就套了个名字,嘿嘿嘿.剧里面印象深刻的是<致橡树>这首诗,念几句: 我如果爱你,绝不像攀援的 ...
- css参考文档； 官方英文说明！！ 1 margin padding 百分比参照物 2 margin值为auto时的说明 3 div在div里垂直居中方法 4 dispaly:flex说明
css参考文档 http://css.doyoe.com/ 两篇很好的文章:(下面的css官方英文说明链接 有时间可以研究下 http://www.w3.org/TR/css3-box/ ...
- 如何写好CSS？（OOCSS\DRY\SMACSS）
我现在面对的CSS基本上就是一个三头六臂的怪物,一点不夸张,因为真的是三头六臂,同一个样式在同一个element上作用了好几遍,而同一个样式又分散在4,5个class上,优先级有很多层.可以看得出这个 ...
- GS界面上显示的重要参考数据
GS界面上显示的重要参考数据,这个是压测时重要参考 struct GSinfo { int revBuffNum; int sendBuffNum; int clientNum; int dbAskN ...
- FontAwesome 4.7.0 中完整的675个图标样式CSS参考
FontAwesome 4.7.0 中完整的675个图标样式CSS参考 用法:首先引入CSS文件:<link href="https://maxcdn.bootstrapcdn.com ...
- 前端读者 | 别人写的css，你敢用吗？
本文来自@yeaseonzhang:链接:http://yeaseonzhang.github.io/2018/04/10/%E5%88%AB%E4%BA%BA%E5%86%99%E7%9A%84cs ...
- CSS3：CSS 参考手册
ylbtech-CSS:CSS 参考手册 1.返回顶部 1. W3School 的 CSS 参考手册定期通过所有主流浏览器进行测试. CSS 属性 CSS 属性组: 动画 背景 边框和轮廓 盒(框) ...
随机推荐
- 跨语言学习的基本思路及python的基础学习
笔者是C#出身,大学四年主修C#,工作三年也是C#语言开发.但在学校里其他的语言也有相应的课程,eg:Java,Php,C++都学过,当然只是学了皮毛(大学嘛,你懂得),严格来说未必入门,但这些语言的 ...
- 各种API总结大全 JAVA、HTML、HTML5等等
本文章,发现新的API会进行更新,如果你们觉得有新的版本或者拥有新的,也可以发有邮箱到"zenglei8732@163.com"当中,本人会在12小时内更新,非常感谢!!! HTM ...
- Android高效内存：让图片占用尽可能少的内存
Android高效内存:让图片占用尽可能少的内存 一.让你的图片最小化 1.1 大图小图内存使用情况对比 大图:440 * 336 小图:220 * 168 小图的高宽都是大图的1/2--> ...
- python——面向对象基础
概述 面向过程:根据业务逻辑从上到下写垒代码 函数式:将某功能代码封装到函数中,日后便无需重复编写,仅调用函数即可 面向对象:对函数进行分类和封装,让开发“更快更好更强...” 面向过程编程最易被初学 ...
- Apache Spark1.1.0部署与开发环境搭建
Spark是Apache公司推出的一种基于Hadoop Distributed File System(HDFS)的并行计算架构.与MapReduce不同,Spark并不局限于编写map和reduce ...
- 与64位版本的Windows不兼容，masm运行不了
问题: 在Window64位运行不了的masm 解决方法: 1.下载DosBox0.74(当前最新): 2.安装后运行,运行后出现控制台: 3.在DosBox的控制台下运行 Mount x: x:/m ...
- 谈谈一些有趣的CSS题目（十七）-- 不可思议的颜色混合模式 mix-blend-mode
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- 微软Build 2017第二天 .NET Standard 2.0 Preview 的客户端跨平台
微软公司一年一度的开发者大会,即“Microsoft Build 2017”在总部西雅图正式开幕.按照官方安排,本次大会将持续 3 天,主题围绕微软公司各项最新技术成果的展示和研讨,包括与微软相关的产 ...
- [笔记]cin、cout与scanf、printf的效率差异对比分析
之前上传UVa227 puzzle时,好不容易AC了,但发现自己用时50(ms),而在VJ上看到人家都是40ms.20ms,于是打开一个20ms的代码查看人家强在哪里.但结果研究了半天感觉差不多,于是 ...
- 非阻塞式线程安全列表-ConcurrentLinkedDeque
一.ConcurrentLinkedDeque public class ConcurrentLinkedDeque<E> extends AbstractCollection<E& ...