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 属性组: 动画 背景 边框和轮廓 盒(框) ...
随机推荐
- Vue 事件驱动和依赖追踪
之前关于 Vue 数据绑定原理的一点分析,最近需要回顾,就顺便发到随笔上了 在之前实现一个自己的Mvvm中,用 setter 来观测model,将界面上所有的 viewModel 绑定到 model ...
- 如何解决chrome 等浏览器不支持本地ajax请求的问题
XMLHttpRequest cannot load file:///D:/WWW/angularlx/ui-router-test/template/content.html. Cross orig ...
- IDEA第一章----下载安装idea，设置背景字体编码，配置JDK/Maven
写在前面的话: 在程序的世界混迹了5年+,认真过,蹉跎过,回首突然发现自己得到的东西却很少.于是想写点东西记录下学习.工作抑或生活的种种,人生不只是眼前的苟且还有诗和远方,任沧海桑田韶华不在,愿无岁月 ...
- Linux基础（4）
Linux基础(四) 通过前面的知识的学习,来现学现卖咯! 1.题目:集群搭建 1.1.部署nginx反向代理三个web服务,调度算法使用加权轮询: 1.2.所有web服务使用共享存储nfs,保证所有 ...
- js基本语法汇总
1.分类 ECMAScript js基本语法与标准 DOM Document Object Model文档对象模型 BOM Browser Object Model浏览器对象模型 tips:DOM和B ...
- uoj#73 【WC2015】未来程序
在 2047 年,第 64 届全国青少年信息学奥林匹克冬令营前夕,B君找到了 2015 年,第 32 届冬令营的题目来练习. 他打开了第三题 “未来程序” 这道题目: 本题是一道提交答案题,一共 10 ...
- [笔记]ACM笔记 - 组合数
一.高中数学公式复习 , (好吧这个没学过但是既然看到了就一并抄过来了) 二.快速求组合数取模C(n, m)%p 当n和p大小不同时方法有不同. 1. n很小,p随意,p不需要为素数 1) 原理 使用 ...
- [笔记]机器学习(Machine Learning) - 03.正则化(Regularization)
欠拟合(Underfitting)与过拟合(Overfitting) 上面两张图分别是回归问题和分类问题的欠拟合和过度拟合的例子.可以看到,如果使用直线(两组图的第一张)来拟合训,并不能很好地适应我们 ...
- （jquery+ajax）省市区三级联动（封装和不封装两种方式）-----2017-05-14
首先,要实现如下图效果, 1.要理清思路: 先做出三个下拉菜单----根据第一个下拉菜单的value值获取第二个下拉列表的内容,第三个同理. 2.用到的数据库表:Chinastates表 规律:根据国 ...
- 一分钟应对勒索病毒WannaCry
一.WannaCry 勒索病毒 勒索病毒WannaCry肆虐全球,利用Windows操作系统漏洞,因链式反应迅猛自动传播,校园电脑.个人电脑.政府机关都是重灾区.中毒电脑所有文档被加密,将被勒索高达3 ...