个人空间html源码,HTML常用代码段 - lynn_xiao的个人空间 - OSCHINA - 中文开源技术交流社区...
base64格式:
———————————————————————————————
ie注释方式:
———————————————————————————————————————————————
ie8兼容大法
利用斜杠9来兼容ie8,有些属性只有ie9以上才支持,比如子选择器这种
———————————————————————————————————————————————
头图的背景设置:background-position:center bottom;
———————————————————————————————————————————————
透明边框:
body {
background-color:red;
}
.div {
display:inline-block;
border: 10px solid rgba(255,255,255,.5);
background: white;
background-clip: padding-box;
}
———————————————————————————————————————————————
媒体查询:
———————————————————————————————————————————————
上传多个文件:
后端php处理:
foreach ($_FILES['uploads']['name'] as $filename) {
echo '
' . $filename . '';
}
———————————————————————————————————————————————
自动选中框内的文本:
example text
———————————————————————————————————————————————
单行文本过长注释
div.test
{
white-space:nowrap;
width:12em;
overflow:hidden;
text-overflow:ellipsis;
}
———————————————————————————————————————————————
多行文本注释:
overflow: hidden;
text-overflow: ellipsis;
display: box;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
———————————————————————————————————————————————
.parent {
float: left;
margin-right:20px;
width: 200px;
height: 100px;
background-color: red;
}
.children {
position: relative;
left: 50%;
top:50%;
width:150px;
-webkit-transform : translate3d(-50%, -50%, 0);
transform : translate3d(-50%, -50%, 0);
background-color: black;
color:white;
}
———————————————————————————————————————————————
水平居中:子容器和父容器的宽度都不固定
垂直居中2
利用translate来居中。
垂直居中3
水平垂直居中
子容器和父容器高度宽度都不确定的情况下。
水平垂直居中1
兼容性好。
水平垂直居中2
不影响其他元素,但兼容性不好。
水平垂直居中3
多列布局
定宽与自适应
一列定宽,一列自适应。
方案1:
优点是容易理解。
缺点是由于右边不是浮动的,所以如果其中有清除浮动,就出现问题。
方案2:
通过右侧触发bfc来解决。
方案3:
table-layout可以提高渲染速度。
方案4:
两列定宽,一列自适应。
和一列定宽是类似的:
不定宽与自适应
不定宽是指宽度由内部元素撑起来。
方案1:
主流方式。
方案2:
其中的0.1%是为了避免1px在ie8下的bug。
方案3:
flex万能大法,但是兼容行不行。
两列不定宽一列自适应是一个道理:
等宽
每一列中的宽度一样,每一列的间距一样。
方案1:
box-sizing:border-box是为了让宽度包含padding,父亲的margin-left需要和间距一致。
方案2:
优点是结构和样式解耦了,中间无论多少列都是等宽。
缺点是多了一些结构代码。
方案3:
这里的.column+.column选择的是第一列之外的后面几列。
等高
左列变高后,右列对应也要变高,我们需要两列是等高的。
方案1:
方案2:
方案3:
这种属于伪等高。
全屏布局
后台系统的标准配置,上左下区域固定宽高,右部自适应。
方案1:
方案2:
个人空间html源码,HTML常用代码段 - lynn_xiao的个人空间 - OSCHINA - 中文开源技术交流社区...相关推荐
- android宿舍管理系统源码,校园宿舍管理系统 - ATB的个人空间 - OSCHINA - 中文开源技术交流社区...
本实例为一个校园宿舍管理系统, 系统用户分为三个角色,系统管理员 , 楼宇管理员, 学生, 系统管理员可以应用对楼宇管理员的管理工作(增删改查), 学生的管理(增删改查), 楼宇管理(增删改查), 学 ...
- php个人空间源码,PHP安装 - 牛牛牛大棚的个人空间 - OSCHINA - 中文开源技术交流社区...
1.下载php源码包 http://www.php.net/downloads.php 2 .安装php tar -xvf php-5.5.13.tar.bz2 cd php-5.5.13 ./con ...
- python病毒代码大全_python病毒 - osc_bx0x099p的个人空间 - OSCHINA - 中文开源技术交流社区...
介绍 源码 分为3个部分 1.搜索,搜寻所有的python脚本 2.取出当前文件的前39行,也就是这个脚本的长度,然后将这个脚本写道所有找到的python脚本中去 3.其他行为 #!/usr/bin/ ...
- mysql sycho_Java面试题 - osc_p1rj1z8j的个人空间 - OSCHINA - 中文开源技术交流社区
1.Java有几种数据类型?分别是什么? Java有8种数据类型: 字符类型:char(16位) 布尔类型:boolean(true/false) 数值类型: 整数类型:byte(8位),short( ...
- java实现gdal栅格矢量化_gdal栅格矢量化 - osc_lfs4vsih的个人空间 - OSCHINA - 中文开源技术交流社区...
#include "gdal_alg.h" 栅格矢量化功能用于将栅格数据生成矢量数据,通常用于分类图像.GDAL库中使用函数GDALPolygonize()或者函数GDALFPol ...
- 最新JAVA性能调优实战教程_java性能调优实战 - osc_9z8xc00s的个人空间 - OSCHINA - 中文开源技术交流社区...
在项目压测过程中,发现系统占用,上下文切换非常频繁,在此记录下调优过程,希望对后来人有所帮助. 测试方法:模拟客户端实际操作,向服务器高并发发送数据,查看服务器的负载情况. 服务器基本配置如下 1,基 ...
- java 的“mwq”_java的对象模型 - osc_mwqvsfzo的个人空间 - OSCHINA - 中文开源技术交流社区...
java中的对象在内存中,究竟是怎样一种存在? 这篇随笔,我们就来一探究竟.可能不够深入,但是我们把理解到位,深入到我们需要的程度这样即可. 先来看下jvm的内存模型: 程序计数器 虚拟机栈和本地方法 ...
- 报送数据标准校验java_Java:数据校验 - osc_gaqp1a2z的个人空间 - OSCHINA - 中文开源技术交流社区...
在后台开发过程中,需要对参数进行校验. validation bean 是基于JSR-303标准开发出来的,使用注解的方式实现,是一套规范,可以实现参数的校验. Hibernate Validator ...
- linux系统上安装toma,Linux-tar - osc_btnnkvs0的个人空间 - OSCHINA - 中文开源技术交流社区...
1. tar简介 https://zh.wikipedia.org/wiki/Tar Unix和类Unix系统上的压缩打包工具,可以将多个文件合并为一个文件,打包后的文件名亦为"tar&qu ...
最新文章
- python 类的魔术方法_python中类的魔术方法
- .net 基于Jenkins的自动构建系统开发
- mongo 脚本对应的C#实现方式(待整理)
- jq:jQuery库文件jquery.scrollLoading.js使用方法
- LaTeX 简介与安装
- [HNOI2008]GT考试
- java gradle 资源访问_java在gradle工程访问src/test/resources目录下的资源配置文件
- docker 镜像修改的配置文件自动还原_基于Docker搭建Redis一主两从三哨兵
- 项目中的常量是放在接口里还是放在类里呢?
- ofstream 二进制 文本_C/C++读写文本文件、二进制文件的方法
- Flutter入门进阶之旅(六)Layout Widget
- 硬盘格式化怎么操作 硬盘格式化后数据还在吗
- 如何学习Linux运维
- 开发板连接了有线路由器,然后咋的就能通到外网了(udhcp)
- android人脸情绪识别器,Emotion Recognition微软人脸情绪识别器
- Sencha Touch(Extjs)
- [DP]hdu5234
- 钱包:BUMO 小布口袋 APP 用户手册
- 计算机打印状态错误,打印机开始打印就显示错误怎么办?
- 计算机硬件故障诊断的原则,电脑硬件故障检测的基本原则