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事件分发机制详解
事件分发机制详解 一.基础知识介绍 1.经常用的事件有:MotionEvent.ACTION_DOWN,MotionEvent.ACTION_MOVE,MotionEvent.ACTION_UP等 2 ...
- java 集合框架(List操作)
/*list 基本操作 * * List a=new List(); * 增 * a.add(index,element);按指定位置添加,其余元素依次后移 * addAll(index,Collec ...
- 少年，是时候换种更优雅的方式部署你的php代码了
让我们来回忆下上次你是怎么发布你的代码的: 1. 先把线上的代码用ftp备份下来 2. 上传修改了的文件 3. 测试一下功能是否正常 4. 网站500了,赶紧用备份替换回去 5. 替换错了/替换漏了 ...
- 各种 SVG 制作单选和多选框动画
在线演示 源码下载
- 在Debian 8 上安装自动化工具Ansible
如果你是新手,就不要犹豫了,ansible是你最好的选择,本人菜鸟一个.废话少说,开始安装! 实验环境: 192.168.3.190 192.168.3.191 192.168.3.192 192.1 ...
- 转载 ~shell简介
Shell本身是一个用C语言编写的程序,它是用户使用Unix/Linux的桥梁,用户的大部分工作都是通过Shell完成的.Shell既是一种命令语言,又是一种程序设计语言.作为命令语言,它交互式地解释 ...
- Elasticsearch5中安装Elasticsearch-head插件
介绍 elasticsearch-head是一个用于管理Elasticsearch的web前端插件,搞过ES的同学应该都了解.该插件在es5中可以以独立服务的形式进行安装使用.本文将介绍如何操作. 相 ...
- spring cloud微服务搭建第一天
martin fowler大神提出微服务的概念后,各种微服务的技术满天飞,现在用的比较多的是spring cloud和阿里的dubbo,由于dubbo 在16年10月份就停止更新了,这里我们讲解spr ...
- OC 动态类型和静态类型
多态 允许不同的类定义相同的方法 动态类型 程序直到执行时才能确定所属的类 静态类型 将一个变量定义为特定类的对象时,使用的是静态形态 将一个变量定义为特定类的对象时,使用的是静态类型,在编译的时候就 ...
- Oracle之分组函数嵌套以及表连接
--1 数据环境准备 scott 用户下面的emp,dept表 --2 要求 :求平均工资最高的部门编号,部门名称,部门平均工资 select d.deptno,d.dname,e.salfrom(s ...