盒子模型
所有的标签都可以看成是一个快递盒
1.两个快递盒之间的距离 标签之间的距离 外边距(margin)
2.快递盒的厚度 标签的边框 边框(border)
3.盒子内物体距离盒子内壁 内部文本与边框的距离 内边距(padding)
4.物体自身的大小 标签内部的内容 内容(content)
需要掌握的操作
margin-top: 20px;
margin-left: 100px;
margin-right: 100px;
margin-bottom: 100px;
body标签自带8px的外边距
margin:0; 简写形式 作用于上下左右
margin: 10px 20px; 上下 左右
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 {
height: 50px;
width: 50px;
border: 5px solid gold;
border-radius: 50%;
overflow: hidden;
}
div img {
max-width: 100%;
}
定位
static(静态)
所有的标签默认都不能直接通过定位修改位置 必须要切换成下面三种之一
relative(相对定位)
相对于标签原来的位置做定位
absolute(绝对定位)
基于已经定位过的父标签做定位(如果没有父标签则以body为参照)
fixed(固定定位)
相对于浏览器窗口做定位
z-index
浏览器界面其实是一个三维坐标系 z轴指向用户
纯手搭页面练习
1.先分析页面结构
然后使用div和span构建出基本骨架
2.给标签起id和class便于后续查找并修改样式
id与class的命名也要做到见名知意
3.正儿八经的写不同的语言应该存储不同的文件
html文件、css文件、js文件
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>my_blog</title>
<link rel="stylesheet" href="my_blog.css">
</head>
<body>
<div class="blog-left">
<div class="blog-avatar">
<img src="https://img0.baidu.com/it/u=3814667313,3000795201&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="">
</div>
<div class="blog-title">
<span>怼怼啊的博客</span>
</div>
<div class="blog-desc">
<span>这个人很漂亮</span>
</div>
<div class="blog-info">
<ul>
<li><a href="">微信</a></li>
<li><a href="">微博</a></li>
<li><a href="">QQ</a></li>
</ul>
</div>
<div class="blog-link">
<ul>
<li><a href="">#python</a></li>
<li><a href="">#golang</a></li>
<li><a href="">#java</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-29</span>
</div>
<div class="article-desc">
<span>管你铁布衫金钟罩</span>
</div>
<hr>
<div class="article-info">
<span>boom boom boom </span>
<span>ping pong pow</span>
</div>
</div>
<div class="article-list">
<div class="article-title">
<span class="title">清风调</span>
<span class="date">2022-8-29</span>
</div>
<div class="article-desc">
<span>管你铁布衫金钟罩</span>
</div>
<hr>
<div class="article-info">
<span>boom boom boom </span>
<span>ping pong pow</span>
</div>
</div>
<div class="article-list">
<div class="article-title">
<span class="title">清风调</span>
<span class="date">2022-8-29</span>
</div>
<div class="article-desc">
<span>管你铁布衫金钟罩</span>
</div>
<hr>
<div class="article-info">
<span>boom boom boom </span>
<span>ping pong pow</span>
</div>
</div>
<div class="article-list">
<div class="article-title">
<span class="title">清风调</span>
<span class="date">2022-8-29</span>
</div>
<div class="article-desc">
<span>管你铁布衫金钟罩</span>
</div>
<hr>
<div class="article-info">
<span>boom boom boom </span>
<span>ping pong pow</span>
</div>
</div>
<div class="article-list">
<div class="article-title">
<span class="title">清风调</span>
<span class="date">2022-8-29</span>
</div>
<div class="article-desc">
<span>管你铁布衫金钟罩</span>
</div>
<hr>
<div class="article-info">
<span>boom boom boom </span>
<span>ping pong pow</span>
</div>
</div>
<div class="article-list">
<div class="article-title">
<span class="title">清风调</span>
<span class="date">2022-8-29</span>
</div>
<div class="article-desc">
<span>管你铁布衫金钟罩</span>
</div>
<hr>
<div class="article-info">
<span>boom boom boom </span>
<span>ping pong pow</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;
}
.clearfix:active {
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: 150px;
width: 150px;
border-radius:50%;
margin: 20px auto;
overflow: hidden;
}
.blog-avatar img{
max-width: 100%;
}
.blog-title,.blog-desc{
color: blue;
font-size: 18px;
text-align: center;
padding: 10px;
}
.blog-link a,.blog-info a{
color: darkcyan;
font-size: 18px;
}
.blog-link a:hover ,.blog-info a:hover{
color: white;
}
.blog-link ul ,.blog-info ul{
text-align: center;
margin: 50px auto;
padding: 10px;
}
/*页面右侧样式*/
.blog-right{
float: right;
width: 80%;
}
.article-list{
background-color: #eeeeee;
margin: 10px 20px 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: 24px;
padding-left:4px ;
}
.article-title .date{
float: right;
font-weight: bolder;
margin: 8px 15px;
}
.article-desc {
font-size: 18px;
/*padding-left: 20px;*/
/*padding-top: 8px;*/
/*padding-bottom: 10px;*/
padding: 10px 0 10px 23px;
}
.article-info{
padding-left:24px ;
}
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中涉及到字符串拼接 推荐使用
扫一扫
4009
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
