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 FlatList跳转到顶部/底部

    React Native FlatList跳转到顶部/底部 核心代码如下: <ScrollView showsVerticalScrollIndicator={false} contentCon ...

  2. A|G\C003

    AGC003 A Wanna go back home = = https://agc003.contest.atcoder.jp/submissions/7910739 B Simplified m ...

  3. youtube 下载视频插件

    https://zh.savefrom.net/userjs-for-google-chrome.php

  4. linux 查看网卡以及开启网卡

    1.查看并分配虚拟网络 我们首先要知道 VMware 三种网络模式的区别. ①.Bridged(桥接模式):就是将主机网卡与虚拟机虚拟的网卡利用虚拟网桥进行通信.在桥接的作用下,类似于把物理主机虚拟为 ...

  5. attempt to call method 'getDataString' (a nil value)

    错误: LUA ERROR: [: attempt to call method 'getDataString' (a nil value) 在合并cocos和quick的时候,在EventCusto ...

  6. 在 Ubuntu/Debian 下安装 PHP7.3 教程

    介绍 最近的 PHP 7.3.0 已经在 2018 年12月6日 发布 GA,大家已经可以开始第一时间体验新版本了,这里先放出 PHP7.3 安装的教程以便大家升级. 适用系统: Ubuntu 18. ...

  7. SSM 实现支付宝支付功能(图文详解+完整代码)

    阅读本文大概需要 4 分钟. 前言 本教程详细介绍了如何使用ssm框架实现支付宝支付功能.本文章分为两大部分,分别是「支付宝测试环境代码测试」和「将支付宝支付整合到ssm框架」,详细的代码和图文解释, ...

  8. 集合类 collection接口 Set

    Collection接口的另外一种实现为Set集合,主要有两种实现方式一种为HashSet另一种为TreeSet,两种实现都依赖与对应的Map实现类. 代码如下: public HashSet() { ...

  9. Gamma阶段第二次scrum meeting

    每日任务内容 队员 昨日完成任务 明日要完成的任务 张圆宁 #91 用户体验与优化https://github.com/rRetr0Git/rateMyCourse/issues/91(持续完成) # ...

  10. 微信小程序获取当前地理位置

    获取用户地理位置,需要用到以下三个api方法:   wx.getSetting() : 获取用户的授权列表信息 wx.openSetting():调起客户端小程序设置界面 wx.getLocation ...