层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
在微信小程序之中,对盒子布局的时候,我们要注意布局大小不要超过页面的宽度,否则会出现布局混乱的问题这是.wxml内容: 复制密文 点击加密 这是.wxss.encryption{  box-sizing: border-box;  displa
box-shadow在ios下没有显示,但是在android机下显示正常。1、html如下 2、css如下.paScreenTxt{ width:98%; height:200px; display: block; margin: 12px auto; box-shadow: 0px 0px 2px 2px #CCC;}3、在and
CSS3 引入了新单位:vw、vh、vmin、vmax。(1)vw、vh、vmin、vmax 是一种视窗单位,也是相对单位。它相对的不是父节点或者页面的根节点,而是由视窗(Viewport)大小来决定的, 1代表 1%,视窗(Viewport)是你的浏览器实际显示内容的区域—,换句话说是你的不包括工具栏和按钮的网页浏览器。vw:视窗宽度的百分比(1vw 代表视窗的宽
li中的span设置float:right不生效:部分html代码如下: 部分css代码如下:li{ display:block;}#one{ float:left;}#two{ float:right;}本意是想让两个span在li中,第一个span左浮动,第二个span右浮动,结果第二个span右浮动没生效,显示的结果还是左
给li标签中的span设置属性margin-bottom不生效html如下: <ul class="lottery_main""> <!-- 每个中间人的头像和名字 --> <li class='li25'> <span class="lottery_name25">飘
有一张png格式的图片,用css3的animation()配合@keyframes特性,实现图片的上下摇动原图如下:html代码如下:css代码如下:#shake_icon{ width:100px; height:100px; animation: shaking 0.25s linear infinite; -webkit-animation: shak
将两个并列的元素的属性设为inline-block的影响这是html代码: *用户名错误 *密码错误 *验证码错误 登陆 注册忘记
在页面中,有时候我们想自己写个遮罩层,让它的宽度和高度都占满整个可见页面区域,css设置好了,但是还是没有得到想要的效果。遮罩层用表示,是body的直接子元素。部分.html代码如下:.css代码如下:#bg{    position:fixed;    top:0px;    left:0px;    right:0px;    bottom:0p
问题:在表单的输入框中,有时候我们并不希望点击输入框时,会出现提示信息。这时,在<input>中添加属性,一般能达到目的。而在chrom里面就失效。解决方法:浏览器根据t输入框的时,会自动填充账号和密码的输入框。先将作为密码的输入框的type设成:,当点击密码输入框的时候,将其type属性设为:这样问题就解决了。HTML页面代码如下: type="te
css中的一些排版布局要注意的东西
css属性中的优先级
让导航条的格式不随界面的变化而变化
chrome 表单自动填充后,input文本框的背景会变成黄色的。通过审查元素可以看到这是由于chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性,如下图所示:解决方式:可以对input:-webkit-autofill使用足够大的纯色内阴影来覆盖input输入框的黄色背景,如下所示:input:-webkit-autof
css让图片居中,不管图片是方图、竖图、横图,都可以让图片在父框架下居中,即方图则占满整个父框架;横图则左右填充上下居中;竖图则左右居中上下填充1、html如下: /*这里的图片路径自己设置*/ 2、css如下 body{ background-color: gray; } #red
父级div使用display:table-cell;vertical-align:middle会出现空隙。1、html如下 2、css.divCon{ width:200px; height:200px; background:black; display: table-cell; vertical-align: middle; text-al
在写移动端页面的布局的时候是按照iphone6的尺寸写的,在iphone5中因为宽度的问题导致样式错乱。如下所示是ratings.vue中的<template>内容<template> <!--评价页的高度可能会超过页面,所以需要bette-scroll--> <!--在内容真正开始的地方,其外部会有一个div包裹--> <div ...
在移动设备上,我们常常需要将一张图片的宽度设为屏幕的宽度,同时将图片的高度设置成和图片的宽度一样大,下面讲讲用css如何设置。html如下 <div class="imageHeader"> <img :src="food.image"> </div>css如下(这里用了styleus语法书写)...
一、在一个div里面的两个span标签没有对齐,如下图红色圈所示红色圈的html如下<div class="title"> <span class="brand"></span> <span class="name">{{seller.name}}</span></div>
用css实现柱状图,要求DOM、CSS不一样1、DOM结构全部都用div,给父div设置宽高,给子div设置同样的margin  width   display:inline-block,然后在分别给每一个子div设置height  background-color<!DOCTYPE html><html><head> <title></...
css的属性position规定元素的定位类型,任何元素都可以定位,对于absolute和fixed定位的元素会生成一个块级框,而不论本身是什么类型。相对定位元素会相对于他在正常流中的默认位置偏移。position可能的值:1、absolute:生成绝对定位的元素,相对于static定位以外的第一个父元素进行定位,定位位置通过top,bottom,left,right规定2、fixed
一:让div水平居中的css方法:(默认情况下div的display为block,以下是针对display:block来说的)1、给要设置水平居中的div设置display:block  ,margin:0 auto,width   ,  height4个属性,可以让块级元素水平居中(默认情况下,div的position:static) test div{ w
问题:给li设置over-flow:hidden失效1、html<ul class=" lotteryNameList"> <li class="name">讲讲讲讲讲讲讲讲</li> <li class="name">讲讲</li> <li class="nam
1、问题:有时候,在布局时想让A盒子的层级高于B盒子的层级,就设置A盒子的z-index,但是却失效。2、让z-index生效的前提是:设置盒子的positio:absolute/relative/fixed失效情况一:无论设置z-index多大都没有起作用。这种情况发生需要3个条件A、父标签设置了position:relativeB、问题标签没有设置positio:absolute/relati...