小白改css样式之引用blockquote修改

原创 准教师  2019-01-20 22:00:00  阅读 81 次 评论 0 条

网站内容编辑器,如Ueditor、Kindeditor等都有一项功能,就是插入引用。

小白改css样式之引用blockquote修改

恰当的使用“引用”可以很好地增强网站内容的可读性和用户体验。然而有时候,我们下载使用的主题对<blockquote>的css样式设置并不让我们满意。那么这个时候,我们可以自己修改。

小白就可以用小白的方法来解决问题。

欣赏几个博客上的引用

一、月光博客上的引用css代码

div.post-body blockquote{
	background-color:#e0dfcc;
	padding:2em;
	margin:2em 2em 2em 2em;
	border-radius: 20px;}

小白改css样式之引用blockquote修改

二、卢松松博客上的引用css代码

blockquote{
margin:10px;border:1px #d0d4c8 dashed;
background:#f4f5f6 url(images/blockquote.gif) 5px 3px no-repeat;
padding:8px 12px 8px 36px;}

小白改css样式之引用blockquote修改

三、无尘居博客上的引用css代码

blockquote{
border-left: 10px solid rgba(102, 128, 153, 0.075);
background-color: rgba(102, 128, 153, 0.05);
border-radius:0 5px 5px 0;
padding: 15px 20px; 
margin-left:0;
margin-right:0;color:#666}

小白改css样式之引用blockquote修改

修改<blockquote>引用的css设置

一、找到网站<blockquote>的设置在哪里

1.进入网站内容页,如无尘居的一篇文章《网站提示“浏览器Flash插件异常,复制失败”》,执行“右键单击”,选择“查看网页源代码”。

小白改css样式之引用blockquote修改

2.找到网站css样式表位置

小白改css样式之引用blockquote修改

3.复制css样式表在网站中的位置。如上面截图中的位置是:

https://www.iteacher.wang/zb_users/theme/zbpNana/style/style.css

4.在浏览器中新建标签页,将其粘贴到浏览器的地址栏中。回车。

5.此时已经打开了css样式表了。执行“右键单击”——“另存为…”,将该样式表保存到电脑上。

6.使用记事本或Dreamweaver等软件打开,搜索<blockquote>,就可以定位到blockquote的代码了。

二、执行修改操作

1.依据第一步的步骤,找到你喜欢的<blockquote>css样式代码和你自己网站的css样式代码。

2.执行替换。

3.要注意:对自己网站的css样式表提前备份一份。以防出错。

三、实现并查看效果

1.修改完成后。使用ftp工具将修改后的css样式表,如style.css上传到网站相应目录下。

2.清空浏览器的cookie

3.刷新当前网页,即可以看到修改后效果了。

四、注意

卢松松博客中的<blockquote>css样式中有一点代码

url(images/blockquote.gif)

这个代码,是使用了一个图片。即,呈现在左上角的大逗号。这个时候就需要找到这个图片,并上传到自己网站目录相应文件夹中了。

1.复制       images/blockquote.gif

2.找到你现在别人网站css样表处的浏览器标签页,替换,即可。

小白改css样式之引用blockquote修改

3.右键保存这个图片,并将这个图片上传到你的网站目录下相应位置。

至此,大功告成。

说明:

1.修改过程中,遇到问题请随时留言咨询。我是代码小白,有难度的禁止提问:-D

2.如果你喜欢本部分内容,请赞助或分享到朋友圈。

本文地址:https://www.iteacher.wang/post/321.html
版权声明:本文为原创文章,版权归 准教师 所有,欢迎分享本文,转载请保留出处!

发表评论


表情

还没有留言,还不快点抢沙发?