目录
盒子模型
所有的标签都可以看成是一个快递盒盒~
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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<span>#百万大奖</span>
</div>
</div>
</div>
</body>
</html>
/*这是简易版本博客园首页的样式文件*/
/*页面通用样式*/
body {
margin: 0;
background-color: #eeeeee;
}
a {
text-decoration: none;
}
ul {
list-style-type: none;
padding-left: 0;
}
.clearfix:after {
content: '';
display: block;
clear: both;
}
/*左侧页面样式*/
.blog-left {
background-color: #4e4e4e;
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:提示语