ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

CSS溢出属性 定位及JavaScript基础知识

2022-04-27 21:03:05  阅读:219  来源: 互联网

标签:定位 jason python JavaScript js 通讯录 position 基础知识 CSS


概要

  • 溢出属性

  • 定位

  • Z-index

  • 课堂练习

  • JavaScript简介

  • 数据类型

内容

1、溢出属性(overflow)

# 所谓溢出属性是指文本内容超出了标签的最大范围
overflow: hidden;    直接隐藏文本内容
overflow: auto\scroll;  提供滚动条查看其余的内容

# 溢出实战案例
   div {
       overflow: hidden;
   }
 	div img {
        width: 100%;
    }   

2、定位属性(position)

# 1.定位的状态
	1.静态定位  static 自动默认值 无定位
    所有的标签默认都是静态定位 即不能通过定位操作改变位置
    position: static
    2.相对定位 relative
    相对于标签原来的位置做定位
    ps: position: relative的一个主要用法:方便绝对定位元素找到参照物
    3.绝对定位  absolute
    position: absolute;相对于已经定位过的父标签做定位
    4.固定定位   fixed
    position: fixed   相对于浏览器窗口做定位

# 2.定位操作
position left/right/top/bottom
绝对定位
	如果没有父标签或者父标签没有定位 则会以body为准 相当于变成了相对定位
    eg:小米官网页面上的那个 小米商城购物车和它连接的那个空白
 
固定定位的用法:
    eg: 右下方回到底部
        position: fixed;
            right:0;
            bottom: 50px    

代码演示:

1.相对定位
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .c1 {
             height: 50px;
            width: 100px;
            background-color: dodgerblue;
        }
        .c2 {
             height: 100px;
            width: 50px;
            background-color: orange;
            position: relative;
            left: 100px;
        }
    </style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
<div style="height: 100px;width: 200px;background-color: black"></div>
</body>
</html>

2.绝对定位
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .c1 {
            height: 50px;
            width: 100px;
            background-color: red;
            position: relative;
        }
        .c2 {
            height: 50px;
            width: 200px;
            background-color: green;
            position: absolute;
            left: 50px;
        }
    </style>
</head>
<body>
<div class="c1">购物车
    <div class="c2">空空如也~</div>
    <div style="height: 50px;width: 100px;background-color: deeppink"></div>
</div>

</body>
</html>

3.固定定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="c1" style="height: 50px;width: 500px;background-color: black"></div>
<div class="c2" style="height: 50px;width: 100px;background-color: deeppink;position: fixed;right: 10px;bottom: 20px"></div>
<div class="c3" style="height: 10px;width: 100px;background-color: green"></div>

</body>
</html>

3、z-index属性

"""前端界面其实是一个三维坐标系 其中Z轴是指向用户的"""
如何证明:例子
	我们在进入百度网页页面后 我们在上面书写我们要搜索的内容时 我们在用截图快捷键 这时候 我们可以看到三层不同的页面:第一层:就是我们要截的这一层 距离我们最近 也是我们最先看到的;第二层 一层朦胧的界面 像纱网的一层 我们称之为模态框 动态弹出的分层界面;第三层就是百度官网页面的那一层
            
设置对象的层叠顺序:
    1.z-index值表示谁压着谁,数值大的压盖住数值小的
    2.只有定位的元素 才能有z-index,也就是说 不管相对定位,绝对定位,固定定位,都可以使用z-index,而浮动元素不能使用z-index
    3.z-index值没有单位,就是一个正整数,默认的z-index值为0 如果大家都没有z-index值 或者z-index值一样 那么谁写在HTML后面 谁在上面压着别人 定位了元素 永远压住没有定位的元素
 
# 补充知识
rgba(128,128,128,0.5)  最后一个参数可以调整颜色透明度

position: fixed;
left: 50%;
top:50%;
margin-left: -200px;
margin-top: -100px;        

自定义模态框代码演示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>自定义模态框</title>
  <style>
    .cover {
      background-color: rgba(0,0,0,0.65);
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 998;
    }

    .modal {
      background-color: white;
      position: fixed;
      width: 600px;
      height: 400px;
      left: 50%;
      top: 50%;
      margin: -200px 0 0 -300px;
      z-index: 1000;
    }
  </style>
</head>
<body>

<div class="cover"></div>
<div class="modal"></div>
</body>
</html>

4.课堂练习

1.先用div和span勾勒出页面轮廓
	标签的class和id值最好也做到见名知意
2.在编写html
3.最后编写css

"""
我们现在所写的页面 没有做响应式布局 页面内容会随着浏览器窗口的变化而出现错乱现象 这个目前不要考虑后面框架自带处理机制"""

代码演示:

这个练习题是由html文件+css文件两部分代码组成
# 在创建的html文件代码:
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="myblog.css">
</head>
<body>
    <div class="blog-left">
        <div class="blog-avatar">
            <img src="https://img0.baidu.com/it/u=4262532814,4073422625&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400" alt="">
        </div>
        <div class="blog-title">
            <span>Tony老师的博客</span>
        </div>
        <div class="blog-desc">
            <span>这个人很烂,什么都没有留下!!!</span>
        </div>
        <div class="blog-link">
            <ul>
                <li><a href="">关于我</a></li>
                <li><a href="">微博账号</a></li>
                <li><a href="">微信公众号</a></li>
            </ul>
        </div>
        <div class="blog-info">
            <ul>
                <li><a href="">#Python</a></li>
                <li><a href="">#Golang</a></li>
                <li><a href="">#JavaScript</a></li>
            </ul>
        </div>
    </div>
    <div class="blog-right">
        <div class="article-list">
            <div class="article-title">
                <span class="title">小白成长日记</span>
                <span class="date">2022-04-27</span>
            </div>
            <div class="article-desc">
                <span class="desc">论身体素质的重要性及软饭硬吃的道理</span>
            </div>
            <div class="article-info">
                <span class="fupo">#富婆通讯录</span>
                <span class="dage">#大哥通讯录</span>
            </div>
        </div>
        <div class="article-list">
            <div class="article-title">
                <span class="title">小白成长日记</span>
                <span class="date">2022-04-27</span>
            </div>
            <div class="article-desc">
                <span class="desc">论身体素质的重要性及软饭硬吃的道理</span>
            </div>
            <div class="article-info">
                <span class="fupo">#富婆通讯录</span>
                <span class="dage">#大哥通讯录</span>
            </div>
        </div>
        <div class="article-list">
            <div class="article-title">
                <span class="title">小白成长日记</span>
                <span class="date">2022-04-27</span>
            </div>
            <div class="article-desc">
                <span class="desc">论身体素质的重要性及软饭硬吃的道理</span>
            </div>
            <div class="article-info">
                <span class="fupo">#富婆通讯录</span>
                <span class="dage">#大哥通讯录</span>
            </div>
        </div>
        <div class="article-list">
            <div class="article-title">
                <span class="title">小白成长日记</span>
                <span class="date">2022-04-27</span>
            </div>
            <div class="article-desc">
                <span class="desc">论身体素质的重要性及软饭硬吃的道理</span>
            </div>
            <div class="article-info">
                <span class="fupo">#富婆通讯录</span>
                <span class="dage">#大哥通讯录</span>
            </div>
        </div>
        <div class="article-list">
            <div class="article-title">
                <span class="title">小白成长日记</span>
                <span class="date">2022-04-27</span>
            </div>
            <div class="article-desc">
                <span class="desc">论身体素质的重要性及软饭硬吃的道理</span>
            </div>
            <div class="article-info">
                <span class="fupo">#富婆通讯录</span>
                <span class="dage">#大哥通讯录</span>
            </div>
        </div>
        <div class="article-list">
            <div class="article-title">
                <span class="title">小白成长日记</span>
                <span class="date">2022-04-27</span>
            </div>
            <div class="article-desc">
                <span class="desc">论身体素质的重要性及软饭硬吃的道理</span>
            </div>
            <div class="article-info">
                <span class="fupo">#富婆通讯录</span>
                <span class="dage">#大哥通讯录</span>
            </div>
        </div>
        <div class="article-list">
            <div class="article-title">
                <span class="title">小白成长日记</span>
                <span class="date">2022-04-27</span>
            </div>
            <div class="article-desc">
                <span class="desc">论身体素质的重要性及软饭硬吃的道理</span>
            </div>
            <div class="article-info">
                <span class="fupo">#富婆通讯录</span>
                <span class="dage">#大哥通讯录</span>
            </div>
        </div>
        <div class="article-list">
            <div class="article-title">
                <span class="title">小白成长日记</span>
                <span class="date">2022-04-27</span>
            </div>
            <div class="article-desc">
                <span class="desc">论身体素质的重要性及软饭硬吃的道理</span>
            </div>
            <div class="article-info">
                <span class="fupo">#富婆通讯录</span>
                <span class="dage">#大哥通讯录</span>
            </div>
        </div>
        <div class="article-list">
            <div class="article-title">
                <span class="title">小白成长日记</span>
                <span class="date">2022-04-27</span>
            </div>
            <div class="article-desc">
                <span class="desc">论身体素质的重要性及软饭硬吃的道理</span>
            </div>
            <div class="article-info">
                <span class="fupo">#富婆通讯录</span>
                <span class="dage">#大哥通讯录</span>
            </div>
        </div>
        <div class="article-list">
            <div class="article-title">
                <span class="title">小白成长日记</span>
                <span class="date">2022-04-27</span>
            </div>
            <div class="article-desc">
                <span class="desc">论身体素质的重要性及软饭硬吃的道理</span>
            </div>
            <div class="article-info">
                <span class="fupo">#富婆通讯录</span>
                <span class="dage">#大哥通讯录</span>
            </div>
        </div>
    </div>
</body>
</html>

# 创建的css文件代码
/*这是简易版本博客园首页样式*/
/*页面通用样式*/
body {
    margin: 0;
    background-color: #eeeeee;
}
a {
    text-decoration: none;
}

ul {
    list-style-type: none;
    padding-left: 0;
}
/*左侧样式*/
.blog-left {
    float: left;
    height: 100%;
    width: 20%;
    position: fixed;
    left: 0;
    top: 0;
    background-color: #4e4e4e;
}

.blog-avatar {
    height: 200px;
    width: 200px;
    border-radius: 50%;
    border: 5px solid white;
    overflow: hidden;
    margin: 20px auto;
}

.blog-avatar img {
    width: 100%;
}


.blog-title,.blog-desc {
    color: darkgray;
    text-align: center;
    margin: 20px auto;
}

.blog-link,.blog-info {
    font-size: 24px;
    text-align: center;
    margin: 100px auto;
}

.blog-link a,.blog-info a {
    color: darkgray;
}

.blog-link a:hover,.blog-info a:hover {
    color: white;
}

/*右侧样式*/
.blog-right {
    float:right;
    width: 80%;
}

.article-list {
    background-color: white;
    margin: 20px 50px 20px 10px ;
    box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
}
.article-title {
    border-left: 8px solid red;
}
.article-title .title {
    font-size: 36px;
    padding-left: 10px;
}
.article-title .date {
    float: right;
    margin: 20px 30px;
    font-weight: bolder;
}
.article-desc {
    padding-top: 10px;
    font-size: 24px;
    text-indent: 20px;
    border-bottom: 1px solid black;
}

.article-info {
    font-size: 18px;
    padding-left: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
}

5、JavaScript简介

# 1.JavaScript与Java没有半毛钱关系
	之所以会叫这个名字纯粹是为了蹭当时Java的热度
# 2.JavaScript简称JS 也是一门前端的编程语言	
	前端由于非常受制于后端,所以有一些人异想天开想要通过js来编写后端代码一统江湖 由此开发了一个叫nodejs的工具(支持js跑在后端服务器上)>>>>:不好用
# 3.JS最初由一个程序员花了七天时间开发的 里面存在很多bug
	为了解决这些bug一直在编写相应的补丁 但是补丁本身又有bug 最后导致了js中有很多不符合逻辑的地方(最后成了大家墨守成规的东西)
 # 4.JavaScript与ECMAScript
	JavaScript原先由一家公司开发 希望其他公司都使用 最后被组织改名
 # 5.版本问题
    使用最多的就是:
        ECMA5/ECMA6

6、变量与注释

"""
编写js代码的位置
	1.pycharm提供的js文件
	2.浏览器提供的js环境(学习阶段推荐)"""
# 1.注释语法
	// 单行注释
    /*多行注释*/
    
# 2.结束符号
	一般是以分号结束 console.log('hello world'); 
    类似于python中的print 
    console.log() = print()
# 3.变量声明
	在js中定义变量需要使用关键字声明
    1.var(一般是在ECMA5之前的声明)
    var name = 'jason'
    2.let(一般是在ECMA6之前的声明)
    let name = 'jaosn'
    '''var声明都是全局变量 let可以声明局部变量'''
# 4.常量声明
	const pi = 3.14

7、数据类型

"""
查看数据类型的方式
   typeof
   """
# 1.数据类型(相当于python里面的整型int和浮点型float)
Number
其中:
    NaN:属于数值类型 意思是'不是一个数字'(not a number)
    数据转化: parseInt('abc')  不会报错返回NaN
        	 parseFloat('abc')  不会报错返回NaN
    类似于python中的:
        int = int('abc')   python中会报错
        float = int('float')  python中会报错
# 2.字符类型(相当于python里面的字符串str)
String
默认只能是单引号和双引号
	var name1 = 'jason'
    var name2 = 'jason'
 格式化字符串小顿号
	var name3 = 'jason'
 内置方法:
    1.字符的拼接
    js中推荐使用加号  python中使用加号或join
    2.统计长度
    js中使用length    python中使用len()
    3.移除空白(不能指定)
    js中使用trim()、trimLeft()、trimRight()
    python中使用strip()、lstrip()、rstrip()
    4.切片操作
    js中使用substring(staat,end)、slice(start,end)
    两者的区别:前者不支持负数 后者支持
    python中使用[index1:index2]
    5.大小写转换
    js中使用.toLowerCase()、.toUpperCase()
    python中使用lower()、upper()
    6.切割字符串
    js中和python中都是用split() 但是有点区别
    var ss1 = 'jason say hello big baby'
   		6.1 ss1.split(' ')
   		# ['jason','say','hello','big','baby']
    
    	6.2 ss1.split(' ',1)
        # ['jason']
        
        6.3 ss1.split(' ',2)
        # ['jaosn','say']
    7.字符串的格式化
    js中使用格式化字符串(小顿号)
    	var name = 'jason'
        var age = 18
        console.log(`my name is ${name} my age is ${age}`)
        # my name is jason my age is 18
	python中使用%s或者是format

# 3.布尔类型(想当于python中的布尔值bool)
Boolean
js中布尔值是全小写
	true false
    布尔值为false的: 0 空字符串 null undefined NaN
    python中布尔值首字母大写
    True False
    布尔值为False的: 0 None 空字符串 空列表 开字典
 """
 null的意思是空 undefined的意思是没有定义
 eg:    var bb = null;
 		bb    # null
 		
 		var aa
 		aa   # undefined
 		"""
# 4.对象(类似于python中的列表 字典 对象)
数组(类似于python中的列表)
Array
	var l1 = [11,22,33]
 1.追加元素
	js中使用push()  python中使用append()
 2.弹出元素
	js和python都用的是pop()
 3.头部插入元素
	js中使用unshift()  python中使用的是insert()
 4.头部移除元素
	js中使用shift()   python中可以使用pop(0)、remove()
 5.扩展列表
	js中使用contact()  python中使用extend()
 6.forEach
	var l2 = ['jason', 'tony', 'kevin', 'oscar', 'jerry']
     l2.forEach(function(arg1){console.log(arg1)})
    VM3143:1 jason
    VM3143:1 tony
    VM3143:1 kevin
    VM3143:1 oscar
    VM3143:1 jerry
      
    l2.forEach(function(arg1,arg2){console.log(arg1,arg2)})
    VM3539:1 jason 0
    VM3539:1 tony 1
    VM3539:1 kevin 2
    VM3539:1 oscar 3
    VM3539:1 jerry 4
     
    l2.forEach(function(arg1,arg2,arg3){console.log(arg1,arg2,arg3)})
VM3663:1 jason 0 ['jason', 'tony', 'kevin', 'oscar', 'jerry']
VM3663:1 tony 1  ['jason', 'tony', 'kevin', 'oscar', 'jerry']
VM3663:1 kevin 2 ['jason', 'tony', 'kevin', 'oscar', 'jerry']
VM3663:1 oscar 3 ['jason', 'tony', 'kevin', 'oscar', 'jerry']
VM3663:1 jerry 4 ['jason', 'tony', 'kevin', 'oscar', 'jerry']
 	7.splice
  	splice(起始位置,删除个数,新增的值)

	

    

标签:定位,jason,python,JavaScript,js,通讯录,position,基础知识,CSS
来源: https://www.cnblogs.com/wht488232/p/16200524.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有