day49

今日内容

圆形头像

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .c1{

            width: 100px;

            height: 100px;

            border-radius: 50%;

            border:1px solid red;

            overflow: hidden;

        }

        div img{

            width: 100%;

            /*height: 100%;*/

        }

    </style>

</head>

<body>

<div class="c1">

    <img src="2.jpg" alt="">

</div>

</body>

</html>

定位

static定位(无定位)

相对定位

/*position: relative;  !* 相对于自己原来的位置进行移动,原来的空间还占着 *!*/

绝对定位

position: absolute; /* 不占用自己原来的位置,移动的时候如果父级标签以及祖先辈标签如果设置了相对定位,父级标签或者祖先标签进行移动 ,如果父级标签都没有设置相对定位,那么就按照整个文档进行移动 */

固定定位

	position: fixed;

	按照浏览器窗口的位置进行移动

所有定位的元素移动,都是通过top,left,right,bottom两个方向的值来移动.

回到顶部示例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .c1,.c3{

            background-color: red;

            height: 500px;

            width: 600px;

        }

        .c2{

            background-color: green;

            height: 500px;

            width: 600px;

        }

        #back_top{

            height: 40px;

            width: 80px;

            position: fixed;

            right: 40px;

            bottom: 40px;

            background-color: black;

            text-align: center;

            line-height: 40px;

        }

        #back_top a{

            color:white;

            text-decoration: none;

        }

    </style>

</head>

<body>

<a name="xxx">这是顶部位置</a>

<div class="c1"></div>

<div class="c2"></div>

<div class="c3"></div>

<span id="back_top">

    <a href="#xxx">回到顶部</a>

</span>

</body>

</html>

z-index 设置层级

模态对话框示例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .shadow{

            background-color: rgba(0,0,0,0.7); /* rgba可以设置透明度,0-1之间的数字 */

            position: fixed;

            top:0;

            left: 0;

            right: 0;

            bottom: 0;

            z-index: 90;

        }

        .mode{

            width: 440px;

            height: 480px;

            background-color: white;

            position:fixed;

            top:50%;

            left: 50%;

            z-index: 100;

            margin-left: -220px;

            margin-top: -240px;

        }

        .mode h2,.mode h3{

            text-align: center;

        }

        .xxx{

            text-align: right;

        }

        .xxx span{

        }

        .xxx span:hover{

            cursor: pointer;

        }

    </style>

</head>

<body>

<h1>24期皇家spa会所</h1>

<div>金牌技师李业和陈硕,30年捏脚经验,技师一流,服务到位,倒贴200</div>

<div>

    30年捏脚经验,技师一流,服务到位

    <img src="cs.png" alt="" width="400" height="400">

</div>

<div class="mode">

    <div class="xxx">

        <span>x</span>

    </div>

    <h2>不正经的24期会所入口</h2>

    <h3>会员登录</h3>

    <div class="iii">

        <div>

            <label>

                用户名:<input type="text">

            </label>

        </div>

        <div>

            <label>

                密码:<input type="text">

            </label>

        </div>

    </div>

</div>  <!-- 对话框白框 -->

<div class="shadow"></div>  <!-- 黑色阴影遮罩层 -->

</body>

</html>

z-index注意点

1.z-index 值表示谁压着谁，数值大的压盖住数值小的，

2.只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素float不能使用z-index

3.z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。

4.从父现象：父亲怂了，儿子再牛逼也没用

opacity透明度和rgba透明度的区别

opacity是整个标签的透明度

rgba是单独给某个属性设置透明度

示例:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .c1{

            width: 100px;

            height: 100px;

            background-color: rgba(255,0,0,0.3);

        }

        .c2{

            width: 100px;

            height: 100px;

            /*background-color: rgba(255,0,0,0.3);*/

            background-color: rgb(255,0,0);

            opacity: 0.3; /* 0-1之间的数字,这是设置整个标签的透明底 */

        }

    </style>

</head>

<body>

<div class="c1">

    div1

</div>

<hr>

<div class="c2">

    div2

</div>

</body>

</html>

js

js代码引入

方式1:

    <script>

        alert('欢迎来到德玛西亚!')

    </script>

方式2:外部文件引入

	src属性值为js文件路径

	<script src="test.js"></script>

变量声明

变量名是区分大小写的。

推荐使用驼峰式命名规则。首字母大写

保留字不能用做变量名。

var a = 1;

数据类型

数值类型(number)

示例:

	var a = 1;

	var b = 1.1;

	var c = 123e5;  // 12300000  e5  *10的5次方

	var d = 123e-5;  // 0.00123

	typeof a; --- number

	typeof b; --- number

字符串(string)

var a = '陈硕男技';

	typeof a; --- "string"

字符串 转换 数值类型

**-*-/*-/*--/·1parseInt:

    var a = '111';

    var b = parseInt(a);

    typeof b; --- "number"

parseFloat:

	var a = '1.11';

	var b = parseFloat(a);

/*--/**-

var a = 'bbbb1';

var b = parseInt(a);

	b = NaN  NaN是not a number

	typeof b; --- number类型  NaN和NaN不相等
字符串相关方法
字符串拼接

	var a = "Hello"

	var b = "world"

	var c = a + b;

	console.log(c); --- Helloworld

.length 查看字符串长度

	示例:

		var c = 'hello';

		c.length; -- 5

.trim()  移除两端空格,得到一个新值,不会改变原来的值

	示例:

		var a = '   hello   ';

		var  b = a.trim();

.trimLeft()

.trimRight()

.charAt(n)  找到索引为n的字符

var c = b.charAt(1);

.concat()  字符串拼接

	示例:

        var a = 'nihao';

        var b = 'girls';

        var c = a.concat(b);

.indexOf()

查看元素的索引

    示例:

		var a = c.indexOf('a');

		var a = c.indexOf('i',3);  参数3的意思是从索引3的位置开始往后找,找到就返回对应的索引值,找不到就返回-1

.slice() 切片

	示例:

		var c = "nihaogirls";

		var a = c.slice(0,5); -- 'nihao'

.toLowerCase() #全部变小写

.toUpperCase()  #全部变大写

	示例:

		var c = "nihaogirls";

		var a = c.toUpperCase();

.split() 字符串切割

	示例:

		var c = "nihaogirls";

		var a = c.split('g',1);  'g'是切割条件,1是切割后,返回结果的数量

布尔值

var a = true;

var b = false;

数据类型都有布尔属性:

	""(空字符串)、0、null、undefined、NaN都是false。

day49——圆形头像、定位、z-index、js的更多相关文章

  1. Android之圆形头像裁切

    PS:今天项目测试组发现,百度地图定位的数据坐标位置是正确的,但是显示的数据是错误的.最后查来查去发现,那个商厦在百度地图上根本就没有那条数据,这让我如何显示,当初就推崇使用高德地图定位,上面的数据量 ...

  2. index.js:13 Uncaught TypeError: Cannot read property 'split' of undefined

    使用 webpack 编译 Vue 项目时出现报错: index.js:13 Uncaught TypeError: Cannot read property 'split' of undefined ...

  3. CSS之样式属性(背景固定、圆形头像、模态框)

    CSS属性 一.宽和高 width属性可以为元素设置宽度. height属性可以为元素设置高度. 块级标签才能设置宽度,内联标签的宽度由内容来决定. div {width: 1000px;backgr ...

  4. 圆形头像CircleImageView和Cardview使用

    效果: 圆形头像在我们的日常使用的app中很常见,因为圆形的头像比较美观. 使用圆形图片的方法可能有我们直接将图片裁剪成圆形再在app中使用, 还有就是使用自定义View对我们设置的任何图片自动裁剪成 ...

  5. Android 圆形头像 自己动手

    圆形头像DIY 现在大部分app使用的都是圆形头像,网上开源的也很多,但是有没有考虑过DIY圆形头像呢?下面就自己实现一个,先看下demo展示 第一步:原理解释(图片很丑,原理很真) 1.画外框圆形, ...

  6. css3圆形头像（当图片宽高不相等时）

    1.图片宽高相等,width:300px: height:300px; 把他变成宽高100px的圆形头像 img{width:100px; height:100px; border-radius:50 ...

  7. Android控件Gridview实现仿支付宝首页，Fragment底部按钮切换和登录圆形头像

    此案例主要讲的是Android控件Gridview(九宫格)完美实现仿支付宝首页,包含添加和删除功能:Fragment底部按钮切换的效果,包含四个模块,登录页面圆形头像等,一个小项目的初始布局. 效果 ...

  8. NGUI 圆形头像遮罩

    NGUI 圆形头像遮罩 列表,求助 http://tieba.baidu.com/p/3961444508

  9. Android ImageView圆形头像

    转载自:http://m.oschina.net/blog/321024 Android ImageView圆形头像 图片完全解析 我们在做项目的时候会用到圆形的图片,比如用户头像,类似QQ.用户在用 ...

随机推荐

  1. [RN] React Native 解决 使用 阿里巴巴 矢量图标库 iconfont 图标不垂直居中问题

    React Native 解决 使用 阿里巴巴 矢量图标库 iconfont 图标不垂直居中问题 解决方法: 添加 size,  line-height ,值为和 height 一样的高度. 例如: ...

  2. C++ Boost

    Boost库是一个可移植.提供源代码的C++库,作为标准库的后备,是C++标准化进程的开发引擎之一. Boost库由C++标准委员会库工作组成员发起,其中有些内容有望成为下一代C++标准库内容.在C+ ...

  3. TopK问题及优化

    腾讯面试题:有100W个战斗力,取前100名的算法. 经典topK问题,结论是:随机选择算法 + 快排思想,通过随机选择算法,找到第k大的数,再进行一次快排中的partition,就能得到TopK的结 ...

  4. shell中的字符串操作——字符串的切割

    default.yaml {default_baseurl: 'http://10.113.10.68:8082'} test.sh a=`cat default.yaml` t=":&qu ...

  5. 【CSP膜你赛】柠檬的密码（manacher 二分 单调性 st表）

    题目描述 Lemon觉得他需要一个复杂的密码来保证他的帐号的安全.他经过多日思考,决定使用一个长度为奇数的回文串来作为他的密码.  但是这个回文串太长了,Lemon记不住,于是Lemon决定把它记在本 ...

  6. 《京东上千页面搭建基石——CMS前后端分离演进史》阅读笔记

    一.背景 CMS即内容管理系统,目的是用于快速进行网站建设或者网页开发. 对于京东网站部门来说,CMS核心目的是用来快速开发和上线各种页面,诸如各种垂直频道页. 二.CMS核心目的 进行数据和模板的统 ...

  7. Maven 项目中依赖的搜索顺序

    Maven 项目中依赖的搜索顺序 http://www.manongjc.com/article/13422.html 执行过程中使用 -e -X 查看详细的搜索地址: 1,中央仓库,这是默认的仓库 ...

  8. ubuntu16.04 overlay 不支持redirect_dir开关

    modinfo overlay--查看overlay版本 通过linux网站--https://elixir.bootlin.com/linux/v4.4.196/source/fs/overlayf ...

  9. Chrome提示:＂请停用以开发者模式运行的扩展程序＂的解决办法

    操作步骤 1.开始 -> 运行 -> 输入gpedit.msc -> 回车确定打开计算机本地组策略编辑器(通过Win + R快捷键可以快速打开运行),如图所示: 2.在打开的本地组策 ...

  10. Linux下的sleep()和sched_yield()（转）

    阿里四面被问到了这个问题,一脸懵逼,下来也没找到什么阐述这个的文章,就自己查man来对比总结一下吧: sched_yield()的man手册描述如下: DESCRIPTION       sched_ ...