溢出属性

  1. # 文本内容超出了标签的最大范围
  2.   overflow: hidden;  			直接隐藏文本内容
  3.   overflow: auto\scroll;  提供滚动条查看
  5. # 溢出实战案例
  6. 	div {
  7.             overflow: hidden;
  8.         }
  9. 	div img {
  10.             width: 100%;
  11.         }
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>头像</title>
  6.     <style>
  7.         body{
  8.             background-color: #6868de;
  9.         }
  10.         p{
  11.            color: red;
  12.         }
  13.         div{
  14.             height: 200px;
  15.             width: 200px;
  16.             border-radius: 50%;
  17.             border: 5px solid white;
  18.             overflow: hidden;
  19.         }
  20.         div img{
  21.             width: 100%;
  22.         }
  23.     </style>
  24. </head>
  25. <body>
  26.     <p>今日美女</p>
  27.     <div>
  28.         <img src="https://img2.baidu.com/it/u=1854315185,2758383691&fm=253&fmt=auto&app=138&f=JPEG?w=501&h=500" alt="今日美女">
  29.     </div>
  30. </body>
  31. </html>

定位属性

  1. # 1.定位的状态
  2.   1.静态定位		static
  3.   	所有的标签默认都是静态定位即不能通过定位操作改变位置
  4.   2.相对定位		relative
  5.   	相对于标签原来的位置做定位
  6.   3.绝对定位		absolute
  7.   	相对于已经定位过的父标签做定位
  8.   4.固定定位    fixed
  9.   	相对于浏览器窗口做定位
  10. # 2.定位操作
  11. 	position
  12.   left\right\top\bottom
  13.   绝对定位
  14.   	如果没有父标签或者父标签没有定位 则以body为准 相当于变成了相对定位
  15.     	eg:小米商城购物车
  16.   固定定位
  17.   	eg:右下方回到底部
  18.       position: fixed;
  19.       right: 0;
  20.       bottom: 50px;

z-index属性

  1. """前端界面其实是一个三维坐标系 z轴指向用户"""
  2. 动态弹出的分层界面 我们也称之为叫模态框
  3. # 补充知识
  4. 	rgba(124,124,222,0.5);  最后一个参数可以调整颜色透明度
  6. position: fixed;
  7. z-index: 30;
  8. left: 50%;
  9. top: 50%;
  10. margin-left: -150px;
  11. margin-top: -50px;
  1.     <style>
  2.         .a {
  3.             position: fixed;
  4.             left: 0;
  5.             top: 0;
  6.             right: 0;
  7.             bottom: 0;
  8.             background-color: rgba(124,124,222,0.5);
  9.             z-index: 10;
  10.         }
  11.         .b{
  12.             position: fixed;
  13.             height: 100px;
  14.             width: 300px;
  15.             background-color: white;
  16.             z-index: 30;
  17.             left: 50%;
  18.             top: 50%;
  19.             margin-left: -150px;
  20.             margin-top: -50px;
  21.         }
  22.     </style>
  24. <div class="a"></div>
  25.     <div class="b">
  26.         <p>username: <input type="text" name="username"></p>
  27.         <p>password: <input type="text" name="password"></p>
  28.     </div>

课堂练习

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>网页标签</title>
  6.     <link rel="stylesheet" href="bolg.css">
  7. </head>
  8. <body>
  9.     <div class="blog-left">
  10.         <div class="blog-avatar">
  11.             <img src="https://img2.baidu.com/it/u=1854315185,2758383691&fm=253&fmt=auto&app=138&f=JPEG?w=501&h=500" alt="">
  12.         </div>
  13.         <div class="blog-title">
  14.             <span>美女的博客</span>
  15.         </div>
  16.         <div class="blog-desc">
  17.             <span>美女很美，留下美好回忆</span>
  18.         </div>
  19.         <div class="blog-link">
  20.             <ul>
  21.                 <li><a href="">介绍</a></li>
  22.                 <li><a href="">微博</a></li>
  23.                 <li><a href="">微信</a></li>
  24.             </ul>
  25.         </div>
  26.         <div class="blog-info">
  27.             <ul>
  28.                 <li><a href="">电影</a></li>
  29.                 <li><a href="">动漫</a></li>
  30.                 <li><a href="">电视剧</a></li>
  31.             </ul>
  32.         </div>
  33.     </div>
  35.     <div class="bolg-right">
  36.         <div class="article-list">
  37.             <div class="article-title">
  38.                 <span class="title">美女养成日记</span>
  39.                 <span class="date">2022-04-27</span>
  40.             </div>
  41.             <div class="article-desc">
  42.                 <span class="desc">美好身材养成必要的是养生餐食</span>
  43.             </div>
  44.             <div class="article-info">
  45.                  <span class="fupo">#怎么样花钱</span>
  46.                  <span class="dage">#如何优雅</span>
  47.             </div>
  48.         </div>
  49.     </div>
  50.     <div class="bolg-right">
  51.         <div class="article-list">
  52.             <div class="article-title">
  53.                 <span class="title">美女养成日记</span>
  54.                 <span class="date">2022-04-27</span>
  55.             </div>
  56.             <div class="article-desc">
  57.                 <span class="desc">美好身材养成必要的是养生餐食</span>
  58.             </div>
  59.             <div class="article-info">
  60.                  <span class="fupo">#怎么样花钱</span>
  61.                  <span class="dage">#如何优雅</span>
  62.             </div>
  63.         </div>
  64.     </div>
  65.     <div class="bolg-right">
  66.         <div class="article-list">
  67.             <div class="article-title">
  68.                 <span class="title">美女养成日记</span>
  69.                 <span class="date">2022-04-27</span>
  70.             </div>
  71.             <div class="article-desc">
  72.                 <span class="desc">美好身材养成必要的是养生餐食</span>
  73.             </div>
  74.             <div class="article-info">
  75.                  <span class="fupo">#怎么样花钱</span>
  76.                  <span class="dage">#如何优雅</span>
  77.             </div>
  78.         </div>
  79.     </div>
  80.     <div class="bolg-right">
  81.         <div class="article-list">
  82.             <div class="article-title">
  83.                 <span class="title">美女养成日记</span>
  84.                 <span class="date">2022-04-27</span>
  85.             </div>
  86.             <div class="article-desc">
  87.                 <span class="desc">美好身材养成必要的是养生餐食</span>
  88.             </div>
  89.             <div class="article-info">
  90.                  <span class="fupo">#怎么样花钱</span>
  91.                  <span class="dage">#如何优雅</span>
  92.             </div>
  93.         </div>
  94.     </div>
  95.     <div class="bolg-right">
  96.         <div class="article-list">
  97.             <div class="article-title">
  98.                 <span class="title">美女养成日记</span>
  99.                 <span class="date">2022-04-27</span>
  100.             </div>
  101.             <div class="article-desc">
  102.                 <span class="desc">美好身材养成必要的是养生餐食</span>
  103.             </div>
  104.             <div class="article-info">
  105.                  <span class="fupo">#怎么样花钱</span>
  106.                  <span class="dage">#如何优雅</span>
  107.             </div>
  108.         </div>
  109.     </div>
  110. </body>
  111. </html>
  1. body {
  2.     margin: 0;
  3.     background-color: lightsteelblue;
  4. }
  6. a {
  7.     text-decoration: none;
  8. }
  10. ul {
  11.     list-style-type: none;
  12.     padding-left: 0;
  13. }
  15. .blog-left {
  16.     float: left;
  17.     height: 100%;
  18.     width: 20%;
  19.     position: fixed;
  20.     left: 0;
  21.     top: 0;
  22.     background-color: #dec4c9;
  23. }
  25. .blog-avatar {
  26.     height: 200px;
  27.     width: 200px;
  28.     border-radius: 50%;
  29.     border: 5px solid #7ae0c8;
  30.     overflow: hidden;
  31.     margin: 20px auto;
  32. }
  34. .blog-avatar img {
  35.     width: 100%;
  36. }
  38. .blog-title, .blog-desc {
  39.     color: coral;
  40.     text-align: center;
  41.     margin: 20px auto;
  42. }
  44. .blog-link, .blog-info {
  45.     font-size: 24px;
  46.     text-align: center;
  47.     margin: 100px auto;
  48. }
  50. .blog-link a, .blog-info a {
  51.     color: darkgray;
  52. }
  54. .blog-link a:hover, .blog-info a:hover {
  55.     color: coral;
  56. }
  58. /*右侧*/
  59. .bolg-right {
  60.     float: right;
  61.     width: 80%;
  62. }
  64. .article-list {
  65.     background-color: #e8d7d1;
  66.     margin: 15px 30px 15px 15px;
  67.     box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
  68. }
  70. .article-title {
  71.     border-left: 6px solid red;
  72. }
  74. .article-title .title {
  75.     font-size: 36px;
  76.     padding-left: 10px;
  77. }
  79. .article-title .date {
  80.     float: right;
  81.     margin: 10px 20px;
  82.     font-weight: bolder;
  83. }
  85. .article-desc {
  86.     padding-top: 10px;
  87.     font-size: 18px;
  88.     text-indent: 2px;
  89.     margin: 15px 5px ;
  90.     color: crimson;
  91.     border-bottom: 1px solid black;
  92. }
  94. .article-info {
  95.     font-size: 18px;
  96.     color: brown;
  97.     padding-left: 20px;
  98.     padding-top: 10px;
  99.     padding-bottom: 10px;
  100. }

JavaScript简介

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

变量与注释

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

数据类型

  1. """
  2. 查看数据类型的方式
  3. 	typeof
  4. """
  5. # 1.数值类型(相当于python里面的整型int和浮点型float)
  6. 	Number
  7.   NaN:属于数值类型 意思是'不是一个数字'(not a number)
  8.     parseInt('abc')  不报错返回NaN
  9.     parseFloat('abc')不报错返回NaN
  11. # 2.字符类型(相当于python里面的字符串str)
  12. 	String
  13.   	默认只能是单引号和双引号
  14.     	var name1 = 'jason'
  15.       var name2 = "jason"
  16.   	格式化字符串小顿号
  17.     	var name3 = `jason`
  18. 	1.字符的拼接
  19.   	js中推荐使用加号
  20.   2.统计长度
  21.   	js中使用length python中使用len()
  22.   3.移除空白(不能指定)
  23.   	js中使用trim()、trimLeft()、trimRight()
  24.     python中使用strip()、lstrip()、rstrip()
  25.   4.切片操作
  26.   	js中使用substring(start,stop)、slice(start,stop)
  27.     	前者不支持负数索引后者支持
  28.     python中使用[index1:index2]
  29.   5.大小写转换
  30.   	js中使用.toLowerCase()、.toUpperCase()
  31.     python中使用lower()、upper()
  32.   6.切割字符串
  33.   	js中和python都是用split() 但是有点区别
  34.     	ss1.split(' ')
  35.       	['jason', 'say', 'hello', 'big', 'baby']
  36.       ss1.split(' ', 1)
  37.       	['jason']
  38.       ss1.split(' ', 2)
  39.       	['jason', 'say']
  40.   7.字符串的格式化
  41.   	js中使用格式化字符串(小顿号)
  42.     	var name = 'jason'
  43.       var age = 18
  44.       console.log(`
  45.       	my name is ${name} my age is ${age}
  46.       `)
  47.       my name is jason my age is 18
  48.     python中使用%或者format
  50. # 3.布尔类型(相当于python中的布尔值bool)
  51. 	Boolean
  52.   	js中布尔值是全小写
  53.     	true false
  54.       布尔值为false的 0 空字符串 null undefined NaN
  55.     python中布尔值时首字母大写
  56.     	True False
  57.     	布尔值为False的 0 None 空字符串 空列表 空字典...
  58.   """
  59.   null的意思是空 undefined的意思是没有定义
  60.   var bb = null;
  61.   bb
  62.   null
  64.   var aa
  65.   aa
  66.   undefined
  67.   """
  68. # 4.对象(相当于python中的列表、字典、对象)
  69. 	数组(相当于python中的列表)
  70.   	Array
  71.     	var l1 = [11, 22, 33]
  72.   1.追加元素
  73.   	js中使用push()  python中使用append()
  74.   2.弹出元素
  75.   	js和python都用的pop()
  76.   3.头部插入元素
  77.   	js中使用unshift()  python中使用insert()
  78.   4.头部移除元素
  79.   	js中使用shift()    python中可以使用pop(0) remove()
  80.   5.扩展列表
  81.   	js中使用concat()   python中使用extend()
  82.   6.forEach
  83.   	var l2 = ['jason', 'tony', 'kevin', 'oscar', 'jerry']
  84.     l2.forEach(function(arg1){console.log(arg1)})
  85.     VM3143:1 jason
  86.     VM3143:1 tony
  87.     VM3143:1 kevin
  88.     VM3143:1 oscar
  89.     VM3143:1 jerry
  91.     l2.forEach(function(arg1,arg2){console.log(arg1,arg2)})
  92.     VM3539:1 jason 0
  93.     VM3539:1 tony 1
  94.     VM3539:1 kevin 2
  95.     VM3539:1 oscar 3
  96.     VM3539:1 jerry 4
  98.     l2.forEach(function(arg1,arg2,arg3){console.log(arg1,arg2,arg3)})
  99. VM3663:1 jason 0 ['jason', 'tony', 'kevin', 'oscar', 'jerry']
  100. VM3663:1 tony 1  ['jason', 'tony', 'kevin', 'oscar', 'jerry']
  101. VM3663:1 kevin 2 ['jason', 'tony', 'kevin', 'oscar', 'jerry']
  102. VM3663:1 oscar 3 ['jason', 'tony', 'kevin', 'oscar', 'jerry']
  103. VM3663:1 jerry 4 ['jason', 'tony', 'kevin', 'oscar', 'jerry']
  104.  	7.splice
  105.   	splice(起始位置,删除个数,新增的值)

定位、z-index、JavaScript变量和数据类型的更多相关文章

  1. JavaScript变量和数据类型

    变量 变量就是一个元素,类似于数学中的概念,用来指定表示一个对象.在JavaScript中,用来指定变量的关键字为var.当声明新变量时,可以使用关键词 "new" 来声明其类型 ...

  2. JavaScript变量与数据类型详解

    变量 变量来源于数学,是计算机语言中能储存计算结果或能表示值抽象概念.变量可以通过变量名访问. 变量的作用就是用于存储值. 语法: 声明变量时,总是以关键字var打头.任何情况下都应该这样做.然后给变 ...

  3. JavaScript变量与数据类型

    变量 javascript的变量很松散,每个变量初始仅仅用于保存一个占位符而已.定义变量的操作符是 var, var 后面跟着一个标识符--当作变量的名字. 比如: var myname;//定义了一 ...

  4. python 之 前端开发（ JavaScript变量、数据类型、内置对象、运算符、流程控制、函数）

    11.4 JavaScript 11.41 变量 1.声明变量的语法 // 1. 先声明后定义 var name; // 声明变量时无需指定类型,变量name可以接受任意类型 name= " ...

  5. 408 JavaScript 变量、数据类型、正则

    JavaScript 特点 是一门解释性脚本语言 .基于对象脚本编程.简单性(弱类型).安全性.动态性.跨平台 作用: 初学js 引入方式 与html有相同之处 也是3种1 用JavaScript前缀 ...

  6. JavaScript变量、数据类型、函数

    #转载请留言联系 说在前面: JavaScript 是一种弱类型语言,javascript的变量类型由它的值来决定. JavaScript语句的末尾用 ; 结束.空格没有特殊意义. 1.JavaScr ...

  7. JavaScript——变量

    本文简述了JavaScript变量的数据类型,以及变量类型检测与类型转换 一.介绍 JavaScript的变量有6种数据类型,包含5种原始类型和1种对象类型.本人比较喜欢用逻辑图的形式总结知识点,这样 ...

  8. JavaScript 札记（数据类型和变量、）

    1. 变量名由:字母.下划线.$.数字组成,只可以字母.下划线.$开头. 2.JavaScript区分大小写! 3.命名规范:匈牙利命名法(不论是变量名还是函数名). 4.基本类型(3种):字符串.数 ...

  9. 《JavaScript高级教程》学习笔记一、变量和数据类型

    JavaScript的核心语言特性在ECMA-262中是以名为ECMAScript的伪语言的形式来定义的. 一.变量和数据类型 1. 变量 JavaSript是弱类型语言,可以通过var定义任何类型变 ...

随机推荐

  1. ThreadLocal是什么？使用场景有哪些？

    什么是ThreadLocal? ThreadLocal为每个使用该变量的线程提供独立的变量副本,所以每一个线程都可以独立地改变自己的副本,而不会影响其它线程所对应的副本. 测试代码: package ...

  2. Java 死锁以及如何避免？

    Java 中的死锁是一种编程情况,其中两个或多个线程被永久阻塞,Java 死锁情况 出现至少两个线程和两个或更多资源. Java 发生死锁的根本原因是:在申请锁时发生了交叉闭环申请.

  3. 学习zabbix（八）

    一,Zabbix架构 zabbix 是一个基于 WEB 界面的提供分布式系统监视以及网络监视功能的企业级的开源解决方案.zabbix 能监视各种网络参数,保证服务器系统的安全运营:并提供灵活的通知机制 ...

  4. 编译器如何处理C++不同类中同名函数（参数类型个数都相同）

    转载请注明出处,版权归作者所有 lyzaily@126.com yanzhong.lee 作者按: 从这篇文章中,我们主要会认识到一下几点: 一.不类中的特征标相同的同名函数,它们是不同的函数,原因就 ...

  5. C++类中隐藏的六个默认函数

    Test类中隐藏的六个默认的函数 class Test { public: //默认的构造函数 Test(): //析构函数 ~Test(): //拷贝构造函数 Test(const Test &am ...

  6. H5扇形

    使用H5 canvas绘制的可交互扇形 requestAnimationFrame() 现有动画实现方式的不足 setTimeout和setInterval都不十分精确.为它们传入的第二个参数,实际上 ...

  7. 使用css完成引导用户按照流程完成任务的进度导航条

    首先先看设计稿 图中的12345便是主角进度条. 分析需求如下:线的长度不固定,适应移动端和pc端点平均地分布在一条线上点的个数不固定,可能会改变激活的点之间线的颜色是绿色的 两种种方式 百分比宽度切 ...

  8. php 实验一 网页设计

    实验目的: 1.  能够对整个页面进行html结构设计. 2.  掌握CSS+DIV的应用. 实验内容及要求: ***个人博客网页 参考Internet网上的博客网站,设计自己的个人网页,主要包括:图 ...

  9. github账号&文章选题

    ----------------------------------------------------------- https://github.com/yanpanjiao     github ...

  10. 通过面试题学JavaScript知识（1）

    // a 是多少的时候 可以让下面的打印ok if(a == 1 && a == 2 && a ==3){ console.log('ok') } 分析1: == 比较 ...