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 属性组: 动画 背景 边框和轮廓 盒(框) ...
随机推荐
- Android启动篇 — init原理（一）
======================================================== ================================== ...
- Javascript的内容
JS简介和变量 {JS的三种方式} 1 HTML中内嵌JS(不提倡使用) <button onclick="javascript:alert ...
- python练习_12
题目:敏感词文本文件 filtered_words.txt,里面的内容 和 0011题一样,当用户输入敏感词语,则用 星号 * 替换,例如当用户输入「北京是个好城市」,则变成「**是个好城市」.(11 ...
- hadoop集群搭建--CentOS部署Hadoop服务
在了解了Hadoop的相关知识后,接下来就是Hadoop环境的搭建,搭建Hadoop环境是正式学习大数据的开始,接下来就开始搭建环境!我们用到环境为:VMware 12+CentOS6.4 hadoo ...
- 当谈 SQL 优化时谈些什么？
欢迎大家关注腾讯云技术社区-博客园官方主页,我们将持续在博客园为大家推荐技术精品文章哦~ 作者:孙银行 背景 Mysql数据库作为数据持久化的存储系统,在实际业务中应用广泛.在应用也经常会因为SQL遇 ...
- 2017TSC世界大脑与科技峰会，多角度深入探讨关于大脑意识
TSC·世界大脑与科技峰会是全世界范围内的集会,多角度深入探讨关于大脑意识体验来源这一根本话题,我们是谁,现实的本质是什么,我们所处宇宙空间的本质为何.该峰会由亚利桑那大学意识研究中心主办. 会议时间 ...
- Docker 打包 部署
Docker 打包 部署 一贯的开场白,大家好: 开始学习Spring Boot ,同时也再学习 Maven 自动化构建. 项目的部署环境是 Linux 服务器,Docker容器. 之所以写这篇博客 ...
- 企业Centos服务器分区常用方案
方案一: 一般公司生产环境,数据不是非常重要,集群架构中的一个节点服务器: /boot: 200M swap: 8G内存以下,1.5倍 8G内存以上,设置8G就够了 / : 剩下的所以存储空间 方案二 ...
- Centos7 ftp环境搭建
没玩过linux,折腾了半天的ftp,好不容易亲测通过了.不容易啊. 操作环境:vm虚拟机 centos7 首先:搞定网络问题:默认情况下使用ifconfig可以看到虚拟机下是无网络的.(注:虚拟机网 ...
- Python dict 按键和值排序
python 字典(dict)的特点就是无序的,按照键(key)来提取相应值(value),如果我们需要字典按值排序的话,那可以用下面的方法来进行:1 下面的是按照value的值从大到小的顺序来排序. ...