Welcome！！！

F

伞兵一号，申请出战

前端开发(四)

前端开发(四)

溢出属性

# 文本内容超出了标签的最大范围
  overflow: hidden;  			直接隐藏文本内容
  overflow: auto\scroll;  提供滚动条查看

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 50px;
            height: 100px;
            margin-bottom: 50px;
        }
        /*溢出部分隐藏*/
        #d1{
            overflow: hidden;
        }
        /*溢出部分滚动条查看*/
        #d2{
            overflow: auto; /*也可以设置值为scroll*/
        }
    </style>
</head>
<body>
<div id="d1">
    <p>天王盖地虎，天王盖地虎，天王盖地虎，天王盖地虎，天王盖地虎，天王盖地虎，天王盖地虎，天王盖地虎，天王盖地虎，天王盖地虎，天王盖地虎，</p>
</div>
<div id="d2">
    <p>天王盖地虎，天王盖地虎，天王盖地虎，天王盖地虎，天王盖地虎，天王盖地虎，天王盖地虎，天王盖地虎，天王盖地虎，天王盖地虎，天王盖地虎，</p>
</div>
</body>
</html>

效果展示

定位属性

# 1.定位的状态
	1.静态定位		static
  	所有的标签默认都是静态定位即不能通过定位操作改变位置
  2.相对定位		relative
  	相对于标签原来的位置做定位
  3.绝对定位		absolute
  	相对于已经定位过的父标签做定位
  4.固定定位    fixed
  	相对于浏览器窗口做定位

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: red;
            text-align: center;
        }
        #d1{
            position: static;
        }
        /*div2位于网页右上方*/
        #d2{
            position: relative;
            float: right;
            top: -100px;
        }
        /*div3位于网页左下方*/
        #d3{
            position: absolute;
            left: 0;
            bottom: 0;
        }
        /*div4位于网页右下方*/
        #d4{
            position: fixed;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
<div id="d1">div1</div>
<div id="d2">div2</div>
<div id="d3">div3</div>
<div id="d4">div4</div>

</body>
</html>

效果展示

z-index属性

"""前端界面其实是一个三维坐标系 z轴指向用户"""
动态弹出的分层界面 我们也称之为叫模态框
# 补充知识
	rgba(128,128,128,0.5)  最后一个参数可以调整颜色透明度
'z-index其实就是调整布局的z轴，让被调整的布局能够遮挡下面的布局'

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d2{
            background-color: red;
            height: 500px;
            width: 500px;
            position: absolute;
            left: 0;
            top: 0;
        }
        #d1{
            background-color: rgba(138,138,138,0.4);
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            width: 100%;
            z-index: 10;
        }
        #d3{
            background-color: red;
            height: 500px;
            width: 500px;
            position: absolute;
            left: 50px;
            top: 20px;
            z-index: 15;
        }
    </style>
</head>
<body>
<div id="d1"></div>
<div id="d2">下面的内容</div>
<div id="d3">上面的内容</div>

</body>
</html>

效果展示

课堂练习

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="styleSheet" href="mycss.css">
</head>
<body>
<div id="outer-left">
    <div id="avatar">
        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202107%2F23%2F20210723221807_5e5d1.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1653648144&t=843199f1612323f3ee758556660b6941" alt="">
    </div>
    <div id="name">程序猿伞兵一号的博客</div>
    <div id="introduction">体重与智慧并重,腰围与爱心相等</div>
    <div id="wechat">WeChat:13731887932</div>
    <div id="subject">
        <p>#Python</p>
        <p>#Java</p>
        <p>#MySQL</p>
    </div>
</div>
<div id="outer-right">
    <div class="right1 clearfix">
        <div class="right1-1">
            <div class="text">黯然销魂掌</div>
            <div class="data">2022/4/27</div>
        </div>
        <div class="text1">
            good good study day day up
        </div>
        <div class="copy">
            <hr>
            &copy;程序猿伞兵一号
        </div>
    </div>
    <div class="right1 clearfix">
        <div class="right1-1">
            <div class="text">黯然销魂掌</div>
            <div class="data">2022/4/27</div>
        </div>
        <div class="text1">
            good good study day day up
        </div>
        <div class="copy">
            <hr>
            &copy;程序猿伞兵一号
        </div>
    </div><div class="right1 clearfix">
        <div class="right1-1">
            <div class="text">黯然销魂掌</div>
            <div class="data">2022/4/27</div>
        </div>
        <div class="text1">
            good good study day day up
        </div>
        <div class="copy">
            <hr>
            &copy;程序猿伞兵一号
        </div>
    </div><div class="right1 clearfix">
        <div class="right1-1">
            <div class="text">黯然销魂掌</div>
            <div class="data">2022/4/27</div>
        </div>
        <div class="text1">
            good good study day day up
        </div>
        <div class="copy">
            <hr>
            &copy;程序猿伞兵一号
        </div>
    </div><div class="right1 clearfix">
        <div class="right1-1">
            <div class="text">黯然销魂掌</div>
            <div class="data">2022/4/27</div>
        </div>
        <div class="text1">
            good good study day day up
        </div>
        <div class="copy">
            <hr>
            &copy;程序猿伞兵一号
        </div>
    </div><div class="right1 clearfix">
        <div class="right1-1">
            <div class="text">黯然销魂掌</div>
            <div class="data">2022/4/27</div>
        </div>
        <div class="text1">
            good good study day day up
        </div>
        <div class="copy">
            <hr>
            &copy;程序猿伞兵一号
        </div>
    </div><div class="right1 clearfix">
        <div class="right1-1">
            <div class="text">黯然销魂掌</div>
            <div class="data">2022/4/27</div>
        </div>
        <div class="text1">
            good good study day day up
        </div>
        <div class="copy">
            <hr>
            &copy;程序猿伞兵一号
        </div>
    </div><div class="right1 clearfix">
        <div class="right1-1">
            <div class="text">黯然销魂掌</div>
            <div class="data">2022/4/27</div>
        </div>
        <div class="text1">
            good good study day day up
        </div>
        <div class="copy">
            <hr>
            &copy;程序猿伞兵一号
        </div>
    </div><div class="right1 clearfix">
        <div class="right1-1">
            <div class="text">黯然销魂掌</div>
            <div class="data">2022/4/27</div>
        </div>
        <div class="text1">
            good good study day day up
        </div>
        <div class="copy">
            <hr>
            &copy;程序猿伞兵一号
        </div>
    </div><div class="right1 clearfix">
        <div class="right1-1">
            <div class="text">黯然销魂掌</div>
            <div class="data">2022/4/27</div>
        </div>
        <div class="text1">
            good good study day day up
        </div>
        <div class="copy">
            <hr>
            &copy;程序猿伞兵一号
        </div>
    </div><div class="right1 clearfix">
        <div class="right1-1">
            <div class="text">黯然销魂掌</div>
            <div class="data">2022/4/27</div>
        </div>
        <div class="text1">
            good good study day day up
        </div>
        <div class="copy">
            <hr>
            &copy;程序猿伞兵一号
        </div>
    </div>
</div>
</body>
</html>

css

.clearfix:after {
            content: '';
            clear: both;
            display: block;
        }
/* 外围样式*/
#outer-left{
    float: left;
    height: 100%;
    width: 20%;
    background: rgb(78,78,78);
    position: fixed;
    left: 0;
    top: 0;
}
#outer-right{
    float: right;
    height: 100%;
    width: 80%;
}
/* 内部样式*/
#avatar{
    width: 60%;
    height: auto;
    border: 5px solid white;
    border-radius: 50%;
    overflow: hidden;
    margin: 50px auto;
}
#avatar img{
    width: 100%;
}
#name,#introduction{
    color: rgb(173, 159, 159);
    text-align: center;
    font-size: 24px;
    margin-top: 30px;
}

#wechat ,#subject{
    color: rgb(173, 159, 159);
    font-size: 24px;
    text-align: center;
    margin:100px auto;
}
#wechat:hover,#subject:hover{
    color: white;
}

.right1{
    border-right: 5px solid rgb(187, 187, 187);
    border-bottom: 5px solid rgb(187, 187, 187);
    background-color: aliceblue;
    margin-bottom: 50px;
}
.text{
    font-size: 24px;
    font-style: unset;
}
.data{
    float: right;
    margin:-20px 20px;
}
.text1{
    width: 100%;
    float: left;
}
.copy{
    width: 100%;
    float: left;
}

效果展示

JavaScript简介

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

变量与注释

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

数据类型

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

# 3.布尔类型(相当于python中的布尔值bool)
	Boolean
  	js中布尔值是全小写
    	true false
      布尔值为false的 0 空字符串 null undefined NaN
    python中布尔值时首字母大写
    	True False
    	布尔值为False的 0 None 空字符串 空列表 空字典...
  """
  null的意思是空 undefined的意思是没有定义
  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中使用concat()   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(起始位置,删除个数,新增的值)

字符串常用方法

方法 功能 效果
length 返回长度
trim() 移除空白
trimLeft() 移除左边的空白
trimRight() 移除右边的空白
slice(start, end) 切片
toLowerCase() 小写
toUpperCase() 大写
`` 字符串格式化

数组对象常用方法

方法 功能 效果
push() 追加元素
pop() 弹出元素
unshift() 头部插入元素
shift() 头部弹出元素
concat() 扩展列表
forEach() 遍历数组，将每个元素给括号内的函数
splice(起始位置,删除个数,新增的值) 删除再添加
map() 数组的每个元素执行对应函数
posted @ 2022-04-27 19:43  程序猿伞兵一号  阅读(39)  评论(0)    收藏  举报