首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Typecho主题Handsome修改记录---(持续更新)

(new)(由于网上百度收录检测方法基本失效,改为手动推送)(new) 全站黑白 (new) 文章底部版权提示 (new) 评论边框和阴影 (new) 评论头像呼吸效果 (new) 文章页头图悬浮效果...底部页脚美化 展开 效果 步骤 usr/themes/handsome/component/footer.php删代码至如图所示 开发者设置➡自定义CSS /*底部页脚*/ .github-badge...); } 首页文章列表头图悬停放大并将超出范围隐藏 展开 开发者设置➡自定义css .index-post-img { overflow: hidden; } .item-thumb..., 173, 0.35); } 文本打字机特效 展开 开发者设置 ➡️ 自定义输出body 尾部HTML代码 <!...展开 禁用F12和右键,自定义尾部html加入,这里引入sweetalert.min.js这个弹美化包 <script src="https://cdn.bootcss.com/sweetalert

1.1K20
您找到你想要的搜索结果了吗?
是的
没有找到

Css代码

left:居左,居中:center,也可以用1%-1008%表示与左端距离大小*/⑤bottom /*背景图垂直位置位于底部。...cover:保持原图宽高比例,缩放到正好完全覆盖定义区域 contain:保持原图宽高比例,缩放到宽度或高度正好适应指定区域,或用像素如320px 480px或百分比如80% 90%表示*/ 〓边框属性...: solid; /*链接文字边框样式*/ border-width: 1px 1px; /*链接文字边框粗细,左为横,右为竖*/ border-color: blue; /*链接文字边框颜色*...*/ margin: 1px 2px 1px 2px; /*链接文字外边距,分别为上右下左*/ } a:link { color: #FF0000; /*访问链接文字颜色*/ } a:visited...分别为上右下左*/ } 文件列表区域定义 .file_list{ font-size: 18px; /*文件列表区文字尺寸大小*/ background-color: white; /*文件列表区域背景颜色

2K20

CSS进阶12-网格布局 Grid Layout

作者意图是划分游戏空间,使得: 统计区域总是直接出现在游戏标题下。 游戏板显示在统计和标题右侧。 游戏标题和游戏板顶部应始终对齐。 当游戏达到最小高度时,游戏板底部和统计区域底部对齐。...注:网格项目的放置和重新排序不能用于替代正确排序,因为这可能会破坏文档可访问性。 3....第一列设置一个固定宽度“150px”,第二列设置是一个弹性尺寸,它是一个赋值网格空间,从而根据网格容器变化而进行宽度改变。如果网格容器宽度是“200px”,那么第二列宽度是“50px”。...: 150px 1fr; grid-definition-rows: 50px 1fr 50px } #item1 { grid-area: a } #item2 { grid-area: b }...例如,我们一个标签和输入组成列表表单: Name: Address:</label

5.9K20

小程序-实现自定义动画弹提示

前言 在小程序中,用户与界面进行交互时,有一些用户反馈提示,例如:触发某个按钮,从底部弹出,从顶部弹出等 如今,有一些现成 UI 库,虽然已经实现了,但若只是为了实现一个底部弹出或者自定义提示..."onBottomBox">弹出底部弹出 弹出顶部提示 <view wx:if...; background: #42b983; border-radius: 8px 8px 0 0; position: absolute; bottom: 0px; animation-duration...; // 动画名称 } @keyframes slidein { // 定义动画名称 from { transform: translateY(70%); // 平移,垂直方向上...,代码要比 css3 要多一些,可以实现更加复杂动画效果 注意 如果是底部弹出,拖动里面时,若遮罩层底部会跟着滚动,具体解决办法也可以在外层添加catchtouchmove="true"即可解决 <

1.6K30

小程序模板语法样式与页面配置

文本输入事件 change bindchange 或 bind:change 状态改变时触发 事件对象属性列表 当事件回调触发时候,会收到一个事件对象 event,它详细属性如下表所示:...bindinput 语法格式 在小程序中,通过 input 事件来响应文本输入事件,语法格式如下: 通过 bindinput,可以为文本绑定输入事件: 在页面的 .js 文件中定义事件处理函数...是否全局开启下拉刷新 onReachBottomDistance Number 50 页面上拉触底事件触发时距页面底部距离,单位为px tabBar tabBar 是移动端应用常见页面效果,用于实现多页面的快速切换...:选中时图片路径 selectedColor:tab 上文字选中时颜色 color:tab 上文字默认(选中)颜色 tabBar 节点配置项 属性 类型 必填 默认值 描述 position...pages 中预先定义 text String 是 tab 上显示文字 iconPath String 否 选中时图标路径;当 postion 为 top 时,不显示 icon selectedIconPath

59810

HTML笔记

/表示返回上一级目录 图像标签: src(必须属性):要显示图片url(相对/绝对) width:设置图片宽度,单位是px或% height:设置图片高度,单位是px或% alt:鼠标移至图片时显示文字...被嵌套列表只能出现在中,不能乱放 定义列表: 通常用对某个名词解释 语法: —–definition list(定义列表) 定义要解释名词 作用:定义与文字描述相关内容 作用:定义页面中侧边栏信息 作用:定义某区域底部信息 表格 标签... table属性: width 设置表格宽度,单位是px或% height 设置表格高度,单位是px或% align 设置表格水平对齐方式 left/center...作用:定义表单数据提交方式 作用:定义表单数据提交方式 取值: get默认是get post 可视化控件 分类 input元素 textarea 多行文本域元素 select和option选项元素

2.3K30

HarmonyOS学习路之开发篇—— Java UI框架(基础组件说明【一】)

TextField提供了一种文本输入。...可以是浮点数值,其默认单位为px;也可以是带px/vp/fp单位浮点数值;也可以引用float资源。...TextField共有XML属性继承自:Text TextField自有属性: 属性名称 属性描述 使用案例 basement 输入基线 可直接配置色值,也可引用color资源或引用media/graphic...处于选中状态文本颜色处于选中状态文本颜色 可以直接设置色值,也可以引用color资源。...… =“inside” 表示将原图按比例缩放到与Image相同或更小尺寸,并居中显示。… =“clip_center” 表示将原图按比例缩放到与Image相同或更大尺寸,并居中显示。 未完待续…

2K20

【CSS】课程网站网页底部开发 ( 网页底部盒子模型测量及样式 | 代码示例 )

绘制矩形部分 : 一、网页底部盒子模型测量及样式 ---- 1、盒子布局说明 底部盒子主要由如下部分组成 : 红色盒子 : 最外层盒子 水平方向 充满整个 浏览器 , 背景是白色 ; 蓝色盒子..., 只需要将之前定义版心样式设置给改盒子即可 ; /* 版心宽度 1200 像素 , 在浏览器中居中对齐 */ .w { width: 1200px; margin: auto; }...*/ margin-left: 65px; } /* 搜索栏 输入 */ .search input { /* 设置左浮动 , 方便与右侧按钮进行排列 */ float: left; /*...文字颜色变色 */ .subnav li a:hover { color: #00b4ff; } /* 链接内部 span 标签 , 右浮动 */ .subnav span { float:...无序列表 列表项 正在学习 文本样式 */ .course-bd li p { font-size: 12px; color: #a5a5a5; } /* Banner 条右侧 课程表 底部按钮样式

4.1K30

分享12个实用 CSS 进阶小技巧

1、解决图片5px间距问题 您是否经常遇到图片底部多出5px空间问题?别担心,有4种方法可以解决。...例如,要实现列表,最后一个元素不需要加下划线,如下所示: li:not(:last-child) { border-bottom: 1px solid #ebedf0; } 5、修改输入placeholder...样式 这段CSS代码作用是为一个输入设置了边框、圆角、尺寸和光标颜色等样式,同时定义了输入占位文本样式。...color: #4f4c5f; font-size: 14px; } 6.使用flex布局智能地将元素固定到底部 当内容不足时,按钮应位于页面底部。...body,html{ -webkit-overflow-scrolling: touch; } 10、自定义选定文本样式 您可以通过styles自定义选择文本颜色和样式。

23630

【CSS】课程网站 Banner 制作 ③ ( Banner 栏右侧课程盒子测量及样式 | Banner 版心盒子模型右侧课程栏代码示例 )

Banner 条右侧 课程表 body 部分整体设置左右 15 像素内边距 */ .course-bd { /* 左右设置 15 像素内边距 */ padding: 0 15px; } 无序列表如下图矩形所示..., 为了保证文字处于距离顶部 10 像素位置 只能将列表项设置为 50 像素高度*/ height: 50px; /* 设置底部边框 */ border-bottom: 1px...无序列表 列表项 正在学习 文本样式 */ .course-bd li p { font-size: 12px; color: #a5a5a5; } /* Banner 条右侧 课程表 底部按钮样式...文字颜色变色 */ .subnav li a:hover { color: #00b4ff; } /* 链接内部 span 标签 , 右浮动 */ .subnav span { float:...无序列表 列表项 正在学习 文本样式 */ .course-bd li p { font-size: 12px; color: #a5a5a5; } /* Banner 条右侧 课程表 底部按钮样式

3.5K60

最新jquery+easyui_api培训文档

auto listWidth 数字 下拉列表宽度 null listHeight 数字 下拉列表高度 null valueField 字符串 基础数据值名称绑定到这个组合 value textField...字符串 基础数据字段名称绑定到这个组合 text editable 布尔 定义是否可以直接到文本域中键入文本 true url 字符串 加载列表数据远程URL null 3.3 事件 事件名...false toolbar 数组 对话框上工具条,每个工具条包括: text, iconCls, disabled, handler etc. null buttons 数组 对话底部按钮,每个按钮包括...这些选项参数可以是一下一个配置对象:showType:定义如何将显示消息窗口。可用值是:null,slide,fade,show。默认值是slide。...{} sortName 字符串 定义哪一列可以排序 null sortOrder 字符串 定义排序方式,递增(asc)或递减(desc) asc editors 对象 定义当编辑某行数据时编辑器

3.2K40

CSS

(没有接触过链接),用于定义链接常规状态   a:hover(鼠标放在链接上状态),用于产生视觉效果   a:visited(访问过链接),用于阅读文章,能清楚判断已经访问过链接   a:active...FF0000}/*访问链接*/     a:visited{color:#00FF00}/*已访问链接*/ <!...元素水平方向浮动,意味着元素只能左右移动而不能上下移动。 一个浮动元素会尽量向左或向右移动,直到它外边缘碰到包含或另一个浮动边框为止。 浮动元素之后元素将围绕它。...浮动元素之前元素将不会受到影响。 如果图像是右浮动,下面的文本流将环绕在它左边: ? 如果你把几个浮动元素放到一起,如果有空间的话,它们将彼此相邻。...position 属性四个值: static relative fixed absolute 元素可以使用顶部,底部,左侧和右侧属性定位。然而,这些属性无法工作,除非是先设定position属性。

1.4K60

微信开发--微信小程序(四)

': 'application/json' 三: 条件渲染&&列表渲染 条件渲染以及列表渲染作为数据驱动视图重要部分,值得一提 1.条件渲染wx:if以及hidden wx:if会产生局部渲染,销毁条件块...,但是我们假如只是在array中push更多元素,我们想法应该是重新排序,不去重复创建视图原来已经有的元素,这里为了标识item,我们就可以用wx:key,有助于提升渲染效率,并且能够保持状态(如...{ display: flex; justify-content:center; flex-direction: row; margin:22rpx auto; } /*选中时小圆点样式...解决方法 onShow:function(){ this.onLoad(); }, 十三: 微信小程序动画中如何将rpx转化px 1.通过API可获取值: 在 iPhone6 下运行: var...); 2、px与rpx之间转换公式: px = rpx / 750 * wx.getSystemInfoSync().windowWidth; 动画中如何使用: 假设我想向右平移300rpx,动画代码如下

19.4K51

创建华丽 UI 7条规则 第一部分 (2019年更新)

拿按钮举例,即使有了这个相对 “平面” 按钮,仍然有一些与光线相关细节: 点击按钮(顶部)底部具有黑色底部边缘,正如夏天中午,我们站在太阳时影子样子。...点击按钮顶部 亮度略高于底部。这是因为它模仿了一个稍微弯曲表面,就像你需要把面前镜子倾斜才能看到太阳一样,倾斜表面会把更多阳光反射到你身上。...点击按钮投射出一个稀薄地阴影——在放大截图中能看更清楚。 点击后按钮,底部依然比顶部还要暗一些,并且整个按钮全都更暗。这是因为它与屏幕本身处于同一个平面,光线就不能轻易照到它了。...常见向内凹陷视觉元素: 文本输入 点击后按钮 滑块 单选按钮(选中) 复选框 常见向外突出视觉元素: 按钮 (点击) 滑块按钮 下拉控件 卡片 选中单选按钮 弹 扁平化设如何 扁平化设计是一种视觉风格...“播放列表” 和下划线之间有 15px 空间。这比字体本身还要高,更别提每个列表之间间隔了 25 个像素了。 顶部导航条有更多空间。文字“搜索音乐”占了整个导航条高度20%。

1.2K40
领券