
css
文章平均质量分 53
bootstrap3以及默认css
安果移不动
精通Android,Swift,Flutter,Python,Php,按键精灵,易语言。曾为华为录制精品课程,拥有资质:按键精灵顶级证书;
产品秀:https://www.anguomob.com
B站:https://space.bilibili.com/482453235
展开
-
CSS * *:before, *:after
*, *:before, *:after { box-sizing: inherit; }* 代表所有针对所有得元素都添加 box-sizing: inherit; 属性*:before如果*很难理解可以看下p标签在每个 <p> 元素的内容之前插入新内容 <!DOCTYPE html><html><head><style>p:before{content:"台词...原创 2022-02-01 10:36:59 · 1561 阅读 · 1 评论 -
css 右下角悬浮
.bootom_right { position: fixed; display: flex; flex-direction: column; right: 16px; bottom: 150px; z-index: 10; padding: 3px 3px 0 3px; border-radius: 3px; border...原创 2019-11-22 14:47:21 · 1912 阅读 · 0 评论 -
Gradle Tips2:使用archivesBaseName改变Apk名称
在Build.gradle中配置如下defaultConfig { .... archivesBaseName = "myApp-${verName}" }生成的Apk文件: myApp-1.0.0-release.apk也可以用在BuildTypes中: buildTypes { debug { ...原创 2019-11-18 10:30:30 · 1819 阅读 · 0 评论 -
小程序 搜索悬浮在上面
布局<!--pages/book/book.wxml--><view class="container"> <view class="header"> <view class="box"> <image src="/images/icon/search.png"></image> ...原创 2019-09-26 09:46:56 · 494 阅读 · 0 评论 -
小程序css样式_固定控件颜色
多个标签中的前两个着色写法.comment-container > v-tag:nth-child(1) > view { background-color: #fffbdd;}.comment-container > v-tag:nth-child(2) > view { background-color: #eefbff;}场景<...原创 2019-09-26 09:44:25 · 392 阅读 · 0 评论 -
CSS border-style 属性
CSS 参考手册实例设置 4 个边框的样式:p { border-style:solid; }亲自试一试浏览器支持IE Firefox Chrome Safari Opera 所有浏览器都支持 border-style 属性。注释:任何的版本的 Internet Explore...原创 2019-03-11 01:15:08 · 371 阅读 · 0 评论 -
CSS display 属性
CSS display 属性CSS 参考手册实例使段落生出行内框:p.inline { display:inline; }亲自试一试浏览器支持IE Firefox Chrome Safari Opera 所有主流浏览器都支持 display 属性。注释:如果规定了 !DOCT...原创 2019-03-11 01:10:17 · 202 阅读 · 0 评论 -
CSS overflow 属性
实例设置 overflow 属性:div { width:150px; height:150px; overflow:scroll; }浏览器支持所有主流浏览器都支持 overflow 属性。注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。定义和用法overflow 属性规定当内容溢出...原创 2019-03-05 10:54:07 · 6596 阅读 · 0 评论 -
彻底弄懂css中单位px和em,rem的区别
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢?PX特点1. IE无法调整那些使用px作为单位的字体大小;2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位;3. Firefox能够调整px和em,rem,但是96%以上的中国网民使用IE浏览器(或内核)。px像素(Pixel)。相对长度单位。像...原创 2019-02-28 14:02:28 · 265 阅读 · 0 评论 -
normalize.css与reset.css的差别与官方讲解
推荐使用nromalize.cssnromalize.css引用 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.css">官方地址http://nicolasgallagher.com/about-normalize-cs...原创 2019-02-27 19:10:38 · 2623 阅读 · 0 评论 -
bootstarp 之为什么我的移动端不适配??
少写了一段代码 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">官方参考地址 https://getbootstrap.com/docs/3.3/getting-started/#template...原创 2019-01-18 16:41:24 · 497 阅读 · 0 评论 -
boostarp3 横向li ul
<ul class=" list-unstyled list-inline list-group"> <li><p>升序:</p> </li> <li class="list-group-item lr_m原创 2018-12-26 15:31:46 · 533 阅读 · 0 评论 -
bootstrap实现下拉框dropdown选中select option 美爆了
bootstrap 官网的例子有点坑,它只给你下拉,并且美化了,但你点击下拉却不能选择,这个坎就已经让一大堆人不想用它下拉框了,但原生的下拉框在每个浏览器长的的不一样,尤其是在ie太丑,好了废话不多说直接上代码; <div id="addgroups" class="btn-group"><button type="button" data-name...原创 2018-12-03 18:13:38 · 1785 阅读 · 0 评论 -
Bootstrap学习笔记(三) 网格系统
4-1实现原理 网格系统的实现原理非常简单,仅仅是通过定义容器大小,平分12份(也有平分成24份或32份,但12份是最常见的),再调整内外边距,最后结合媒体查询,就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份。 <div class="container"> <div class="row"> ...原创 2018-11-30 17:02:38 · 337 阅读 · 0 评论 -
Bootstrap学习笔记(二) 表单
3-1 基础表单 单中常见的元素主要包括:文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。 在Bootstrap框架中,通过定制了一个类名`form-control`,也就是说,如果这几个元素使用了类名“form-control”,将会实现一些设计上的定制效果。 1、宽度变成了100% 2、设置了一个浅灰色(#ccc)的边框 3、具有4px的圆角 ...原创 2018-11-30 16:58:20 · 670 阅读 · 0 评论 -
Bootstrap学习笔记(一) 排版
Bootsrap是一款优秀的前端开发框架,我从慕课网上开始学习Bootstrap,以下我学习过程中的一些笔记及代码。首先学习排版:从Bootstrap网站下载Bootstrap3中文文档(V3.3.5),解压到本地。由于幕课上排版系列课程主要用的是Bootstrap的Css,所以下载解压,将其中的bootstrap.min.css复制粘贴到我保存html文件里的一个styles文件夹中,此...原创 2018-11-30 16:40:49 · 338 阅读 · 0 评论 -
利用BootStrap创建搜索框 详解
今天学了bootstrap由于官网上没有搜索框,我要做一个网站正好需要,我就自己做了一个搜索框,话不多说直接上代码下面是jsp代码<div class="col-sm-5" id="so"> <div class="input-group"> <input type="text" class原创 2018-11-29 17:29:22 · 2127 阅读 · 0 评论 -
bootstrap的图片自适应属性
在img标签上添加一个class属性class="img-responsive" 其所赋予的样式为:.img-responsive { display: block; height: auto; max-width: 100%;}如:<img class="img-responsive" src="aaa/bbb/ccc.jpg"/>...原创 2018-11-29 16:58:36 · 1218 阅读 · 0 评论 -
bootstrap栅栏系统css中的col-xs-*、col-sm-*、col-md-* 的意义以及 bootstrap一个标签中,同时有 col-xs , col-sm , col-md , col
摘要: bootstrap栅栏系统css中的col-xs-*、col-sm-*、col-md-* 的意义:.col-xs- 超小屏幕 手机 (<768px).col-sm- 小屏幕 平板 (≥768px).col-md- 中等屏幕 桌面显示器 (≥992px).col-lg- 大屏幕 大桌面显示器 (≥1200px)首先说明:1、col-列;2、xs-maxsma...原创 2018-08-28 10:27:33 · 360 阅读 · 0 评论 -
Bootstrap 轮播(Carousel)插件
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, in原创 2018-08-28 10:09:41 · 522 阅读 · 0 评论 -
Bootstrap 实例 - 折叠(Collapse)插件方法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="http原创 2018-08-28 05:18:43 · 1801 阅读 · 0 评论 -
data-toggle与data-target的作用
<a href="login.html" data-toggle="modal" data-target="#signin-signup-tab" id="signin-button" class="pull-right">Sign In</a>:因为Bootstrap为这些元素都绑定上了事件,而终止了链接默认行为,你可以看看Bootstrap的文原创 2018-08-28 04:45:59 · 30651 阅读 · 0 评论 -
bootstarp 标签页(Tab)插件事件的用法。在本实例中,将显示当前和前一个访问过的标签页:
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, in原创 2018-08-27 18:43:54 · 1360 阅读 · 0 评论 -
bootstrap 响应式的导航栏
响应式的导航栏为了给导航栏添加响应式特性,您要折叠的内容必须包裹class.collapse、.navbar-collapse 的<duv>中。折叠起来的导航栏实际上是 一个带有class.navbar-toggle及两个data-元素的按钮。第一个是data-toggle,用于告诉JavaScript 需要对按钮做什么,第二个是data-target ,指示要切换到哪一个元素.三...原创 2018-08-22 10:57:56 · 2626 阅读 · 5 评论 -
bootstarp自带的图片
定制字体图标我们已经看到如何使用字体图标,接下来我们看看如何定制字体图标。我们将以上面的实例开始,并通过改变字体尺寸、颜色和应用文本阴影来进行定制图标。下面是开始的代码:<button type="button" class="btn btn-primary btn-lg"> <span class="glyphicon glyphicon-user">...原创 2018-08-21 13:47:46 · 285 阅读 · 0 评论 -
css 块级元素(block)和内联元素(inline)的特性
块级元素(block)特性:总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示; 宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;内联元素(inline)特性:和相邻的内联元素在同一行; 宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外...原创 2018-08-14 16:11:02 · 928 阅读 · 0 评论 -
web开发之Tab页的常见实现方法
tab和内容分离 布局: 用一个大的container div容器包裹住tab-control和tab-content两个div块 给每一个tab-control的项(a标签的href属性)设置锚点 给每一个tab-content的项,设置id属性 id属性名需与上述锚点一一对应 <div class="container"> <...原创 2018-07-19 22:57:45 · 1827 阅读 · 0 评论 -
css 链接 未访问连接 已访问连接 鼠标移动到连接上 鼠标点击时候 变换颜色
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> a:link { /*&a原创 2018-07-15 23:38:06 · 1597 阅读 · 0 评论