pink前端基础
pink前端笔记
- pink
-
- HTML 20%
-
- 前言
-
- 网页
- HTML
- 网页的形成
- 浏览器内核
- Web标准（重点）
-
- web标准的意义
- web标准的构成
- HTML标签
-
- HTML语法规范
- HTML基本结构标签
- 开发工具
- HTML常用标签
-
-
- **标签**
- **lang语言**
- **charset字符集**
- 标题标签
- 段落标签
-
pink
HTML 20%
前言
网页
网站是网页的集合、网页是HTML文件，是由各种图片链接文字声音视频等元素组成的。
HTML
一种超文本标记语言，是用来描述网页的语言
网页的形成
前端人员编写HTML文件——浏览器渲染—
—网页
浏览器内核
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-izRuXuct-1641721098970)(C:\Users\haozh\AppData\Roaming\Typora\typora-user-images\image-20211018204149253.png)]
Web标准（重点）
Web标准是由W3C组织和其他标准化组织制定的一系列标准的集合。
W3C（万维网联盟）是国际最著名的标准化组织。
web标准的意义
web标准可以让不同的开发人员写出的页面更标准、更统一等等
web标准的构成
主要包括：
结构：用于对网页元素进行整理和分类，现阶段主要学的是HTML；
表现：表现用于设置网页元素的版式、颜色、大小等外观样式，这里主要指的是CSS；
行为：行为是指页面模型的定义以及交互的编写，现阶段主要学习JavaScript。
HTML标签
HTML语法规范
<html>html>尖括号
<html>
<title>title>html与title包含关系
<head>head>head与title并列关系
html>
HTML基本结构标签
| 标签名 | 定义 | 说明 |
|---|---|---|
| HTML标签 | 页面中最大的标签，称之为 根标签 | |
| 文档的头部 | 注意在head标签中我们必须要设置的标签是title | |
| 文档的标题 | 让页面拥有一个属于自己的网页标题 | |
| 文档的主体 | 元素包含文档的所有内容，页面内容 基本都是放在body里的 |
<html>
<head>
<title>第一个页面title>
head>
<body>
键盘敲烂，工资过万
body>
html>
开发工具
vscode或者Hbuilder等等
vscode：
！快速生成网页骨架
Chinese 汉化插件、Open in Browser 右键在浏览器中打开的插件、Auto Rename Tag 自动重命名配对标签、CSS Peek 追踪至样式
HTML常用标签
标签
文档类型的声明标签，来告诉浏览器使用的那个版本的HTML
lang语言
用来定义当前文档显示的语言，zh-CN是中文网页、en是英文网页，主要针对搜索引擎起作用
charset字符集
是多个字符的集合，以便计算机能够识别和存储各种文字，常用的值有GB2312、BIG5、GBK、UTF-8，UTF-8被称为万国码。
标题标签
<1>~<6>
段落标签
换行标签
文本格式化标签
盒子标签
图像标签
![]()
常用其属性有：src图片地址、title提示文本、alt替换文本、width宽度、height高度、border边框
另外注意路径的问题（相对路径、绝对路径）
相对路径分类
符号
同一级路径
不需要符号
下一级路径
/
上一级路径
…/
超链接标签（重点）
标签用于定义超链接，作用是跳转到另一个页面
<a href="跳转目标" target="目标窗口的弹出方式">文本或者图像a>
<**>_self 当前窗口打开页面;_blank 新窗口打开页面**>
外部链接：href中填入外部的链接，像是“http://www.baidu.com”
内部链接：直接链接内部的网页名称即可，在href中填入”index.html“
空链接：仅有链接可点样式，点击不会跳转，href中填”#“
下载链接：href中填入文件或者压缩包的文件地址，像是”…/img/img.zip"
网页元素链接：即将文字变为网页里的元素，致使点击这些元素的时候就会跳转页面，像是图片图形或者视频。
锚点链接：点击锚点链接，可以快速定位到页面中的某个位置
- 点击的链接中href属性设定为#名字,例如下载地址
- 跳转到的目标标签,为目标标签添加一个属性id=刚刚的名字,例如
下载地址
注释标签
特殊字符
记住常用的即可
是 空格符;< 是 小于号;> 是 大于号;¥ 是 人民币符号
表格标签
表格标签
表格是用来展示数据的,不是用来布局的_???
table>表格标签,相当于excel中的sheet,用于创建表格
tr>行标签,用于创建行
td>单元格标签,用于创建单元格,放在行中
th>表头单元格标签(table head),可替换一般的td单元格,使单元格中的文字加粗居中(或其他突出形式)
表格属性(会在css中经常用到)
属性名
属性值
描述
简述
align
left,center,right
规定表格相对周围元素的对齐方式
单元格对齐方式
border
1,""
规定表格单元是否拥有边框,默认为"",即表示没有边框
单元格边框
cellpadding
像素值
规定单元边沿与其内容之间的空白,默认1像素
单元格边距
cellspacing
像素值
规定单元格之间的空白,默认2像素
单元格间距
width
像素值或者百分比
规定表格的宽度
表格宽度
height
像素值或者百分比
规定表格的高度
表格高度
表格结构标签
表格头部标签(table head)
表格主体标签(table body)
单元格合并
- 跨行合并:rowspan=“合并单元格的个数”、为单元格属性
- 跨列合并:colspan=“合并单元格的个数”、为单元格属性
- 目标单元格选择最上的单元格（跨行）和最左侧单元格（跨列）
- 步骤是：选定合并的单元格——在目标单元格写代码——将多余的单元格删除
列表标签
无序列表（重点）
- 列表项
- 列表项
- 列表项
有序列表（理解）
<ol>
<li>列表项li>
<li>列表项li>
<li>列表项li>
<li>li>
ol>
自定义列表（重点）页尾
<dl>
<dt>项目名称dt>
<dd>项目内容dd>
<dd>项目内容dd>
<dd>项目内容dd>
dl>
表单标签
组成有表单域、表单控件、提示信息三个部分组成
表单域
<form action="url地址" method="提交方式" name="表单域名称">
各种表单元素控件
form>
表单控件(表单元素)
Input
单标签：
解释：input表示需要用户输入，即收集用户信息；type即类型，可以是文本框text、密码password、提交按钮submit、正常按钮button、复选框checkbox、单选按钮radio等等
radio要有同样的name属性才可以实现多个选一个
value规定input元素的值，主要给后台人员提示用
checked在单选框或复选框中会在页面加载时默认选中
maxlength规定输入字符的最大长度
submit提交按钮以及reset重置按钮，可加上value值来修改按钮显示的文字
button普通按钮搭配value以及之后学习的js使用
尝试placeholder属性
label
label标签常用于绑定表单元素，像是点击一个标签表单元素会被选中
男
点击后边标签里的男即可选中单选框，文字也可替换为图片视频等
select
<select>
<option>选项一option>
<option selected="selected">默认被选中的选项option>
<option>选项二option>
<option>选项三option>
<option>选项四option>
......
select>
textarea
表单域元素，需要输入的文字比较多的时候会使用，像是个人说明框、评论框等等
<textarea cols="列数" rows="行数">通常行数和列数会在css中进行设置textarea>
表单综合案例
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单练习title>
head>
<body>
<h3>青春不常在，抓紧谈恋爱h3>
<table width="600">
<tr>
<td>性别td>
<td>
<input type="radio" name="sex" id="male"> <label for="male">男label>
<input type="radio" name="sex" id="female"> <label for="female">女label>
<input type="radio" name="sex" id="none"> <label for="none">外星人label>
td>
tr>
<tr>
<td>生日td>
<td>
<select name="" id="">
<option value="请选择">请选择option>
select>年
<select name="" id="">
<option value="请选择">请选择option>
select>月
<select name="" id="">
<option value="请选择">请选择option>
select>日
td>
tr>
<tr>
<td>所在地区td>
<td>
<input type="text">
td>
tr>
<tr>
<td>学历td>
<td><input type="text" value="">td>
tr>
<tr>
<td>个人介绍td>
<td><textarea name="" id="" cols="30" rows="5">textarea>td>
tr>
<tr>
<td>爱好td>
<td>
<input type="checkbox" name="hobby" id="motion"> <label for="motion">运动label>
<input type="checkbox" name="hobby" id="Photography"> <label for="Photography">摄影label>
<input type="checkbox" name="hobby" id="music"> <label for="music">音乐label>
<input type="checkbox" name="hobby" id="study"> <label for="study">学习label>
<input type="checkbox" name="hobby" id="game"> <label for="game">游戏label>
<input type="checkbox" name="hobby" id="food"> <label for="food">美食label>
td>
tr>
<tr>
<td>td>
<td>td>
tr>
<tr>
<td>td>
<td> <input type="submit" value="点击注册">td>
tr>
<tr>
<td>td>
<td><input type="checkbox" checked="checkbox">我同意注册条款和会员加入标准td>
tr>
<tr>
<td>td>
<td><a href="#">我是会员，立即登录a>td>
tr>
<tr>
<td>td>
<td>
<h4>我承诺h4>
<ul>
<li>年满18岁li>
<li>真诚寻找另一半li>
<li>态度认真负责li>
ul>
td>
tr>
table>
body>
html>
CSS3 50%
CSS简介
css主要用来美化页面的，同时能够对多数标签进行美化，可以简化代码
HTML主要写出这里那里是什么东东，对于那个东东的好看不好看，由css来管理
CSS语法
style{
选择器 {样式}——即——给谁改样式 {改什么样式}
}
CSS代码风格
展开式、全部小写字母、冒号后和大括号前要有空格
CSS基础选择器
标签选择器
将一类标签名称作为选择器，即对所有这类标签进行样式修改，全局定义
类选择器
.类名{
属性1；
属性2；
……
}
对HTML中想要修改的标签加入类属性class=“类名”，即将想要修改样式的标签纳入到我们所规定的类之中
类选择器-多类名
及对标签类属性定义多个类名，如：
Arther
注意类名之间用空格分开,可以等同于自己定义类，类里写样式，哪里需要这个样式直接调用即可，增加了复用性
id选择器
<style>
#自定义名称{
样式1；
样式2；
}
style>
<div id="自定义名称">
Hello World!
div>
id选择器和类选择器有点相似，但是id选择器只能调用一次，别人无法使用
通配符选择器
格式
<style>
* {
属性1：属性值;
…………
}
style>
可对页面中的所有标签进行修改
选择器总结
基础选择器
作用
特点
使用情况
用法
标签选择器
可以选出所有相同的标签
不能差异化选择
较多
p {color: red;}
类选择器
可以选出一个或者多个标签
可以根据需求进行选择
非常多
.nav {color: red;}
id选择器
一次只能选择一个标签
ID属性只能在每个HTML文件中出现一次，由于其安全性，经常搭配js使用
一般和js搭配使用
#nav {color: red;}
通配符选择器
选择所有的标签
选择的太多了
特殊情况使用
* {color: red;}
CSS字体属性
font-family
来定义文本字体系列
font-family:Microsoft Yahei,"Arail","微软雅黑"
/*各个字体之间必须使用英文状态下的逗号隔开
一般如果字体名称有空格的字体要加引号*/
font-size
用来定义字体大小，默认16px
font-weight
用来定义字体的粗细程度，默认normal，可选bold、bolder、lighter、number或者数字；提倡数字
font-style
用来定义文字样式，默认normal，可选italic（i）斜体；
字体复合属性
body {
font: font-style font-weight font-size/line-height font-family;
}/*不可更改数据*/
CSS文本属性
color
文本颜色 知道名称预定义、十六进制、rgb表示色彩即可，常用十六进制
text-align
文本对齐 默认左对齐，left|right|center
text-decoration
文本装饰 默认none没有装饰，none无装饰|underline下划线|overline上划线|line-through删除线 重点记住下划线underline即可
text-indent
文本缩进 默认0px，可根据需要进行调整，可正可负，em是一个文字大小的单位
line-height
文本行间距 默认0px，可根据需要进行调整，行间距=文字高度+上间距+下间距，例如：line-height=30px，文字高度默认16px，所以文字与上下行的间距皆为7px。
CSS文本属性总结
属性
表示
注意点
color
文本颜色
我们通常用十六进制的形式来表示颜色
text-align
文本对齐
left、right、center
text-index
文本缩进
通常使用段落首行缩进2个字符的距离，text-index：2em
text-decoration
文本修饰
下划线underline、取消下划线none
line-height
行高
控制行与行之间的距离
CSS引入方式
内部样式表
在HTML文件中将所有的CSS代码放在
嵌入式样式表
直接在HTML标签里添加style属性，并将CSS代码定义于style属性中
<body>
<p style="color: green;text-size:24px;">
这个文字是绿色的,字体大小24px
p>
body>
外部样式表
单独创建一个CSS文件，将所有CSS代码放在其中，然后将CSS文件的链接在HTML中使用即可，外部样式表也是最常用的CSS引入方式。
<link rel="stylesheet" bref="sytle.css">
调试工具
Emmet语法
Emmet语法的前身是Zen coding，加快编码速度用的，VScode已经集成了
- 输入标签后按TAB快速生成标签
- 如果想要生成多个相同的标签，使用 * 号即可，比如 输入div*3后按TAB即可快速生成三个div
- 有父子关系的标签使用>,比如ul>li即在ul标签中有li
- 有兄弟关系的标签用+
- 要生成带有类名或者id的盒子，直接使用.demo或者#two 按TAB即可
- 生成有顺序的标签使用$ 比如.demo$*5 即生成
- 想要增加的内容在标签后加{}在其中加入内容即可
各个语法之间可以相互搭配使用
复合选择器
后代选择器
可以选择父元素里的子元素，外层标签在前，内层标签在后，中间空格隔开
元素1 元素2 {样式声明}
元素1是父元素，元素2是子元素，但是是针对所有子元素进行样式修改，子代的子代仍旧是子代。
子选择器
仅选择某元素的最近一级子元素，即长子？
元素1>元素2{样式声明}
对于与元素2同级的元素或者元素2的子元素统统未被选择
并集选择器
并集选择器可以选择多组标签，同时为他们定义相同的样式
在选择的元素之间使用逗号，连接
元素1，元素2{样式声明}
元素1以及元素2等可搭配其他选择器使用
伪类选择器
链接伪类选择器
伪类选择器用于向某些选择器添加特殊的效果
默认的链接是蓝色+下划线
a:link {
选择所有未被访问的链接
}
a:visited {
选择所有已被访问过的链接
}
a:hover {
选择鼠标经过的链接
}
a:active {
选择鼠标点击并未松开鼠标的链接
}
为了保证伪类选择器正常执行，一般伪类选择器是拥有前后顺序的，遵循LVHA的顺序：link、visited、hover、active
:focus选择器
对获得光标的表单进行样式修改
input:focus {
background-color:blue;
}
CSS的元素显示模式
整体分为块元素和行内元素
块元素：
一次占用一整行的元素，像是div,h1~h6,p,ul,ol,li
独占一行；高宽内外边距可控；默认宽度是父级容器宽度的100%；
文字类元素里不可使用块级元素，文字类元素：h1~h6;p。
行内元素：
一行内可以使用多个，像是a,strong,b,em,i,del,s,ins,u,span
一行可以显示多个；高宽直接设置无效；默认宽度是其本身内容的宽度；行内 元素只能收纳文本以及其他行内元素。
行内块元素：
img、input、td，一行显示多个，默认宽度是其内容宽度，可控高宽
元素显示模式转换：
display：block；转换为块元素 （常用）
display：inline；转换为行内元素
display：inline-block；转换为行内块元素 （常用）
小工具：
snipaste
F1截图、F3贴图并置顶、alt取色、shift切换取色模式
CSS背景
background-color:trasparent|color默认透明，可设定颜色
background-image:none|url(url)默认无，可设定图片地址
background-repeat:repeat|no-repeat|repeat-x|repeat-y默认横纵平铺，可设定不平铺、横向平铺、纵向平铺
background-position:x y;根据横向和纵向设定位置
background-attachment:scroll|fixed; 设定图像滚动或者固定
background:背景颜色 图片地址 背景平铺 图片滚动 图片位置；用以简化代码
background:rgba(0,0,0,0.5)；red green blue alpha 红 绿 蓝 透明度主要用于调节透明度，进对盒子生效，对盒子里的内容不生效
CSS三大特性
层叠性
相同的选择器 中 设置相同类型的样式，此时哪一个距离结构近使用哪个样式，被覆盖的样式在浏览器中呈现画中线的状态
继承性
子标签会继承父标签的样式，对div声明字体大小以及颜色等样式，其中的p标签也会拥有这些适用样式，在浏览器中显示为Inherited from div即继承自div
font:12px/1.5 Microsoft YaHei;
行高的特殊写法，1.5即指行高是文字大小的1.5倍，若设定元素的子元素设置了文字大小，例如16px，那么行高就是24px，如果没有设定，则继承父元素的文字大小以及行高（文字大小的1.5呗）。
优先级
当多个选择器指定同一个元素，就会有优先级的产生；
选择器相同则执行叠加性
选择器不同则根据权重进行先后级别的排序，一般范围越小，权重越大
记得继承的权重是0，无论父元素的权重有多大，子元素得到的权重都是零
特别注意：选择器的权重会有叠加，像是ul li {}的权重大于li{}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eBVqvycJ-1641721098974)(C:\Users\haozh\AppData\Roaming\Typora\typora-user-images\image-20211124193809131.png)]
CSS盒子
盒子模型
一个容器，包括：边框border、外边距margin、内边距padding以及内容content
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JuAoGMgA-1641721098975)(C:\Users\haozh\AppData\Roaming\Typora\typora-user-images\image-20211124200600934.png)]
border
属性
解释
参数
border-width
定义边框粗细
px
border-style
定义边框线样式
solid实线|dashed虚线|dotted点线
border-color
定义边框线颜色
rpga
border-collapse
合并边框
collapse
边框的设定会影响盒子的大小
padding
padding-left、padding-right、padding-top、padding-bottom左右上下内边距
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WGMHdBIP-1641721098976)(C:\Users\haozh\AppData\Roaming\Typora\typora-user-images\image-20211124210631405.png)]
margin
外边距与border相同相同
外边距可以实现块级盒子水平居中：
- 盒子指定宽度
- 盒子左右外边距都设置为auto
- 常见写法：
margin-left:auto;
margin-right:auto;
/*直接设定左右*/
margin:auto;
/*设置上下左右都是auto*/
margin:0 auto;
/*设置上下外边距为0，左右为auto*/
/*对于行内元素和行内块元素的水品剧中方法是为其父元素添加text-align:center*/
解决外边距塌陷问题：
外边距塌陷指在想要设定子元素的外边距时会应用到父元素上
<style>
.father {
width: 400px;
height: 400px;
background-color: blue;
margin-top: 40px;
/*border: 1px solid transparent;*/
}
.son {
width: 200px;
height: 200px;
background-color: white;
margin-top: 100px;
}
style>
head>
<body>
<div class="father">
<div class="son">
div>
div>
body>
![image-20211126112216308]()
解决方法：
- 为父元素加上边框border:1px solid transparent;但是盒子会被撑大
- 为父元素加上内边距padding:100px;会被撑大而且还要计算好麻烦
- 为父元素添加overflow:hidden;很常用，且盒子不会被撑大
清除默认内外边距
不同的浏览器会有自带的内外边距，清除方法：
* {
margin: 0;
padding: 0;
}
对于页面中的产品标题，为了能够被搜索引擎所找到，需要为其设置为标题标签，为达成不同作用需要用不同语义的标签。
CSS3 新增样式
圆角边框
border-radius:10px;圆角边框半径为10
border-radius:50%;圆形
border-radius:height/2;将数值设定为高度的一半，则矩形左右边是圆
border-radius:左上 右上 右下 左下;顺时针旋转
盒子阴影
box-shadow:h-shadow v-shadow blur spread color inset;
h-shadow
必需，水平阴影，可负
v-shadow
必需，垂直阴影，可负
blur
可选，模糊距离
spread
可选，阴影尺寸
color
可选，阴影颜色
inset
可选，内阴影
文字阴影
text-shadow:h-shadow v-shadow blur color;
浮动
经典网页布局方式：标准流、浮动、定位
标准流
也就是根据行内元素、行内块元素、块元素的默认摆放方式，一个挨着一个
浮动
浮动就是将标签脱离原有的排列规定，处于浮动状态，向属性值的方向浮动，直到碰到另一个浮动框的边缘。
选择器 {
float:属性值;
}
/*属性值有none|left|right*/
浮动特性
- 浮动元素会脱离标准流，原有位置会空出来，让给标准流标签
- 浮动元素会一行内显示，并且元素顶部对齐
- 浮动的元素会具有行内块元素的特性
浮动常用形式
为了约束浮动元素，网页布局一般采用：
先用标准流的父元素排列上下位置，之后内部的子元素使用浮动排列左右位置，符合网页布局第一准则
注意
浮动只会影响后面的标准流
清除浮动
不确定子元素数量，可以利用子元素将父盒子撑开，但是如果父盒子不加上高度，之后的父盒子会填补空位，影响到之后的盒子，因此需要清除浮动
选择器 {
clear：属性值；
}/*left、right、both，清除左浮动、右浮动、同时清除左右浮动*/
清除浮动的方法
- 额外标签法，或者叫隔墙法，W3C推荐做法
在最后一个浮动元素后面加上：
<div style="clear:both">
或者其他块级标签也可以
但是会添加很多无意义的标签，不利于代码的结构化
div>
- 父级添加overflow属性
.box {
overflow:hidden;
}/*代码简洁，但无法显示溢出的部分*/
- 父级添加after伪元素
.clearfix:after {
content:"";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {
*zoom:1;
/*此为IE6、7专有*/
}
/*结构简单，无添加标签，但是要照顾低版本浏览器*/
- 父级添加双伪元素
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:box;
}
.clearfix {
*zoom:1;
}/*代码简洁但要照顾低版本浏览器*/
常见网页布局
自上向下使用标准流盒子，其中的内容使用浮动元素实现左右布局。
CSS定位
定位组成
定位=定位模式+边偏移
定位模式用于指定一个元素在文档中的定位方式，边偏移则决定了该元素的最终位置
定位模式
定位模式
语义
使用方法
详细解释
static
静态定位
选择器 {position：static；}
无定位的意思
relative
相对定位
选择器 {position：relative；}
相对原来的位置来定位并且原来的不会空出来（不脱标），多数情况是给绝对定位当爹的
absolute
绝对定位
选择器 {position：absolute；}
相对于有定位的最近一级祖先元素来定位，原来的位置会空出来（脱标）没有祖先元素或者祖先元素未定位则以浏览器为准定位
fixed
固定定位
选择器 {position：fixed；}
相对于浏览器的可视窗口进行定位
sticky
粘性定位
选择器 {position：sticky；top：10px；}
可以认为是相对定位和固定定位的混合，占有原来位置，参照可视窗口移动，必须有top、bottom、left、right中的一个生效
边偏移
边偏移有top、bottom、left、right四个属性
定位使用场景
子绝父相：使用最多的！子盒子使用绝对定位，父盒子使用相对定位
绝对定位小技巧
固定在版心的右侧可以使用
.w {
height:2000px;
width:1200px;
}
.AD {
position:fixed;
top:50%;
right:50%+600px;
}
/*right:50%+版心高度的一半*/
定位叠放
使用z-index属性来控制盒子的前后顺序
选择器 {
z-index:0;
/*谁的数大谁显示在上面*/
/*数值相同时，按照书写顺序，后来居上*/
}
绝对居中
.box {
position:fixed;
width:500px;
height:500px;
top:50%;
left:50%;
margin-top:-250px;
mrigin-left:-250px;
background-color: #123456;
}
定位特殊特性
- 行内元素添加了绝对定位或者固定定位，可以直接设置高度和宽度
- 块级元素添加绝对或者固定定位，不给高度宽度，则由内容撑开
- 浮动元素仅仅会遮住其下的标准流盒子，并不会遮住盒子里的文字以及图片，但是绝对定位（固定定位）会压住下面标准流所有的内容（浮动原是做文字环绕用的，可以看word里的文字环绕显示）
元素的显示与隐藏
display:block;
display:none;隐藏对象并且位置空了出来
visibility:hidden;隐藏对象但是位置还在占有
overflow:visible;溢出盒子的内容仍旧显示
overflow:hidden;隐藏溢出的内容
overflow:scroll;显示滚动条，拉动滚动条可以看到溢出的内容
overflow:auto;溢出时显示滚动条，不溢出时则不显示
精灵图
为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度
精灵图的使用原理：就是将好多个图片合成为一个大图片从服务器发送过来，通过设定一个固定大小的盒子（像是个窗口）以及background-position属性调整大图片的位置，使我们只能看到小图片，像是剪贴蒙版。
CSS三角做法
.box {
width: 0;
height: 0;
border: 100px solid transparent;
border-top-color: #000;
}/*top就是指向下的三角，以此类推*/
CSS用户样式
鼠标样式
li {
cursor:pionter;
}
/*default小白、pionter小手、move移动、text文本、not-allowed禁止*/
清除表单轮廓线
input {
outline:none;
}
/*去除轮廓线就是光标选中表单后去除掉默认的蓝色亮边框*/
清除文本域自定义大小
textarea {
resize:none;
}
文字图片对齐
图片文字默认对齐方式是：图片的底线与文字的基线（写英文的那个线）对齐。
img {
vertical-align:middle;
}
/*bottom底线对齐、middle中线对齐、top顶线对齐*/
H5C3 10%
品优购项目网站 20%
CSS属性书写顺序
定位属性——自身属性——文本属性——其他属性
目录命名
项目文件夹、样式文件夹（css）、脚本文件夹（js）、样式类图片文件夹（img）、产品类图片文件夹（upload）、字体类文件夹（fonts）
字体图标的引用
在css文件中声明并使用：
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?7kkyc2');
src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
url('fonts/icomoon.woff?7kkyc2') format('woff'),
url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
span {
font-family:'icomoon';
/*+字体样式+*/
}
学成在线案例
CSS属性书写顺序
- 布局定位属性：display / position/float / clear/visibility / overflow display 首写
- 自身属性：width / height / margin / padding / border / background
- 文本属性：color / font/text-decoration / text-align / vertical-align / white-space / break-word
- 其他属性：content / cursor / border-radius / box-shadow / text-shadow
导航栏制作
实际开发中，我们不会直接用链接a标签，而是用li包含链接（li+a）的做法
- li+a语义更加清晰
- 直接使用a，搜索引擎容易辨别为有堆砌关键字嫌疑的网站，会降低网站排名
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>学成在线title>
<link rel="stylesheet" href="../学成在线案例/style.css">
head>
<body>
<div class="header w">
<div class="logo">
<img src="../学成在线案例/images/logo.png" alt="学成在线">
div>
<div class="nav">
<ul>
<li><a href="#">首页a>li>
<li><a href="#">课程a>li>
<li><a href="#">职业规划a>li>
ul>
div>
<div class="search">
<input type="text" value="输入关键词">
<button>button>
div>
<div class="user">
<img src="../学成在线案例/images/user.png" alt="我的空间">
qq-lihuayyds
div>
div>
<div class="banner">
<div class="w">
<div class="subnav">
<ul>
<li><a href="#">前端开发<span>>span>a>li>
<li><a href="#">后端开发<span>>span>a>li>
<li><a href="#">移动开发<span>>span>a>li>
<li><a href="#">人工智能<span>>span>a>li>
<li><a href="#">商业预测<span>>span>a>li>
<li><a href="#">云计算&大数据<span>>span>a>li>
<li><a href="#">运维&从设计<span>>span>a>li>
<li><a href="#">UI设计<span>>span>a>li>
<li><a href="#">产品<span>>span>a>li>
ul>
div>
<div class="course">
<h2>我的课程表h2>
<div class="bd">
<ul>
<li>
<h4>继续学习 程序语言设计h4>
<p>正在学习-使用对象p>
li>
<li>
<h4>继续学习 程序语言设计h4>
<p>正在学习-使用对象p>
li>
<li>
<h4>继续学习 程序语言设计h4>
<p>正在学习-使用对象p>
li>
<a href="#" class="more">全部课程a>
ul>
div>
div>
div>
div>
<div class="goods w">
<h3>精品推荐h3>
<ul>
<li><a href="#">JQerya>li>
<li><a href="#">Sparka>li>
<li><a href="#">MySQLa>li>
<li><a href="#">JavaWeba>li>
<li><a href="#">Java Scripta>li>
ul>
<a href="#" class="mod">修改兴趣a>
div>
<div class="box w">
<div class="box-hd">
<h3>精品推荐h3>
<a href="#">查看全部a>
div>
<div class="box-bd">
<ul>
<li>
<a href="#"><img src="../学成在线案例/images/goods1.png" alt="none">a>
<h4>Think PHP 5.0 博客系统实战项目演练 h4>
<div class="info"><span>高级span> • 1125人在学习div>
li>
<li>
<a href="#"><img src="../学成在线案例/images/goods2.png" alt="none">a>
<h4>Android 网络图片加载框架详解h4>
<div class="info"><span>高级span> • 1125人在学习div>
li>
<li>
<a href="#"><img src="../学成在线案例/images/goods3.png" alt="none">a>
<h4>Angular 2 最新框架+主流技术+项目实战 h4>
<div class="info"><span>高级span> • 1125人在学习div>
li>
<li>
<a href="#"><img src="../学成在线案例/images/goods3.png" alt="none">a>
<h4>Angular 2 最新框架+主流技术+项目实战 h4>
<div class="info"><span>高级span> • 1125人在学习div>
li>
<li>
<a href="#"><img src="../学成在线案例/images/goods4.png" alt="none">a>
<h4>Android Hybrid APP开发实战 H5+原生！h4>
<div class="info"><span>高级span> • 1125人在学习div>
li>
<li>
<a href="#"><img src="../学成在线案例/images/goods1.png" alt="none">a>
<h4>Think PHP 5.0 博客系统实战项目演练 h4>
<div class="info"><span>高级span> • 1125人在学习div>
li>
<li>
<a href="#"><img src="../学成在线案例/images/goods2.png" alt="none">a>
<h4>Android 网络图片加载框架详解h4>
<div class="info"><span>高级span> • 1125人在学习div>
li>
<li>
<a href="#"><img src="../学成在线案例/images/goods3.png" alt="none">a>
<h4>Angular 2 最新框架+主流技术+项目实战 h4>
<div class="info"><span>高级span> • 1125人在学习div>
li>
<li>
<a href="#"><img src="../学成在线案例/images/goods3.png" alt="none">a>
<h4>Angular 2 最新框架+主流技术+项目实战 h4>
<div class="info"><span>高级span> • 1125人在学习div>
li>
<li>
<a href="#"><img src="../学成在线案例/images/goods4.png" alt="none">a>
<h4>Android Hybrid APP开发实战 H5+原生！h4>
<div class="info"><span>高级span> • 1125人在学习div>
li>
ul>
div>
div>
<div class="junior w">
<div class="junior-hd">
<h3>编程入门h3>
<div class="junior-stage">
<ul>
<li><a href="#">热门a>li>
<li><a href="#">初级a>li>
<li><a href="#">中级a>li>
<li><a href="#">高级a>li>
ul>
div>
<a href="#">查看全部a>
div>
<div class="junior-bd">
<div class="junior-bd-left">
<img src="../学成在线案例/images/PHP入门：基础语法到实际运用零基础入门：语法与界进阶：网络与数据缓存界面到数据存储.png" alt="none">
div>
<div class="junior-bd-right">
<div class="junior-bd-right-top">
<img src="../学成在线案例/images/junior5.png" alt="none">
div>
<div class="junior-bd-right-bottom">
<ul>
<li>
<img src="../学成在线案例/images/junior1.png" alt="none">
<h4>|Android Hybrid APP开发<br>|实战 H5+原生！ h4>
<div class="info"><span>高级span> • 1125人在学习div>
li>
<li>
<img src="../学成在线案例/images/junior2.png" alt="none">
<h4>|Kami2首页界面切换效果 <br>|h4>
<div class="info"><span>高级span> • 1125人在学习div>
li>
<li>
<img src="../学成在线案例/images/junior3.png" alt="none">
<h4>|Unity Profiler入门 <br>|h4>
<div class="info"><span>高级span> • 1125人在学习div>
li>
<li>
<img src="../学成在线案例/images/junior4.png" alt="none">
<h4>|Cocos2d-x 引擎源码中的<br>|纹理优化 h4>
<div class="info"><span>高级span> • 1125人在学习div>
li>
ul>
div>
div>
div>
div>
<div class="footer">
<div class="w">
<div class="copyright">
<img src="../学成在线案例/images/logo.png" alt="none">
<p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。
<br>© 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号
p>
<a href="#" class="app"><button>下载appbutton>a>
div>
<div class="links">
<dl>
<dt>关于学成网dt>
<dd><a href="#">关于a>dd>
<dd><a href="#">管理团队a>dd>
<dd><a href="#">工作机会a>dd>
<dd><a href="#">客户服务a>dd>
<dd><a href="#">帮助a>dd>
dl>
<dl>
<dt>新手指南dt>
<dd><a href="#">如何注册a>dd>
<dd><a href="#">如何选课a>dd>
<dd><a href="#">如何拿到毕业证a>dd>
<dd><a href="#">学分是什么a>dd>
<dd><a href="#">考试未通过怎么办a>dd>
dl>
<dl>
<dt>合作伙伴dt>
<dd><a href="#">合作机构a>dd>
<dd><a href="#">合作导师a>dd>
dl>
div>
div>
div>
body>
html>
* {
margin: 0;
padding: 0;
}
/* 清除网页原有内外边距 */
.w {
width: 1200px;
margin: auto;
}
/* 确定版心，之后如果有盒子需要直接添加即可 */
body {
background-color: #f3f5f7;
}
a {
text-decoration: none;
}
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:box;
}
.clearfix {
*zoom:1;
}/*代码简洁但要照顾低版本浏览器*/
li {
list-style: none;
}
.header {
height: 42px;
/* background-color: #a1a1a1; */
/* 此处的margin如果仅仅设定30px，则会将.w的margin:auto覆盖掉 */
margin: 30px auto;
}
.logo {
float: left;
width: 198px;
height: 42px;
/* background-color: #b1b1b1; */
}
.nav {
float: left;
margin-left: 60px;
}
.nav ul li {
float: left;
margin: 0 15px;
}
.nav ul li a {
display: block;
height: 42px;
padding: 0 10px;
line-height: 42px;
font-size: 18px;
color: #050505;
text-decoration: none;
}
.nav ul li a:hover {
border-bottom: 2px solid #00a4ff;
color: #036ba3;
}
.search {
float: left;
width: 412px;
height: 42px;
/* background-color: #002020; */
margin-left: 50px;
}
.search input {
float: left;
width: 345px;
height: 40px;
border: 1px solid #00a4ff;
border-right: 0px;
color: #bfbfbf;
font-size: 14px;
padding-left: 15px;
}
.search button {
float: left;
width: 50px;
height: 42px;
/* background-color: #abcabc; */
border: 0px;
/* border:0px;去除按钮边框 */
background: url(../学成在线案例/images/button.png);
}
.user {
float: right;
line-height: 42px;
margin-right: 30px;
font-size: 14px;
color: #666;
}
.banner {
height: 421px;
background-color: rgb(28, 3, 108);
}
.banner .w {
height: 421px;
background-color: #326123;
background: url(../学成在线案例/images/banner.png) no-repeat top center;
}
.subnav {
float: left;
width: 190px;
height: 421px;
background:rgba(0,0,0,0.3);
}
.subnav ul li {
height: 45px;
line-height: 45px;
padding: 0 20px;
}
.subnav ul li a {
font-size: 14px;
color: #fff;
text-decoration: none;
}
.subnav ul li a:hover {
color: #00a4ff;
}
.banner ul li a span {
float: right;
}
.course {
float: right;
width: 230px;
height: 300px;
background-color: #ffffff;
/* 浮动的盒子不会和父盒子外边距合并，也就不会塌陷 */
margin-top: 50px;
}
.course h2 {
height: 48px;
line-height: 48px;
text-align: center;
background-color: #9bceea;
font-size: 18px;
color: white;
letter-spacing: 4px;
}
.bd {
padding: 0 20px;
}
.bd ul li {
padding: 14px 0;
border-bottom: 1px solid rgba(0,0,0,0.5);
}
.bd ul li h4 {
font-size: 16px;
color: #4e4e4e;
}
.bd ul li p {
font-size: 12px;
color: #a5a5a5;
}
.bd .more {
display: block;
height: 38px;
border: 1px solid #00a4ff;
text-decoration: none;
line-height: 38px;
text-align: center;
font-size: 16px;
color: #00a4ff;
font-weight: 700;
margin-top: 5px;
}
.goods {
height: 60px;
margin-top: 10px;
background-color: #fff;
box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.1);
line-height: 60px;
}
.goods h3 {
float: left;
margin: 0 30px;
font-size: 16px;
color: #00a4ff;
}
.goods ul {
float: left;
margin-left: 30px;
}
.goods ul li {
float: left;
}
.goods ul li a {
padding: 0 30px;
font-size: 16px;
color: #050505;
border-left: 1px solid #ccc;
}
.mod {
float: right;
margin-right: 30px;
font-size: 14px;
color: #00a4ff;
}
.box {
height: 630px;
margin-top: 30px;
}
.box-hd {
height: 45px;
}
.box-hd h3 {
float: left;
font-size: 20px;
color: #494949;
}
.box-hd a {
float: right;
}
.box-bd ul {
width: 1225px;
/* ul里的li加上右外边距时最后一个会到下一行，
要么清除位置不对盒子的右外边距，
要么将父盒子的宽度增大 */
}
.box-bd ul li {
float: left;
margin-right: 15px;
width: 228px;
height: 270px;
background-color: #fff;
margin-bottom: 25px;
box-shadow: -2px 2px 5px 0px rgba(0,0,0,0.3);
}
.box-bd ul li img {
width: 100%;
}
.box-bd ul li h4 {
margin: 20px 20px 20px 25px;
font-size: 14px;
color: #050505;
font-weight: 400;
}
.box-bd .info {
margin: 0 20px 0 25px;
font-size: 12px;
color: #999;
}
.box-bd .info span {
color: #ff7c2d;
}
.junior {
margin-top: 30px;
height: 450px;
/* background-color: #afafaf; */
}
.junior-hd {
height: 45px;
line-height: 45px;
}
.junior-hd h3 {
float: left;
margin-right: 280px;
font-size: 20px;
color: #494949;
}
.junior-hd .junior-stage ul li a {
float: left;
font-size: 16px;
color: #868686;
margin-left: 72px;
}
.junior-hd .junior-stage ul li a:hover {
color: #00a4ff;
}
.junior-hd a {
float: right;
}
.junior-bd-left {
float: left;
}
.junior .junior-bd .junior-bd-right .junior-bd-right-top {
float: right;
}
.junior-bd-right-bottom ul li {
float: left;
margin: 16px 0 0 15px;
width: 228px;
height: 270px;
background-color: #fff;
}
.junior-bd-right-bottom ul li h4 {
margin: 20px 20px 20px 25px;
font-size: 14px;
color: #050505;
font-weight: 400;
}
.junior ul li .info {
margin-left: 15px;
margin-bottom: 15px;
font-size: 12px;
color: #999;
}
.junior .info span {
color: #ff7c2d;
}
.footer {
height: 300px;
background-color: #fff;
}
.footer .w {
padding-top: 35px;
}
.copyright {
float: left;
}
.copyright p {
font-size: 12px;
color: #666;
margin: 20px 0 15px 0;
}
.copyright .app button {
display: block;
width: 118px;
height: 33px;
border: 1px solid #00a4ff;
text-align: center;
line-height: 33px;
font-size: 16px;
color: #00a4ff;
}
.links {
float: right;
}
.links dl {
float: left;
margin-left: 100px;
}
.links dl dt {
font-size: 16px;
color: #333;
margin-bottom: 5px;
}
.links dl dd {
font-size: 12px;
color: #333;
}
换行标签
文本格式化标签
盒子标签
图像标签
![]()
常用其属性有：src图片地址、title提示文本、alt替换文本、width宽度、height高度、border边框
另外注意路径的问题（相对路径、绝对路径）
相对路径分类
符号
同一级路径
不需要符号
下一级路径
/
上一级路径
…/
超链接标签（重点）
标签用于定义超链接，作用是跳转到另一个页面
<a href="跳转目标" target="目标窗口的弹出方式">文本或者图像a>
<**>_self 当前窗口打开页面;_blank 新窗口打开页面**>
外部链接：href中填入外部的链接，像是“http://www.baidu.com”
内部链接：直接链接内部的网页名称即可，在href中填入”index.html“
空链接：仅有链接可点样式，点击不会跳转，href中填”#“
下载链接：href中填入文件或者压缩包的文件地址，像是”…/img/img.zip"
网页元素链接：即将文字变为网页里的元素，致使点击这些元素的时候就会跳转页面，像是图片图形或者视频。
锚点链接：点击锚点链接，可以快速定位到页面中的某个位置
- 点击的链接中href属性设定为#名字,例如下载地址
- 跳转到的目标标签,为目标标签添加一个属性id=刚刚的名字,例如
下载地址
注释标签
特殊字符
记住常用的即可
是 空格符;< 是 小于号;> 是 大于号;¥ 是 人民币符号
表格标签
表格标签
表格是用来展示数据的,不是用来布局的_???
table>表格标签,相当于excel中的sheet,用于创建表格
tr>行标签,用于创建行
td>单元格标签,用于创建单元格,放在行中
th>表头单元格标签(table head),可替换一般的td单元格,使单元格中的文字加粗居中(或其他突出形式)
表格属性(会在css中经常用到)
属性名
属性值
描述
简述
align
left,center,right
规定表格相对周围元素的对齐方式
单元格对齐方式
border
1,""
规定表格单元是否拥有边框,默认为"",即表示没有边框
单元格边框
cellpadding
像素值
规定单元边沿与其内容之间的空白,默认1像素
单元格边距
cellspacing
像素值
规定单元格之间的空白,默认2像素
单元格间距
width
像素值或者百分比
规定表格的宽度
表格宽度
height
像素值或者百分比
规定表格的高度
表格高度
表格结构标签
表格头部标签(table head)
表格主体标签(table body)
单元格合并
- 跨行合并:rowspan=“合并单元格的个数”、为单元格属性
- 跨列合并:colspan=“合并单元格的个数”、为单元格属性
- 目标单元格选择最上的单元格（跨行）和最左侧单元格（跨列）
- 步骤是：选定合并的单元格——在目标单元格写代码——将多余的单元格删除
列表标签
无序列表（重点）
- 列表项
- 列表项
- 列表项
有序列表（理解）
<ol>
<li>列表项li>
<li>列表项li>
<li>列表项li>
<li>li>
ol>
自定义列表（重点）页尾
<dl>
<dt>项目名称dt>
<dd>项目内容dd>
<dd>项目内容dd>
<dd>项目内容dd>
dl>
表单标签
组成有表单域、表单控件、提示信息三个部分组成
表单域
<form action="url地址" method="提交方式" name="表单域名称">
各种表单元素控件
form>
表单控件(表单元素)
Input
单标签：
解释：input表示需要用户输入，即收集用户信息；type即类型，可以是文本框text、密码password、提交按钮submit、正常按钮button、复选框checkbox、单选按钮radio等等
radio要有同样的name属性才可以实现多个选一个
value规定input元素的值，主要给后台人员提示用
checked在单选框或复选框中会在页面加载时默认选中
maxlength规定输入字符的最大长度
submit提交按钮以及reset重置按钮，可加上value值来修改按钮显示的文字
button普通按钮搭配value以及之后学习的js使用
尝试placeholder属性
label
label标签常用于绑定表单元素，像是点击一个标签表单元素会被选中
男
点击后边标签里的男即可选中单选框，文字也可替换为图片视频等
select
<select>
<option>选项一option>
<option selected="selected">默认被选中的选项option>
<option>选项二option>
<option>选项三option>
<option>选项四option>
......
select>
textarea
表单域元素，需要输入的文字比较多的时候会使用，像是个人说明框、评论框等等
<textarea cols="列数" rows="行数">通常行数和列数会在css中进行设置textarea>
表单综合案例
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单练习title>
head>
<body>
<h3>青春不常在，抓紧谈恋爱h3>
<table width="600">
<tr>
<td>性别td>
<td>
<input type="radio" name="sex" id="male"> <label for="male">男label>
<input type="radio" name="sex" id="female"> <label for="female">女label>
<input type="radio" name="sex" id="none"> <label for="none">外星人label>
td>
tr>
<tr>
<td>生日td>
<td>
<select name="" id="">
<option value="请选择">请选择option>
select>年
<select name="" id="">
<option value="请选择">请选择option>
select>月
<select name="" id="">
<option value="请选择">请选择option>
select>日
td>
tr>
<tr>
<td>所在地区td>
<td>
<input type="text">
td>
tr>
<tr>
<td>学历td>
<td><input type="text" value="">td>
tr>
<tr>
<td>个人介绍td>
<td><textarea name="" id="" cols="30" rows="5">textarea>td>
tr>
<tr>
<td>爱好td>
<td>
<input type="checkbox" name="hobby" id="motion"> <label for="motion">运动label>
<input type="checkbox" name="hobby" id="Photography"> <label for="Photography">摄影label>
<input type="checkbox" name="hobby" id="music"> <label for="music">音乐label>
<input type="checkbox" name="hobby" id="study"> <label for="study">学习label>
<input type="checkbox" name="hobby" id="game"> <label for="game">游戏label>
<input type="checkbox" name="hobby" id="food"> <label for="food">美食label>
td>
tr>
<tr>
<td>td>
<td>td>
tr>
<tr>
<td>td>
<td> <input type="submit" value="点击注册">td>
tr>
<tr>
<td>td>
<td><input type="checkbox" checked="checkbox">我同意注册条款和会员加入标准td>
tr>
<tr>
<td>td>
<td><a href="#">我是会员，立即登录a>td>
tr>
<tr>
<td>td>
<td>
<h4>我承诺h4>
<ul>
<li>年满18岁li>
<li>真诚寻找另一半li>
<li>态度认真负责li>
ul>
td>
tr>
table>
body>
html>
CSS3 50%
CSS简介
css主要用来美化页面的，同时能够对多数标签进行美化，可以简化代码
HTML主要写出这里那里是什么东东，对于那个东东的好看不好看，由css来管理
CSS语法
style{
选择器 {样式}——即——给谁改样式 {改什么样式}
}
CSS代码风格
展开式、全部小写字母、冒号后和大括号前要有空格
CSS基础选择器
标签选择器
将一类标签名称作为选择器，即对所有这类标签进行样式修改，全局定义
类选择器
.类名{
属性1；
属性2；
……
}
对HTML中想要修改的标签加入类属性class=“类名”，即将想要修改样式的标签纳入到我们所规定的类之中
类选择器-多类名
及对标签类属性定义多个类名，如：
Arther
注意类名之间用空格分开,可以等同于自己定义类，类里写样式，哪里需要这个样式直接调用即可，增加了复用性
id选择器
<style>
#自定义名称{
样式1；
样式2；
}
style>
<div id="自定义名称">
Hello World!
div>
id选择器和类选择器有点相似，但是id选择器只能调用一次，别人无法使用
通配符选择器
格式
<style>
* {
属性1：属性值;
…………
}
style>
可对页面中的所有标签进行修改
选择器总结
基础选择器
作用
特点
使用情况
用法
标签选择器
可以选出所有相同的标签
不能差异化选择
较多
p {color: red;}
类选择器
可以选出一个或者多个标签
可以根据需求进行选择
非常多
.nav {color: red;}
id选择器
一次只能选择一个标签
ID属性只能在每个HTML文件中出现一次，由于其安全性，经常搭配js使用
一般和js搭配使用
#nav {color: red;}
通配符选择器
选择所有的标签
选择的太多了
特殊情况使用
* {color: red;}
CSS字体属性
font-family
来定义文本字体系列
font-family:Microsoft Yahei,"Arail","微软雅黑"
/*各个字体之间必须使用英文状态下的逗号隔开
一般如果字体名称有空格的字体要加引号*/
font-size
用来定义字体大小，默认16px
font-weight
用来定义字体的粗细程度，默认normal，可选bold、bolder、lighter、number或者数字；提倡数字
font-style
用来定义文字样式，默认normal，可选italic（i）斜体；
字体复合属性
body {
font: font-style font-weight font-size/line-height font-family;
}/*不可更改数据*/
CSS文本属性
color
文本颜色 知道名称预定义、十六进制、rgb表示色彩即可，常用十六进制
text-align
文本对齐 默认左对齐，left|right|center
text-decoration
文本装饰 默认none没有装饰，none无装饰|underline下划线|overline上划线|line-through删除线 重点记住下划线underline即可
text-indent
文本缩进 默认0px，可根据需要进行调整，可正可负，em是一个文字大小的单位
line-height
文本行间距 默认0px，可根据需要进行调整，行间距=文字高度+上间距+下间距，例如：line-height=30px，文字高度默认16px，所以文字与上下行的间距皆为7px。
CSS文本属性总结
属性
表示
注意点
color
文本颜色
我们通常用十六进制的形式来表示颜色
text-align
文本对齐
left、right、center
text-index
文本缩进
通常使用段落首行缩进2个字符的距离，text-index：2em
text-decoration
文本修饰
下划线underline、取消下划线none
line-height
行高
控制行与行之间的距离
CSS引入方式
内部样式表
在HTML文件中将所有的CSS代码放在
嵌入式样式表
直接在HTML标签里添加style属性，并将CSS代码定义于style属性中
<body>
<p style="color: green;text-size:24px;">
这个文字是绿色的,字体大小24px
p>
body>
外部样式表
单独创建一个CSS文件，将所有CSS代码放在其中，然后将CSS文件的链接在HTML中使用即可，外部样式表也是最常用的CSS引入方式。
<link rel="stylesheet" bref="sytle.css">
调试工具
Emmet语法
Emmet语法的前身是Zen coding，加快编码速度用的，VScode已经集成了
- 输入标签后按TAB快速生成标签
- 如果想要生成多个相同的标签，使用 * 号即可，比如 输入div*3后按TAB即可快速生成三个div
- 有父子关系的标签使用>,比如ul>li即在ul标签中有li
- 有兄弟关系的标签用+
- 要生成带有类名或者id的盒子，直接使用.demo或者#two 按TAB即可
- 生成有顺序的标签使用$ 比如.demo$*5 即生成
- 想要增加的内容在标签后加{}在其中加入内容即可
各个语法之间可以相互搭配使用
复合选择器
后代选择器
可以选择父元素里的子元素，外层标签在前，内层标签在后，中间空格隔开
元素1 元素2 {样式声明}
元素1是父元素，元素2是子元素，但是是针对所有子元素进行样式修改，子代的子代仍旧是子代。
子选择器
仅选择某元素的最近一级子元素，即长子？
元素1>元素2{样式声明}
对于与元素2同级的元素或者元素2的子元素统统未被选择
并集选择器
并集选择器可以选择多组标签，同时为他们定义相同的样式
在选择的元素之间使用逗号，连接
元素1，元素2{样式声明}
元素1以及元素2等可搭配其他选择器使用
伪类选择器
链接伪类选择器
伪类选择器用于向某些选择器添加特殊的效果
默认的链接是蓝色+下划线
a:link {
选择所有未被访问的链接
}
a:visited {
选择所有已被访问过的链接
}
a:hover {
选择鼠标经过的链接
}
a:active {
选择鼠标点击并未松开鼠标的链接
}
为了保证伪类选择器正常执行，一般伪类选择器是拥有前后顺序的，遵循LVHA的顺序：link、visited、hover、active
:focus选择器
对获得光标的表单进行样式修改
input:focus {
background-color:blue;
}
CSS的元素显示模式
整体分为块元素和行内元素
块元素：
一次占用一整行的元素，像是div,h1~h6,p,ul,ol,li
独占一行；高宽内外边距可控；默认宽度是父级容器宽度的100%；
文字类元素里不可使用块级元素，文字类元素：h1~h6;p。
行内元素：
一行内可以使用多个，像是a,strong,b,em,i,del,s,ins,u,span
一行可以显示多个；高宽直接设置无效；默认宽度是其本身内容的宽度；行内 元素只能收纳文本以及其他行内元素。
行内块元素：
img、input、td，一行显示多个，默认宽度是其内容宽度，可控高宽
元素显示模式转换：
display：block；转换为块元素 （常用）
display：inline；转换为行内元素
display：inline-block；转换为行内块元素 （常用）
小工具：
snipaste
F1截图、F3贴图并置顶、alt取色、shift切换取色模式
CSS背景
background-color:trasparent|color默认透明，可设定颜色
background-image:none|url(url)默认无，可设定图片地址
background-repeat:repeat|no-repeat|repeat-x|repeat-y默认横纵平铺，可设定不平铺、横向平铺、纵向平铺
background-position:x y;根据横向和纵向设定位置
background-attachment:scroll|fixed; 设定图像滚动或者固定
background:背景颜色 图片地址 背景平铺 图片滚动 图片位置；用以简化代码
background:rgba(0,0,0,0.5)；red green blue alpha 红 绿 蓝 透明度主要用于调节透明度，进对盒子生效，对盒子里的内容不生效
CSS三大特性
层叠性
相同的选择器 中 设置相同类型的样式，此时哪一个距离结构近使用哪个样式，被覆盖的样式在浏览器中呈现画中线的状态
继承性
子标签会继承父标签的样式，对div声明字体大小以及颜色等样式，其中的p标签也会拥有这些适用样式，在浏览器中显示为Inherited from div即继承自div
font:12px/1.5 Microsoft YaHei;
行高的特殊写法，1.5即指行高是文字大小的1.5倍，若设定元素的子元素设置了文字大小，例如16px，那么行高就是24px，如果没有设定，则继承父元素的文字大小以及行高（文字大小的1.5呗）。
优先级
当多个选择器指定同一个元素，就会有优先级的产生；
选择器相同则执行叠加性
选择器不同则根据权重进行先后级别的排序，一般范围越小，权重越大
记得继承的权重是0，无论父元素的权重有多大，子元素得到的权重都是零
特别注意：选择器的权重会有叠加，像是ul li {}的权重大于li{}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eBVqvycJ-1641721098974)(C:\Users\haozh\AppData\Roaming\Typora\typora-user-images\image-20211124193809131.png)]
CSS盒子
盒子模型
一个容器，包括：边框border、外边距margin、内边距padding以及内容content
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JuAoGMgA-1641721098975)(C:\Users\haozh\AppData\Roaming\Typora\typora-user-images\image-20211124200600934.png)]
border
属性
解释
参数
border-width
定义边框粗细
px
border-style
定义边框线样式
solid实线|dashed虚线|dotted点线
border-color
定义边框线颜色
rpga
border-collapse
合并边框
collapse
边框的设定会影响盒子的大小
padding
padding-left、padding-right、padding-top、padding-bottom左右上下内边距
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WGMHdBIP-1641721098976)(C:\Users\haozh\AppData\Roaming\Typora\typora-user-images\image-20211124210631405.png)]
margin
外边距与border相同相同
外边距可以实现块级盒子水平居中：
- 盒子指定宽度
- 盒子左右外边距都设置为auto
- 常见写法：
margin-left:auto;
margin-right:auto;
/*直接设定左右*/
margin:auto;
/*设置上下左右都是auto*/
margin:0 auto;
/*设置上下外边距为0，左右为auto*/
/*对于行内元素和行内块元素的水品剧中方法是为其父元素添加text-align:center*/
解决外边距塌陷问题：
外边距塌陷指在想要设定子元素的外边距时会应用到父元素上
<style>
.father {
width: 400px;
height: 400px;
background-color: blue;
margin-top: 40px;
/*border: 1px solid transparent;*/
}
.son {
width: 200px;
height: 200px;
background-color: white;
margin-top: 100px;
}
style>
head>
<body>
<div class="father">
<div class="son">
div>
div>
body>
![image-20211126112216308]()
解决方法：
- 为父元素加上边框border:1px solid transparent;但是盒子会被撑大
- 为父元素加上内边距padding:100px;会被撑大而且还要计算好麻烦
- 为父元素添加overflow:hidden;很常用，且盒子不会被撑大
清除默认内外边距
不同的浏览器会有自带的内外边距，清除方法：
* {
margin: 0;
padding: 0;
}
对于页面中的产品标题，为了能够被搜索引擎所找到，需要为其设置为标题标签，为达成不同作用需要用不同语义的标签。
CSS3 新增样式
圆角边框
border-radius:10px;圆角边框半径为10
border-radius:50%;圆形
border-radius:height/2;将数值设定为高度的一半，则矩形左右边是圆
border-radius:左上 右上 右下 左下;顺时针旋转
盒子阴影
box-shadow:h-shadow v-shadow blur spread color inset;
h-shadow
必需，水平阴影，可负
v-shadow
必需，垂直阴影，可负
blur
可选，模糊距离
spread
可选，阴影尺寸
color
可选，阴影颜色
inset
可选，内阴影
文字阴影
text-shadow:h-shadow v-shadow blur color;
浮动
经典网页布局方式：标准流、浮动、定位
标准流
也就是根据行内元素、行内块元素、块元素的默认摆放方式，一个挨着一个
浮动
浮动就是将标签脱离原有的排列规定，处于浮动状态，向属性值的方向浮动，直到碰到另一个浮动框的边缘。
选择器 {
float:属性值;
}
/*属性值有none|left|right*/
浮动特性
- 浮动元素会脱离标准流，原有位置会空出来，让给标准流标签
- 浮动元素会一行内显示，并且元素顶部对齐
- 浮动的元素会具有行内块元素的特性
浮动常用形式
为了约束浮动元素，网页布局一般采用：
先用标准流的父元素排列上下位置，之后内部的子元素使用浮动排列左右位置，符合网页布局第一准则
注意
浮动只会影响后面的标准流
清除浮动
不确定子元素数量，可以利用子元素将父盒子撑开，但是如果父盒子不加上高度，之后的父盒子会填补空位，影响到之后的盒子，因此需要清除浮动
选择器 {
clear：属性值；
}/*left、right、both，清除左浮动、右浮动、同时清除左右浮动*/
清除浮动的方法
- 额外标签法，或者叫隔墙法，W3C推荐做法
在最后一个浮动元素后面加上：
<div style="clear:both">
或者其他块级标签也可以
但是会添加很多无意义的标签，不利于代码的结构化
div>
- 父级添加overflow属性
.box {
overflow:hidden;
}/*代码简洁，但无法显示溢出的部分*/
- 父级添加after伪元素
.clearfix:after {
content:"";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {
*zoom:1;
/*此为IE6、7专有*/
}
/*结构简单，无添加标签，但是要照顾低版本浏览器*/
- 父级添加双伪元素
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:box;
}
.clearfix {
*zoom:1;
}/*代码简洁但要照顾低版本浏览器*/
常见网页布局
自上向下使用标准流盒子，其中的内容使用浮动元素实现左右布局。
CSS定位
定位组成
定位=定位模式+边偏移
定位模式用于指定一个元素在文档中的定位方式，边偏移则决定了该元素的最终位置
定位模式
定位模式
语义
使用方法
详细解释
static
静态定位
选择器 {position：static；}
无定位的意思
relative
相对定位
选择器 {position：relative；}
相对原来的位置来定位并且原来的不会空出来（不脱标），多数情况是给绝对定位当爹的
absolute
绝对定位
选择器 {position：absolute；}
相对于有定位的最近一级祖先元素来定位，原来的位置会空出来（脱标）没有祖先元素或者祖先元素未定位则以浏览器为准定位
fixed
固定定位
选择器 {position：fixed；}
相对于浏览器的可视窗口进行定位
sticky
粘性定位
选择器 {position：sticky；top：10px；}
可以认为是相对定位和固定定位的混合，占有原来位置，参照可视窗口移动，必须有top、bottom、left、right中的一个生效
边偏移
边偏移有top、bottom、left、right四个属性
定位使用场景
子绝父相：使用最多的！子盒子使用绝对定位，父盒子使用相对定位
绝对定位小技巧
固定在版心的右侧可以使用
.w {
height:2000px;
width:1200px;
}
.AD {
position:fixed;
top:50%;
right:50%+600px;
}
/*right:50%+版心高度的一半*/
定位叠放
使用z-index属性来控制盒子的前后顺序
选择器 {
z-index:0;
/*谁的数大谁显示在上面*/
/*数值相同时，按照书写顺序，后来居上*/
}
绝对居中
.box {
position:fixed;
width:500px;
height:500px;
top:50%;
left:50%;
margin-top:-250px;
mrigin-left:-250px;
background-color: #123456;
}
定位特殊特性
- 行内元素添加了绝对定位或者固定定位，可以直接设置高度和宽度
- 块级元素添加绝对或者固定定位，不给高度宽度，则由内容撑开
- 浮动元素仅仅会遮住其下的标准流盒子，并不会遮住盒子里的文字以及图片，但是绝对定位（固定定位）会压住下面标准流所有的内容（浮动原是做文字环绕用的，可以看word里的文字环绕显示）
元素的显示与隐藏
display:block;
display:none;隐藏对象并且位置空了出来
visibility:hidden;隐藏对象但是位置还在占有
overflow:visible;溢出盒子的内容仍旧显示
overflow:hidden;隐藏溢出的内容
overflow:scroll;显示滚动条，拉动滚动条可以看到溢出的内容
overflow:auto;溢出时显示滚动条，不溢出时则不显示
精灵图
为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度
精灵图的使用原理：就是将好多个图片合成为一个大图片从服务器发送过来，通过设定一个固定大小的盒子（像是个窗口）以及background-position属性调整大图片的位置，使我们只能看到小图片，像是剪贴蒙版。
CSS三角做法
.box {
width: 0;
height: 0;
border: 100px solid transparent;
border-top-color: #000;
}/*top就是指向下的三角，以此类推*/
CSS用户样式
鼠标样式
li {
cursor:pionter;
}
/*default小白、pionter小手、move移动、text文本、not-allowed禁止*/
清除表单轮廓线
input {
outline:none;
}
/*去除轮廓线就是光标选中表单后去除掉默认的蓝色亮边框*/
清除文本域自定义大小
textarea {
resize:none;
}
文字图片对齐
图片文字默认对齐方式是：图片的底线与文字的基线（写英文的那个线）对齐。
img {
vertical-align:middle;
}
/*bottom底线对齐、middle中线对齐、top顶线对齐*/
H5C3 10%
品优购项目网站 20%
CSS属性书写顺序
定位属性——自身属性——文本属性——其他属性
目录命名
项目文件夹、样式文件夹（css）、脚本文件夹（js）、样式类图片文件夹（img）、产品类图片文件夹（upload）、字体类文件夹（fonts）
字体图标的引用
在css文件中声明并使用：
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?7kkyc2');
src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
url('fonts/icomoon.woff?7kkyc2') format('woff'),
url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
span {
font-family:'icomoon';
/*+字体样式+*/
}
学成在线案例
CSS属性书写顺序
- 布局定位属性：display / position/float / clear/visibility / overflow display 首写
- 自身属性：width / height / margin / padding / border / background
- 文本属性：color / font/text-decoration / text-align / vertical-align / white-space / break-word
- 其他属性：content / cursor / border-radius / box-shadow / text-shadow
导航栏制作
实际开发中，我们不会直接用链接a标签，而是用li包含链接（li+a）的做法
- li+a语义更加清晰
- 直接使用a，搜索引擎容易辨别为有堆砌关键字嫌疑的网站，会降低网站排名
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>学成在线title>
<link rel="stylesheet" href="../学成在线案例/style.css">
head>
<body>
<div class="header w">
<div class="logo">
<img src="../学成在线案例/images/logo.png" alt="学成在线">
div>
<div class="nav">
<ul>
<li><a href="#">首页a>li>
<li><a href="#">课程a>li>
<li><a href="#">职业规划a>li>
ul>
div>
<div class="search">
<input type="text" value="输入关键词">
<button>button>
div>
<div class="user">
<img src="../学成在线案例/images/user.png" alt="我的空间">
qq-lihuayyds
div>
div>
<div class="banner">
<div class="w">
<div class="subnav">
<ul>
<li><a href="#">前端开发<span>>span>a>li>
<li><a href="#">后端开发<span>>span>a>li>
<li><a href="#">移动开发<span>>span>a>li>
<li><a href="#">人工智能<span>>span>a>li>
<li><a href="#">商业预测<span>>span>a>li>
<li><a href="#">云计算&大数据<span>>span>a>li>
<li><a href="#">运维&从设计<span>>span>a>li>
<li><a href="#">UI设计<span>>span>a>li>
<li><a href="#">产品<span>>span>a>li>
ul>
div>
<div class="course">
<h2>我的课程表h2>
<div class="bd">
<ul>
<li>
<h4>继续学习 程序语言设计h4>
<p>正在学习-使用对象p>
li>
<li>
<h4>继续学习 程序语言设计h4>
<p>正在学习-使用对象p>
li>
<li>
<h4>继续学习 程序语言设计h4>
<p>正在学习-使用对象p>
li>
<a href="#" class="more">全部课程a>
ul>
div>
div>
div>
div>
<div class="goods w">
<h3>精品推荐h3>
<ul>
<li><a href="#">JQerya>li>
<li><a href="#">Sparka>li>
<li><a href="#">MySQLa>li>
<li><a href="#">JavaWeba>li>
<li><a href="#">Java Scripta>li>
ul>
<a href="#" class="mod">修改兴趣a>
div>
<div class="box w">
<div class="box-hd">
<h3>精品推荐h3>
<a href="#">查看全部a>
div>
<div class="box-bd">
<ul>
<li>
<a href="#"><img src="../学成在线案例/images/goods1.png" alt="none">a>
<h4>Think PHP 5.0 博客系统实战项目演练 h4>
<div class="info"><span>高级span> • 1125人在学习div>
li>
<li>
<a href="#"><img src="../学成在线案例/images/goods2.png" alt="none">a>
<h4>Android 网络图片加载框架详解h4>
<div class="info"><span>高级span> • 1125人在学习div>
li>
<li>
<a href="#"><img src="../学成在线案例/images/goods3.png" alt="none">a>
<h4>Angular 2 最新框架+主流技术+项目实战 h4>
<div class="info"><span>高级span> • 1125人在学习div>
li>
<li>
<a href="#"><img src="../学成在线案例/images/goods3.png" alt="none">a>
<h4>Angular 2 最新框架+主流技术+项目实战 h4>
<div class="info"><span>高级span> • 1125人在学习div>
li>
<li>
<a href="#"><img src="../学成在线案例/images/goods4.png" alt="none">a>
<h4>Android Hybrid APP开发实战 H5+原生！h4>
<div class="info"><span>高级span> • 1125人在学习div>
li>
<li>
<a href="#"><img src="../学成在线案例/images/goods1.png" alt="none">a>
<h4>Think PHP 5.0 博客系统实战项目演练 h4>
<div class="info"><span>高级span> • 1125人在学习div>
li>
<li>
<a href="#"><img src="../学成在线案例/images/goods2.png" alt="none">a>
<h4>Android 网络图片加载框架详解h4>
<div class="info"><span>高级span> • 1125人在学习div>
li>
<li>
<a href="#"><img src="../学成在线案例/images/goods3.png" alt="none">a>
<h4>Angular 2 最新框架+主流技术+项目实战 h4>
<div class="info"><span>高级span> • 1125人在学习div>
li>
<li>
<a href="#"><img src="../学成在线案例/images/goods3.png" alt="none">a>
<h4>Angular 2 最新框架+主流技术+项目实战 h4>
<div class="info"><span>高级span> • 1125人在学习div>
li>
<li>
<a href="#"><img src="../学成在线案例/images/goods4.png" alt="none">a>
<h4>Android Hybrid APP开发实战 H5+原生！h4>
<div class="info"><span>高级span> • 1125人在学习div>
li>
ul>
div>
div>
<div class="junior w">
<div class="junior-hd">
<h3>编程入门h3>
<div class="junior-stage">
<ul>
<li><a href="#">热门a>li>
<li><a href="#">初级a>li>
<li><a href="#">中级a>li>
<li><a href="#">高级a>li>
ul>
div>
<a href="#">查看全部a>
div>
<div class="junior-bd">
<div class="junior-bd-left">
<img src="../学成在线案例/images/PHP入门：基础语法到实际运用零基础入门：语法与界进阶：网络与数据缓存界面到数据存储.png" alt="none">
div>
<div class="junior-bd-right">
<div class="junior-bd-right-top">
<img src="../学成在线案例/images/junior5.png" alt="none">
div>
<div class="junior-bd-right-bottom">
<ul>
<li>
<img src="../学成在线案例/images/junior1.png" alt="none">
<h4>|Android Hybrid APP开发<br>|实战 H5+原生！ h4>
<div class="info"><span>高级span> • 1125人在学习div>
li>
<li>
<img src="../学成在线案例/images/junior2.png" alt="none">
<h4>|Kami2首页界面切换效果 <br>|h4>
<div class="info"><span>高级span> • 1125人在学习div>
li>
<li>
<img src="../学成在线案例/images/junior3.png" alt="none">
<h4>|Unity Profiler入门 <br>|h4>
<div class="info"><span>高级span> • 1125人在学习div>
li>
<li>
<img src="../学成在线案例/images/junior4.png" alt="none">
<h4>|Cocos2d-x 引擎源码中的<br>|纹理优化 h4>
<div class="info"><span>高级span> • 1125人在学习div>
li>
ul>
div>
div>
div>
div>
<div class="footer">
<div class="w">
<div class="copyright">
<img src="../学成在线案例/images/logo.png" alt="none">
<p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。
<br>© 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号
p>
<a href="#" class="app"><button>下载appbutton>a>
div>
<div class="links">
<dl>
<dt>关于学成网dt>
<dd><a href="#">关于a>dd>
<dd><a href="#">管理团队a>dd>
<dd><a href="#">工作机会a>dd>
<dd><a href="#">客户服务a>dd>
<dd><a href="#">帮助a>dd>
dl>
<dl>
<dt>新手指南dt>
<dd><a href="#">如何注册a>dd>
<dd><a href="#">如何选课a>dd>
<dd><a href="#">如何拿到毕业证a>dd>
<dd><a href="#">学分是什么a>dd>
<dd><a href="#">考试未通过怎么办a>dd>
dl>
<dl>
<dt>合作伙伴dt>
<dd><a href="#">合作机构a>dd>
<dd><a href="#">合作导师a>dd>
dl>
div>
div>
div>
body>
html>
* {
margin: 0;
padding: 0;
}
/* 清除网页原有内外边距 */
.w {
width: 1200px;
margin: auto;
}
/* 确定版心，之后如果有盒子需要直接添加即可 */
body {
background-color: #f3f5f7;
}
a {
text-decoration: none;
}
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:box;
}
.clearfix {
*zoom:1;
}/*代码简洁但要照顾低版本浏览器*/
li {
list-style: none;
}
.header {
height: 42px;
/* background-color: #a1a1a1; */
/* 此处的margin如果仅仅设定30px，则会将.w的margin:auto覆盖掉 */
margin: 30px auto;
}
.logo {
float: left;
width: 198px;
height: 42px;
/* background-color: #b1b1b1; */
}
.nav {
float: left;
margin-left: 60px;
}
.nav ul li {
float: left;
margin: 0 15px;
}
.nav ul li a {
display: block;
height: 42px;
padding: 0 10px;
line-height: 42px;
font-size: 18px;
color: #050505;
text-decoration: none;
}
.nav ul li a:hover {
border-bottom: 2px solid #00a4ff;
color: #036ba3;
}
.search {
float: left;
width: 412px;
height: 42px;
/* background-color: #002020; */
margin-left: 50px;
}
.search input {
float: left;
width: 345px;
height: 40px;
border: 1px solid #00a4ff;
border-right: 0px;
color: #bfbfbf;
font-size: 14px;
padding-left: 15px;
}
.search button {
float: left;
width: 50px;
height: 42px;
/* background-color: #abcabc; */
border: 0px;
/* border:0px;去除按钮边框 */
background: url(../学成在线案例/images/button.png);
}
.user {
float: right;
line-height: 42px;
margin-right: 30px;
font-size: 14px;
color: #666;
}
.banner {
height: 421px;
background-color: rgb(28, 3, 108);
}
.banner .w {
height: 421px;
background-color: #326123;
background: url(../学成在线案例/images/banner.png) no-repeat top center;
}
.subnav {
float: left;
width: 190px;
height: 421px;
background:rgba(0,0,0,0.3);
}
.subnav ul li {
height: 45px;
line-height: 45px;
padding: 0 20px;
}
.subnav ul li a {
font-size: 14px;
color: #fff;
text-decoration: none;
}
.subnav ul li a:hover {
color: #00a4ff;
}
.banner ul li a span {
float: right;
}
.course {
float: right;
width: 230px;
height: 300px;
background-color: #ffffff;
/* 浮动的盒子不会和父盒子外边距合并，也就不会塌陷 */
margin-top: 50px;
}
.course h2 {
height: 48px;
line-height: 48px;
text-align: center;
background-color: #9bceea;
font-size: 18px;
color: white;
letter-spacing: 4px;
}
.bd {
padding: 0 20px;
}
.bd ul li {
padding: 14px 0;
border-bottom: 1px solid rgba(0,0,0,0.5);
}
.bd ul li h4 {
font-size: 16px;
color: #4e4e4e;
}
.bd ul li p {
font-size: 12px;
color: #a5a5a5;
}
.bd .more {
display: block;
height: 38px;
border: 1px solid #00a4ff;
text-decoration: none;
line-height: 38px;
text-align: center;
font-size: 16px;
color: #00a4ff;
font-weight: 700;
margin-top: 5px;
}
.goods {
height: 60px;
margin-top: 10px;
background-color: #fff;
box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.1);
line-height: 60px;
}
.goods h3 {
float: left;
margin: 0 30px;
font-size: 16px;
color: #00a4ff;
}
.goods ul {
float: left;
margin-left: 30px;
}
.goods ul li {
float: left;
}
.goods ul li a {
padding: 0 30px;
font-size: 16px;
color: #050505;
border-left: 1px solid #ccc;
}
.mod {
float: right;
margin-right: 30px;
font-size: 14px;
color: #00a4ff;
}
.box {
height: 630px;
margin-top: 30px;
}
.box-hd {
height: 45px;
}
.box-hd h3 {
float: left;
font-size: 20px;
color: #494949;
}
.box-hd a {
float: right;
}
.box-bd ul {
width: 1225px;
/* ul里的li加上右外边距时最后一个会到下一行，
要么清除位置不对盒子的右外边距，
要么将父盒子的宽度增大 */
}
.box-bd ul li {
float: left;
margin-right: 15px;
width: 228px;
height: 270px;
background-color: #fff;
margin-bottom: 25px;
box-shadow: -2px 2px 5px 0px rgba(0,0,0,0.3);
}
.box-bd ul li img {
width: 100%;
}
.box-bd ul li h4 {
margin: 20px 20px 20px 25px;
font-size: 14px;
color: #050505;
font-weight: 400;
}
.box-bd .info {
margin: 0 20px 0 25px;
font-size: 12px;
color: #999;
}
.box-bd .info span {
color: #ff7c2d;
}
.junior {
margin-top: 30px;
height: 450px;
/* background-color: #afafaf; */
}
.junior-hd {
height: 45px;
line-height: 45px;
}
.junior-hd h3 {
float: left;
margin-right: 280px;
font-size: 20px;
color: #494949;
}
.junior-hd .junior-stage ul li a {
float: left;
font-size: 16px;
color: #868686;
margin-left: 72px;
}
.junior-hd .junior-stage ul li a:hover {
color: #00a4ff;
}
.junior-hd a {
float: right;
}
.junior-bd-left {
float: left;
}
.junior .junior-bd .junior-bd-right .junior-bd-right-top {
float: right;
}
.junior-bd-right-bottom ul li {
float: left;
margin: 16px 0 0 15px;
width: 228px;
height: 270px;
background-color: #fff;
}
.junior-bd-right-bottom ul li h4 {
margin: 20px 20px 20px 25px;
font-size: 14px;
color: #050505;
font-weight: 400;
}
.junior ul li .info {
margin-left: 15px;
margin-bottom: 15px;
font-size: 12px;
color: #999;
}
.junior .info span {
color: #ff7c2d;
}
.footer {
height: 300px;
background-color: #fff;
}
.footer .w {
padding-top: 35px;
}
.copyright {
float: left;
}
.copyright p {
font-size: 12px;
color: #666;
margin: 20px 0 15px 0;
}
.copyright .app button {
display: block;
width: 118px;
height: 33px;
border: 1px solid #00a4ff;
text-align: center;
line-height: 33px;
font-size: 16px;
color: #00a4ff;
}
.links {
float: right;
}
.links dl {
float: left;
margin-left: 100px;
}
.links dl dt {
font-size: 16px;
color: #333;
margin-bottom: 5px;
}
.links dl dd {
font-size: 12px;
color: #333;
}
文本格式化标签
常用其属性有：src图片地址、title提示文本、alt替换文本、width宽度、height高度、border边框 另外注意路径的问题（相对路径、绝对路径） 标签用于定义超链接，作用是跳转到另一个页面 外部链接：href中填入外部的链接，像是“http://www.baidu.com” 内部链接：直接链接内部的网页名称即可，在href中填入”index.html“ 空链接：仅有链接可点样式，点击不会跳转，href中填”#“ 下载链接：href中填入文件或者压缩包的文件地址，像是”…/img/img.zip" 网页元素链接：即将文字变为网页里的元素，致使点击这些元素的时候就会跳转页面，像是图片图形或者视频。 锚点链接：点击锚点链接，可以快速定位到页面中的某个位置 记住常用的即可 是 空格符;< 是 小于号;> 是 大于号;¥ 是 人民币符号 表格是用来展示数据的,不是用来布局的_??? table>表格标签,相当于excel中的sheet,用于创建表格 tr>行标签,用于创建行 td>单元格标签,用于创建单元格,放在行中 th>表头单元格标签(table head),可替换一般的td单元格,使单元格中的文字加粗居中(或其他突出形式) 表格头部标签(table head) 表格主体标签(table body) 组成有表单域、表单控件、提示信息三个部分组成 单标签： 解释：input表示需要用户输入，即收集用户信息；type即类型，可以是文本框text、密码password、提交按钮submit、正常按钮button、复选框checkbox、单选按钮radio等等 radio要有同样的name属性才可以实现多个选一个 value规定input元素的值，主要给后台人员提示用 checked在单选框或复选框中会在页面加载时默认选中 maxlength规定输入字符的最大长度 submit提交按钮以及reset重置按钮，可加上value值来修改按钮显示的文字 button普通按钮搭配value以及之后学习的js使用 尝试placeholder属性 label标签常用于绑定表单元素，像是点击一个标签表单元素会被选中 男 点击后边标签里的男即可选中单选框，文字也可替换为图片视频等 表单域元素，需要输入的文字比较多的时候会使用，像是个人说明框、评论框等等 css主要用来美化页面的，同时能够对多数标签进行美化，可以简化代码 HTML主要写出这里那里是什么东东，对于那个东东的好看不好看，由css来管理 style{ 选择器 {样式}——即——给谁改样式 {改什么样式} } 展开式、全部小写字母、冒号后和大括号前要有空格 将一类标签名称作为选择器，即对所有这类标签进行样式修改，全局定义 .类名{ 属性1； 属性2； …… } 对HTML中想要修改的标签加入类属性class=“类名”，即将想要修改样式的标签纳入到我们所规定的类之中 及对标签类属性定义多个类名，如： 注意类名之间用空格分开,可以等同于自己定义类，类里写样式，哪里需要这个样式直接调用即可，增加了复用性 id选择器和类选择器有点相似，但是id选择器只能调用一次，别人无法使用 格式 可对页面中的所有标签进行修改 来定义文本字体系列 用来定义字体大小，默认16px 用来定义字体的粗细程度，默认normal，可选bold、bolder、lighter、number或者数字；提倡数字 用来定义文字样式，默认normal，可选italic（i）斜体； 文本颜色 知道名称预定义、十六进制、rgb表示色彩即可，常用十六进制 文本对齐 默认左对齐，left|right|center 文本装饰 默认none没有装饰，none无装饰|underline下划线|overline上划线|line-through删除线 重点记住下划线underline即可 文本缩进 默认0px，可根据需要进行调整，可正可负，em是一个文字大小的单位 文本行间距 默认0px，可根据需要进行调整，行间距=文字高度+上间距+下间距，例如：line-height=30px，文字高度默认16px，所以文字与上下行的间距皆为7px。 在HTML文件中将所有的CSS代码放在 直接在HTML标签里添加style属性，并将CSS代码定义于style属性中 单独创建一个CSS文件，将所有CSS代码放在其中，然后将CSS文件的链接在HTML中使用即可，外部样式表也是最常用的CSS引入方式。 Emmet语法的前身是Zen coding，加快编码速度用的，VScode已经集成了 各个语法之间可以相互搭配使用 可以选择父元素里的子元素，外层标签在前，内层标签在后，中间空格隔开 元素1是父元素，元素2是子元素，但是是针对所有子元素进行样式修改，子代的子代仍旧是子代。 仅选择某元素的最近一级子元素，即长子？ 对于与元素2同级的元素或者元素2的子元素统统未被选择 并集选择器可以选择多组标签，同时为他们定义相同的样式 在选择的元素之间使用逗号，连接 元素1以及元素2等可搭配其他选择器使用 伪类选择器用于向某些选择器添加特殊的效果 默认的链接是蓝色+下划线 为了保证伪类选择器正常执行，一般伪类选择器是拥有前后顺序的，遵循LVHA的顺序：link、visited、hover、active 对获得光标的表单进行样式修改 整体分为块元素和行内元素 一次占用一整行的元素，像是div,h1~h6,p,ul,ol,li 独占一行；高宽内外边距可控；默认宽度是父级容器宽度的100%； 文字类元素里不可使用块级元素，文字类元素：h1~h6;p。 一行内可以使用多个，像是a,strong,b,em,i,del,s,ins,u,span 一行可以显示多个；高宽直接设置无效；默认宽度是其本身内容的宽度；行内 元素只能收纳文本以及其他行内元素。 img、input、td，一行显示多个，默认宽度是其内容宽度，可控高宽 display：block；转换为块元素 （常用） display：inline；转换为行内元素 display：inline-block；转换为行内块元素 （常用） snipaste F1截图、F3贴图并置顶、alt取色、shift切换取色模式 background-color:trasparent|color默认透明，可设定颜色 background-image:none|url(url)默认无，可设定图片地址 background-repeat:repeat|no-repeat|repeat-x|repeat-y默认横纵平铺，可设定不平铺、横向平铺、纵向平铺 background-position:x y;根据横向和纵向设定位置 background-attachment:scroll|fixed; 设定图像滚动或者固定 background:背景颜色 图片地址 背景平铺 图片滚动 图片位置；用以简化代码 background:rgba(0,0,0,0.5)；red green blue alpha 红 绿 蓝 透明度主要用于调节透明度，进对盒子生效，对盒子里的内容不生效 相同的选择器 中 设置相同类型的样式，此时哪一个距离结构近使用哪个样式，被覆盖的样式在浏览器中呈现画中线的状态 子标签会继承父标签的样式，对div声明字体大小以及颜色等样式，其中的p标签也会拥有这些适用样式，在浏览器中显示为Inherited from div即继承自div 行高的特殊写法，1.5即指行高是文字大小的1.5倍，若设定元素的子元素设置了文字大小，例如16px，那么行高就是24px，如果没有设定，则继承父元素的文字大小以及行高（文字大小的1.5呗）。 当多个选择器指定同一个元素，就会有优先级的产生； 选择器相同则执行叠加性 选择器不同则根据权重进行先后级别的排序，一般范围越小，权重越大 记得继承的权重是0，无论父元素的权重有多大，子元素得到的权重都是零 特别注意：选择器的权重会有叠加，像是ul li {}的权重大于li{} [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eBVqvycJ-1641721098974)(C:\Users\haozh\AppData\Roaming\Typora\typora-user-images\image-20211124193809131.png)] 一个容器，包括：边框border、外边距margin、内边距padding以及内容content [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JuAoGMgA-1641721098975)(C:\Users\haozh\AppData\Roaming\Typora\typora-user-images\image-20211124200600934.png)] 边框的设定会影响盒子的大小 padding-left、padding-right、padding-top、padding-bottom左右上下内边距 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WGMHdBIP-1641721098976)(C:\Users\haozh\AppData\Roaming\Typora\typora-user-images\image-20211124210631405.png)] 外边距与border相同相同 外边距可以实现块级盒子水平居中： 解决外边距塌陷问题： 外边距塌陷指在想要设定子元素的外边距时会应用到父元素上 解决方法： 不同的浏览器会有自带的内外边距，清除方法： 对于页面中的产品标题，为了能够被搜索引擎所找到，需要为其设置为标题标签，为达成不同作用需要用不同语义的标签。 border-radius:10px;圆角边框半径为10 border-radius:50%;圆形 border-radius:height/2;将数值设定为高度的一半，则矩形左右边是圆 border-radius:左上 右上 右下 左下;顺时针旋转 也就是根据行内元素、行内块元素、块元素的默认摆放方式，一个挨着一个 浮动就是将标签脱离原有的排列规定，处于浮动状态，向属性值的方向浮动，直到碰到另一个浮动框的边缘。 为了约束浮动元素，网页布局一般采用： 先用标准流的父元素排列上下位置，之后内部的子元素使用浮动排列左右位置，符合网页布局第一准则 浮动只会影响后面的标准流 不确定子元素数量，可以利用子元素将父盒子撑开，但是如果父盒子不加上高度，之后的父盒子会填补空位，影响到之后的盒子，因此需要清除浮动 自上向下使用标准流盒子，其中的内容使用浮动元素实现左右布局。 定位=定位模式+边偏移 定位模式用于指定一个元素在文档中的定位方式，边偏移则决定了该元素的最终位置 边偏移有top、bottom、left、right四个属性 子绝父相：使用最多的！子盒子使用绝对定位，父盒子使用相对定位 固定在版心的右侧可以使用 使用z-index属性来控制盒子的前后顺序 display:block; display:none;隐藏对象并且位置空了出来 visibility:hidden;隐藏对象但是位置还在占有 overflow:visible;溢出盒子的内容仍旧显示 overflow:hidden;隐藏溢出的内容 overflow:scroll;显示滚动条，拉动滚动条可以看到溢出的内容 overflow:auto;溢出时显示滚动条，不溢出时则不显示 为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度 精灵图的使用原理：就是将好多个图片合成为一个大图片从服务器发送过来，通过设定一个固定大小的盒子（像是个窗口）以及background-position属性调整大图片的位置，使我们只能看到小图片，像是剪贴蒙版。 图片文字默认对齐方式是：图片的底线与文字的基线（写英文的那个线）对齐。 定位属性——自身属性——文本属性——其他属性 项目文件夹、样式文件夹（css）、脚本文件夹（js）、样式类图片文件夹（img）、产品类图片文件夹（upload）、字体类文件夹（fonts） 在css文件中声明并使用： 实际开发中，我们不会直接用链接a标签，而是用li包含链接（li+a）的做法盒子标签
图像标签
相对路径分类
符号
同一级路径
不需要符号
下一级路径
/
上一级路径
…/
超链接标签（重点）
<a href="跳转目标" target="目标窗口的弹出方式">文本或者图像a>
<**>_self 当前窗口打开页面;_blank 新窗口打开页面**>
下载地址
注释标签
特殊字符
表格标签
表格标签
表格属性(会在css中经常用到)
属性名
属性值
描述
简述
align
left,center,right
规定表格相对周围元素的对齐方式
单元格对齐方式
border
1,""
规定表格单元是否拥有边框,默认为"",即表示没有边框
单元格边框
cellpadding
像素值
规定单元边沿与其内容之间的空白,默认1像素
单元格边距
cellspacing
像素值
规定单元格之间的空白,默认2像素
单元格间距
width
像素值或者百分比
规定表格的宽度
表格宽度
height
像素值或者百分比
规定表格的高度
表格高度
表格结构标签
单元格合并
列表标签
无序列表（重点）
有序列表（理解）
<ol>
<li>列表项li>
<li>列表项li>
<li>列表项li>
<li>li>
ol>
自定义列表（重点）页尾
<dl>
<dt>项目名称dt>
<dd>项目内容dd>
<dd>项目内容dd>
<dd>项目内容dd>
dl>
表单标签
表单域
<form action="url地址" method="提交方式" name="表单域名称">
各种表单元素控件
form>
表单控件(表单元素)
Input
label
select
<select>
<option>选项一option>
<option selected="selected">默认被选中的选项option>
<option>选项二option>
<option>选项三option>
<option>选项四option>
......
select>
textarea
<textarea cols="列数" rows="行数">通常行数和列数会在css中进行设置textarea>
表单综合案例
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单练习title>
head>
<body>
<h3>青春不常在，抓紧谈恋爱h3>
<table width="600">
<tr>
<td>性别td>
<td>
<input type="radio" name="sex" id="male"> <label for="male">男label>
<input type="radio" name="sex" id="female"> <label for="female">女label>
<input type="radio" name="sex" id="none"> <label for="none">外星人label>
td>
tr>
<tr>
<td>生日td>
<td>
<select name="" id="">
<option value="请选择">请选择option>
select>年
<select name="" id="">
<option value="请选择">请选择option>
select>月
<select name="" id="">
<option value="请选择">请选择option>
select>日
td>
tr>
<tr>
<td>所在地区td>
<td>
<input type="text">
td>
tr>
<tr>
<td>学历td>
<td><input type="text" value="">td>
tr>
<tr>
<td>个人介绍td>
<td><textarea name="" id="" cols="30" rows="5">textarea>td>
tr>
<tr>
<td>爱好td>
<td>
<input type="checkbox" name="hobby" id="motion"> <label for="motion">运动label>
<input type="checkbox" name="hobby" id="Photography"> <label for="Photography">摄影label>
<input type="checkbox" name="hobby" id="music"> <label for="music">音乐label>
<input type="checkbox" name="hobby" id="study"> <label for="study">学习label>
<input type="checkbox" name="hobby" id="game"> <label for="game">游戏label>
<input type="checkbox" name="hobby" id="food"> <label for="food">美食label>
td>
tr>
<tr>
<td>td>
<td>td>
tr>
<tr>
<td>td>
<td> <input type="submit" value="点击注册">td>
tr>
<tr>
<td>td>
<td><input type="checkbox" checked="checkbox">我同意注册条款和会员加入标准td>
tr>
<tr>
<td>td>
<td><a href="#">我是会员，立即登录a>td>
tr>
<tr>
<td>td>
<td>
<h4>我承诺h4>
<ul>
<li>年满18岁li>
<li>真诚寻找另一半li>
<li>态度认真负责li>
ul>
td>
tr>
table>
body>
html>
CSS3 50%
CSS简介
CSS语法
CSS代码风格
CSS基础选择器
标签选择器
类选择器
类选择器-多类名
id选择器
<style>
#自定义名称{
样式1；
样式2；
}
style>
<div id="自定义名称">
Hello World!
div>
通配符选择器
<style>
* {
属性1：属性值;
…………
}
style>
选择器总结
基础选择器
作用
特点
使用情况
用法
标签选择器
可以选出所有相同的标签
不能差异化选择
较多
p {color: red;}
类选择器
可以选出一个或者多个标签
可以根据需求进行选择
非常多
.nav {color: red;}
id选择器
一次只能选择一个标签
ID属性只能在每个HTML文件中出现一次，由于其安全性，经常搭配js使用
一般和js搭配使用
#nav {color: red;}
通配符选择器
选择所有的标签
选择的太多了
特殊情况使用
* {color: red;}
CSS字体属性
font-family
font-family:Microsoft Yahei,"Arail","微软雅黑"
/*各个字体之间必须使用英文状态下的逗号隔开
一般如果字体名称有空格的字体要加引号*/
font-size
font-weight
font-style
字体复合属性
body {
font: font-style font-weight font-size/line-height font-family;
}/*不可更改数据*/
CSS文本属性
color
text-align
text-decoration
text-indent
line-height
CSS文本属性总结
属性
表示
注意点
color
文本颜色
我们通常用十六进制的形式来表示颜色
text-align
文本对齐
left、right、center
text-index
文本缩进
通常使用段落首行缩进2个字符的距离，text-index：2em
text-decoration
文本修饰
下划线underline、取消下划线none
line-height
行高
控制行与行之间的距离
CSS引入方式
内部样式表
嵌入式样式表
<body>
<p style="color: green;text-size:24px;">
这个文字是绿色的,字体大小24px
p>
body>
外部样式表
<link rel="stylesheet" bref="sytle.css">
调试工具
Emmet语法
复合选择器
后代选择器
元素1 元素2 {样式声明}
子选择器
元素1>元素2{样式声明}
并集选择器
元素1，元素2{样式声明}
伪类选择器
链接伪类选择器
a:link {
选择所有未被访问的链接
}
a:visited {
选择所有已被访问过的链接
}
a:hover {
选择鼠标经过的链接
}
a:active {
选择鼠标点击并未松开鼠标的链接
}
:focus选择器
input:focus {
background-color:blue;
}
CSS的元素显示模式
块元素：
行内元素：
行内块元素：
元素显示模式转换：
小工具：
CSS背景
CSS三大特性
层叠性
继承性
font:12px/1.5 Microsoft YaHei;
优先级
CSS盒子
盒子模型
border
属性
解释
参数
border-width
定义边框粗细
px
border-style
定义边框线样式
solid实线|dashed虚线|dotted点线
border-color
定义边框线颜色
rpga
border-collapse
合并边框
collapse
padding
margin
margin-left:auto;
margin-right:auto;
/*直接设定左右*/
margin:auto;
/*设置上下左右都是auto*/
margin:0 auto;
/*设置上下外边距为0，左右为auto*/
/*对于行内元素和行内块元素的水品剧中方法是为其父元素添加text-align:center*/
<style>
.father {
width: 400px;
height: 400px;
background-color: blue;
margin-top: 40px;
/*border: 1px solid transparent;*/
}
.son {
width: 200px;
height: 200px;
background-color: white;
margin-top: 100px;
}
style>
head>
<body>
<div class="father">
<div class="son">
div>
div>
body>
清除默认内外边距
* {
margin: 0;
padding: 0;
}
CSS3 新增样式
圆角边框
盒子阴影
box-shadow:h-shadow v-shadow blur spread color inset;
h-shadow
必需，水平阴影，可负
v-shadow
必需，垂直阴影，可负
blur
可选，模糊距离
spread
可选，阴影尺寸
color
可选，阴影颜色
inset
可选，内阴影
文字阴影
text-shadow:h-shadow v-shadow blur color;
浮动
经典网页布局方式：标准流、浮动、定位
标准流
浮动
选择器 {
float:属性值;
}
/*属性值有none|left|right*/
浮动特性
浮动常用形式
注意
清除浮动
选择器 {
clear：属性值；
}/*left、right、both，清除左浮动、右浮动、同时清除左右浮动*/
清除浮动的方法
在最后一个浮动元素后面加上：
<div style="clear:both">
或者其他块级标签也可以
但是会添加很多无意义的标签，不利于代码的结构化
div>
.box {
overflow:hidden;
}/*代码简洁，但无法显示溢出的部分*/
.clearfix:after {
content:"";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {
*zoom:1;
/*此为IE6、7专有*/
}
/*结构简单，无添加标签，但是要照顾低版本浏览器*/
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:box;
}
.clearfix {
*zoom:1;
}/*代码简洁但要照顾低版本浏览器*/
常见网页布局
CSS定位
定位组成
定位模式
定位模式
语义
使用方法
详细解释
static
静态定位
选择器 {position：static；}
无定位的意思
relative
相对定位
选择器 {position：relative；}
相对原来的位置来定位并且原来的不会空出来（不脱标），多数情况是给绝对定位当爹的
absolute
绝对定位
选择器 {position：absolute；}
相对于有定位的最近一级祖先元素来定位，原来的位置会空出来（脱标）没有祖先元素或者祖先元素未定位则以浏览器为准定位
fixed
固定定位
选择器 {position：fixed；}
相对于浏览器的可视窗口进行定位
sticky
粘性定位
选择器 {position：sticky；top：10px；}
可以认为是相对定位和固定定位的混合，占有原来位置，参照可视窗口移动，必须有top、bottom、left、right中的一个生效
边偏移
定位使用场景
绝对定位小技巧
.w {
height:2000px;
width:1200px;
}
.AD {
position:fixed;
top:50%;
right:50%+600px;
}
/*right:50%+版心高度的一半*/
定位叠放
选择器 {
z-index:0;
/*谁的数大谁显示在上面*/
/*数值相同时，按照书写顺序，后来居上*/
}
绝对居中
.box {
position:fixed;
width:500px;
height:500px;
top:50%;
left:50%;
margin-top:-250px;
mrigin-left:-250px;
background-color: #123456;
}
定位特殊特性
元素的显示与隐藏
精灵图
CSS三角做法
.box {
width: 0;
height: 0;
border: 100px solid transparent;
border-top-color: #000;
}/*top就是指向下的三角，以此类推*/
CSS用户样式
鼠标样式
li {
cursor:pionter;
}
/*default小白、pionter小手、move移动、text文本、not-allowed禁止*/
清除表单轮廓线
input {
outline:none;
}
/*去除轮廓线就是光标选中表单后去除掉默认的蓝色亮边框*/
清除文本域自定义大小
textarea {
resize:none;
}
文字图片对齐
img {
vertical-align:middle;
}
/*bottom底线对齐、middle中线对齐、top顶线对齐*/
H5C3 10%
品优购项目网站 20%
CSS属性书写顺序
目录命名
字体图标的引用
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?7kkyc2');
src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
url('fonts/icomoon.woff?7kkyc2') format('woff'),
url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
span {
font-family:'icomoon';
/*+字体样式+*/
}
学成在线案例
CSS属性书写顺序
导航栏制作
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>学成在线title>
<link rel="stylesheet" href="../学成在线案例/style.css">
head>
<body>
<div class="header w">
<div class="logo">
<img src="../学成在线案例/images/logo.png" alt="学成在线">
div>
<div class="nav">
<ul>
<li><a href="#">首页a>li>
<li><a href="#">课程a>li>
<li><a href="#">职业规划a>li>
ul>
div>
<div class="search">
<input type="text" value="输入关键词">
<button>button>
div>
<div class="user">
<img src="../学成在线案例/images/user.png" alt="我的空间">
qq-lihuayyds
div>
div>
<div class="banner">
<div class="w">
<div class="subnav">
<ul>
<li><a href="#">前端开发<span>>span>a>li>
<li><a href="#">后端开发<span>>span>a>li>
<li><a href="#">移动开发<span>>span>a>li>
<li><a href="#">人工智能<span>>span>a>li>
<li><a href="#">商业预测<span>>span>a>li>
<li><a href="#">云计算&大数据<span>>span>a>li>
<li><a href="#">运维&从设计<span>>span>a>li>
<li><a href="#">UI设计<span>>span>a>li>
<li><a href="#">产品<span>>span>a>li>
ul>
div>
<div class="course">
<h2>我的课程表h2>
<div class="bd">
<ul>
<li>
<h4>继续学习 程序语言设计h4>
<p>正在学习-使用对象p>
li>
<li>
<h4>继续学习 程序语言设计h4>
<p>正在学习-使用对象p>
li>
<li>
<h4>继续学习 程序语言设计h4>
<p>正在学习-使用对象p>
li>
<a href="#" class="more">全部课程a>
ul>
div>
div>
div>
div>
<div class="goods w">
<h3>精品推荐h3>
<ul>
<li><a href="#">JQerya>li>
<li><a href="#">Sparka>li>
<li><a href="#">MySQLa>li>
<li><a href="#">JavaWeba>li>
<li><a href="#">Java Scripta>li>
ul>
<a href="#" class="mod">修改兴趣a>
div>
<div class="box w">
<div class="box-hd">
<h3>精品推荐h3>
<a href="#">查看全部a>
div>
<div class="box-bd">
<ul>
<li>
<a href="#"><img src="../学成在线案例/images/goods1.png" alt="none">a>
<h4>Think PHP 5.0 博客系统实战项目演练 h4>
<div class="info"><span>高级span> • 1125人在学习div>
li>
<li>
<a href="#"><img src="../学成在线案例/images/goods2.png" alt="none">a>
<h4>Android 网络图片加载框架详解h4>
<div class="info"><span>高级span> • 1125人在学习div>
li>
<li>
<a href="#"><img src="../学成在线案例/images/goods3.png" alt="none">a>
<h4>Angular 2 最新框架+主流技术+项目实战 h4>
<div class="info"><span>高级span> • 1125人在学习div>
li>
<li>
<a href="#"><img src="../学成在线案例/images/goods3.png" alt="none">a>
<h4>Angular 2 最新框架+主流技术+项目实战 h4>
<div class="info"><span>高级span> • 1125人在学习div>
li>
<li>
<a href="#"><img src="../学成在线案例/images/goods4.png" alt="none">a>
<h4>Android Hybrid APP开发实战 H5+原生！h4>
<div class="info"><span>高级span> • 1125人在学习div>
li>
<li>
<a href="#"><img src="../学成在线案例/images/goods1.png" alt="none">a>
<h4>Think PHP 5.0 博客系统实战项目演练 h4>
<div class="info"><span>高级span> • 1125人在学习div>
li>
<li>
<a href="#"><img src="../学成在线案例/images/goods2.png" alt="none">a>
<h4>Android 网络图片加载框架详解h4>
<div class="info"><span>高级span> • 1125人在学习div>
li>
<li>
<a href="#"><img src="../学成在线案例/images/goods3.png" alt="none">a>
<h4>Angular 2 最新框架+主流技术+项目实战 h4>
<div class="info"><span>高级span> • 1125人在学习div>
li>
<li>
<a href="#"><img src="../学成在线案例/images/goods3.png" alt="none">a>
<h4>Angular 2 最新框架+主流技术+项目实战 h4>
<div class="info"><span>高级span> • 1125人在学习div>
li>
<li>
<a href="#"><img src="../学成在线案例/images/goods4.png" alt="none">a>
<h4>Android Hybrid APP开发实战 H5+原生！h4>
<div class="info"><span>高级span> • 1125人在学习div>
li>
ul>
div>
div>
<div class="junior w">
<div class="junior-hd">
<h3>编程入门h3>
<div class="junior-stage">
<ul>
<li><a href="#">热门a>li>
<li><a href="#">初级a>li>
<li><a href="#">中级a>li>
<li><a href="#">高级a>li>
ul>
div>
<a href="#">查看全部a>
div>
<div class="junior-bd">
<div class="junior-bd-left">
<img src="../学成在线案例/images/PHP入门：基础语法到实际运用零基础入门：语法与界进阶：网络与数据缓存界面到数据存储.png" alt="none">
div>
<div class="junior-bd-right">
<div class="junior-bd-right-top">
<img src="../学成在线案例/images/junior5.png" alt="none">
div>
<div class="junior-bd-right-bottom">
<ul>
<li>
<img src="../学成在线案例/images/junior1.png" alt="none">
<h4>|Android Hybrid APP开发<br>|实战 H5+原生！ h4>
<div class="info"><span>高级span> • 1125人在学习div>
li>
<li>
<img src="../学成在线案例/images/junior2.png" alt="none">
<h4>|Kami2首页界面切换效果 <br>|h4>
<div class="info"><span>高级span> • 1125人在学习div>
li>
<li>
<img src="../学成在线案例/images/junior3.png" alt="none">
<h4>|Unity Profiler入门 <br>|h4>
<div class="info"><span>高级span> • 1125人在学习div>
li>
<li>
<img src="../学成在线案例/images/junior4.png" alt="none">
<h4>|Cocos2d-x 引擎源码中的<br>|纹理优化 h4>
<div class="info"><span>高级span> • 1125人在学习div>
li>
ul>
div>
div>
div>
div>
<div class="footer">
<div class="w">
<div class="copyright">
<img src="../学成在线案例/images/logo.png" alt="none">
<p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。
<br>© 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号
p>
<a href="#" class="app"><button>下载appbutton>a>
div>
<div class="links">
<dl>
<dt>关于学成网dt>
<dd><a href="#">关于a>dd>
<dd><a href="#">管理团队a>dd>
<dd><a href="#">工作机会a>dd>
<dd><a href="#">客户服务a>dd>
<dd><a href="#">帮助a>dd>
dl>
<dl>
<dt>新手指南dt>
<dd><a href="#">如何注册a>dd>
<dd><a href="#">如何选课a>dd>
<dd><a href="#">如何拿到毕业证a>dd>
<dd><a href="#">学分是什么a>dd>
<dd><a href="#">考试未通过怎么办a>dd>
dl>
<dl>
<dt>合作伙伴dt>
<dd><a href="#">合作机构a>dd>
<dd><a href="#">合作导师a>dd>
dl>
div>
div>
div>
body>
html>
* {
margin: 0;
padding: 0;
}
/* 清除网页原有内外边距 */
.w {
width: 1200px;
margin: auto;
}
/* 确定版心，之后如果有盒子需要直接添加即可 */
body {
background-color: #f3f5f7;
}
a {
text-decoration: none;
}
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:box;
}
.clearfix {
*zoom:1;
}/*代码简洁但要照顾低版本浏览器*/
li {
list-style: none;
}
.header {
height: 42px;
/* background-color: #a1a1a1; */
/* 此处的margin如果仅仅设定30px，则会将.w的margin:auto覆盖掉 */
margin: 30px auto;
}
.logo {
float: left;
width: 198px;
height: 42px;
/* background-color: #b1b1b1; */
}
.nav {
float: left;
margin-left: 60px;
}
.nav ul li {
float: left;
margin: 0 15px;
}
.nav ul li a {
display: block;
height: 42px;
padding: 0 10px;
line-height: 42px;
font-size: 18px;
color: #050505;
text-decoration: none;
}
.nav ul li a:hover {
border-bottom: 2px solid #00a4ff;
color: #036ba3;
}
.search {
float: left;
width: 412px;
height: 42px;
/* background-color: #002020; */
margin-left: 50px;
}
.search input {
float: left;
width: 345px;
height: 40px;
border: 1px solid #00a4ff;
border-right: 0px;
color: #bfbfbf;
font-size: 14px;
padding-left: 15px;
}
.search button {
float: left;
width: 50px;
height: 42px;
/* background-color: #abcabc; */
border: 0px;
/* border:0px;去除按钮边框 */
background: url(../学成在线案例/images/button.png);
}
.user {
float: right;
line-height: 42px;
margin-right: 30px;
font-size: 14px;
color: #666;
}
.banner {
height: 421px;
background-color: rgb(28, 3, 108);
}
.banner .w {
height: 421px;
background-color: #326123;
background: url(../学成在线案例/images/banner.png) no-repeat top center;
}
.subnav {
float: left;
width: 190px;
height: 421px;
background:rgba(0,0,0,0.3);
}
.subnav ul li {
height: 45px;
line-height: 45px;
padding: 0 20px;
}
.subnav ul li a {
font-size: 14px;
color: #fff;
text-decoration: none;
}
.subnav ul li a:hover {
color: #00a4ff;
}
.banner ul li a span {
float: right;
}
.course {
float: right;
width: 230px;
height: 300px;
background-color: #ffffff;
/* 浮动的盒子不会和父盒子外边距合并，也就不会塌陷 */
margin-top: 50px;
}
.course h2 {
height: 48px;
line-height: 48px;
text-align: center;
background-color: #9bceea;
font-size: 18px;
color: white;
letter-spacing: 4px;
}
.bd {
padding: 0 20px;
}
.bd ul li {
padding: 14px 0;
border-bottom: 1px solid rgba(0,0,0,0.5);
}
.bd ul li h4 {
font-size: 16px;
color: #4e4e4e;
}
.bd ul li p {
font-size: 12px;
color: #a5a5a5;
}
.bd .more {
display: block;
height: 38px;
border: 1px solid #00a4ff;
text-decoration: none;
line-height: 38px;
text-align: center;
font-size: 16px;
color: #00a4ff;
font-weight: 700;
margin-top: 5px;
}
.goods {
height: 60px;
margin-top: 10px;
background-color: #fff;
box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.1);
line-height: 60px;
}
.goods h3 {
float: left;
margin: 0 30px;
font-size: 16px;
color: #00a4ff;
}
.goods ul {
float: left;
margin-left: 30px;
}
.goods ul li {
float: left;
}
.goods ul li a {
padding: 0 30px;
font-size: 16px;
color: #050505;
border-left: 1px solid #ccc;
}
.mod {
float: right;
margin-right: 30px;
font-size: 14px;
color: #00a4ff;
}
.box {
height: 630px;
margin-top: 30px;
}
.box-hd {
height: 45px;
}
.box-hd h3 {
float: left;
font-size: 20px;
color: #494949;
}
.box-hd a {
float: right;
}
.box-bd ul {
width: 1225px;
/* ul里的li加上右外边距时最后一个会到下一行，
要么清除位置不对盒子的右外边距，
要么将父盒子的宽度增大 */
}
.box-bd ul li {
float: left;
margin-right: 15px;
width: 228px;
height: 270px;
background-color: #fff;
margin-bottom: 25px;
box-shadow: -2px 2px 5px 0px rgba(0,0,0,0.3);
}
.box-bd ul li img {
width: 100%;
}
.box-bd ul li h4 {
margin: 20px 20px 20px 25px;
font-size: 14px;
color: #050505;
font-weight: 400;
}
.box-bd .info {
margin: 0 20px 0 25px;
font-size: 12px;
color: #999;
}
.box-bd .info span {
color: #ff7c2d;
}
.junior {
margin-top: 30px;
height: 450px;
/* background-color: #afafaf; */
}
.junior-hd {
height: 45px;
line-height: 45px;
}
.junior-hd h3 {
float: left;
margin-right: 280px;
font-size: 20px;
color: #494949;
}
.junior-hd .junior-stage ul li a {
float: left;
font-size: 16px;
color: #868686;
margin-left: 72px;
}
.junior-hd .junior-stage ul li a:hover {
color: #00a4ff;
}
.junior-hd a {
float: right;
}
.junior-bd-left {
float: left;
}
.junior .junior-bd .junior-bd-right .junior-bd-right-top {
float: right;
}
.junior-bd-right-bottom ul li {
float: left;
margin: 16px 0 0 15px;
width: 228px;
height: 270px;
background-color: #fff;
}
.junior-bd-right-bottom ul li h4 {
margin: 20px 20px 20px 25px;
font-size: 14px;
color: #050505;
font-weight: 400;
}
.junior ul li .info {
margin-left: 15px;
margin-bottom: 15px;
font-size: 12px;
color: #999;
}
.junior .info span {
color: #ff7c2d;
}
.footer {
height: 300px;
background-color: #fff;
}
.footer .w {
padding-top: 35px;
}
.copyright {
float: left;
}
.copyright p {
font-size: 12px;
color: #666;
margin: 20px 0 15px 0;
}
.copyright .app button {
display: block;
width: 118px;
height: 33px;
border: 1px solid #00a4ff;
text-align: center;
line-height: 33px;
font-size: 16px;
color: #00a4ff;
}
.links {
float: right;
}
.links dl {
float: left;
margin-left: 100px;
}
.links dl dt {
font-size: 16px;
color: #333;
margin-bottom: 5px;
}
.links dl dd {
font-size: 12px;
color: #333;
}