博客园主题修改中用到的css属性
时间:2022-05-04
本文章向大家介绍博客园主题修改中用到的css属性,主要内容包括样式覆盖、响应式、浮动元素、透明的输入框、动画、图标库、组件之间的间距设定、设置div圆角、设置字体大小、设置立体感的边框、设置公告的虚线分割、设置引用块左侧颜色、将分类的竖排打乱、基本概念、基础应用、原理机制和需要注意的事项等,并结合实例形式分析了其使用技巧,希望通过本文能帮助到大家理解应用这部分内容。
样式覆盖
id选择器大于class选择器。
对于原主题中想要覆盖的id选择器,使用!import
覆盖。
对于原主题中想要取消的css属性,使用inherit
.
响应式
当屏幕宽度不同时,隐藏部分元素。
@media (max-width:1360px) {
#div_digg {
bottom: 70px;
left: 0;
margin-left: 0;
}
}
@media screen and (max-width:600px) {
input#nav_search:focus {
width: 85px !important;
}
input#nav_search {
transition: all 0.3s ease-in-out;
border-bottom: 1px solid #fff;
width: 40px;
}
.hiddenForMobile {
display: none !important;
}
}
浮动元素
将position
设置为fixed
, 为了让组件可以浮动在其他组件之上,设置z-index
.
fuck me on github
element.style {
top: 0;
right: 0;
border: 0;
z-index: 100;
position: fixed;
}
透明的输入框
设置background
为transparent
可以将输入框透明;
将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;
}
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- Python 库安装问题-用pip安装pyHook3报错,原因及解决办法
- 微服务的用户认证与授权杂谈(上)
- Python 技术篇-win32、amd64结尾的whl库该选哪个,如何查看python平台支持
- Python 基础篇-pip卸载python库方法,pip命令大全
- Python 技术篇-pip安装的python库缓存位置查看方法,如何查看python库源码
- Redis持久化 - RDB和AOF
- Python 技术篇-pip只下载python库不安装方法,pip命令大全
- Python 技术篇-将项目打包成whl文件,whl包的制作方法
- PowerBI 超级粘性用户计算 - 原理与实现
- Chrome 技术篇-常用web调试手法:清除缓存并硬性重新加载
- 数据库之索引模块
- Python 爬虫篇-爬取web页面所有可用的链接实战演示,展示网页里所有可跳转的链接地址
- Python爬虫,微信公众号话题标签内容采集打印PDF输出
- Windows 技术篇-设置dns提升网速,刷新dns缓存
- 搭建高可用的Replication集群归档大量的冷数据