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. imm自动发现有问题，监控项不再支持

    IPMI是计算机系统的远程"关闭"或"带外"管理的标准接口.它可以独立于操作系统直接从所谓的"带外"管理卡监视硬件状态.华为的服务器叫做BM ...

  2. centos8.0安装docker

    背景简介: 前两天红帽正式发布了RHEL8,网上同时也有了CentOS8,一直在接触容器方面,为了尝鲜,下载了CentOS8,并尝试安装docker,不料竟然还报了个错(缺少依赖),故及时记录一下,方 ...

  3. [Beta]Scrum Meeting#10

    github 本次会议项目由PM召开,时间为5月15日晚上10点30分 时长15分钟 任务表格 人员 昨日工作 下一步工作 木鬼 撰写博客整理文档 撰写博客整理文档 swoip 为适应新功能调整布局前 ...

  4. 【Python】[技术博客] 如何对使用PYQT编写的GUI文件进行单元测试

    如何对使用PYQT编写的GUI文件进行单元测试 想要对PYQT编写的GUI文件进行单元测试,我们主要用到QTest QTest里面包含了一些对窗体的各种控件进行模拟操作的函数,通过QTest对窗体进行 ...

  5. Bert 时代的创新（应用篇）：Bert 在 NLP 各领域的

    Bert 时代的创新(应用篇):Bert 在 NLP 各领域的

  6. What is the difference between UNION and UNION ALL?

    What is the difference between UNION and UNION ALL? UNION removes duplicate records (where all colum ...

  7. adb命令和fastboot有什么区别

    ADB中文解释就是调试桥的作用.既然是调试作用,需要开机并连接电脑,所以adb的命令是需要手机开启usb调试,比较典型的命令比如从电脑端敲入adb命令来安应用:adb install .还有一个命令我 ...

  8. 【深入学习linux】CentOS 7 最小化安装后的注意事项及一些必备组件的安装

    转载:https://blog.csdn.net/F_Srion/article/details/54910943 在VM虚拟机中安装CentOS 7 时 有时候顾虑到电脑硬件性能,我们需要最小化安装 ...

  9. freeNas 数据record

  10. vue路由的异步加载(懒加载)方法

    vue路由的异步加载(懒加载)方法. javascriptvue.jsvue-router  阅读约 2 分钟 vue本身不多介绍.直接说问题,因为vue的所有路由都是加载在一个app.js里的,如果 ...