`
lovnet
  • 浏览: 6878636 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
文章分类
社区版块
存档分类
最新评论

利用CSS美化Blog文章

阅读更多

利用CSS美化Blog文章

本文地址: var path=document.URL; document.write(document.URL)

发布于 var path=document.URL; date=path.substring(40,44); month=path.substring(45,47); day=path.substring(48,50); document.write(date+'年'+month+'月'+day+'日');

这是我使用的CSS

<styletype="text/css">
/*********************************
 * Greenerycn Blog Css           *
 *                               *
 * Date: 2008-2-21               *
 * Last Modified Date:           *
 *       2008-2-21               *
 *                               *
 * Contact:greenerycn@gmail.com  *
 * copyright:创作共享 非商业        *
 *                               *
 *********************************/


/*正文区域*/
#GreenerycnBody
{
padding-top
:10px;
clear
:both;
letter-spacing
:1px;/*字符间距*/


}
/*链接样式*/
#GreenerycnBody.link
{
width
:90%;
font-family
:tahoma;
font-size
:9pt;
line-height
:100%;
text-transform
:lowercase;/*小写显示*/

}

#GreenerycnBodya,#GreenerycnBodya:link,#GreenerycnBodya:active
{
font-weight
:bold;
text-decoration
:none;

color
:green;

}
#GreenerycnBodya:hover
{
text-decoration
:underline;
color
:green;

}

/*层样式*/
#GreenerycnBodydiv
{
border
:solid1px#78A3D3;
background-color
:#F5F8FC;
word-break
:break-all;
overflow
:auto;
padding
:15px;
margin
:15px0;

}

/*总标题*/
#GreenerycnBodyh1
{
font-size
:23px;
padding
:10px0;
font-family
:Verdana,Arial,Sans-Serif;
border-bottom
:dashed1pxgray;
text-align
:center;
background-color
:#F5F8FC;
height
:40px;
letter-spacing
:0px;/*字符间距*/
}
/*发布日期*/
#GreenerycnBody.fooTime
{
margin
:0;
padding-top
:5px;
text-align
:center;
font-size
:12px;
line-height
:1em;
font-family
:Verdana,Arial,Sans-Serif;
border
:none;

}

/*标题*/
#GreenerycnBody.title
{
font-size
:16px;
font-family
:宋体;
TEXT-ALIGN
:center;
font-weight
:bold;
}

/*段落*/
#GreenerycnBodyp
{
font-family
:Verdana,Arial,Sans-Serif;
text-indent
:2em;
line-height
:100%;
font-size
:11pt;
whiteSpace
:normal;
letter-spacing
:1px;/*字符间距*/
}
/*一个蓝色的代码框*/

#GreenerycnBody.code
{
font-family
:"Verdana","CourierNew","Courier","mono";
font-size
:12px;
line-height
:18px;
color
:#000000;
background-color
:#DDEDFB;
margin
:5px;
padding
:5px;
border
:1pxsolidgreen;
display
:block;
}

#GreenerycnBodyblockquote
{
background-color
:lightyellow;
border
:1pxdotted#dedbde;
padding
:10px;
}
/*脚注*/
#GreenerycnBody.foot
{
height
:43px;
padding
:12px000;
text-align
:center;
margin
:30px000;
font-size
:12px;
border
:none;
border-top
:dashed1pxgray;
}
</style>

我的文章框架:

<divid="GreenerycnBody">

<h1>标题</h1>
<pclass="fooTime">本文地址:
<scripttype="text/javascript">
document.write(document.URL)
</script>

<pclass="fooTime">发布于
<scripttype="text/javascript">varpath=document.URL;date=path.substring(40,44);month=path.substring(45,47);day=path.substring(48,50);document.write(date+''+month+''+day+'');</script>
</p>


<div>
<pclass="link"><ahref="http://blog.csdn.net/greenerycn">Grenerycn'sBlog</a></p>
<p>正文
</p>
</div>
<divclass="foot">本文地址:<scripttype="text/javascript">
document.write(document.URL)
</script></div>


</div>
本文地址: document.write(document.URL)
分享到:
评论

相关推荐

    使用纯CSS美化radio和checkbox

    本篇文章将深入探讨如何使用纯CSS来美化radio和checkbox,使它们更符合现代网页的视觉效果。 首先,我们要明白HTML中的radio和checkbox是如何工作的。`&lt;input type="radio"&gt;`定义了单选按钮,`...

    利用html+css+mysql+php来快速的制作动态网页(以制作一个博客网站为列)

    接着,用CSS文件来美化这些模板。接下来,创建MySQL数据库并设计数据表结构,最后用PHP编写逻辑代码,实现用户与数据库的交互。 为了便于理解,你可以参考提供的博客资源,其中包含了具体的代码示例和步骤详解。...

    个人博客html+css+JavaScript完整代码

    HTML负责网站的基本结构,CSS则用于美化页面样式,而JavaScript则为交互性提供动力。以下是对这些知识点的详细说明: **HTML(HyperText Markup Language)** HTML是网页内容的基础,它定义了网页的各个元素,如...

    jQuery CSS3文章点赞功能代码.zip

    本文将深入探讨如何利用jQuery和CSS3实现一个文章点赞功能,包括点赞加一和取消点赞的交互效果。 jQuery是一个轻量级、高性能的JavaScript库,它简化了HTML文档遍历、事件处理、动画设计和Ajax交互。在实现文章点赞...

    博客:《好看的alert弹窗或样式弹窗》文章中所涉及到js和css

    总结来说,博客《好看的alert弹窗或样式弹窗》主要讨论了如何利用CSS和JavaScript来设计和实现自定义的alert弹窗。CSS允许我们定制弹窗的视觉样式,包括颜色、布局和动画效果,而JavaScript则负责处理弹窗的显示逻辑...

    DIV+CSS纸张效果博客模板

    总的来说,"DIV+CSS纸张效果博客模板"是一个利用现代Web技术创造独特用户体验的实例,通过HTML的结构和CSS的样式,将博客设计得如同真实的纸张一般,同时结合JavaScript增强交互性,使得用户在数字世界中也能感受到...

    博客园美化.zip,含HTML+js+css代码

    用户可能需要将这些文件部署到适当的服务器环境中,或者利用博客园提供的自定义模板功能,将这些代码应用到自己的博客上。 总的来说,HTML负责内容的结构,CSS负责视觉表现,而JavaScript则增强了用户体验。通过这...

    经典DIV+CSS模板 经典DIV+CSS模板

    3. `blog.html`:这个文件可能是用于展示博客文章的页面,可能会包含文章列表、分类、搜索功能等,同样会运用和CSS来实现响应式和易读的布局。 4. `table.html`:可能展示了如何使用CSS美化HTML表格,包括单元格、...

    hao44文章系统(bb8b修改美化)

    对于一个美化过的文章系统,可能涉及到前端UI/UX设计,使用了HTML、CSS和JavaScript来构建用户界面,提供良好的交互体验。可能还利用了Bootstrap、jQuery或其他前端框架来加速开发和提升响应式布局。 总的来说,...

    使用HTML、CSS实现博客系统页面、表白墙页面和TodoList页面的设计代码。

    此外,为了保持页面整洁,可以利用CSS的`flexbox`或`grid`布局管理留言的排列。 最后,TodoList页面的设计则涉及到列表和状态切换。HTML的`&lt;ul&gt;`和`&lt;li&gt;`元素将用于创建任务列表,`&lt;input type="checkbox"&gt;`可以...

    jQuery+CSS3网页文章支持点赞取消点赞功能代码

    接着,CSS3在这里起到了美化界面的作用。通过使用CSS3的伪类选择器(如`:hover`、`:active`)和动画效果,可以创建出动态的点赞状态变化。例如,点赞按钮在被点击时可能会改变颜色、增加下划线或展示一个简单的动画...

    基于html+css+JavaScript的个人博客.zip

    HTML(HyperText Markup Language)负责定义页面的结构,CSS(Cascading Style Sheets)用于美化页面样式,而JavaScript则提供了动态交互的功能。下面将详细讲解这三个技术以及它们在个人博客中的应用。 1. HTML ...

    CSS 实现图表 效果

    利用CSS的径向渐变和transform旋转,可以创建出具有指针效果的仪表盘。 7. **热力图**:热力图通过颜色深浅表示数据的差异。这通常需要配合CSS的背景色或者color属性,以及JavaScript来动态计算颜色值。 8. **堆叠...

    Beautifycnblogs博客园样式美化

    "Beautifycnblogs博客园样式美化"项目旨在帮助用户提升其博客在博客园上的视觉效果,通过自定义CSS样式,使得博客更加个性化和专业。这个项目特别适合前端初学者,即使没有深入的前端经验,也能快速上手并实现博客的...

    CSS TEST

    【标题】"CSS TEST"指的是一个关于CSS(Cascading Style Sheets)的测试或实践项目。在网页设计中,CSS是用于控制网页元素样式...同时,结合博客文章,可以获取更多理论知识和实践经验,进一步提升对CSS的理解和应用。

    橙色侧栏简洁免费个人博客css3模板_橙色个人博客blog左栏二栏css3.rar

    3. **图片资源**:压缩包中的图像文件`pic1-large.jpg`、`pat2.jpg`和`gig-photo1.jpg`是用于美化博客内容的图片资源,它们可能被用作文章的配图或者侧边栏的装饰。 4. **响应式设计**:虽然没有明确指出,但一个好...

    整站模板DIV+CSS 源码DIV+CSS 

    学习和分析这些源代码,可以帮助我们理解如何利用Div进行网页布局,以及如何用CSS美化和控制网页的显示效果。同时,也可以了解ASP这种服务器端脚本语言如何与前端技术结合,实现动态网站的功能。

    L-Blog完整美化版

    【L-Blog完整美化版】是一款基于PHP语言开发的个人博客系统,专为喜欢记录生活、分享技术的...同时,丰富的资料支持使得无论是初次接触博客系统的新手还是有经验的开发者,都能够轻松上手并充分利用L-Blog的各项功能。

    艺术创意网站CSS模板

    设计师可能会利用CSS3的新特性,如渐变、阴影、动画和过渡效果,来创造出引人入胜的用户体验。同时,也可能运用自定义字体、背景图像和图形元素,以体现独特的艺术风格。 "信息"和服务"部分暗示模板应具备信息展示...

Global site tag (gtag.js) - Google Analytics