【上海网站设计制作】六个简单的CSS技巧的狡猾的主题

2019.03.25 关键词:

只使用CSS和自定义CSS ePanel盒子,你可以做一些可怕的事情! 今天我将复习6个简单的技巧,可以改变狡猾的主题是一些很酷的方式。 要应用这些更改,只要提到的代码复制并粘贴到“自定义CSSePanel”框,可以下找到外表>主题的选择标签在你的WordPress的仪表板。

使固定导航栏

这种变化将改变你的导航栏进入一个浮动的导航与定位。 无论你的访客滚动,你的菜单项会容易在屏幕的顶部。 这可以提高游客参与促进额外的点击和网站探索。 使用这段代码,浮动导航栏删除在移动设备上,确保小屏幕不阻塞。

上海网站设计制作

应用这一变化,简单的复制粘贴以下代码自定义CSS在ePanel并单击框保存。 如果你想要恢复到原始的风格,你可以简单地删除自定义CSS中的代码字段。


<font id="WOW_TRANSLATE_32" class="WOW_TRANSLATE_STYLE" data--w-o-w_-i-n-d-e-x="32">/ * * /固定导航栏
@media只有屏幕和(min-width768 px) {
#主要标题{
位置:固定;
宽度:90%;
text-align:中心;
保证金:0;
上图:0;
background - color: # fff;
填充:20 px 20 px 5% 5%;
z - index: 100;
左:0;
不必:0 px 0 px 20 px rgba (0000.1);
}
#名叫{
padding-top74 px;
}
}</font>


中心内帖子标题缩略图

这是一个有趣的变化,文章标题为中心的特色图片框。 在某些方面,这种风格更有凝聚力的方式在类别页面标题已经显示,但它是由你来决定你喜欢哪布局!

上海网站设计制作

应用这一变化,简单的复制粘贴以下代码自定义CSS在ePanel并单击框保存。 如果你想要恢复到原始的风格,你可以简单地删除自定义CSS中的代码字段。


<font id="WOW_TRANSLATE_40" class="WOW_TRANSLATE_STYLE" data--w-o-w_-i-n-d-e-x="40">帖子标题* / / *中心
.et_full_width_image .post-heading {
填充:0;
宽度:100%;
位置:绝对的;
text-align:中心;
背景:无;
颜色:# fff;
margin-top-360 px;
粗细:;
}

.post-heading p。 meta-info, .post-heading p。 meta-info, .post-heading h1 {
颜色:# fff;
}

@media只有屏幕和(max-width1300 px)和(min-width961 px) {
.et_full_width_image .post-heading{填充:0margin-top-260 px; }
}

@media只有屏幕和(max-width960 px)和(min-width768 px) {
.et_full_width_image .post-heading{填充:0; 保证金:-220 px 0 0 -60 px; }
}

@media只有屏幕和(max-width767 px) {
.et_full_width_image .post-heading{填充:0; 保证金:-180 px 0 0 -60 px; }
}

@media只有屏幕和(max-width479 px) {
.et_full_width_image .post-heading{填充:0; 保证金:-120 px 0 0 -40 px; }
.post-heading p。 meta-info{字体大小:14 px; }
}</font>


你的网站圆角风格

上海网站设计制作有些人喜欢硬边,而其他人则喜欢柔软的圆角。 默认情况下,在狡猾的容器的内容简单,四四方方的,但是这可以很容易地改变使用CSS的几行。 如果你想给你网站看起来更圆,然后看看! 您还可以调整曲线的大小通过改变下面的“30”值更小或更大的东西取决于你想要的结果。

应用这一变化,简单的复制粘贴以下代码自定义CSS在ePanel并单击框保存。 如果你想要恢复到原始的风格,你可以简单地删除自定义CSS中的代码字段。


<font id="WOW_TRANSLATE_48" class="WOW_TRANSLATE_STYLE" data--w-o-w_-i-n-d-e-x="48">/ *圆角* /
.container {
-webkit-border-top-left-radius: 30 px;
-webkit-border-top-right-radius: 30 px;
-moz-border-radius-topleft: 30 px;
-moz-border-radius-topright: 30 px;
border-top-left-radius: 30 px;
border-top-right-radius: 30 px;
}

#页脚区.container {
-webkit-border-bottom-right-radius: 30 px;
-webkit-border-bottom-left-radius: 30 px;
-moz-border-radius-bottomright: 30 px;
-moz-border-radius-bottomleft: 30 px;
border-bottom-right-radius: 30 px;
border-bottom-left-radius: 30 px;
-webkit-border-top-left-radius: 0;
-webkit-border-top-right-radius: 0;
-moz-border-radius-topleft: 0;
-moz-border-radius-topright: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
溢出:隐藏;
}</font>


把滑块过渡动画

就我个人而言,我喜欢的过渡动画狡猾的滑动条。 他们并不是适合每一个人,然而,如果你想让你的主页更少的华丽和更具流线型的外表,那么这些动画可以很容易地删除。 幸运的是我们对这个滑块的使用纯CSS动画,而不是使用javascript,所以我们可以调整使用CSS动画。 添加下面的代码将删除幻灯片和反弹效应的经典褪色。

应用这一变化,简单的复制粘贴以下代码自定义CSS在ePanel并单击框保存。 如果你想要恢复到原始的风格,你可以简单地删除自定义CSS中的代码字段。


<font id="WOW_TRANSLATE_56" class="WOW_TRANSLATE_STYLE" data--w-o-w_-i-n-d-e-x="56">/ *删除滑块动画* /

# .slide。 et-active-slide img # .slide。 et-active-slide h2, # .slide。 et-active-slide .description {
-webkit-animation-duration: 0;
-webkit-animation-delay: 0;
-moz-animation-duration: 0;
-moz-animation-delay: 0;
-o-animation-duration: 0;
-o-animation-delay: 0;
-ms-animation-duration: 0;
-ms-animation-delay: 0;
动画:0;
animation-delay: 0;
}</font>


创建浮动社交媒体按钮

社交媒体已经成为任何网站的一个重要组成部分,和一些网站所有者想要额外的重视社交媒体资料。 默认情况下,狡猾的地方一个链接到你的Facebook, Twitter和Google +页面的页脚。 使这些链接更突出,我们可以从他们的容器,让他们坚持的页面,这样没有客人会想念他们!

应用这一变化,简单的复制粘贴以下代码自定义CSS在ePanel并单击框保存。 如果你想要恢复到原始的风格,你可以简单地删除自定义CSS中的代码字段。


<font id="WOW_TRANSLATE_64" class="WOW_TRANSLATE_STYLE" data--w-o-w_-i-n-d-e-x="64">/ *使用社交媒体的粘性* /

# et-social-icons {
位置:固定;
z - index: 11;
左:0;
上图:45%;
background - color: # 333333;
填充:20 px 10 px 10 px 15 px;
保证金:0;
-webkit-border-top-right-radius: 8 px;
-webkit-border-bottom-right-radius: 8 px;
-moz-border-radius-topright: 8 px;
-moz-border-radius-bottomright: 8 px;
border-top-right-radius: 8 px;
border-bottom-right-radius: 8 px;
}

# et-social-icons {
填充:0;
明确:;
浮:左;
margin-bottom10 px;
}</font>


符合特定程式使用平面设计你的网站

在狡猾的设计,我们实现了一个给滑块内阴影效果,调用按钮、标签和深度。 认识“平面设计”的流行趋势,然而,我相信一些用户想要删除这些阴影的简单设计。 这些阴影可以很容易地使用下代码删除。 结果是一个突出的颜色在整个主题。

应用这一变化,简单的复制粘贴以下代码自定义CSS在ePanel并单击框保存。 如果你想要恢复到原始的风格,你可以简单地删除自定义CSS中的代码字段。


<font id="WOW_TRANSLATE_72" class="WOW_TRANSLATE_STYLE" data--w-o-w_-i-n-d-e-x="72">/ *使事情平* /

#了,李#导航> ul >。 sfHover >,李#导航> ul > >:悬停,李# home-tab-area > ul >。 home-tab-active,李# footer-bottom:悬停,.mobile_nav # callout {
-webkit-box-shadow:没有!重要;
-moz-box-shadow:没有!重要;
不必:没有!重要;
}</font>


关键词
最新推荐
联系电话 400-6065-301

微信咨询 寒总监