盒子模型
所有的标签都可以看成是一个快递盒盒~
1. 所有快递盒之间的距离 标签之间的距离 外边距( margin)
2. 快递盒的厚度 标签的边框 边框( border)
3. 盒子内物体距离盒子内壁 内部文本与边框的距离 内边距( padding)
4. 物体自身的大小 标签内部的内容 内容( content)
需要掌握的操作
margin- top: 20px;
margin- left: 20px;
margin- right: 20px;
margin- bottom: 20px;
body标签自带8px的外边距
margin: 0 ; 简写形式 作用于上下左右
margin: 10px 20 ; 上下 左右
margin: 10px 20px 30px; 上 左右 下
margin：10px 20px 30px 40px; 上 右 下 左
margin还可以让内部标签居中展示
margin: 100px auto 仅限于水平方向
padding使用方式与margin一致
浮动布局
float : left\right 页面布局必不可少的操作
浮动会造成父标签塌陷 这是一个不好的现象 因为会引起歧义
解决浮动造成的父标签塌陷
. clearfix: after{
content: '' ;
display: block;
clear: both;
}
敲黑板！！！背下来！！！
提前写好上述的css操作 遇到标签塌陷就给标签加上clearfix类值即可
"""
浏览器针对文本是有限展示的(浮动的元素如果遮挡会想办法展示)
"""
溢出属性
visible 默认值 内容不会被修剪会呈现在元素框之外
hidden 内容会被修剪 并且其余内容是不可见的
scroll 内容会被修剪 但是浏览器会显示滚动条以便查看其余的内容
auto 如果内容被修剪 则浏览器会显示滚动条以便查看其余的内容
inherit 规定应该从父元素继承 overflow 属性的值
div {
hight: 50px;
width: 50px;
border: 5px solid gold;
border- radius: 50 % ;
overflow: hidden;
}
div img {
max - width: 100 % ;
}
定位
static( 静态)
所有的标签默认都不能直接通过定位修改位置 必须要切换成下面三种之一
relative( 相对定位)
相对于标签原来的位置做定位
absolute( 绝对定位)
基于已经定位过的父标签做定位( 如果没有父标签则以body为参照)
fixed( 固定定位)
相对于浏览器窗口做定位
z-index
设置对象的层叠顺序。
1.z-index 值表示谁压着谁数值大的压盖住数值小的
2.只有定位了的元素才能有z-index 不管相对定位 绝对定位 固定定位 都可以使用z-index 而浮动元素不能使用z-index
3.z-index值没有单位就是一个正整数 默认的z-index值为0如果大家都没有z-index值 或者z-index值一样 那么谁写在HTML后面 谁在上面压着别人 定位了元素 永远压住没有定位的元素
纯手搭页面练习
1. 先分析页面结构
然后使用div和span构建出基本骨架
2. 给标签起id 和class 便于后续查找并修改样式
id 与class 的命名也要做到见名知意
3. 正儿八经的写不同的语言应该存储不同的文件
html文件、css文件、js文件
< !DOCTYPE html>
< html lang= "en" >
< head>
< meta charset= "UTF-8" >
< title> my- cnblogs< / title>
< link rel= "stylesheet" href= "myblog.css" >
< / head>
< body>
< div class = "blog-left" >
< div class = "blog-avatar" >
< img src= "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fnimg.ws.126.net%2F%3Furl%3Dhttp%253A%252F%252Fdingyue.ws.126.net%252F2022%252F0824%252F46649aa0j00rh3h630013d000i200h8p.jpg%26thumbnail%3D660x2147483647%26quality%3D80%26type%3Djpg&refer=http%3A%2F%2Fnimg.ws.126.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663942989&t=11c61aec8b4c3bf3a61a67fdbb578daa" alt= "" >
< / div>
< div class = "bolg-title" >
< span> 初学者_的博客< / span>
< / div>
< div class = "bolg-desc" >
< span> 这个人蛮厉害的< / span>
< / div>
< div class = "blog-info" >
< ul>
< li> < a href= "" > 背身单打< / a> < / li>
< li> < a href= "" > 篮下卡位< / a> < / li>
< li> < a href= "" > 三步上篮< / a> < / li>
< / ul>
< / div>
< div class = "blog-link" >
< ul>
< li> < a href= "" > 张三< / a> < / li>
< li> < a href= "" > 李四< / a> < / li>
< li> < a href= "" > 王二麻子< / 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 - 8 - 24 < / span>
< / div>
< div class = "article-desc" >
< span> 钱多事少儿老板是个笨蛋 有这种渠道告诉我！！！< / span>
< / div>
< hr>
< div class = "article-info" >
< span>
< span>
< / div>
< / div>
< div class = "article-list" >
< div class = "article-title" >
< span class = "title" > 论发财之道< / span>
< span class = "date" > 2022 - 8 - 24 < / span>
< / div>
< div class = "article-desc" >
< span> 钱多事少儿老板是个笨蛋 有这种渠道告诉我！！！< / span>
< / div>
< hr>
< div class = "article-info" >
< span>
< span>
< / div>
< / div>
< div class = "article-list" >
< div class = "article-title" >
< span class = "title" > 论发财之道< / span>
< span class = "date" > 2022 - 8 - 24 < / span>
< / div>
< div class = "article-desc" >
< span> 钱多事少儿老板是个笨蛋 有这种渠道告诉我！！！< / span>
< / div>
< hr>
< div class = "article-info" >
< span>
< span>
< / div>
< / div>
< div class = "article-list" >
< div class = "article-title" >
< span class = "title" > 论发财之道< / span>
< span class = "date" > 2022 - 8 - 24 < / span>
< / div>
< div class = "article-desc" >
< span> 钱多事少儿老板是个笨蛋 有这种渠道告诉我！！！< / span>
< / div>
< hr>
< div class = "article-info" >
< span>
< span>
< / div>
< / div> < div class = "article-list" >
< div class = "article-title" >
< span class = "title" > 论发财之道< / span>
< span class = "date" > 2022 - 8 - 24 < / span>
< / div>
< div class = "article-desc" >
< span> 钱多事少儿老板是个笨蛋 有这种渠道告诉我！！！< / span>
< / div>
< hr>
< div class = "article-info" >
< span>
< span>
< / div>
< / div> < div class = "article-list" >
< div class = "article-title" >
< span class = "title" > 论发财之道< / span>
< span class = "date" > 2022 - 8 - 24 < / span>
< / div>
< div class = "article-desc" >
< span> 钱多事少儿老板是个笨蛋 有这种渠道告诉我！！！< / span>
< / div>
< hr>
< div class = "article-info" >
< span>
< span>
< / div>
< / div> < div class = "article-list" >
< div class = "article-title" >
< span class = "title" > 论发财之道< / span>
< span class = "date" > 2022 - 8 - 24 < / span>
< / div>
< div class = "article-desc" >
< span> 钱多事少儿老板是个笨蛋 有这种渠道告诉我！！！< / span>
< / div>
< hr>
< div class = "article-info" >
< span>
< span>
< / div>
< / div>
< div class = "article-list" >
< div class = "article-title" >
< span class = "title" > 论发财之道< / span>
< span class = "date" > 2022 - 8 - 24 < / span>
< / div>
< div class = "article-desc" >
< span> 钱多事少儿老板是个笨蛋 有这种渠道告诉我！！！< / span>
< / div>
< hr>
< div class = "article-info" >
< span>
< span>
< / div>
< / div>
< / div>
< / body>
< / html>
/ * 这是简易版本博客园首页的样式文件* /
/ * 页面通用样式* /
body {
margin: 0 ;
background- color:
}
a {
text- decoration: none;
}
ul {
list - style- type : none;
padding- left: 0 ;
}
. clearfix: after {
content: '' ;
display: block;
clear: both;
}
/ * 左侧页面样式* /
. blog- left {
background- color:
float : left;
position: fixed;
height: 100 % ;
width: 20 % ;
left: 0 ;
top: 0 ;
}
. blog- avatar {
border: 5px solid white;
height: 200px;
width: 200px;
border- radius: 50 % ;
margin: 20px auto;
overflow: hidden;
}
. blog- avatar img {
max - width: 100 % ;
}
. blog- title, . blog- desc {
color: darkgray;
font- size: 18px;
text- align: center;
padding: 10px;
}
. blog- link a, . blog- info a {
color: darkgray;
font- size: 28px;
}
. blog- link a: hover, . blog- info a: hover {
color: white;
}
. blog- link ul, . blog- info ul {
text- align: center;
margin: 100px auto;
}
/ * 右侧页面样式* /
. blog- right {
float : right;
width: 80 % ;
}
. article- list {
background- color: white;
margin: 20px 40px 20px 10px;
box- shadow: 10px 10px 10px rgba( 0 , 0 , 0 , 0.8 ) ;
}
. article- title {
border- left: 5px solid red;
}
. article- title . title {
font- size: 32px;
padding- left: 16px;
}
. article- title . date {
float : right;
font- weight: bolder;
margin: 10px 20px;
}
. article- desc {
font- size: 18px;
/ * padding- left: 23px; * /
/ * padding- top: 10px; * /
/ * padding- bottom: 10px; * /
padding: 10px 0 10px 23px;
}
. article- info span {
padding: 20px;
}
JavaScript简介
1. 跟java没有关系 蹭热度
2 . JavaScript与ECMAScript区别
3. 版本迭代
4 . JavaScript是一门编程语言( NodeJS)
5 . html页面两种引入js的方式
6. 两种注释语法
//
/ ** /
7. 建议的结束符号是分号
JS变量与常量
"""
支持编写js代码的地方
1.pycharm
2.浏览器
"""
在JS中声明变量和常量都需要使用关键字
var: 全局有效
let: 如果在局部名称空间中使用 那么仅在局部名称空间有效
const: 定义常量
JS也是动态类型: 变量名绑定的数据值类型不固定
var name = 'jason'
name = 123
name = [ 11 , 22 , 33 , 44 ]
JS数据类型之数值类型
"""
在js中查看数据类型可以使用 typeof
"""
在js中整型浮点型统称为数值类型number
parseInt( )
parseFloat( )
NaN: Not A Number 不是一个数字
JS数据类型之字符串类型
字符串string
var name = 'jason'
var name = "jason"
var name = `jason` 模板字符串
内置方法
1 . js中涉及到字符串拼接 推荐使用+
每日小作业联系
1. ascii , gbk, utf- 8 的区别
ascii ：把所有的字母的大小写，各种符号用二进制来表示，1bytes代表一个字符
Unicode：为了统一世界各国语言的不同，统一用2 个bytes 代表一个字符，特点：速度快，但浪费空间
utd8：为了改变Unicode的这种缺点，规定一个英文字符用一个字节表示，一个中文字符用三个字节表示，特点：节省空间，速度慢
gbk：是中文的字符编码，用2 个字节代表一个字符
2. 请用至少两种方式实现m与n值交换m= 10 , n= 5
第一种 m, n= n, m
第二种 x= m m= n n= x
3. 什么是深浅拷贝
浅拷贝: 对于浅拷贝，字典、列表、元组等类型，它们只拷贝第一层地址
深拷贝: 对于深拷贝，字典、列表、元组等类型，它里面嵌套多少层，就会拷贝多少层出来，但是最底层的数字和字符串地址不变
4. 什么是HTTP协议
HTTP协议, 超文本传输协议, 规定了服务端与浏览器数据传输的数据格式
5 . form表单中都有哪些标签及作用
input 标签的标签属性：
type : 指定一个值，表示是什么类型的表单元素。
text: 单行文本输入框
value：是控制传入服务器的值
password: 密码输入框
placeholder: 提示语
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）