pink前端基础|电子爱好者

admin管理员组
文章数量:1664818

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常用标签

<!DOCTYPE>标签

文档类型的声明标签，来告诉浏览器使用的那个版本的HTML

lang语言

用来定义当前文档显示的语言，zh-CN是中文网页、en是英文网页，主要针对搜索引擎起作用

charset字符集

是多个字符的集合，以便计算机能够识别和存储各种文字，常用的值有GB2312、BIG5、GBK、UTF-8，UTF-8被称为万国码。

标题标签

<1>~<6>

段落标签<p

换行标签<br

文本格式化标签

<strong或<b字体加粗

<em或<i文字倾斜

<del或<s删除线

<ins或<u下划线

盒子标签

<div是一个盒子这个盒子会单独占用一行

<span 是另一个小盒子盒子会在一行内排列

图像标签

<img 图像标签

常用其属性有：src图片地址、title提示文本、alt替换文本、width宽度、height高度、border边框

另外注意路径的问题（相对路径、绝对路径）

相对路径分类	符号
同一级路径	不需要符号
下一级路径	/
上一级路径	…/

超链接标签（重点）

标签用于定义超链接，作用是跳转到另一个页面

<a href="跳转目标" target="目标窗口的弹出方式">文本或者图像</a>
<**>_self 当前窗口打开页面;_blank 新窗口打开页面</**>

外部链接：href中填入外部的链接，像是“http://www.baidu”

内部链接：直接链接内部的网页名称即可，在href中填入”index.html“

空链接：仅有链接可点样式，点击不会跳转，href中填”#“

下载链接：href中填入文件或者压缩包的文件地址，像是”…/img/img.zip"

网页元素链接：即将文字变为网页里的元素，致使点击这些元素的时候就会跳转页面，像是图片图形或者视频。

锚点链接：点击锚点链接，可以快速定位到页面中的某个位置

点击的链接中href属性设定为#名字,例如下载地址</a
跳转到的目标标签,为目标标签添加一个属性id=刚刚的名字,例如
下载地址</h3

注释标签

特殊字符

记住常用的即可

&nbsp 是空格符;&lt 是小于号;&gt 是大于号;&yen 是人民币符号

表格标签

表格是用来展示数据的,不是用来布局的_???

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=“合并单元格的个数”、为单元格属性
目标单元格选择最上的单元格（跨行）和最左侧单元格（跨列）
步骤是：选定合并的单元格——在目标单元格写代码——将多余的单元格删除

列表标签

无序列表（重点）

<ul>
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
    <li><!-- ul中只能够放li标签，li标签中可以放任何标签 --></li>
</ul>

有序列表（理解）

<ol>
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
    <li><!-- ol中只能够放li标签，li标签中可以放任何标签 --></li>
</ol>

自定义列表（重点）页尾

<dl>
    <dt>项目名称</dt>
    <dd>项目内容</dd>
    <dd>项目内容</dd>
    <dd>项目内容</dd>
</dl>

表单标签

组成有表单域、表单控件、提示信息三个部分组成

表单域

<form action="url地址" method="提交方式" name="表单域名称">
    <!-- 创建一个表单域 -->
    各种表单元素控件
    <!-- action用于接收并处理表单数据的url地址，也就是表单发往的地址 -->
    <!-- method用于设置表单的提交方式，get/post -->
    <!-- 用于指定表单的名称，以区分同一页面中的不同表单 -->
</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选择器和类选择器有点相似，但是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>

解决方法：

为父元素加上边框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>
    <!-- 导航栏header开始 -->
    <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>
    <!-- 导航栏header结束 -->
    <!-- 展框banner开始 -->
    <div class="banner">
        <div class="w">
            <div class="subnav">
                <ul>
                    <li><a href="#">前端开发<span>&gt;</span></a></li>
                    <li><a href="#">后端开发<span>&gt;</span></a></li>
                    <li><a href="#">移动开发<span>&gt;</span></a></li>
                    <li><a href="#">人工智能<span>&gt;</span></a></li>
                    <li><a href="#">商业预测<span>&gt;</span></a></li>
                    <li><a href="#">云计算&大数据<span>&gt;</span></a></li>
                    <li><a href="#">运维&从设计<span>&gt;</span></a></li>
                    <li><a href="#">UI设计<span>&gt;</span></a></li>
                    <li><a href="#">产品<span>&gt;</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>
    <!-- 展框banner结束 -->
    <!-- 精品推荐goods开始 -->
    <div class="goods w">
        <h3>精品推荐</h3>
        <ul>
            <li><a href="#">JQery</a></li>
            <li><a href="#">Spark</a></li>
            <li><a href="#">MySQL</a></li>
            <li><a href="#">JavaWeb</a></li>
            <li><a href="#">Java Script</a></li>
        </ul>
        <a href="#" class="mod">修改兴趣</a>
    </div>
    <!-- 精品推荐goods结束 -->
    <!-- 详细推荐内容box开始 -->
    <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>
    <!-- 详细推荐内容box结束 -->
    <!-- 编程入门junior开始 -->
    <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>
    <!-- 编程入门junior结束 -->
    <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>下载app</button></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;
}

本文标签：基础 pink

版权声明：本文标题：pink前端基础内容由热心网友自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：https://www.elefans.com/xitong/1730023211a1219702.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。

电子爱好者 - 最新技术资讯及电子产品介绍！

pink前端基础

pink前端笔记

pink

HTML 20%

前言

网页

HTML

网页的形成

浏览器内核

Web标准（重点）

web标准的意义

web标准的构成

HTML标签

HTML语法规范

HTML基本结构标签

开发工具

HTML常用标签

<!DOCTYPE>标签

lang语言

charset字符集

标题标签

段落标签<p

换行标签<br

文本格式化标签

盒子标签

图像标签

超链接标签（重点）

下载地址</h3

注释标签

特殊字符

表格标签

表格标签

表格属性(会在css中经常用到)

表格结构标签

单元格合并

列表标签

无序列表（重点）

有序列表（理解）

自定义列表（重点）页尾

表单标签

表单域

表单控件(表单元素)

Input

label

select

textarea

表单综合案例

CSS3 50%

CSS简介

CSS语法

CSS代码风格

CSS基础选择器

标签选择器

类选择器

类选择器-多类名

id选择器

通配符选择器

选择器总结

CSS字体属性

font-family

font-size

font-weight

font-style

字体复合属性

CSS文本属性

color

text-align

text-decoration

text-indent

line-height

CSS文本属性总结

CSS引入方式

内部样式表

嵌入式样式表

外部样式表

调试工具

Emmet语法

复合选择器

后代选择器