分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 网页技术

博客园主题修改中用到的css属性

发布时间:2023-09-06 01:38责任编辑:胡小海关键词:暂无标签

样式覆盖

id选择器大于class选择器。

对于原主题中想要覆盖的id选择器,使用!import覆盖。

对于原主题中想要取消的css属性,使用inherit.

浮动元素

position设置为fixed, 为了让组件可以浮动在其他组件之上,设置z-index.

fuck me on github

element.style { ???top: 0; ???right: 0; ???border: 0; ???z-index: 100; ???position: fixed;}

透明的输入框

设置backgroundtransparent可以将输入框透明;

border设为0可以隐藏边框,然后追加bottom样式,注意顺序,后面声明的样式会覆盖前面。

input#nav_search { ???background: transparent; ???transition: all .6s ease-in-out; ???border: 0; ???border-bottom: 1px solid #fff; ???color: #fff; ???width: 5pc;}

动画

css3中同一个元素属性发生变化后可以声明一个变化过程,即transition. transition: all .6s ease-in-out;表示0.6s内完成动画。

图标库

引入http://fontawesome.io . 比如search的图标为
fa fa-search

组件之间的间距设定

使用padding和margin来设置间距而不是声明width和hight后调整中心。

设置div圆角

#post_detail .postTitle { ???border-top-right-radius: 10px; ???border-top-left-radius: 10px;}

设置字体大小

#post_detail .postTitle { ???font-size: 30px; ???font-weight: 400;}

设置立体感的边框

#post_detail { ???box-shadow: 0 8px 17px 0 rgba(0,0,0,.2), 0 6px 20px 0 rgba(0,0,0,.19);}

设置公告的虚线分割

.my-profile { ???border-bottom: 1px dashed #333; ???padding-bottom: 25px; ???margin-bottom: 25px;}

设置引用块左侧颜色

#cnblogs_post_body ul.post-copyright { ???border-left: 3px solid #ff1700; ???background-color: #f9f9f9;}

将分类的竖排打乱

.catListPostCategory li { ???display: inline-block;}

博客园主题修改中用到的css属性

原文地址:https://www.cnblogs.com/woshimrf/p/cnblogs-customize-css.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved