Wordpress页面效果CSS

最新推荐文章于 2024-06-29 00:15:00 发布
最新推荐文章于 2024-06-29 00:15:00 发布
阅读量448 收藏
点赞数
分类专栏： 前端能展示部分的相关 文章标签： wordpress
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Strangewu/article/details/109248172
版权

Wordpress自定义页面效果

1、效果展示

我的主题使用的是Newsup

效果展示
在这里插入图片描述

2.、额外CSS

在主页面自定义额外CSS

/*日历格子*/
table, th, td {
    border: 2px solid gold;
	color: white;
}
/*特色图片上相机图标去除*/
.post-form{
	background-color: #eff3ff;
}
/* 自定义文章框高度*/
.mg-posts-sec-post{ 
	padding:0;
	border: 2px solid gold;
	background-color: #eff3ff;
	height: 225px
	text-align:center;
	position:relative;
}
/* 点击前放大*/
.mg-posts-sec-post:hover{ 
	 -moz-transform: rotate(360deg) scale(1.08);
    -webkit-transform: rotate(360deg) scale(1.08);
    -o-transform: rotate(360deg) scale(1.08);
    -ms-transform: rotate(360deg) scale(1.08);
    transform: rotate(360deg) scale(1.08);
}
/*特色图像框*/
.col-md-6{
	padding:0;
	width:50%;
	height:100%;
}
/*搜索框处自定义*/
.form-control {
	border: 2px solid gold;
	border-radius: 0;
    margin-bottom: 20px;
    box-shadow: inherit;
    padding: 6px 12px;
    line-height: 40px;
    border-width: 2px;
    border-style: solid;
    height: 40px;
	background-color: black;
	width: 260px
}

#searchform{
	height: 35px
	width:50px
}
/*右侧小工具*/
/*搜索框*/
#search-4{
	border:0;
	background-color: black;
}
/*文章归档*/
#archives-3{
	border:0;
	background-color:#eff3ff;
	color:red;
}
/*日历*/
#calendar-3{
	border:0;
	background-color:black;
	color:#eff3ff;
}
/*日历月份显示框*/
#calendar-3 caption{
	border:0;
	background-color: gold;
	color:white;
}
/*每日一句*/
#custom_html-3{
	border:0;
	color:red;
	background-color:black;
}
 .textwidget custom-html-widget{
	background-color:black;
}

/*每日一句*/
#custom_html-3 h4{
	color:gold;
}
/*TablePress插件修改*/
.tablepress .odd td {
	background-color: #f0f2ff;
	color: black;
	border:1px;
}
.tablepress .even td {
	background-color: white;
	color: black;
}
.tablepress .row-hover tr:hover td {
	background-color: #92ffe4;
	color: black;
}
/*文章分页*/
.wp-pagenavi {
    margin-left:47px;
    font-size: 17px;
}
.wp-pagenavi{
     margin-left:47px;
	margin-top:100px
    line-height: 24px;
}
.wp-pagenavi{
    width: 100%;
}
.wp-pagenavi > span,
.wp-pagenavi > a{
    margin: 4px 6px 4px 0;
    padding: 2px 10px;
    text-decoration: none;
    background-color: #eee;
    color: #666;
    display: inline-block;
}
.wp-pagenavi a:hover,
.wp-pagenavi > .current{
    background-color: #cf2079;
    color: #fff !important;
}
/*页脚线*/
.divide-line{
	line-height:0;
}

3、如果不是同一个主题，上面的额外CSS也得修改

可使用开发人员工具查看每个区域对应的CSS
开发人员工具
通过开发人员工具看没块对应位置，再做修改

在这里插入图片描述

/*特色图片上相机图标去除*/
.post-form{
	background-color: #eff3ff;
}
/* 文章框*/
.mg-posts-sec-post{ 
	border: 2px solid gold;
	background-color:#90d7ec;
}
/*文章点击前时间显示*/
.mg-blog-meta a{
	color:red;
}
/*文章点击后时间显示*/
.mg-blog-meta a:hover{
	color:#fcf16e;
}
/* 点击前放大*/
.mg-posts-sec-post:hover{ 
	background-color:#fcf16e;
	color:#fcf16e;
	 -moz-transform: rotate(360deg) scale(1.06);
    -webkit-transform: rotate(360deg) scale(1.06);
    -o-transform: rotate(360deg) scale(1.06);
    -ms-transform: rotate(360deg) scale(1.06);
    transform: rotate(360deg) scale(1.06);
}
/*日历格子*/
table, th, td {
    border: 2px solid black;
	color:#90d7ec;
}
/*右侧小工具*/
/*搜索框处自定义*/
.form-control {
	border: 2px solid gold;
	border-radius: 0;
    margin-bottom: 20px;
    box-shadow: inherit;
    padding: 6px 12px;
    line-height: 40px;
    border-width: 2px;
    border-style: solid;
	background-color: black;
	width: 260px
}
/*搜索框*/
#search-4{
	margin-top:20px;
	border:0;
	background-color: black;
}
/*文章归档*/
#archives-2{
	border: 2px solid gold;
	background-color:#90d7ec;
	color:black;
}
/*日历*/
#calendar-3{
	border:0;
	background-color:black;
	color:black;
}
/*日历月份显示框*/
#calendar-3 caption{
	border:0;
	background-color: black;
	color:#90d7ec;
}
/*每日一句*/
#custom_html-3{
	border:0;
	color:red;
	background-color:black;
}
 .textwidget custom-html-widget{
	background-color:black;
}

/*每日一句*/
#custom_html-3 h4{
	color:gold;
}
/*音乐*/
#media_audio-2{
	background-color:black;
	border:0;
}
/*图片*/
#media_image-2{
	background-color:black;
	border:0;
}

/*旋转的立方体*/
#media_image-4{
	background-color:black;
	border:0;
}
/*向日葵*/
#media_image-3{
	background-color:black;
	border:0;
}
/*TablePress插件修改*/
.tablepress .odd td {
	background-color: #f0f2ff;
	color: black;
	border:1px;
}
.tablepress .even td {
	background-color: white;
	color: black;
}
.tablepress .row-hover tr:hover td {
	background-color: #92ffe4;
	color: black;
}

改变文章页面的CSS(2020-11-27)

主页面展示效果以及文章页面展示效果
在这里插入图片描述
在这里插入图片描述

.d-md-flex mg-posts-sec-post{
	padding:0;
}
.mg-post-thumb back-img md{
	height:225px;
	margin-left:0;
	position:absolute;
	padding:0;
}
.col-12 col-md-6{
padding-left:0;
padding-top:0;
	width:100%;
	height:100%;
}
/* 文章内容中的表格背景设置为黑色*/
table,thead{
	background-color:black;
}

/*特色图片上相机图标去除*/
.post-form{
	background-color: #eff3ff;
}
/* 文章框#90d7ec*/
.mg-posts-sec-post{ 
	padding-left:0;
	padding-top:0;
	position:relative;
	height:224px;
	border:2px red;
	background-color:#90d7ec;
}
/*文章点击前时间显示*/
.mg-blog-meta a{
	color:red;
}
/*文章点击后时间显示*/
.mg-blog-meta a:hover{
	color:#fcf16e;
}
/* 点击前放大*/
.mg-posts-sec-post:hover{ 
	background-color:#fcf16e;
	color:#fcf16e;
	 -moz-transform: rotate(360deg) scale(1.06);
    -webkit-transform: rotate(360deg) scale(1.06);
    -o-transform: rotate(360deg) scale(1.06);
    -ms-transform: rotate(360deg) scale(1.06);
    transform: rotate(360deg) scale(1.06);
}
/*日历格子*/
table, th, td {
    border: 2px solid black;
	color:#90d7ec;
}
/*右侧小工具*/
/*搜索框处自定义*/
.form-control {
	border: 2px solid gold;
	border-radius: 0;
    margin-bottom: 20px;
    box-shadow: inherit;
    padding: 6px 12px;
    line-height: 40px;
    border-width: 2px;
    border-style: solid;
	background-color: black;
	width: 260px
}
/*搜索框*/
#search-4{
	margin-top:20px;
	border:0;
	background-color: black;
}
/*文章归档*/
#archives-2{
	border: 2px solid gold;
	background-color:#90d7ec;
	color:black;
}
/*日历*/
#calendar-3{
	border:0;
	background-color:black;
	color:black;
}
/*日历月份显示框*/
#calendar-3 caption{
	border:0;
	background-color: black;
	color:#90d7ec;
}
/*第二匹马*/
#custom_html-3{
	border:0;
	color:red;
	background-color:black;
}
/*音乐*/
#media_audio-2{
	background-color:black;
	border:0;
}
/*第一匹马*/
#media_image-2{
	background-color:black;
	border:0;
}
/*旋转的地球*/
#media_image-4{
	background-color:black;
	border:0;
}
/*宇航员*/
#media_image-3{
	background-color:black;
	border:0;
}
/*滚动的字*/
#custom_html-4{
	background-color:black;
	border:0;
}
/*TablePress插件修改*/
.tablepress .odd td {
	background-color: #f0f2ff;
	color: black;
	border:1px;
}
.tablepress .even td {
	background-color: white;
	color: black;
}
.tablepress .row-hover tr:hover td {
	background-color: #92ffe4;
	color: black;
}
/*页脚部分*/
.selfDesignFooter {
	margin-top:150px;
	color: #4CAF50;
	text-align: center;
}
/*文章内容部分修改*/
/*引用字体*/
blockquote{
	font-size:20px;
	color:red;
	font-family:"SimSun";
	background-color:#CCCCCC;
	letter-spacing:0.5px;
	text-align:center;
}
h1{
	color:#FFCC99;
	font-family:"SimSun";
	letter-spacing:0.5px; 
}
h2{
	color:#FFFFCC;
	font-family:"SimSun";
	letter-spacing:0.5px; 
}
h3{
	color:blue;
	font-family:"SimSun";
	letter-spacing:0.5px; 
}
h4{
	color:#CCFF99;
	font-family:"SimSun";
	letter-spacing:0.5px; 
}
/*无序*/
ul{
	color:#003399;
	letter-spacing:0.5px;
	font-family:"SimSun"
}

/*有序*/
ol{
	color:#003399;
	letter-spacing:0.5px;
	font-family:"SimSun";
}
/*正文*/
p{
	color:black;
	letter-spacing:0.5px;
	font-family:"KaiTi";
	font-size:20px;
}

/*文章背景颜色*/
.mg-blog-post-box{
	background-color:#C7EDCC;
}
/*顶部文章信息颜色*/
.media-body{
	background-color:#C7EDCC;
}
琪得龙东强
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【WordPress美化教程】鼠标点击页面出现富强自由等文字特效
suifengpu的博客
05-14 1273
我这个人就是喜欢花里胡哨的一些东西，所以也就会为此不断折腾，不过也正是因为如此，世间上的东西才会变的越来越好。今天给大家带来的是一种比较常见的特效，对于这个特效记得老早就有了，不过今天偶然在孤狼博客里看到了一个升级版，觉得效果也还是挺不错的，所以想要借此来分享给有需要的朋友们。 这是一个给网站中添加“富强、民主、和谐”鼠标点击特效的效果展示，当我们点击站内的任何一处都会出现“富强、民主、和谐”等字样。当然！并不是只有区区的这几个字样，我们也可以在此增减、删除，这个取决于我们自己的需要。 这个特效网上也有
怎么用CSS3给WordPress网站页面，加入淡入动画特效？
littlesmallless的博客
11-28 383
* 修改上下位置 */ _margin-left:-546px;这篇文章主要是实践应用一下这个动画属性，实现页面淡入特效，在火狐24版、chrome29版、IE10中测试通过。4、同理，可对页面不同的部分设定不同的淡入显示时间，实现分段显示。
用wordpress做网站怎么样？
m0_51363252的博客
10-19 867
网上介绍的有很多wordpress的优点，功能强大、好用、免费、易上手、获取收益等等，这些我都赞同，毕竟wordpress在世界上占的市场份额最大，是其他后台系统都羡慕的，这个成绩也证明了它的实力。但我的观点是不要盲目跟风，wordpress入坑后就不容易跳出了。 wordpress好入手，可以用来做博客，自己倒腾上线个小网站，更新内容，这些都OK。但是如果用在企业网站上呢？它功能强大，你又能用上多少，国内有多少人真正把wordpress 学透并可以二次开发呢，如果不能二次开发，使用已有的主题或插件功能会很
WordPress免费模板：惊艳动态效果，打造视觉盛宴
最新发布
软希网分享源码的博客
06-29 348
WordPress免费模板：惊艳动态效果，打造视觉盛宴
用wordpress建站效果怎么样?WordPress建站的8个主要优点
seo优化推广前沿技术【e6zzseo】
07-03 661
使用WordPress建站具有许多优势，其效果取决于您的需求、技能水平以及所选择的主题和插件。总体而言，WordPress是一个功能强大且灵活的内容管理系统，可用于创建各种类型的网站，从个人博客和企业网站到电子商务平台和社区论坛。
【wordpress美化】鼠标点击页面出现富强自由等文字特效
Duxingcan的博客
06-04 428
用wordpress建站的越来越多，但是貌似官方并没有觉得默认的登陆页面样式有多丑。 尤其是ripro更新了找回密码，功能基于wordpress自带的登录注册页面很丑~ 购买须知： 文件包含1个php+2个css文件 详细的设置、修改文档 直接看成品吧： ...
WordPress 加载自定义 CSS
Gelomen的博客
10-18 729
优化 WordPress 或者编写了前端代码需要优化样式时，可以使用主题自带的自定义 -> 额外CSS添加样式，但若需要添加的样式特别多时且针对某一功能，则最好是写在一个css样式文件里，这时就可以使用wp_enqueue_style/5加载 函数语法参数 函数总共 5 个参数：wp_enqueue_style($handle, $src, $deps, $ver, $media); $handle:（字符串，必需）脚本名称，小写字符串； $src:（字符串，必需）WordPr...
WordPress中获取页面链接和标题的相关PHP函数用法解析
10-23
可以使用WordPress提供的过滤器机制来调整标题输出，以获得更好的搜索引擎优化效果。 总结来说，掌握get_permalink()和wp_title()函数的使用方法对于WordPress开发人员而言至关重要。这些函数不仅能够帮助开发者在...
wordpress页面压缩 加速网站访问的方法
09-28
【WordPress页面压缩】是提高网站访问速度的有效策略之一。页面压缩通过减少HTML、CSS和JavaScript文件的大小，降低了网络传输的数据量，从而加快了页面加载时间。这不仅可以改善用户体验，还可以对SEO产生积极影响...
css 侧栏跟随_WordPress侧栏跟随固定浮动效果完美解决方案
weixin_34008445的博客
12-24 792
WordPress侧栏跟随固定浮动效果完美解决方案关于“WordPress侧边栏跟随固定浮动效果”，网上一搜一大把，可真正能实现的没有几个，再加上教程写的都不那么完整，大家操作过程中就会遇到这样那样的问题，苦不堪言，百试而得不到解决，最后无奈放弃。下面我把自己怎么实现“WordPress侧边栏跟随固定浮动效果“的方法步骤给大家分享下，希望解决您的问题之后，您可以给一个回复(赞)。1.卢松松代码(万...
WordPress增加返回顶部效果的方法
09-29
在WordPress网站中添加返回顶部的效果，能够为用户提供更好的浏览体验，特别是当页面内容较长时，用户可以方便地回到页面顶部而无需手动滚动。这个功能通常通过JavaScript或jQuery实现，下面我们将详细讲解如何在...
WordPress主题开发（ 十三）之—— CSS 和 JavaScript 文件
weixin_38912950的博客
09-30 537
在WordPress主题开发中，包含CSS和JavaScript文件是非常重要的，因为它们可以用来自定义主题的外观和功能。通过使用和函数，我们可以按照WordPress的标准方法加载这些文件，以确保网站的高效性和稳定性。同时，通过使用合并排队函数，可以更好地组织和管理主题的资源加载。
额外css源码大全,wordpress自定义额外CSS
weixin_30198949的博客
08-04 956
wordpress支持在自定义额外CSS，这样我们就无需改动主题里的源文件即可轻松调整网页的外观。分享一个自用的代码。定义字体、字号1body {font-family: Helvetica, Tahoma, Arial, "Microsoft YaHei", "Hiragino Sans GB", "WenQuanYi Micro Hei", sans-serif;font-size:16px;...
wordpress不神秘，后台css显神威
skygored的专栏
01-28 2271
平心而论，wordpress的介绍文章N多，基本上都是把它说成天花乱坠，无所不能的。反正做过seo的人都知道，天下文章一大抄，一篇跟wordpress有点关系的博文一出来，立马会被无数的爬虫爬过，而后被无数网站转载，其疯狂的程度，完全可以令原作者大吃一惊。 好了，上面是体外话，我这里想要告诉大家的是，wordpress并不神秘，个性化定制wordpress后台，css完全可以大显神威。 首先，
慎用！wordpress的额外css功能会浪费id资源！
热门推荐
H-Radiance的博客
05-22 1万+
wordpress主题都带有额外css的功能，虽然用起来十分方便，但是会占用大量的数据库资源。看下图。每次更新都会占用一个id，这也会导致自己文章id不连续。 为了让这些资源不浪费，只能更改这些数据的信息，可以按照下面改： UPDATE `wp_posts` SET `post_content` = '草稿', `post_status` = 'draft', `post_type` = 'post' WHERE `wp_posts`.`ID` = 1128; 具体操作方法： 首先登陆自己的phpMy
WordPress引入css/js两种方法
511遇见
09-18 3791
WordPress引入css/js是我们制作主题时首先面对的一个难点，任何一款主题都要加载自己的css,js,甚至很有可能还需要加载Jquery文件,网上方法特多，说法不一，我们今天借鉴wordpress官方最新的twentysixteen主题来学习总结一下WordPress引入css/js各种常用方法，以及最优化的加载方法。 其实网上的N种方法总结起来就两种： 一、模板文件header.php中直接引入文件 二、在主题的functions.php中通过WP自带的函数wp_enqueue_scripts.
wordpress增加了css,WordPress添加自定义CSS代码、JS
weixin_39835147的博客
08-03 587
方法一：使用主题自定义选项主题自定义是我们修改主题最常用的方式，其实它本身就提供了一个添加CSS代码的功能打开WordPress自定义选项，进入主题定制界面，在最底部有一个 额外CSS 的选项在其中添加自己的CSS代码即可，还支持代码高亮方法二：使用主题编辑器打开外观 – 主题编辑器，默认打开的文件就是 style.css，可以直接在这里添加CSS代码，相对来说添加速度更快一些，不过要注意的一点是...
通过wordpress 自定义主题的额外CSS删除指定区块
Wilburzzz的博客
09-06 641
最近用wordpress建站，想要删除指定区块，发现相关的教程蛮少的，作为小白的我搜了相关教程，好像没找到，只能自己慢慢摸索了，看了很多，终于尝试实现了，特记录下，免得自己忘了，也给遇到同样问题的人当个参考。
wordpress修改CSS的几种方法
weixin_34236497的博客
04-08 1569
wordpress搭建好网站，安装好插件，选择好主题之后，下一步可以进行对主题的局部的调整。如字体大小，文本颜色等。尽管wordpress提供了一个很方便的CSS查看器，可以直接修改，我想对CSS再熟悉的人，对于CSS这种没有明显结构的代码，寻找和修改某些局部的东西还是很费劲的。如下截图： 1、如果页面的模块和内容不算多，而且对CSS较熟悉，那么我想直接在后台修改...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值