精华内容
下载资源
问答
  • 移动Web UI库(H5框架)有哪些,看这里就够了
    万次阅读 多人点赞
    2017-11-25 16:30:25

    前言

    今年上半年,项目组在项目开发的过程中建立了一套风格统一,组件丰富完善,命名统一规范的PC端UI库,适用于做大型站点,该UI库也是应用到了整个平台的项目中,在各个项目组中进行推广。因为项目的保密性,这里不方便给出实际项目,当然目前这套UI库也不是开源的。

    下半年开始,我们偏向做移动Web的同学也开始考虑要梳理出这样一套适用于移动端的UI库,与PC端UI库命名规范保持一致,便于项目组同学在PC项目和移动项目中随意切换,当然,移动端的组件和样式以及交互与PC端都是有很大差别的,比如PC端的下拉菜单,在移动端可能就需要弹出的picker来实现了。鉴于此,我们尽快建立移动端UI库是非常有必要和有意义的,做之前我大量看了下目前移动端的UI库,以及H5框架,比较丰富和切实的了解了更多的应用场景,本文将介绍各个移动端框架,没有技术,只有一个列表,勿喷,谢谢!

    移动Web UI库列表

    1、Framework7
    Framework7 - is a free and open source mobile HTML framework to develop hybrid mobile apps or web apps with iOS & Android native look and feel. It is also an indispensable prototyping apps tool to show working app prototype as soon as possible in case you need to.

    2、SUI Mobile
    MSUI 是阿里巴巴共享业务事业部UED团队的作品。目的是为了手机H5页面提供一个常用的组件库,减少重复工作。
    SUI Mobile 是一套基于 Framework7 开发的UI库。它非常轻量、精美,只需要引入我们的CDN文件就可以使用,并且能兼容到 iOS 6.0+ 和 Android 4.0+,非常适合开发跨平台Web App。

    3、FrozenUI
    Frozen UI是一个开源的简单易用,轻量快捷的移动端UI框架。基于手Q样式规范,选取最常用的组件,
    做成手Q公用离线包减少请求,升级方式友好,文档完善,目前全面应用在腾讯手Q增值业务中。

    4、Amaze UI
    中国首个开源 HTML5 跨屏前端框架,相比国外框架,Amaze UI 关注中文排版,根据用户代理调整字体,实现更好的中文排版效果;兼顾国内主流浏览器及 App 内置浏览器兼容支持。
    Amaze UI 以移动优先(Mobile first)为理念,从小屏逐步扩展到大屏,最终实现所有屏幕适配,适应移动互联潮流。

    5、MUI
    最接近原生APP体验的高性能前端框架。

    6、WeUI
    WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。

    7、VUX
    Vux(读音 [v’ju:z],同views)是基于WeUI和Vue(2.x)开发的移动端UI组件库,主要服务于微信页面。
    基于webpack+vue-loader+vux可以快速开发移动端页面,配合vux-loader方便你在WeUI的基础上定制需要的样式。
    vux-loader保证了组件按需使用,因此不用担心最终打包了整个vux的组件库代码。

    8、WEEX
    Weex 是一套简单易用的跨平台开发方案,能以 web 的开发体验构建高性能、可扩展的 native 应用,为了做到这些,Weex 与 Vue 合作,使用 Vue 作为上层框架,并遵循 W3C 标准实现了统一的 JSEngine 和 DOM API,这样一来,你甚至可以使用其他框架驱动 Weex,打造三端一致的 native 应用。

    9、Ant Design Mobile
    antd-mobile 是 Ant Design 的移动规范的 React 实现,服务于蚂蚁及口碑无线业务。

    10、vue-carbon
    基于 vuejs 1.0 开发 material design 风格的移动端 WEB UI 库, 设计资源参考 CARBON FrameWork7。

    11、uiKit
    uiKit是一款轻量级、模块化的前端框架,可快速构建强大的web前端界面。

    12、H-ui
    H-ui是轻量级前端框架,简单免费,兼容性好,适用于中国网站。

    13、layui
    Layui 诞生于2016年金秋,是一款带着浓烈情怀的国产前端UI框架,她追求极简,又不失丰盈的内在,说她是史上最轻量的结晶,似乎并不为过。一切都源自于她对原生态的执着,对前端社区的那些噪杂声音的过滤,以及她本身的精心雕琢。

    14、YDUI Touch
    YDUI Touch 专为移动端打造,在技术实现、交互设计上兼容主流移动设备,保证代码轻、性能高;使用 Flex 技术,灵活自如地对齐、收缩、扩展元素,轻松搞定移动页面布局;实现强大的屏幕适配布局,等比例适配所有屏幕。什么?用得不开心?轻松切换 px;自定义Javascript组件、Less文件、Less变量,定制一份属于自己的YDUI。

    15、sheral
    基于sandal(基础sass库)扩展的移动端UI库。具体设计思想可参看sheral——一个方便定制及扩展的UI组件库

    16、vonic
    一个基于 vue.js 和 ionic 样式的 UI 框架,用于快速构建移动端单页应用。

    17、Mint UI
    基于 Vue.js 的移动端组件库
    Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要。通过它,可以快速构建出风格统一的页面,提升开发效率。
    真正意义上的按需加载组件。可以只加载声明过的组件及其样式文件,无需再纠结文件体积过大。
    考虑到移动端的性能门槛,Mint UI 采用 CSS3 处理各种动效,避免浏览器进行不必要的重绘和重排,从而使用户获得流畅顺滑的体验。
    依托 Vue.js 高效的组件化方案,Mint UI 做到了轻量化。即使全部引入,压缩后的文件体积也仅有 ~30kb (JS + CSS) gzip。

    18、Muse-UI
    基于 Vue 2.0 和 Material Desigin 的 UI 组件库
    1.组件丰富
    Muse UI 基本实现了 Material Design 设计规范类的所有组件,另外还开发许多的功能性的组件
    2.可定制
    Muse UI 使用less文件,所有的颜色都有一个变量维护,通过编写 less 文件完成自定义主题,另外组件内部也提供一些修改效果的参数
    3.基于 Vue 2.0
    Muse UI 基于 Vue2.0 开发,Vue2.0是当下最快的前端框架之一,小巧,api友好,可用于开发的复杂单页应用。

    19、jQuery WeUI
    jQuery WeUI 是专为微信公众账号开发而设计的一个简洁而强大的UI库,包含全部WeUI官方的CSS组件,并且额外提供了大量的拓展组件,丰富的组件库可以极大减少前端开发时间。
    jQuery WeUI 的最大特点是它只提供UI组件,并不会对项目所使用的框架和其他库有任何的限制,几乎可以在任何环境下使用。无论你的项目是基于jQuery,还是 React, Angular, Vue, 你都会发现 jQuery WeUI 能非常方便的和他们结合使用。既是你的项目是一个有很悠久历史的老项目,也几乎可以做到拿来即用。
    国外官网:http://jqweui.com/

    20、QMUI Web
    QMUI Web 是一个专注 Web UI 开发,帮助开发者快速实现特定的一整套设计的框架。
    框架主要由一个强大的 Sass 方法合集与内置的工作流构成。通过 QMUI Web,开发者可以很轻松地提高 Web UI 开发的效率,同时保持了项目的高可维护性与稳健。
    该框架同步有针对Android和IOS风格的移动UI框架。


    后面有优秀的专注于移动端开发的UI库大家可以一起来补充啊!

    更多相关内容
  • List集合的特点是有序、下标,重复的 问题场景:从数据库查询多条数据放到List集合中,但突然想把集合中某一条数据向上移动,放到某一条数据后边,此时你又能改变从数据库中查询结果的顺序,所以只能对集合...

    List集合的特点是有序、有下标,可重复的

    问题场景:从数据库查询多条数据放到List集合中,但突然想把集合中某一条数据向上移动,放到某一条数据后边,此时你又不能改变从数据库中查询结果的顺序,所以只能对集合进行处理。

    方法一:
    使用 Collections的swap方法。

    Collections.swap(list,a,b);
    

    list是你需要换位置的List。
    a是你当前需要换位置的元素的索引。
    b是你需要将这个元素换到哪个位置的索引。

    方法二:

    list.add(a, list.remove(b));
    

    list是你需要换位置的List。
    a是你当前需要换位置的元素的索引。
    b是你需要将这个元素换到哪个位置的索引。

    举例说明:

     public static void main(String[] args) {
            // 创建集合对象
            List list = new ArrayList();
    
            // 添加元素
            list.add("苹果");
            list.add("小米");
            list.add("华为");
            list.add("荣耀");
    
            System.out.println("改变之前的顺序:");
            for (int i = 0; i < list.size(); i++) {
                System.out.println(list.get(i));
            }
    
            // 方法一
            System.out.println("方法一:现在将荣耀放到小米上边。");
            Collections.swap(list,3,1);
    
            System.out.println("方法一改变之后的顺序:");
            for (int i = 0; i < list.size(); i++) {
                System.out.println(list.get(i));
            }
    
            //测试方法一的时候注释方法二
            // 方法二
    //        System.out.println("方法二:现在将荣耀放到小米上边。");
    //        list.add(1,list.remove(3));
    //
    //        System.out.println("方法二改变之后的顺序:");
    //        for (int i = 0; i < list.size(); i++) {
    //            System.out.println(list.get(i));
    //        }
        }
    

    在这里插入图片描述

    展开全文
  • PTA - 数组元素删除 /移动 (vector容器)

    千次阅读 2019-06-20 20:53:43
    题目:完成数组元素移动功能:假设数组n个元素,输入一个数x,把数组的第x个位置的元素先保存起来,然后把x+1到n的元素,依次往前移一位,最后将原来的第x个位置的元素放在数组的最后。 重复若干次这样的移动,...

    数组元素的删除

    完成数组元素的移动功能:假设数组有n个元素,输入一个数x,把数组的第x个位置的元素删除了,后面的元素依次前进一个位置。 重复若干次这样的删除,得到最后的结果。

    输入格式:

    第一行包括一个整数n(1<=n<=100),表示数组元素的个数。 第二行输入n个数组元素,均为整数,用空格隔开。 第三行输入一个数k(1<=k<=100),表示要进行k次删除。 接下来k行,每行一个数x,表示要删除第x个元素。

    输出格式:

    输出经过k次删除后的数组,每两个元素之间用空格隔开。

    输入样例:

    10
    1 2 3 4 5 6 7 8 9 10
    4
    3
    2
    4
    6

    输出样例:

    1 4 5 7 8 10

    #include <iostream>
    #include <vector>
    #include <iterator>
    
    using namespace std;
    
    int main()
    {
    	int n;
    	cin >> n;
    	
    	vector<int> v;
    	for (int i = 0; i < n; i++)
    	{
    		int k;
    		cin >> k;
    		v.push_back(k);
    	}
    	
    	int times;
    	cin >> times;
    	
    	while(times--)
    	{
    		int pos;
    		cin >> pos;
    		
    		vector<int>::iterator iter = v.begin();
    		advance(iter, pos - 1);    // advance():迭代器相关辅助函数
    		v.erase(iter);
    	}
    	
    	cout << v[0];
    	for (int i = 1; i < v.size(); i++)
    		cout << " " << v[i];
    		
    	return 0;
    } 
    

    数组元素移动

    题目:完成数组元素的移动功能:假设数组有n个元素,输入一个数x,把数组的第x个位置的元素先保存起来,然后把x+1到n的元素,依次往前移一位,最后将原来的第x个位置的元素放在数组的最后。 重复若干次这样的移动,得到最后的结果。

    输入格式:

    第一行包括一个整数n(1<=n<=100),表示数组元素的个数。 第二行输入n个数组元素,均为整数,用空格隔开。 第三行输入一个数k(1<=k<=100),表示要进行k次移动。 接下来k行,每行一个数x,表示要移动第x个元素。

    输出格式:

    输出经过k次移动后的数组,每两个元素之间用空格隔开。

    输入样例:

    10
    1 2 3 4 5 6 7 8 9 10
    4
    4
    3
    2
    5

    输出样例:

    1 5 6 7 9 10 4 3 2 8


    #include <iostream>
    #include <iterator>
    #include <vector>
    
    using namespace std;
    
    int main()
    {
    	int n;
    	cin >> n;
    	
    	vector<int> v;
    	for (int i = 0; i < n; i++)
    	{
    		int k;
    		cin >> k;
    		v.push_back(k);
    	}
    	
    	int times;
    	cin >> times;
    	
    	while(times--)
    	{
    		int pos;
    		cin >> pos;
    		
    		v.push_back(v[pos - 1]);
    		vector<int>::iterator iter = v.begin();
    		advance(iter, pos - 1);     // advance():迭代器相关辅助函数
    		v.erase(iter);
    	}
    	
    	cout << v[0];
    	for (int i = 1; i < n; i++)
    		cout << " " << v[i];
    	
    	return 0;
    }
    

    小结:

    vector容器

    1、 动态伸缩(可变大小的数组)。支持快速随机访问。尾部插入删除元素快,其余位置插入删除元素慢。
    2、头文件:#include <vector>
    3、定义:vector<int> v;
    4、成员函数:❗(重点掌握)
    v.push_back():在尾部插入元素
    v.pop_back():删除末尾元素
    v.front():返回第一个元素
    v.back():返回最后一个元素,不检查这个元素是否存在
    v.begin():返回指向第一个元素的迭代器
    v.end():返回指向(尾后元素)最后一个元素之后的迭代器
    v.rbegin():返回逆向队列的第一个元素,即v容器的最后一个元素
    v.rend():返回逆向队列的最后一个元素的下一个位置,即v容器的第一个元素再往前的一个位置。
    v.size():返回容器中实际元素的个数。
    v.empty():判断容器是否为空。
    v.clear():移除容器中的所有元素
    v.erase(pos):删除pos位置的元素,传回下一个元素的位置
    v.insert() :插入元素
    v.max_size():返回容器能容量的最大数量。
    v1.swap(v2):将v1和v2交换。
    详细可点击查阅 STL之顺序容器
    展开全文
  • 块级元素和行内元素,行内块元素

    千次阅读 多人点赞 2020-02-01 21:03:56
    其实这是因为 CSS 的标签是区分元素类型的。 元素分类 行内元素 又称为内联元素,行内元素的大小是靠本身内容的大小,宽高都设置无效。 常见的特点如下: 与其他行内元素并排 设置宽高无效 默认的宽度就是文本...

    在学习 CSS 的时候发现,发现有些标签会独占一行,典型的例如 <div> 标签。而某些不会独占一行,典型如 <span> 标签。其实这是因为 CSS 的标签是有区分元素类型的。

    元素分类

    行内元素

    又称为内联元素,行内元素的大小是靠本身内容的大小,宽高都设置无效。

    常见的特点如下:

    • 与其他行内元素并排
    • 设置宽高无效
    • 默认的宽度就是文本内容的宽度
    • 水平方向的 padding 和 margin 属性可以使用。
    • 只能容纳文本级元素和内联元素
    • 注意
      • a 标签可以放块级元素,但是连接里面不能再放连接

    常见的行内元素:

    标签作用
    <a>标签定义超链接
    <abbr>表示一缩写形式
    <acronym>定义只取首字母缩写
    <b>定义字体缩写
    <bdo>可覆盖默认的文本方向
    <big>定义大号字体加粗
    <br>定义换行
    <code>定义计算机代码文本
    <label>标签
    <select>创建单选或多选菜单
    <span>组合文档中的行内元素
    <small>定义小号字体

    等等…

    除了 p 之外,所有的文本级标签都是行内元素,p 是块级元素

    块级元素

    块元素通常会独占一行,或者多行,它的宽高,边距等都可以设置。

    通常有这几个特点

    • 独占一行
    • 可以设置宽度,高度,margin,padding
    • 宽度默认所在容器的宽度
    • 可以容纳内联元素和块级元素
    • 注意
      • 一些文字级标签不能放块元素。例如:<p>,<h1>~<h6>,<dt>

    常见的块级元素:

    标签作用
    <caption>定义表格标题
    <address>定义地址
    <dd>定义列表中定义条目
    <div>定义文档中的分区或节
    <dl>定义列表
    <dt>定义列表中的项目
    <fieldset>定义一个框架集
    <form>创建 HTML 表单
    <h1>~<h6>定义标题
    <hr>定义一条水平线
    <p>定义段落
    <table>定义表格
    <li>标签定义列表项目
    <ul>定义无序列表
    <ol>定义有序列表

    等等…

    行内块元素

    行内块元素从文字上看像块级元素和行内元素结合似的,其实比较特殊,比如<input>,<img>,<td> 可以设置宽高属性,这种就称为行内块元素。

    通常有这几个特点。

    • 默认宽度是内容宽度
    • 宽度,高度,行高,margin,padding 都可以设置
    • 和行内元素同一行,之间会留白

    块级元素和行内元素的转换

    display 属性

    通过 display 属性转换,其中 display 有三个值:

    • inline:
      • 值为 inline 将变成行内元素,比如 div
      • 不能设置宽高,和行内元素并排
    • block:
      • 值为 block 的,比如 span
      • 能设置宽高(填充父级),独占一行。
    • inline-block
      • 值为 inline-block 也就是变成行内块元素

    示例代码:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style type="text/css">
    			.div1{
    				width: 100px;
    				height: 100px;
    				background-color: red;
    				display: inline;
    			}
    			.div2{
    				width: 150px;
    				height: 150px;
    				background-color: green;
    				display: inline-block;
    			} 
    			.span1{
    				width: 100px;
    				height: 100px;
    				background-color: yellow;
    				display: block;
    			}
    			.div3{
    				width: 300px;
    				height: 200px;
    				background-color: blue;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="div1">
    			div1
    		</div>
    		<div class="div2">
    			div2
    		</div>
    		<span class="span1">
    			span1
    		</span>
    		<div class="div3">
    			div3
    		</div>
    	</body>
    </html>
    
    

    效果
    image
    正如效果图显示,值为 inline 的时候,div1 的宽高无效,仅仅为内容的宽度和高度。div2 为 inline-block 则生效了,而原本 span 是行内元素,设置宽高无效,而且不独占一行,现在设置的值为 block 便都有用了。

    浮动 float 属性

    浮动的目的。最初时,浮动只能用于图像(某些浏览器还支持表的浮动),目的就是为了允许其他内容(如文本)“围绕”该图像。而后来的CSS允许浮动任何元素。

    float 一共有三个值:

    • left
      • 表示左浮动
    • right
      • 表示右浮动
    • none
      • 表示不浮动,默认

    示例代码:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style type="text/css">
    			.div1{
    				width: 100px;
    				height: 100px;
    				background-color: red;
    				float: left;
    			}
    			.div2{
    				width: 150px;
    				height: 150px;
    				background-color: blue;
    				float: right;
    			}
    			.div3{
    				width: 200px;
    				height: 200px;
    				background-color: green;
    				float: none;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="div1">
    			
    		</div>
    		<div class="div2">
    			
    		</div>
    		<div class="div3">
    			
    		</div>
    	</body>
    </html>
    

    效果图:
    image

    如图所示,三个 div ,其中 div1(红色) 左浮动,div2(蓝色) 右浮动,所以 div 1 仅靠在左边,div 2 仅靠在右边,而 div3 没有。

    如果是浮动,将会和其他不同,脱离标准文档流,也就是相当于不占用位置了,漂浮起来。浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。

    由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。

    浮动的特点

    浮动有几个特点,大概是脱离标准流文档,浮动之间元素相互靠近,收缩。

    • 脱离标准流文档

    示例代码:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style type="text/css">
    			.div1{
    				width: 50px;
    				height: 50px;
    				background-color: #0000FF;
    				float: left;
    			}
    			.div2{
    				width: 150px;
    				height: 150px;
    				background-color: #008000;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="div1"></div>
    		<div class="div2"></div>
    	</body>
    </html>
    

    效果图:
    image

    对 div1 进行浮动时,会脱离文档流,若向右浮动,直到它的右边缘碰到框的右边缘,若向左浮动,脱离文档流并向左移动,直到它的左边缘碰到包含框的左边缘。因为这样,就会导致原有的 div2 被浮动的 div1 覆盖。

    这里还有一种情况:

    示例代码:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<style type="text/css">
    			.span1{
    				width: 50px;
    				height: 50px;	
    				background-color: #FF0000;
    				float: left;
    			}
    		</style>
    	</head>
    	<body>
    		<span class="span1"></span>
    	</body>
    </html>
    

    效果图:
    image

    这是因为标签一旦设置浮动,就没有分块状元素和行内元素,所以原本的行内元素也能设置宽高。

    • 浮动之间元素相互贴近

    在浏览器父级的宽度足够,那么浮动元素紧挨。

    示例代码:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<style type="text/css">
    			.div1{
    				width: 100px;
    				height: 100px;
    				background-color: red;
    				float: left;
    			}
    			.div2{
    				width: 150px;
    				height: 150px;
    				background-color: blue;
    				position:static;
    				float: left;
    				
    			}
    			.div3{
    				width: 200px;
    				height: 200px;
    				background-color: green;
    				float: left;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="div1"></div>
    		<div class="div2"></div>
    		<div class="div3"></div>
    	</body>
    </html>
    

    效果图:
    image

    如果宽度不够,就有收缩情况,会根据包含的父级元素,如果太窄,无法容纳水平排列的三个浮动元素,那么其它浮动块向下移动,直到有足够的空间。如果浮动元素的高度不同,那么当它们向下移动时可能被其它浮动元素“卡住”,如下情况:

    • 浮动收缩

    示例代码:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style type="text/css">
    			.div1 {
    				width: 50px;
    				height: 50px;
    				background-color: blue;
    				float: left;
    			}
    
    			.div2 {
    				width: 150px;
    				height: 150px;
    				background-color: green;
    				float: left;
    			}
    
    			.div3 {
    				width: 250px;
    				height: 250px;
    				background-color: #FF0000;
    				float: left;
    
    			}
    
    			.div4 {
    				width: 250px;
    				height: 1250px;
    				float: left;
    
    			}
    		</style>
    	</head>
    	<body>
    		<div class="div4">
    			<div class="div1">
    				div1
    			</div>
    			<div class="div2">
    				div2
    			</div>
    			<div class="div3">
    				div3
    			</div>
    		</div>
    	</body>
    </html>
    
    

    效果图:
    image

    这里父容器 div 4 的宽度不够,div 3 也就自动下滑了。

    如果不设置宽高,那么宽高也就是文本内容高度和宽度。

    示例代码:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style type="text/css">
    			.div1{
    				background-color: red;
    				float: left;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="div1">
    			特性
    		</div>
    	</body>
    </html>
    
    

    效果图:
    image

    浮动的覆盖规则

    这里并不是任何情况下浮动的元素向左或向右移动直至左右两边碰到包含框的两边才停止。如果某个浮动的元素在移动的过程中,碰到了包含内容的框时,也会停止。

    也就是浮动元素在移动的过程中,除非碰到框没有内容,否则框内的内容会自我调整位置以防止被覆盖。比如<p>标签中的文本遇到浮动的框例如图像框,就自我调整位置,使得文字围绕着图像避免被覆盖。还有 <img>,<span>包含文字,等等

    这里块级元素即使被覆盖,文字也会围绕在浮动元素旁,因为浮动本身就是为了让文字围绕在图像旁边。

    记住,永远不是一个盒子单独浮动,要浮动就要一起浮动。另外,有浮动,一定要清楚浮动。

    如下 <span> 标签包含文字,不会被覆盖

    示例代码:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style type="text/css">
    			.div1 {
    				width: 50px;
    				height: 50px;
    				background-color: blue;
    				float: left;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="div1">
    			div1
    		</div>
    		<span class="span1">
    			我是 span
    		</span>
    	</body>
    </html>
    

    效果图:
    image

    清除浮动

    • clean
      • left
        • 当前元素左边不能有浮动元素
      • right
        • 当前元素右边不能有浮动元素
      • both
        • 当前元素两边不能有浮动元素
    • overflow
      • 规定当内容溢出元素框的时候会怎样。
      • visible
        • 默认值,内容会呈现在元素之外。
      • hidden
        • 内容会被修剪,其余隐藏不见
      • scroll
        • 内容会被修剪,显示滚动条显示其余内容
      • auto
        • 如果内容会被修剪,自动 显示滚动条显示其余内容
      • inherit
        • 继承父级的 overflow 属性的值
    展开全文
  • (当一个元素不在它原来所在的位置,这个元素就是被移动了的) 输入描述: 输入包括两行,第一行一个整数n(1 ≤ n ≤ 50),即序列的长度 第二行n个整数x[i](1 ≤ x[i] ≤ 100),即序列中的每个数 输出...
  • 利用css 使div上下左右移动

    千次阅读 2021-06-14 07:40:50
    在html中,有时需要使某个div上下左右...一、使用css3 transform:translate(X,Y)来偏移元素①transform属性应用于元素的2D或3D转换,这个属性允许你将元素旋转,缩放,移动,倾斜等。其基本属性如下所示:值 描述non...
  • Qt 之密码框不可选中、复制、粘贴、无右键菜单等

    万次阅读 多人点赞 2015-12-18 15:31:29
    在做用户登录、修改密码的时候,往往会用到密码框,其中一些功能要求与普通的输入框不同,例如:能选中、复制、粘贴、无右键菜单等功能,当然设置密码可见是必须的!下面介绍两种方式来实现相同的效果。简述 ...
  • 请问如何在一个List最开始插入一个元素,其他元素一次向后移动一位? [问题点数:20分]   显示删除回复 显示所有回复  显示星级回复 显示得分回复  只显示楼主 收藏 msn365 ...
  • 元素的 alt 和 title 属性 什么区别? ALT 属性 最常见用在 <img> 标签上,那我们先来看下 <img> 标签的 alt 属性。 alt 属性是一个必需的属性,它规定在图像无法显示时的替代文本。 假设由于下列...
  • 顺序表插入、删除平均移动次数

    千次阅读 多人点赞 2020-12-03 23:46:05
    最好情况:删除表尾元素(即i=n),无须移动元素,时间复杂度为0(1)。 最坏情况:删除表头元素(即i-1),需移动除第一个元素外的所有元素,时间复杂度为0(n)。 平均情况:。解释如下: 三、总结 无论插入还是删除,需要...
  • 面试 - 为什么foreach中允许对元素进行add和remove

    万次阅读 多人点赞 2021-10-25 16:04:19
    注意 CopyOnWriteArrayList解决 fail-fast 的问题不是通过迭代器来remove或add元素的,而是通过list本身的remove和add方法,所以add的元素位置也一样,迭代器是当前位置后面一个,CopyOnWriteArrayList是直接放到...
  • CSS 元素的定位之相对定位 position: relative

    万次阅读 多人点赞 2018-02-21 22:06:19
    定位在CSS中,通过 position属性来对元素进行定位,选的定位类型 static | relative | absolute | fixed,默认值为 static,表示没有定位,元素保持在它原本应该在的位置上。要对页面元素使用定位技术,必须 ...
  • HTML元素拖拽功能的实现

    千次阅读 2019-07-31 17:28:58
    在某些情况下我们需要在页面上拖拽块状元素。本文实现了元素的水平拖拽、垂直拖拽、任意方向拖拽。
  • 为什么80%的码农都做了架构师?>>> ...
  • HTML行内元素、块状元素、行内块状元素的区别

    万次阅读 多人点赞 2018-01-27 09:42:35
    HTML可以将元素分类方式分为行内元素、块状元素和行内块状元素三种。首先需要说明的是,这三者是可以互相转换的,使用display属性能够将三者任意转换:  (1)display:inline;转换为行内元素  (2)display:...
  • 顺序表中,无论是插入还是删除,都是通过移动元素的来实现。 这里插入元素,插入位置是自己定的,所以可能出现参数错误的情况。 因此,我们首先要判断参数是否错误。 其次,还需要注意的是: 这里要输入的参数是:...
  • 元素——答题

    万次阅读 多人点赞 2019-09-19 14:10:44
    元素——答题 微元素每日任务,答题
  • Cypress在对页面元素的操作上也便利了很多
  • 0、Q:如何使用hi服务号“移动营销页”? A:对于想要查询的问题,可以打开hi服务号后,输入查询问题关键词,然后等待2-3秒,会在线回复答案,请不要点击进入人工。 目前服务号支持的问题为:入口、高级编辑器、...
  • onmousedown(鼠标左键点下),onmousemove(鼠标移动),onmouseup(鼠标松开)三个事件的顺序执行,在移动过程中去获取需要定位的值,然后改变该元素定位的left,top值。 限定边界原理: 做相应的边界判断 直接...
  • jQuery鼠标移动事件

    千次阅读 2020-01-16 19:58:52
    jQuery鼠标移动事件是最常用的鼠标事件之一,当用户使用鼠标在指定的元素移动时即与该元素产生交互,就会触发鼠标移动事件,比如:鼠标在指定元素上移入、移出、悬停等等操作,都属于鼠标移动事件的范围。...
  • JQuery元素内添加元素

    千次阅读 2018-11-29 23:34:08
    JQuery元素内添加元素
  • Map中根据条件删除元素

    千次阅读 2021-03-15 03:00:13
    Map、List、Set等是动态 的,可变对象数量的数据结构,但是Iterator则是单向不可变,只能顺序读取,不能逆序操作的数据结构,当 Iterator指向的原始 数据发生变化时,Iterator自己就迷失了方向。 既然找到了问题的...
  • 今天怂怂就为大家分享一篇通过css禁用状态,样式设置以及不可点击样式事件的实例讲解,具有很好的参考价值,希望对大家有所帮助。一起跟随怂怂过来看看吧 一:为input框添加禁用状态 1、readonly表示此域的值不可...
  • @description 实现按钮固定,随屏幕滑动 + 按钮自由移动 使用touch事件实现按钮自由移动和点击触发事件 touchstart - 手指触摸屏幕时触发 touchmove - 手指在屏幕上滑动时连续的触发 touchend - ...
  • 点击子元素触发父元素 <div class="fu" @click="fu()"> <a class="zi" @click="zi()">...这是父元素里面的其他内容</h1> </div> methods:{ fu(){ console.log('这是...
  • 利用浏览器非overflow:auto元素设置resize可以拉伸的特性实现无JavaScript的分栏宽度控制。...CSS中一个resize属性,如果一个元素的overflow属性值不是visible,则通过设置resize属性可以拉伸这...
  • jQuery 删除、复制和替换元素

    万次阅读 2016-07-16 23:46:01
    一、使用jQuery删除元素 (1)、remove()移除所有匹配的元素  remove() 方法移除被选元素,包括所有文本和子节点。该方法不会把匹配的元素从 jQuery 对象中删除,因而可以在将来再使用这些匹配的元素。  但除了...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 418,269
精华内容 167,307
关键字:

不可移动元素有哪些