制作简单的 随机图片 api这里以 "腾讯云"为例.需要有 php 环境
上传图片在存储桶中创建一个文件夹,将准备的随机图片上传到创建的这个文件夹中, 可以通过网页上传, 也可以通过工具.
创建 网站
创建 文件在网站根目录中创建 img.txt 和 index.php 两个文件.
在 index.php 中填写随机图片脚本
12345678910111213141516171819202122232425262728293031323334<?php//存有美图链接的文件名img.txt$filename = "img.txt";if(!file_exists($filename)){ die('文件不存在');}//从文本获取链接$pics = [];$fs = fopen($filename, "r");while(!feof($fs)){ $line=trim(fgets($fs)); if($line!=''){ ...
一、 CSS 语法 及 注释1. 语法CSS 规则有两个主要部分，一个 选择器 和 一个或多个 声明：
选择器：指定 CSS 规则适用于 HTML 页面中的哪个元素。
声明：决定了元素在网页上的格式。
每个声明都包含一个属性和一个值，这些值和值之间用冒号（:）分隔并以分号（;）结尾，并且声明组用花括号括起来{}。
注意： 虽然 CSS 属性名称和许多属性值都不区分大小写。但是 CSS 选择器是区分大小写，例如：.maincontent与.mainContent是两个不同的 class 类选择器，是区分大小写的。
2. 注释CSS 注释以开头/*，以结束*/
12345/* 这是一段注释 */p { font-size: 18px; text-transform: uppercase;}
二、 基础 选择器选择器是 CSS 最重要的方面之一，因为它们用于选择网页上的元素，以便可以设置样式。
1，基本选择器语法
选择器
类型
功能描述
*
通配选择器
选择文档中所有 HTML 元素
E
元素选择器
选择指定类型的 HTML 元素
#id
I ...
一、 字体属性
属性
含义
说明
font-size
大小
常用单位 px，默认为 16px，
font-family
字体
多个字体时要用“，”隔开，两个单词以上字体名要用引号
font-weight
粗细
正常字体 400，加粗 700，没有单位
font-style
样式
italic 为 斜体，normal 为正常字体
font
简写
顺序不能更改，大小和字体不能省略
1. 字体 font-family
font-familyCSS 属性允许您设置文本内容的字体系列名称，字体使用的优先级列表。
font-family属性可以包含多个字体名称作为后备字体，字体之间用 “，”隔开
如果字体系列的名称超过一个单词，它必须用引号引起来，像"Times New Roman"
123p { font-family: "Microsoft YoHi", Arial， Helvetica；;}
2. 字体大小 font-size
font-size属性设置元素文本内容的字体大小，在浏览器中默认的 ...
一、CSS 引入方式
样式表
优点
缺点
使用方法
控制范围
外部样式表
结构与样式完全分离
需要引入
头部 link 标签引入
多个页面
内部样式表
结构与样式部分分离
没有彻底分离
头部 style 标签中
一个页面
行内样式表
书写方便，权重高
结构样式混乱
标签中
一个标签
1. 内部样式表
内部样式表： 将样式写在 HTML 页面 hand 标签的 style 标签中
123456789101112131415<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> div { text-indent: 32px; } </style> </head> <body> <div>三生三世十里桃花，一心一意百 ...
一、 元素分类
元素类型
元素排列
设置模式
默认宽度
包含
块级元素
一行只能放一个
可以设置宽高
容器的 100%
容器级可以包含任何标签
行内元素
一行可以放多个
不能设置宽高
本身内容的宽度
容纳文本或其他行内元素
行内块元素
一行可以放多个
可以设置宽高
本身内容的宽度
1. 块元素常见的块元素有 <h1> ~ <h6>、<p> 、<div>、<ul>、<ol>、<li>等
块元素的特点：
独占一行
高度、宽度、外边距以及内边距都可以控制
宽度默认是容器（父级元素）的 100%
可以看做一个容器，可以放其他块元素或行内元素
注意：
文字类元素内不能使用快级元素，如 p 元素 h1 ~ h6 元素
2. 行内元素行内元素 也叫 内联元素，常见的有 <a>、<strong>、<b>、<em>、<span>等
行内元素的特点：
相邻的行内元素在一行上，一行可以显示多个
不能设置宽、高
默认宽度是它本身内容 ...
一、 背景
属性
作用
值
background-color
背景颜色
预定义颜色值、十六进制、RGB 代码
background-image
背景图片
url(图片路径)
background-repeat
是否平铺
repeat、no-repeat、repeat-x、repeat-y
background-position
背景位置
x、y 坐标
background-attachment
背景附着
scroll（滚动）、fixed（固定）
背景属性简写
颜色 url(图片路径) 平铺 固定 位置
背景透明度
背景颜色透明
background: rgba(0,0,0,.3)
1. 背景颜色（background-color）语法格式：
1background-color: 颜色;
一般情况下，元素背景默认颜色为 <mark> transparent（透明） </mark>，也可以手动设置为透明
2. 背景图片 （background-image）background-image 常用于 logo 或者 超大 ...
一、 盒子模型
盒子模型： 就是把 HTML 页面中的布局元素看做一个矩形盒子，也就是能装内容的容器。css 盒子模型本质上时一个盒子，封装周围的 HTML 元素，它包括表框、内边距、外边距 和 实际内容。
去除无序列表前的小圆点：list-style: none;
1. 边框（border）
border ： 可以设置元素的边框。边框的大小会影响到盒子的大小
语法：
1border: border-width | border-style | border-color;
边框参数：| 属性 | 作用 ||———————|—————————————-|| border-width | 定义边框的粗细，单位是 px || border-style | 定义边框的样式 || border-color | 定义边框的颜色 |
样式参数：
参数
效果
none
没有表框
hidden
隐藏边框
solid
实现边框
dashed
虚线边框
dotted
点线边框
groove
3D 沟槽
ridge
3D 凸起
inset
3D 嵌入
o ...
一、浮动1. 浮动网页布局第一准则：多个块级元素纵向排列使用标准流，横向排列使用浮动
浮动：用于创建浮动框，将其移动到一边，直到边缘触及包含另一个浮动框的边缘
语法：
123选择器 { float: 属性值;}
属性值
描述
none
元素不浮动（默认）
left
元素向左浮动
right
元素向右浮动
代码示例
12345678910111213141516171819202122232425262728293031323334<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport ...
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202 ...
一、元素定位
定位模式
是否脱标
移动位置
是否常用
static（静态定位）
不脱标
不能使用边偏移
很少
relative（相对定位）
不脱标（占有位置）
相对自身位置移动
常用
absolute（绝对定位）
脱标（不占有位置）
带有定位的父级
常用
fixed（固定定位）
脱标（不占有位置）
浏览器可视区
常用
sticky（粘性定位）
不脱标（占有位置）
浏览器可视区
当前阶段少
1. 定位的组成
定位 ： 将盒子定在某个位置，所以 定位也是在摆放盒子，按照定位的方式移动盒子
定位 = 定位模式 + 边偏移
定位模式：指定一个元素在文档中的定位方式边偏移 ： 决定了该元素的最终位置
语法：
1position: static | relative | absolute | fixed;
定位模式：
参数
含义
static
静态定位
relative
相对定位
absolute
绝对定位
fixed
固定定位
sticky
粘性定位
边偏移：
边偏移属性
示例
描述
top
top: ...
