![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
微信小程序-样式-wxss-css
黄菊华老师
专注大学生计算机教育和毕业设计辅导
展开
-
基于微信在线教育视频学习小程序毕业设计毕设作品(6)开题答辩PPT
在线教育视频学习小程序毕业设计原创 2022-06-08 10:18:37 · 843 阅读 · 0 评论 -
卫生中心、医院、校园疫苗预约小程序 新冠病毒疫苗预约小程序 毕业设计毕业论文 开题报告和效果图参考(基于微信小程序毕业设计题目选题课题)
原创 2021-08-19 09:01:12 · 2998 阅读 · 0 评论 -
微信小程序样式-元素选择器的使用
CSS 元素选择器最常见的 CSS 选择器是元素选择器。换句话说,文档的元素就是最基本的选择器。如果设置 HTML 的样式,选择器通常将是某个 HTML 元素,比如 p、h1、em、a,甚至可以是 html 本身:html {color:black;}h1 {color:blue;}h2 {color:silver;}别名-类型选择器在 W3C 标准中,元素选择器又称为类型选择器(...原创 2019-01-05 10:44:19 · 1641 阅读 · 0 评论 -
微信小程序样式-id选择器的使用教程
单独的选择器id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。id 选择器以 “#” 来定义。下面的两个 id 选择器,第一个可以定义元素的颜色为红色,第二个定义元素的颜色为绿色:#red {color:red;}#green {color:green;}下面的 HTML 代码中,id 属性为 red 的 p 元素显示为红色,而 id 属性为 green 的 p 元...原创 2019-01-05 10:49:16 · 7621 阅读 · 0 评论 -
微信小程序样式-id 派生选择器的使用教程
id 选择器和派生选择器在现代布局中,id 选择器常常用于建立派生选择器。#sidebar p { font-style: italic; text-align: right; margin-top: 0.5em;}上面的样式只会应用于出现在 id 是 sidebar 的元素内的段落。这个元素很可能是 div 或者是表格单元,尽管它也可能是一个表格或者其他块级元素。它甚至可以是一个...原创 2019-01-05 10:52:47 · 1339 阅读 · 0 评论 -
微信小程序样式-class类选择器的使用教程
类选择器语法在 CSS 中,类选择器以一个点号显示:.center {text-align: center}在上面的例子中,所有拥有 center 类的 HTML 元素均为居中。在下面的 HTML 代码中,h1 和 p 元素都有 center 类。这意味着两者都将遵守 “.center” 选择器中的规则。<h1 class="center">This heading wi...原创 2019-01-05 10:58:22 · 7154 阅读 · 0 评论 -
微信小程序样式-在小程序中创建样式的几种写法
通用css语法如何插入样式表当读到一个样式表时,浏览器会根据它来格式化 HTML 文档。插入样式表的方法有三种:外部样式表当样式需要应用于很多页面时,外部样式表将是理想的选择。在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到样式表。 标签在(文档的)头部:<head><link rel=&原创 2019-01-05 11:03:21 · 5223 阅读 · 0 评论 -
微信小程序界面设计入门课程-样式wxss中使用css课程-背景 background-color 使用教程
语法CSS 允许应用纯色作为背景,也允许使用背景图像创建相当复杂的效果。可以使用 background-color 属性为元素设置背景色。这个属性接受任何合法的颜色值。 这条规则把元素的背景设置为灰色:p {background-color: gray;}如果您希望背景色从元素中的文本向外少有延伸,只需增加一些内边距:p {background-color: gray; paddi...原创 2019-01-12 20:48:50 · 1430 阅读 · 0 评论 -
微信小程序界面设计入门课程-样式wxss中使用css课程-文本-text-align水平对齐
text-align水平对齐语法text-align 是一个基本的属性,它会影响一个元素中的文本行互相之间的对齐方式。西方语言都是从左向右读,所有 text-align 的默认值是 left。文本在左边界对齐,右边界呈锯齿状(称为“从左到右”文本)。对于希伯来语和阿拉伯语之类的的语言,text-align 则默认为 right,因为这些语言从右向左读。不出所料,center 会使每个文本行在...原创 2019-01-14 13:01:31 · 2787 阅读 · 0 评论 -
微信小程序界面设计入门课程-样式wxss中使用css课程-文本-text-indent缩进文本
text-indent缩进文本语法把 Web 页面上的段落的第一行缩进,这是一种最常用的文本格式化效果。CSS 提供了 text-indent 属性,该属性可以方便地实现文本缩进。通过使用 text-indent 属性,所有元素的第一行都可以缩进一个给定的长度,甚至该长度可以是负值。这个属性最常见的用途是将段落的首行缩进,下面的规则会使所有段落的首行缩进 5 em:p {text-in...原创 2019-01-14 13:06:33 · 1865 阅读 · 0 评论 -
微信小程序界面设计入门课程-样式wxss中使用css课程-文本-text-decoration文本装饰
text-decoration文本装饰语法接下来,我们讨论 text-decoration 属性,这是一个很有意思的属性,它提供了很多非常有趣的行为。text-decoration 有 5 个值:none | underline | overline | line-through | blink不出所料,underline 会对元素加下划线,就像 HTML 中的 U 元素一样。overli...原创 2019-01-14 13:11:22 · 1421 阅读 · 0 评论 -
微信小程序界面设计入门课程-样式wxss中使用css课程-文本-text-overflow 文本溢出
基础用法text-overflow 属性规定当文本溢出包含元素时发生的事情。text-overflow: clip | ellipsis | string值 描述clip 修剪文本。ellipsis 显示省略符号来代表被修剪的文本。string 使用给定的字符串来代表被修剪的文本。小程序应用Wxml代码<view class='cls'> 当我成熟以后,我发...原创 2019-01-14 13:14:02 · 793 阅读 · 0 评论 -
微信小程序界面设计入门课程-样式wxss中使用css课程-文本-text-shadow文本阴影
text-shadow文本阴影基础用法在 CSS3 中,text-shadow 属性向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表,每个阴影有两个或三个长度值和一个可选的颜色值进行规定。省略的长度是 0。值 描述h-shadow 必需。水平阴影的位置。允许负值v-shadow 必需。垂直阴影的位置。允许负值blur 可选。模糊的距离color 可选。阴影的颜色小程序应用W...原创 2019-01-14 13:21:04 · 1709 阅读 · 0 评论 -
微信小程序界面设计入门课程-样式wxss中使用css课程-文本-text-transform字符转换
样式wxss中使用css课程-文本-text-transform字符转换基础用法text-transform 属性处理文本的大小写。这个属性有 4 个值:none | uppercase | lowercase | capitalize作为一个属性,text-transform 可能无关紧要,不过如果您突然决定把所有 h1 元素变为大写,这个属性就很有用。不必单独地修改所有 h1 元素...原创 2019-01-14 13:24:19 · 987 阅读 · 0 评论 -
微信小程序界面设计入门课程-样式wxss中使用css课程-文本-word-break
样式wxss中使用css课程-文本-word-break基础用法word-break 属性规定自动换行的处理方法。通过使用 word-break 属性,可以让浏览器实现在任意位置的换行。word-break:normal | break-all | keep-all值 描述normal 使用浏览器默认的换行规则。break-all 允许在单词内换行。keep-all 只能在半角空格或...原创 2019-01-14 13:27:28 · 993 阅读 · 1 评论 -
微信小程序界面设计入门课程-样式wxss中使用css课程-文本-word-wrap
样式wxss中使用css课程-文本-word-wrap基础用法word-wrap 属性允许长单词或 URL 地址换行到下一行。word-wrap: normal | break-word值 描述normal 只在允许的断字点换行(浏览器保持默认处理)。break-word 在长单词或 URL 地址内部进行换行。小程序应用Wxml代码<view>This is a...原创 2019-01-14 13:29:53 · 1000 阅读 · 0 评论 -
微信小程序界面设计入门课程-样式wxss中使用css课程-文本-word-spacing 字间隔
样式wxss中使用css课程-文本-word-spacing 字间隔基础用法word-spacing 属性可以改变字(单词)之间的标准间隔。其默认值 normal 与设置值为 0 是一样的。word-spacing 属性接受一个正长度值或负长度值。如果提供一个正长度值,那么字之间的间隔就会增加。为 word-spacing 设置一个负值,会把它拉近:p.spread {word-spaci...原创 2019-01-16 10:16:05 · 1374 阅读 · 0 评论 -
微信小程序界面设计入门课程-样式wxss中使用css课程-文本-letter-spacing字母间隔
样式wxss中使用css课程-文本-letter-spacing字母间隔基础语法letter-spacing 属性与 word-spacing 的区别在于,字母间隔修改的是字符或字母之间的间隔。注释:允许使用负值,这会让字母之间挤得更紧。与 word-spacing 属性一样,letter-spacing 属性的可取值包括所有长度。默认关键字是 normal(这与 letter-spaci...原创 2019-01-17 18:17:35 · 1024 阅读 · 0 评论 -
微信小程序界面设计入门课程-样式wxss中使用css课程-文本-direction 文本方向
样式wxss中使用css课程-文本-direction 文本方向基础语法如果您阅读的是英文书籍,就会从左到右、从上到下地阅读,这就是英文的流方向。不过,并不是所有语言都如此。我们知道古汉语就是从右到左来阅读的,当然还包括希伯来语和阿拉伯语等等。CSS2 引入了一个属性来描述其方向性。direction 属性影响块级元素中文本的书写方向、表中列布局的方向、内容水平填充其元素框的方向、以及两端对...原创 2019-01-16 22:12:40 · 852 阅读 · 0 评论 -
微信小程序动画课程-通过wxss(css)来实现-@keyframes 规则
@keyframes 规则通用语法如需在 CSS3 中创建动画,您需要学习 @keyframes 规则。@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。浏览器支持Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。...原创 2019-01-19 19:02:51 · 4241 阅读 · 0 评论 -
微信小程序动画课程-通过wxss(css)来实现-@keyframes 规则-使用百分比
@keyframes 规则-使用百分比通用语法什么是 CSS3 中的动画?动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。请用百分比来规定变化发生的时间,或用关键词 “from” 和 “to”,等同于 0% 和 100%。0% 是动画的开始,100% 是动画的完成。为了得到最佳的浏览器支持,您应该始终定义 0% 和 100% 选择器。实例当动...原创 2019-01-19 19:04:50 · 2111 阅读 · 0 评论 -
微信小程序动画课程-通过wxss(css)来实现-keyframes 规则-改变颜色和位置
keyframes 规则-改变颜色和位置通用语法网页代码<!DOCTYPE html><html><head><style> div{width:100px;height:100px;background:red;position:relative;animation:myfirst 5s;-moz-animation:m...原创 2019-01-19 19:09:40 · 2329 阅读 · 0 评论 -
微信小程序动画课程-通过wxss(css)来实现-animation-name属性
animation-name属性通用语法规定 @keyframes 动画的名称定义和用法animation-name 属性为 @keyframes 动画规定名称。注释:请始终规定 animation-duration 属性,否则时长为 0,就不会播放动画了。默认值: none继承性: no版本: CSS3JavaScript 语法: object.style.animationN...原创 2019-01-19 19:12:55 · 1305 阅读 · 0 评论 -
微信小程序动画课程-通过wxss(css)来实现-animation-duration属性
animation-duration属性定义和用法animation-duration 属性定义动画完成一个周期所需要的时间,以秒或毫秒计,默认是 0默认值: 0继承性: no版本: CSS3JavaScript 语法: object.style.animationDuration=“3s”语法animation-duration: time;值 描述time 规定完成动画所...原创 2019-01-19 19:16:54 · 2975 阅读 · 0 评论 -
微信小程序动画课程-通过wxss(css)来实现-animation-timing-function属性
animation-timing-function属性定义和用法animation-timing-function 规定动画的速度曲线,默认是 “ease”速度曲线定义动画从一套 CSS 样式变为另一套所用的时间。速度曲线用于使变化更为平滑。默认值: ease继承性: no版本: CSS3JavaScript 语法: object.style.animationTimingFunc...原创 2019-01-19 19:19:18 · 2859 阅读 · 0 评论 -
微信小程序动画课程-通过wxss(css)来实现-animation-delay属性
animation-delay属性定义和用法animation-delay 属性定义动画何时开始。animation-delay 值以秒或毫秒计, 默认是 0提示:允许负值,-2s 使动画马上开始,但跳过 2 秒进入动画。默认值: 0继承性: no版本: CSS3JavaScript 语法: object.style.animationDelay=“2s”语法animation...原创 2019-01-19 19:21:30 · 2236 阅读 · 1 评论 -
微信小程序动画课程-通过wxss(css)来实现-animation-iteration-count属性
animation-iteration-count属性定义和用法animation-iteration-count 属性定义动画的播放次数。默认是 1默认值: 1继承性: no版本: CSS3JavaScript 语法: object.style.animationIterationCount=3语法animation-iteration-count: n|infinite;值...原创 2019-01-19 19:23:18 · 1114 阅读 · 0 评论 -
微信小程序动画课程-通过wxss(css)来实现-animation-direction属性
animation-direction属性定义和用法animation-direction 属性定义是否应该轮流反向播放动画。默认是 “normal”如果 animation-direction 值是 “alternate”,则动画会在奇数次数(1、3、5 等等)正常播放,而在偶数次数(2、4、6 等等)向后播放。注释:如果把动画设置为只播放一次,则该属性没有效果。默认值: normal...原创 2019-01-19 19:25:19 · 1350 阅读 · 0 评论 -
微信小程序动画课程-通过wxss(css)来实现-animation 属性
animation 属性定义和用法animation 属性是一个简写属性,用于设置六个动画属性: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction注释:请始终规定 animat...原创 2019-01-19 19:27:42 · 2676 阅读 · 0 评论 -
微信小程序动画课程-通过wxss(css)来实现-animation-play-state属性
animation-play-state属性定义和用法animation-play-state 属性规定动画正在运行还是暂停。默认是 “running”注释:您可以在 JavaScript 中使用该属性,这样就能在播放过程中暂停动画。默认值: running继承性: no版本: CSS3JavaScript 语法: object.style.animationPlayState=“p...原创 2019-01-19 19:29:32 · 2683 阅读 · 2 评论 -
微信小程序动画课程-通过wxss(css)来实现-animation-fill-mode属性
animation-fill-mode属性定义和用法animation-fill-mode 属性规定动画在播放之前或之后,其动画效果是否可见。注释:其属性值是由逗号分隔的一个或多个填充模式关键词。默认值: none继承性: no版本: CSS3JavaScript 语法: object.style.animationFillMode=none语法animation-fill-mo...原创 2019-01-19 19:31:05 · 1571 阅读 · 0 评论 -
微信小程序界面设计入门课程-样式wxss中使用css课程-字体-font-size字体大小
font-size字体大小基础语法有能力管理文本的大小在 web 设计领域很重要。但是,您不应当通过调整文本大小使段落看上去像标题,或者使标题看上去像段落。请始终使用正确的 HTML 标题,比如使用 - 来标记标题,使用 来标记段落。font-size 值可以是绝对或相对值。绝对值:将文本设置为指定的大小不允许用户在所有浏览器中改变文本大小(不利于可用性)绝对大小在确定了输出...原创 2019-01-16 17:51:49 · 6862 阅读 · 0 评论 -
微信小程序界面设计入门课程-样式wxss中使用css课程-字体-font-style字体风格
font-style字体风格基础用法font-style 属性最常用于规定斜体文本。该属性有三个值:normal - 文本正常显示italic - 文本斜体显示oblique - 文本倾斜显示italic 和 oblique 的区别font-style 非常简单:用于在 normal 文本、italic 文本和 oblique 文本之间选择。唯一有点复杂的是明确 italic 文本...原创 2019-01-16 14:19:06 · 1477 阅读 · 0 评论 -
微信小程序界面设计入门课程-样式wxss中使用css课程-字体-font-variant字体变形
font-variant字体变形基础用法font-variant 属性可以设定小型大写字母。小型大写字母不是一般的大写字母,也不是小写字母,这种字母采用不同大小的大写字母。实例p {font-variant:small-caps;}小程序应用Wxml代码&amp;amp;lt;view&amp;amp;gt; &amp;amp;lt;text&amp;amp;gt;默认字体&amp;amp;lt;/te原创 2019-01-18 10:13:19 · 643 阅读 · 0 评论 -
微信小程序界面设计入门课程-样式wxss中使用css课程-字体-font-weight字体加粗
font-weight字体加粗基础用法font-weight 属性设置文本的粗细。使用 bold 关键字可以将文本设置为粗体。关键字 100 ~ 900 为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别,那么这些数字就直接映射到预定义的级别,100 对应最细的字体变形,900 对应最粗的字体变形。数字 400 等价于 normal,而 700 等价于 bold。如果将元素的加粗...原创 2019-01-15 13:01:31 · 5858 阅读 · 0 评论 -
微信小程序界面设计入门课程-样式wxss中使用css课程-outline轮廓
outline轮廓基础用法轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。CSS outline 属性规定元素轮廓的样式、颜色和宽度。CSS 边框属性属性 描述outline 在一个声明中设置所有的轮廓属性outline-color 设置轮廓的颜色outline-style 设置轮廓的样式outline-width 设置轮廓的宽度out...原创 2019-01-15 13:04:56 · 888 阅读 · 0 评论 -
微信小程序界面设计入门课程-样式wxss中使用css课程-框模型-概述
基础语法CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。结构示意图如下:元素框的最内部分是实际的内容,直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素。提示:背景应用于由内容和内边距、边框组成的区域。内边距、边框和外边距都是可选的,默认值是零。但是,许多...原创 2019-01-15 13:13:55 · 688 阅读 · 0 评论 -
微信小程序界面设计入门课程-样式wxss中使用css课程-框模型-padding内边距
框模型-padding内边距基础用法元素的内边距在边框和内容区之间。控制该区域最简单的属性是 padding 属性。CSS padding 属性CSS padding 属性定义元素边框与元素内容之间的空白区域。padding 属性接受长度值或百分比值,但不允许使用负值。例如,如果您希望所有 h1 元素的各边都有 10 像素的内边距,只需要这样:h1 {padding: 10px;}...原创 2019-01-15 13:18:30 · 1308 阅读 · 0 评论 -
微信小程序界面设计入门课程-样式wxss中使用css课程-框模型-border边框
框模型-border边框基础用法元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。CSS border 属性允许你规定元素边框的样式、宽度和颜色。在 HTML 中,我们使用表格来创建文本周围的边框,但是通过使用 CSS 边框属性,我们可以创建出效果出色的边框,并且可以应用于任何元素。元素外边距内就是元素的的边框 (border)。元素的边框就是围绕元素内容和内边据的一条...原创 2019-01-15 13:24:41 · 1494 阅读 · 0 评论 -
微信小程序界面设计入门课程-样式wxss中使用css课程-框模型-margin外边距
框模型-margin外边距基础用法围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。设置外边距的最简单的方法就是使用 margin 属性,这个属性接受任何长度单位、百分数值甚至负值。CSS margin 属性设置外边距的最简单的方法就是使用 margin 属性。margin 属性接受任何长度单位,可以是像素、英寸、毫米或 em。margin 可以设置为 aut...原创 2019-01-15 13:29:05 · 1209 阅读 · 0 评论