HTML5基础知识2
# 第二天课程
## 1.CSS布局..
- 默认情况下，所有的网页标签都在 **标准流**布局中
从上到下，从左到右
- **脱离标准流**的方法有:
float 属性 ( 让指定的标签浮动到父标签的左边-left或者右边-right )
position 属性 和 left、right、top、bottom 属性值
### 1.Float 浮动属性
**Float:**
可以指定的 **子标签浮动在父标签**的左边和右边
**注意：**所有的标签一旦脱离标准流， 标签的类型就会自动变成 **行内-块级**标签（行内-块级：同一行内可以存在多个标签，并可以设计标签的宽和高）
**Float：** 属性的常用值有
- **left**： `脱离标准流`，浮动在父标签的最左边
- **right**： `脱离标准流`，浮动在父标签的最右边
**案例：**
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Float属性</title>
<!--
Float:
可以让子标签浮动在父标签的左边和右边
注意：所有的标签一旦脱离标准流， 标签的类型就会自动变成行内-块级标签
-->
<style>
#main{
width:400px;
height:300px;
background-color:red;
}
.test1{
background-color:blue;
/*float浮动*/
float:left;
/*行内块级标签*/
width: 100px;
height:30px;
}
.test2{
background-color:plum;
/*float浮动*/
float:right;
}
.test3{
background-color:green;
}
li{
float: left;
/*display: inline-block;*/
list-style: none;
}
</style>
</head>
<body>
<div id="main">
<div class="test1">
左边
</div>
<div class="test3">标签流布局</div>
<div class="test2">
右边
</div>
</div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
</html>
```
### 2.Position 定位属性
**属性值：**
**用法：**
**子绝父相** :在子标签指定绝对布局（absolute）在父标签指定相对布局（relative）
**案例：**
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02-position</title>
<!--子绝父相-->
<style>
*{
margin: 0;
padding: 0;
}
#main{
background-color: red;
width: 300px;
height: 300px;
/*相对(只要这个不是static就行)*/
position: relative;
margin-top: 20px;
}
.test1 {
background-color: yellow;
/*每一个标签内部都会有一个position的属性*/
/*position: static;*/
/*绝对*/
position: absolute;
/*定位*/
left: 30px;
top: 40px;
}
.test2{
background-color: green;
}
.test3 {
background-color: yellow;
/*绝对*/
position: absolute;
/*定位*/
bottom: 0px;
right: 0px;
}
.top{
background-color: purple;
/*相对于浏览器定位*/
position: fixed;
top: 0px;
left: 30px;
right: 30px;
}
.bottom{
background-color: blue;
/*相对于浏览器定位*/
position: fixed;
bottom: 0px;
left: 30px;
right: 30px;
}
</style>
</head>
<body>
<div id="main">
<div class="test1">
定位1
</div>
<div class="test2">
定位2
</div>
<div class="test3">
定位3
</div>
</div>
<div class="top">top</div>
<div class="bottom">bottom</div>
</body>
</html>
```
## 2.标签的居中..
### 2.1水平居中
- **行内标签**和 **行内-块级标签**水平居中
在父标签中设计： `text-align:center; ` 属性。是对 **整个标签**水平居中
- **块级标签**水平居中
1.在父标签中设计：text-align:center; 属性。 是对子标签中的 **内容（文字..）**水平居中
2.在自身标签中设计： `margin : 0px auto ; ` 属性。是对 **整个块级标签**水平居中
**案例：**
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01-水平居中</title>
<style>
#main{
width: 500px;
height: 400px;
background-color: red;
/*行内标签居中*/
text-align: center;
}
.test1{
background-color: yellow;
}
.test2{
background-color: blue;
width: 200px;
/*块级标签居中*/
/*margin-left: 150px;*/
margin: 0 auto;
}
.test3{
background-color: plum;
/*行内块级标签居中*/
text-align: center;
}
</style>
</head>
<body>
<div id="main">
<button class="test3"> 行内-块级标签</button>
<p class="test2">块级标签</p>
<span class="test1">行内标签代表</span>
</div>
</body>
</html>
```
### 2.2垂直居中
- **行内标签**和 **行内-块级标签**垂直居中
在父标签中设计： `line-heigth:xx px; ` 属性。是对 **整个标签**水平居中
- **块级标签**垂直居中
1.在父亲标签中设计： `line-heigth:xx px;` 属性。 仅仅使 **文字** 在 **父标签**垂直居中
2.在自己标签中设计： `line-heigth:xx px; ` 属性。 仅仅使 **文字**在 **自己标签**垂直居中
**3.定位**
1. `子绝父相` ;
2.在子标签中设计相对 `left:50% ; top:50% ;` ;
3.对子标签进行平移 `transform:translate(-50% , -50%)`
**案例：**
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02-水平居中和垂直居中</title>
<style>
#main{
width: 500px;
height: 400px;
background-color: red;
/*行内标签居中*/
text-align: center;
/*垂直居中，设计行高*/
line-height: 400px;
position: relative;
}
.test1{
background-color: yellow;
}
.test2{
background-color: blue;
width: 200px;
/*块级标签居中*/
/*margin-left: 150px;*/
margin: 0 auto;
height: 200px;
/*垂直居中，设计行高*/
line-height: 200px;
/*垂直居中，通过定位*/
position: absolute;
/*top: 100px;*/
/*left: 150px;*/
top:50%;
left: 50%;
transform:translate(-50% , -50%);
}
.test3{
background-color: plum;
/*行内块级标签居中*/
text-align: center;
}
</style>
</head>
<body>
<div id="main">
<!--<button class="test3"> 行内块级标签</button>-->
<p class="test2">块级标签</p>
<!--<span class="test1">
行内标签代表
</span>-->
</div>
</body>
</html>
```
## 3.百度首页..
### 3.1新建一个项目（百度首页）
### 3.2引入外部样式
### 3.3盖房子（html）
#### 1.搭建整体框架
#### 2头部内容和结构
糯米 新闻 hao123 地图 视频 贴吧 登录 设置 更多产品 9
!
#### 3中间内容和结构
#### 4尾部内容和结构
### 3.4装修房子(CSS)
#### 1.头部样式
- 默认设计
```css
/ *默认*/
*{
margin: 0;
padding: 0;
}
```
- 头部子标签向右对齐
```css
#top{
/ *头部子标签向右对齐*/
text-align: right;
}
```
- 设计上下外边框(margin)
```css
#top{
/ *设计上下外边框*/
margin-top: 20px;
margin-bottom: 15px;
}
```
- 设计文字的样式（间距 , 颜色，粗细，字体，大小）
```css
#top a{
margin-right: 8px;
color: black;
/*粗细*/
font-weight: 300;
/*字体*/
font-family: Arial;
font-size: 15px;
}
#top a.no-weight{
/*粗细*/
font-weight: 100;
}
```
- 设计更多产品的样式（颜色，背景，内去除下划线，内边距）
```css
#top a.more-product{
color: white;
background-color: blue;
/*去除下划线*/
text-decoration: none;
/*内边距*/
padding:4px;
}
```
#### 2.搜索框的样式
- 设计百度Logo图片的大小
```css
/ *logo*/
#middle .img-logo img{
width: 270px;
height: 129px;
}
```
- Logo水平居中
```css
#middle .img-logo{
/*logo水平居中*/
text-align: center;
}
```
- 设计整个搜索框的大小和水平居中
```css
#middle .ser{
background-color: red;
width: 600px;
height: 35px;
/*块级标签水平居中*/
margin: 0 auto;
margin-bottom: 30px;
}
```
- 给搜索框中的input标签添加浮动
```css
#middle .ser .int{
float: left;
}
#middle .ser .btn{
float: left;
}
```
- 设计编辑输入框的大小和改变盒子大小默认的计算方式等
```css
#middle .ser .int{
float: left;
width: 500px;
height: 100%;
/*添加盒子的边框*/
border: 1px solid #dddddd;
/*改变盒子的大小的计算方式*/
box-sizing: border-box;
font-size: 15px;
padding-left: 15px;
}
```
- 给input标签添加伪类选着器
```css
#middle .ser .int:hover{
/*border: 1px solid blue;*/
}
#middle .ser .int:focus{
/*去除外边线*/
outline: none;
/*重新添加外边线*/
border: 1px solid #33dddd;
}
```
- 设计百度一下的宽高，背景颜色和字体大小
```css
#middle .ser .btn{
float: left;
border: 0;
width: 100px;
height:100%;
color: white;
font-size: 16px;
background-color: #3385ff;
}
```
#### 3.图片样式
- 设计图片的大小和间距
```css
#middle .img-ser img{
width: 130px;
/*图片间距*/
margin: 0 5px;
margin-bottom: 10px;
}
```
- 设计图片水平居中
```css
#middle .img-ser{
/*水平居中*/
text-align: center;
}
```
- 设计图片的圆角
```css
#middle .img-ser img{
...
border-radius: 8px;
}
```
- 设计图片的伪类（不透明）
```css
#middle .img-ser img:hover {
/*设计透明度，0是不透明 100是全透明*/
opacity: 0.5;
}
```
#### 4.尾部样式
- 设计尾部水平居中和上下间距
```css
/ *尾部*/
#bottom{
margin-top: 60px;
margin-bottom: 50px;
/*水平居中*/
text-align: center;
}
#bottom .bottom-top{
margin-bottom: 8px;
}
```
- 设计所有的字体颜色
```css
#bottom p{
color: gray;
}
#bottom a{
color: gray;
}
```
- 设a标签之间的间距
```css
#bottom a{
...
margin: 0 6px;
}
```
#### 5.背景样式
- 给body添加背景
```
body{
/*添加背景*/
background: url("../image/bg.jpg");
}
```
- 给背景设计尺寸（cover 跟随变化）
```
body{
...
/*设计背景尺寸*/
background-size: cover;
}
```
- 更换百度logo图片
```
<!--百度LOGO-->
<div class="img-logo">
<img src="data:image/logo_white_ee663702.png" alt="百度logo">
</div>
```
- 修改头部的高度和背景
```
/ *头部*/
#top{
/*头部子标签向右对齐*/
text-align: right;
/*设计上下外边框*/
/*margin-top: 20px;*/
margin-bottom: 15px;
/*头部高度和背景*/
height: 45px;
background-color: rgba(0,0,0,0.4);
}
```
- 头部文字垂直居中和字体颜色
```
#top{
...
/*文字垂直居中*/
line-height:45px;
}
#top a{
...
color: white;
}
```
## 4.登陆界面..
### 4.1新建一个项目并引入样式
### 4.2盖房子（HTML）
#### 1.搭建整体框架
#### 2.头部内容和结构
#### 3.输入用户名和密码
#### 4.下次自动登陆和忘记密码
#### 5.登陆和注册
#### 6.尾部
### 4.3装修房子(CSS)
#### 1.设计背景样式
```css
/*默认配置*/
*{
margin: 0;
padding: 0;
}
body {
/*设计背景图片*/
background: url("../image/bg.jpg");
/*背景图片跟随缩放*/
background-size: cover;
}
```
#### 2.设计面板样式
- 设计面板背景颜色
```css
/ *面板*/
#panel {
background-color: white;
}
```
- 改变面板标签类型为：行内块级标签
```css
/ *面板*/
#panel {
...
/*改变标签类型*/
display: inline-block;
}
```
- 面板居中显示，面板的子标签靠左
```css
body {
...
/*面板居中*/
text-align: center;
}
/ *面板*/
#panel {
...
/*靠左*/
text-align: left;
}
```
- 设计面板的上边距
```css
/ *面板*/
#panel {
...
/*上边距*/
margin-top: 100px;
}
```
- 设计面板的内边距
```css
/ *面板*/
#panel {
...
/*内边距*/
padding: 20px;
}
```
- 设计面板的圆角
```css
/ *面板*/
#panel {
...
/*圆角*/
border-radius: 5px;
}
```
- 设计面板的快阴影
```css
/ *面板*/
#panel {
...
/*块阴影效果: 0 0 代表是四周都要给阴影，70是阴影的范围*/
box-shadow: 0 0 70px white;
}
```
#### 3.面板头部样式
```css
#panel-top {
/*水平居中*/
text-align: center;
/*外边距*/
margin-bottom: 15px;
/*下边框*/
border-bottom: 1px solid #dddddd;
/*内边距*/
padding-bottom: 15px;
/*字体的颜色,h2会继承该字体颜色*/
color: gray;
}
```
#### 4.面板中间输入框样式
- 设计用户名与密码盒子之间的间距和高度
```css
#panel-center .user-pwd {
background-color: red;
/*用户与密码之间的间距*/
margin-bottom: 15px;
height: 38px;
}
```
- 定位用户名与密码左边的图片
```css
#panel-center .user-pwd {
...
/*定位：父相*/
position: relative;
}
#panel-center .user-pwd img{
/*定位:子绝*/
position: absolute;
left: 6px;
top:5px;
}
```
- 设计输入框的宽高
```css
#panel-center .user-pwd input{
width: 100%;
height:100%;
}
```
- 修改盒子默认大小的计算方式
```css
#panel-center .user-pwd input{
/*盒子大小的计算方式*/
box-sizing: border-box;
}
```
- 设计输入框内边距，圆角和边界
```css
#panel-center .user-pwd input{
padding-left: 38px;
border-radius: 3px;
border: 1px solid #dddddd;
}
```
- 设计输入框聚焦时样式
```css
#panel-center .user-pwd input:focus {
/*去掉外边框*/
outline: none;
/*外边框*/
border: 1px solid orange;
/*阴影效果*/
box-shadow: 0 0 5px orange;
}
```
#### 5.面板中间登陆与忘记密码样式
- 忘记密码右浮动，和该面板的下边距
```css
#setting .pull-rigth{
/ **右浮动*/
float: right;
}
#setting{
/ **下边距*/
margin-bottom: 10px;
}
```
- 统一字体颜色 ,去掉下划线和字体大小
```css
#setting a{
color: darkgrey;
/*去除下划线*/
text-decoration: none;
font-size: 13px;
}
```
#### 6.面板中间登陆样式
```css
#btn-login{
width: 100%;
height: 36px;
background-color: orange;
/*边框*/
border: 0px;
margin-bottom: 15px;
/*圆角*/
border-radius: 5px;
color: white;
font-size: 16px;
}
/*聚焦时*/
#btn-login:focus{
/*去除外边框*/
outline: none;
}
```
#### 7.面板中间注册样式
```
#reg{
/*水平居中*/
text-align: center;
margin-bottom: 15px;
}
#reg a{
/*去除下划线*/
text-decoration: none;
color: orange;
font-size: 15px;
}
```
#### 8.面板尾部样式
- 设计尾部面板和图片的高度
```
#panel-bottom{
height: 50px;
}
#panel-bottom img{
height: 40px;
}
```
- 设计文字垂直居中
```
#panel-bottom{
...
/*文字垂直居中*/
line-height: 50px;
}
```
- 设计图片垂直居中
```
#panel-bottom img{
....
/*图片垂直居中*/
vertical-align: middle;
}
```
## 5.宠物店..
#### 1.新建一个项目并引入样式
#### 2.搭建整体框架
#### 3.设计背景样式
```
*{
margin: 0;
padding: 0;
}
body{
/*设计背景，平铺效果*/
background: url("../image/pattern.gif");
}
```
#### 4.设计头部高度和背景
```
#top{
background-color: red;
height: 3px;
}
```
#### 5.实现头部导航栏的内容和结构
home about service gallery contact 5
#### 6.设计头部导航栏的样式
- 设计a标签的样式
```
a{
color: white;
/*去掉下划线*/
text-decoration: none;
}
```
- 清楚li标签的圆点
```
ul{
/*清楚圆点*/
list-style: none;
}
```
- 改变标签类型
```
#nav ul li{
/*改变标签类型*/
display: inline-block;
}
```
- 让标签居中
```
#nav{
/*让子标签居中*/
text-align: center;
}
```
- 设计a标签的宽高，字体大小，改变a标签的类型
```
#nav ul li a {
height: 40px;
width: 200px;
/*改变标签类型*/
display: inline-block;
font-size: 30px;
}
```
- 设计文字垂直居中
```
#nav ul li a {
...
/*垂直居中*/
line-height: 40px;
}
```
- 设计默认第一条item选中
1.改html布局 ,给第一个a标签添加一个class="selected"
```
<!--头部导航栏-->
<div id="nav">
<ul>
<!--添加一个-->
<li><a href="" class="selected">home</a></li>
<li><a href="">about</a></li>
<li><a href="">service</a></li>
<li><a href="">gallery</a></li>
<li><a href="">contact</a></li>
</ul>
</div>
```
2.设计样式
```
#nav ul li a.selected {
background-color: white;
color: black;
}
```
- 给a标签添加伪类
```
#nav ul li a:hover{
background-color: white;
color: black;
}
```
- 设计a标签的外边距
```
#nav ul li a {
/ *外边框*/
margin: 0 8px 8px 0;
}
```
#### 7.导入字体样式
css导入自定义字体 : http://blog.csdn.net/qq_17034925/article/details/53585153
```
/*导入字体*/
@font-face {
font-family: BebasNeue-webfont; /**字体的名称*/
src: url('../fonts/BebasNeue-webfont.ttf'); /**字体文件的位置*/
}
body{
/*应用字体*/
font-family: BebasNeue-webfont;
}
```
#### 8.实现中间列表内容和结构
#### 9.设计中间列表样式
- 修改love标签类型，背景颜色，宽度和重写父亲的字体
```
#content .love{
background-color: white;
/*该表标签类型*/
display: inline-block;
/*给图片宽度*/
width: 382px;
/*重新设计字体样式*/
font-family: sans-serif;
}
```
- 设计文字上下10px间距和首行缩进
```
#content .love p{
/*上下间距*/
margin: 10px 0;
/*首行缩进*/
text-indent: 28px;
}
```
- 设计read more的样式
```
#content .love button{
width: 120px;
height: 40px;
font-size: 23px;
color: #fff;
/*去除边框*/
border: 0;
/*设计背景*/
background-color: orange;
/*圆角*/
border-radius: 5px;
}
```
- 给read more 添加伪类
```
#content .love button:hover{
background-color: black;
color: white;
}
```
#### 10.实现多列表的内容和结构
复制多个item
#### 11.设计列表的样式
```
#content{
/*整个列表居中*/
text-align: center;
margin-top: 100px;
background-color: white;
}
#content .love{
...
/*重写父亲的属性*/
text-align: left;
/*设计盒子的间距*/
margin: 20px;
}
```
#### 12.实现底部的内容和结构
#### 12.设计底部的样式
```
#footer{
/*标签居中*/
text-align: center;
margin: 20px 0;
}
#footer ul li {
/*该表标签的类型*/
display: inline-block;
}
#footer ul li img{
/*图片之间的间距*/
margin: 5px 5px;
}
#footer ul li img:hover {
/*设计透明度*/
opacity: 0.5;
}
#footer h2{
color: white;
}
```
#### 13.响应性（自适应）布局
```
/*监听设备屏幕的最大值*/
@media screen and (max-width: 1092px){
/*如果屏幕设备的最大宽度等于1092px时，使用下面的样式*/
#nav ul li a {
width: 150px;
font-size: 25px;
}
}
/*监听设备屏幕的最大值*/
@media screen and (max-width: 860px){
/*如果屏幕设备的最大宽度等于860px时，使用下面的样式*/
#nav ul li a {
width: 90px;
font-size: 20px;
}
}
/*监听设备屏幕的最大值*/
@media screen and (max-width: 546px){
/*如果屏幕设备的最大宽度等于546px时，使用下面的样式*/
#nav ul li a {
width: 70px;
font-size: 15px;
}
#content{
margin-top: 60px;
}
#content .love{
width: 360px;
}
}
```
## 6.初识BootStrap
### 6.1什么是BootStarp
[Bootstrap](http://www.bootcss.com/)是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目
### 6.2项目集成BootStrap
### 6.3使用BootStrap
- 使用BootStrap中的样式控制button的样式
- 使用自己的样式控制button的样式
- 使用BootStrap 进度条 组件
- 使用BootStrap 中的文字图标 组件
## 8.总结：
1. CSS布局：
2. 标签的居中：
3. 百度首页：
4. 登陆界面：
5. 宠物店：
6. BootStrap入门：
HTML5基础知识2相关推荐
- html5基础知识文档,HTML5基础知识（1）
原标题:HTML5基础知识(1) html5是万维网的核心语言.标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改.2014年10月29日,万维网联盟宣布,经过接近8年的艰苦努力, ...
- HTML5 基础知识
HTML5 基础知识 什么是 HTML? HTML 是一种超文本标记语言,"超文本"就是指页面内可以包含图片.链接.深职音乐.视频.程序等非文字元素 HTML 不是一种编程语言 H ...
- html5哪个属性规定输入字段是必填的,HTML5基础知识习题及答案
原标题:HTML5基础知识习题及答案 1. HTML5 之前的HTML版本是什么? 答: HTML 4.01 2. HTML5 的正确doctype是? 答: 3. 在 HTML5 中,哪个元素用于组 ...
- html5基础知识，期末复习大全
目录 1.1 Web系统体系结构 1.C/S(即Client/Server)结构 1.2 浏览器 1.排版引擎(Rendering Engine) 2.Javascript引擎 1.3 Web相关概 ...
- Html5基础知识笔记
学习笔记,供个人快速查阅使用!! 公开分享,不喜勿喷! Html5基础介绍 h1标签 <h1>Hello World</h1> p标签 如果想在网页上显示文章,这时就需要< ...
- HTML5基础知识学习笔记
1.Html5基础讲解 1.1HTML5基础标签: head:头标签,一般会将一些网页的基本配置和文件引用在head中设置: body:内容标签,里面是整个网页要展示内容部分: 1.2HTML5标题: ...
- HTML5基础知识汇总
HTML是Hypertext Markup Language的缩写,中文翻译为:超文本标记语言 HTML文档结构和基本语法 HTML5基本语法 扩展名.html/.htm 内容类型(ContentTy ...
- 超详细、超清楚的HTML5基础知识
本文从最基本HTML5知识说起,让各位看官老爷能够从零开始学习!!! 不渴望能够一跃千里,只希望每天能够前进一步 基本知识 web前端三大技术: (1)html:结构 (2)css:样式 (3 ...
- HTML5 基础知识（四）
关于web图像: 1.格式与下载速度:当前web上应用最广泛的三种格式gif.png.jpeg. JPEG格式适用于彩色照片,因为它包含大量的颜色并进行合理的压缩,采用这种格式保存的文件相对较小,全彩 ...
- HTML5 基础知识（二）
<!DOCTYPE html> <html lang="en"> <head><meta charset="utf-8" ...
最新文章
- jvm性能调优实战 -51修复栈内存区域内存溢出问题 StackOverFlow
- 完善Linux/UNIX审计 将每个shell命令记入日志
- WB, IHC实验问题总结与处理方案
- JAVA数据结构与算法【稀疏数组】
- jQuery中$(document).ready()和window.onload的区别？
- python 生成器_提高你的Python: 解释‘yield’和‘Generators（生成器）’
- iOS多线程编程之锁的理解
- 华为获颁中国首个5G基站设备进网许可证：可支持中国规模部署；IBM推出新一代企业平台Z15；Testin最新AI产品发布……...
- 用计算机运行搜索Ip的方法,怎样查ip地址 几种查ip地址的方法【图文】
- Google插件switchysharp的用法
- python 内置函数_Python简介，第6章–内置函数和方法
- Mac下tomcat启动报错Cannot run program。。。 Permission denied解决办法
- Oracle SQL
- 计算机磁盘管理看不到盘符,Win10系统本地磁盘盘符不见了的解决方法
- [附源码]java毕业设计归元种子销售管理系统
- 族蚂智能小程序名片，营销快人一步。
- 更加简便的使用VSS
- Macsome iTunes Converter Mac(DRM移除和音乐转换器)
- opencv2计算机视觉编程手册(中文)pdf
- 江城子·密州出猎 【宋代】苏轼
热门文章
- matlab心电显示,请问如何在GUI界面中打开并显示心电信号
- Host Windows 配置
- python列表的操作
- 伽罗华有限域_伽罗华域(Galois Field，GF，有限域)乘法运算 - MengBoy的专栏 - CSDN博客...
- 呦呦鹿鸣，食野之苹-- 给新生儿的一封信
- 计算机开机主机无法启动,手把手教你电脑无法启动怎么办
- 中国的程序员大部分都是diao丝，说白了就是农村进城打工的，有背景或有钱的基本都不会做程序员。
- python爬取网易云飙升榜数据
- This scheduler instance (...) is still active but was recovered by another instance in the cluste
- chrome最简单的多开方法