层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
我们都知道,撸页面的时候当我们的内容超出了我们的div,往往会出现滚动条,影响美观。 尤其是当我们在做一些导航菜单的时候。滚动条一出现就破坏了UI效果。 我们不希望出现滚动条,也不希望超出去的内容被放
用css画矩形圆角 ,需要使用到border-radius这个属性,下图四角圆,代码显示如下:border-radius:60px; width:360px; height:200px; border
说到Tab切换,你可能首先想到的就是使用jQuery,短短几行代码就可以轻松搞定一个Tab切换。 而今天所要分享的,是使用 0 行JS代码来实现Tab切换! 具体效果如下: Tab切换 方法一:模拟单
弹窗是一种常见的交互方式,而蒙层则是弹窗必不可少的元素,用于隔断页面与弹窗区块,暂时阻断页面的交互。但是,我们会发现,当弹出遮罩层后,底层body的内容也是可以滚动,显然这不是我们想要的效果,而这个问
效果图如下: 在盒子模型中我们通常会给盒子设置边框属性,使之完成某些功能和样式我们会使用css中的border属性来设置边框一般会通过连写来设置border,他下面还有width,style,colo
html代码是这样的 <div class="arrow-up"> <!--向上的三角--> </div> <div class=&quo
最近在使用MarkDown写公众号文章,并使用MarkDown Here进行排版。发现效果还不错,这边分享一个 MarkDown Here的CSS样式。 /*markdown here 的全局配置*/
在微信小程序之中,对盒子布局的时候,我们要注意布局大小不要超过页面的宽度,否则会出现布局混乱的问题这是.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
我们知道要想让一个组件水平居中,只要设置下面两行代码就可以了:display:block;margin:0px auto;但是给form这样设置,却达不到水平居中的效果。解决方法:给form设置属性width,即给form设置一个宽度。如下面的写法就可以让form水平居中了:width:200px;display:block;margin:0px auto;
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">飘
css3设置box-shadow对象选择器 {box-shadow:[投影方式] X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩展半径 阴影颜色}基本语法是{box-shadow:[inset] x-offset y-offset blur-radius spread-radiuscolor}阴影类型:此参数可选。如不设值,默认投影方式是外阴影outse
将两个并列的元素的属性设为inline-block的影响这是html代码: *用户名错误 *密码错误 *验证码错误 登陆 注册忘记
在页面中,有时候我们想自己写个遮罩层,让它的宽度和高度都占满整个可见页面区域,css设置好了,但是还是没有得到想要的效果。遮罩层用表示,是body的直接子元素。部分.html代码如下:.css代码如下:#bg{    position:fixed;    top:0px;    left:0px;    right:0px;    bottom:0p
最近在用css布局设置一个页面,现在分享在设计过程中遇到一些问题的解决方法:1、有的时候,只要外层的元素设为display:block,里面嵌套的inline元素可以不用设置display:block,就可以设置高度和宽度例如: "display:block">        这样就可以了,要是input在设置一个display:block反而达不到设置宽度的目的。
css中的一些排版布局要注意的东西
css属性中的优先级
在设置遮罩层的时候,发现遮罩层不能覆盖导航条。原因:可能是z-index的值设的太小了。如下面所示:#bg_background{    position: absolute;    z-index: 8;    top:0px;    left: 0px;    right: 0px;    bottom: 0px;    background-col
chrome 表单自动填充后,input文本框的背景会变成黄色的。通过审查元素可以看到这是由于chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性,如下图所示:解决方式:可以对input:-webkit-autofill使用足够大的纯色内阴影来覆盖input输入框的黄色背景,如下所示:input:-webkit-autof
css让图片居中,不管图片是方图、竖图、横图,都可以让图片在父框架下居中,即方图则占满整个父框架;横图则左右填充上下居中;竖图则左右居中上下填充1、html如下: /*这里的图片路径自己设置*/ 2、css如下 body{ background-color: gray; } #red
问题:在页面中存在抖动问题,如下图所示,当网速较慢的时候,图片加载的比较慢,当图片没有加载完前,test是在图片的左上角位置此时不显示图片,当图片加载完,test在图片的左下角,这时候的变化就是页面抖动。发生抖动的原因:当图片没有加载完成前,img的高度为0,没有将其撑开,等到图片加载完之后,img被撑开解决方法:通过给swiper的父级元素设置一个固定的高度来解决的,width:10...
在写移动端页面的布局的时候是按照iphone6的尺寸写的,在iphone5中因为宽度的问题导致样式错乱。如下所示是ratings.vue中的<template>内容<template> <!--评价页的高度可能会超过页面,所以需要bette-scroll--> <!--在内容真正开始的地方,其外部会有一个div包裹--> <div ...