第1章前端三大标准：
1.1 三大标准介绍
1.2 html标签一览表
第2章结构标准 html
2.1 html结构
2.2 html常用标签
2.2.1 h1-h6
2.2.2 span
2.2.3 span 高级用例
2.2.4 div
2.2.5 span
2.3 导入图片
2.3.1 <a href="#"> 显示超链接
第3章 style
3.1 margin
3.2 设置banner区域
3.3 外边距设置
3.4 设置板式style
3.5 设置边框样式
3.6 继承
第4章仿照小米（练习）
4.1 设置外边框距离和字体
4.2 设置内边框距离及banner
4.3 设置导航栏的背景色
4.4 高级选择器
4.5 text-decoration
第5章 flot
5.1 浮动特性
5.2 浮动
5.3 导航栏左移
5.4 编辑购物车
5.5 导航栏调试
5.6 li元素横向排布
5.7 组合选择器
5.8 list-style：none;
第6章浮动产生的问题
6.1 浮动问题1
6.2 浮动问题2
6.2.1 问题解释：
6.2.2 解决方案：
6.2.3 问题截图
6.2.4 解决方法四种:
6.3 修改盒模型
6.3.1 练习：
6.4 padding 46
6.5 double/ solid
6.6 border-radius
6.7 margin-top
第7章写表单交互
7.1 登录页面（练习）

脑图链接https://www.processon.com/view/link/5ad1c2d0e4b0b74a6dd64f3c

第1章前端三大标准：

1.1 三大标准介绍

n 结构标准： html （没有逻辑）

n 样式标准： css （没有逻辑）

n 行为标准： javascript

1.2 html标签一览表

标准	作用位置	标签种类	用途	注释
html结构标签	head	title	显示网站的标题
		meta	提供有关网页的原信息
		style	定义内部样式表
		link	链接css资源文件，网站图标
		script	链接脚本js文件
	body	h1-h6	标题标签
		p	段落标签
		ul	无序列表标签
		ol	有序列表标签
		div	盒子标签
		teble	表格标签
		from	表单标签
		img	图片标签
		br	换行标签
		hr	分割线标签
			空格字符
		a	超链接标签
		span	行内标签
		button
概念	行内标签	apan,a	在一行内显示；不能设置宽高
	行内块	img input	也属于行内标签，在一行内显示，可以设置宽高
	块级标签	div h1-h6,ul,li	独占一行，可以设置宽高，不设置集成父亲100%
	标准文档流	UI设计前端稿件，任意提地方来画，按照一定规则来作站

第2章结构标准 html

主要是包含语义化的标签

标签均为闭合标签

标签样式:html + tab ctl+/ 注释

2.1 html结构

例：

<!DOCTYPE html> è类型

<html lang="en"> è可翻译

<head> è内容头部

<title>学习html</title>è浏览器显示名称

</head>

<body> è内容文本

è注释方式

开始前端第一课，不断学习，让自己优秀！è文本主体

</body>

</html>

输出：

2.2 html常用标签

参考：https://www.processon.com/view/link/5ad1c2d0e4b0b74a6dd64f3c

n 块及标签：独占一行的标签 h1-h6,div，display：block

独占一行的标签：h1-h6,div

可以设置宽高，默认它的宽度时父亲的100%

n 行内标签：一行内显示的标签 span a，display：inline;display:inline-block

在一行内显示的标签：span a

不能设置宽高，如果不设置默认是字体的大小

n 行内块标签

在一行内显示，可以设置宽高

2.2.1 h1-h6

解释：文本大小

特点：独占一行

代码：

<!DOCTYPE html>

<head>

<title>学习html</title>

</head>

<body>

<h1>开始前端第一课，不断学习，让自己优秀！</h1>

<h2>开始前端第一课，不断学习，让自己优秀！</h2>

<h3>开始前端第一课，不断学习，让自己优秀！</h3>

<h4>开始前端第一课，不断学习，让自己优秀！</h4>

<h5>开始前端第一课，不断学习，让自己优秀！</h5>

<h6>开始前端第一课，不断学习，让自己优秀！</h6>

开始前端第一课，不断学习，让自己优秀！

</body>

</html>

输出：

2.2.2 span

解释：小跨域的标签，在一行显示

<body>

<h1>开始前端第一课，不断学习，让自己优秀！</h1>

<h2>开始前端第一课，不断学习，让自己优秀！</h2>

<h3>开始前端第一课，不断学习，让自己优秀！</h3>

<h4>开始前端第一课，不断学习，让自己优秀！</h4>

<h5>开始前端第一课，不断学习，让自己优秀！</h5>

<h6>开始前端第一课，不断学习，让自己优秀！</h6>

开始前端第一课，不断学习，让自己优秀！

<span>让自己优秀</span>

</body>

</html>

输出

2.2.3 span 高级用例

<!DOCTYPE html>

<style>

.gaibian{

color:gold;

}

</style>

<head>

<title>学习html</title>

</head>

<body>

开始前端第一课，不断学习，让自己优秀！

<span class="gaibian">让自己优秀</span>

</body>

</html>

输出：

2.2.4 div

解释：division 分割，块区域

<!DOCTYPE html>

<style>

</style>

<head>

<title>学习style</title>

</head>

<body>

top 黑色区域

</div>

</body>

</html>

存在默认margin外边框8px

2.2.5 span

解释：行内标签；实例添加菜单分割线

代码

<!DOCTYPE html>

<head>

</head>

<body>

</div>

</body>

</html>

输出：

2.3 导入图片

2.3.1 <a href="#"> 显示超链接

代码：

<!DOCTYPE html>

<head>

</head>

<body>

</a>

</div>

</body>

</html>

输出：

第3章 style

3.1 margin

解释：margin的意思是元素的外边距区域值，即该元素外面要留白的距离。它的值可以设置为三种，一种是使用数值，例如：30px，还有一种是使用百分比（相对父元素的百分比），以及第三种：auto。

例：

.container{

width: 1226px;

height: 100%;

/*两个值：上下左右*/

/*三个值：上左右下*/

/*四个值：上右下左*/

/*一个值： */

margin: 0 auto;

}

3.2 设置banner区域

解释：设置banner区域的规格12226，是为了用户体验更好

方法：

n 为每个div增加一个container

n container设置方法

列：

<!DOCTYPE html>

<style>

body{

/*让外边框距离为0*/

margin: 0;

}

.top{

width: 100% ;

height: 40px;

background-color: black;

color: #fff;

/*让文本水平居中*/

text-align: center;

/*让文本垂直居中*/

line-height: 40px;

}

.header{

width: 100%;

height: 100px;

background-color: red;

}

.content{

width: 100%;

/*height: 2000px;*/

background-color: mediumpurple;

}

.footer{

width:100%;

height: 400px;

background-color: grey;

}

/*.hei{*/

/*width: 100px;*/

/*height: 40px;*/

/*background-color: red;*/

/*overflow: hidden;*/

/*}*/

.container{

width: 1226px;

height: 100%;

background-color: transparent; è设置背景透明

/*让盒子水平居中*/

margin-left: auto;

margin-right: auto;

}

</style>

<head>

<title>学习style</title>

</head>

<body>

top 黑色区域

</div>

导航区域

</div>

主体内容区域

</div>

脚后跟

</div>

</body>

</html>

输出

3.3 外边距设置

解释：屏幕左上角为00点是坐标起始点

代码

<!DOCTYPE html>

<html>

<head>

<title>Title</title>

选择器: 基础选择器和高级选择器

标签选择器

html{

/*css的继承只有个别的属性 color font-xxx text-xxx line-**/

color: #fff;

font-size: 14px;

/*text-align: center;*/

}

body{

margin: 0;

}

.top{

width: 100% ;

height: 40px;

background-color: black;

color: #fff;

/*让文本水平居中*/

/*text-align: center;*/

line-height: 40px;

}

.header{

width: 100%;

height: 100px;

background-color: red;

}

.content{

width: 100%;

/*height: 2000px;*/

background-color: mediumpurple;

}

.footer{

width:100%;

height: 400px;

background-color: grey;

}

/*.hei{*/

/*width: 100px;*/

/*height: 40px;*/

/*background-color: red;*/

/*overflow: hidden;*/

/*}*/

.container{

width: 1226px;

height: 100%;

/*background-color: transparent;*/

/*让盒子水平居中*/

margin-left: auto;

margin-right: auto;

}

</style>

</head>

<body>

<!--

1.独占一行的标签：h1~h6,div

2.在一行内显示的标签：span

-->

top黑色区域

</div>

导航区域

</div>

主体内容区域

</div>

脚后跟

</div>

</body>

</html>

输出：

默认margin：8px

3.4 设置板式style

<style>

body{

/*让外边框距离为0*/

margin: 0;

}

.top{

width: 100% ;

height: 40px;

background-color: black;

color: #fff;

/*让文本水平居中*/

text-align: center;

/*让文本垂直居中*/

line-height: 40px;

}

</style>

输出：

3.5 设置边框样式

解释：16进制表示（000是黑色 fff是白色）

设置宽高及背景色

.container{

width: 1226px;

height: 100%;

/*background-color: transparent;*/

/*让盒子水平居中*/

margin-left: auto;

margin-right: auto;

}

水平垂直居中

body{

margin: 0; è 清除外部边框

}

.top{

width: 100%; è宽适应屏幕

height: 40px; è 高40

background-color: black; è背景色黑色

color: #fff; è 字体颜色白色

/*让文本水平居中*/

text-align: center;

/*让文本垂直居中*/

line-height: 40px

}

3.6 继承

解释：html标签中的样式，会自动继承给全局元素

html{}

<head>

<title>Title</title>

html{

font-size: 14px;

}

body,ul{

margin: 0;

padding: 0;

}

第4章仿照小米（练习）

4.1 设置外边框距离和字体

<!DOCTYPE html>

<head>

html{

font-size: 14px;

}

body{

margin: 0;

}

</style>

</head>

<body>

</div>

</body>

</html>

输出

4.2 设置内边框距离及banner

设置边框距离方式：

.container{

width: 1226px;

height: 100%;

/*两个值：上下左右*/

/*三个值：上左右下*/

/*四个值：上右下左*/

/*一个值： */

margin: 0 auto;

}

代码：

<!DOCTYPE html>

<head>

.container{

width: 1226px;

height:100%;

margin: 0 auto;

}

</style>

</head>

<body>

</div>

</body>

</html>

输出：

4.3 设置导航栏的背景色

注意：a标签的颜色并不能继承

<!DOCTYPE html>

<head>

html{

font-size: 14px;

}

body{

margin: 0;

}

.top{ è设置背景色及行高

idth: 100%;

height: 40px;

background-color: #333;

line-height: 40px;

}

.container{ è设置中心banner及高度

width: 1226px;

height:100%;

margin: 0 auto;

}

text-decoration: none;

}

</style>

</head>

<body>

</div>

</body>

</html>

输出：

4.4 高级选择器

解释：设置分割线的距离，加空格表示后代继承

代码：

/*高级选择器后代选择器*/

.top a{

color: #b0b0b0;

}

.top .sep{

color: #424242;

margin: 0 6px;

}

输出

4.5 清除下划线text-decoration

代码

text-decoration: none;

}

第5章 flot

5.1 浮动特性

n 浮动可以使元素脱离文档流，不占位置

n 浮动会使元素提升层级

n 浮动可以使块元素在一行排列，不设置宽高的时候，可以使元素适应内容

n 浮动可以使行内元素支持宽高

n 浮动可以是元素脱离文档流，它可以是元素并排显示，

1.有贴边现象

2.有收缩现象（块元素转换成行内元素）

3.只要盒子浮动了，不管是行内标签还是块级标签，可以任意设置宽高，但是遵循要浮动一起浮动要不一起不浮动的原则。

5.2 浮动

代码

<body>

</div>

<div>

</div>

</body>

输出：

5.3 导航栏左移

代码：

/*.top-info{*/ è浮动到最左边

/*float:left;*/

/*}*/

</style>

</head>

<body>

</div>

输出

并且区域也自动变成合适距离

代码

………

.top-login{

float:right; è右浮动

margin-right: 20px; è右边距

width: 200px; è宽度

height: 40px;è行高

}

</style>

…….

<div>

</div>

输出：

5.4 编辑购物车

代码：

.top-cart{

float: right;

color: red;

}

</style>

……

<div>

</div>

………

</div>

输出：

设置浮动区块

代码

}

body,ul{

margin: 0;

padding: 0;

}

</style>

….

<ul>

</ul>

</div>

5.5 导航栏调试

代码：

<!DOCTYPE html>

<head>

<title>Title</title>

html{

font-size: 14px;

}

body,ul{

margin: 0;

padding: 0;

}

ul{

list-style: none;

}

text-decoration: none;

}

.top{

width: 100%;

height: 40px;

background-color: #333;

line-height: 40px;

/*color: #b0b0b0;*/

}

.container{

width: 1226px;

height: 100%;

/*两个值：上下左右*/

/*三个值：上左右下*/

/*四个值：上右下左*/

/*一个值： */

margin: 0 auto;

}

/*高级选择器后代选择器*/

.top a{

color: #b0b0b0;

}

.top .sep{

color: #424242;

margin: 0 6px;

}

.top-info{

float:left;

}

.top-cart{

float: right;

color: red;

}

.top-login{

float:right;

margin-right: 20px;

width: 200px;

height: 40px;

}

.content {

width: 100%;

}

.content ul li{

float: left;

width: 25%;

height: 300px;

background-color: grey;

}

/*.ttt{*/

/*float:left;*/

/*width: 100px;*/

/*height: 100px;*/

/*line-height: 100px;*/

/*}*/

</style>

</head>

<body>

<!--

1.独占一行的标签：h1~h6,div

2.在一行内显示的标签：span a

-->

<a href="#">小爱开放平台</a>

</div>

</div>

<ul>

</ul>

</div>

</body>

</html>

输出：

5.6 li元素横向排布

代码：

………

.container ul li{

float: left;

}

</style>

……

<ul>

</ul>

</div>

5.7 组合选择器

body,ul{

margin: 0;

padding: 0;

}

解释:表示body和ul组合选中

5.8 list-style：none;

代码：

html{

font-size: 14px;

}

body,ul{

margin: 0;

padding: 0;

}

ul{

list-style: none;

}

<ul>

</ul>

</div>

第6章浮动产生的问题

6.1 浮动问题1

ul的子元素必须是li

<ul>

</ul>

</div>

6.2 浮动问题2

6.2.1 问题解释：

在页面布局中，一般情况父元素的高度不是设置的，通过子元素来填充它的高度，但是子元素设置浮动之后，不会撑开父元素的高度，因为子元素不占位置

6.2.2 解决方案：

n 给父盒子设置固定高度

缺点：不够灵活

n 给附送元素最后一个子元素添加一个空的块元素，且该元素不浮动，设置clear：both

缺点：结构冗余，无缘无故添加了一个块级元素

n 官方写法：建议这样写给父盒子设置

.wrap:after{visbility:hidden:both;display:block;c ontent*.*;height:0}

n 给父元素添加owerflow:hidden 推荐使用

6.2.3 问题截图

浮动上移问题如下：

下图可见子元素并不在li盒子的下面显示：

下图可见：可见1、2、3、4 四个li高度不为零，但ul高度为零，证明并没有撑起ul.

原始代码：

<!DOCTYPE html>

<head>

<title>li标签的用法</title>

html{

font-size: 14px;

}

body,ul{

margin: 0;

padding: 0;

}

ul{

list-style: none;

}

.container{

width: 1226px;

height: 100%;

margin: 0 auto;

}

.content {

height: 100%;

margin: 0 auto;

}

body,ul{

margin:0;

padding: 0;

}

.content ul .item{

float: left;

width: 25%;

height: 100px;

background-color: blueviolet;

}

.uuu{

width: 100px;

height: 400px;

background-color: red;

}

</style>

</head>

<body>

<ul>

</ul>

</div>

<span class="ttt">个哈哈哈哈</span>

</body>

</html>

6.2.4 解决方法四种:

1）例：给父盒子设置固定高度(和写小米的顶部top栏一样)，不实用,只适合万年不变导航栏的写法

代码：

.content {

width: 1226px;

height: 50px;

background-color: yellow;

/*height: 100%;*/

margin: 0 auto;

}

</style>

输出：

2）给附属元素最后一个子元素添加一个空的块元素，且该元素不浮动，设置clear：both

<!DOCTYPE html>

<head>

<title>li标签的用法</title>

html{

font-size: 14px;

}

body,ul{

margin: 0;

padding: 0;

}

ul{

list-style: none;

}

.container{

width: 1226px;

height: 100%;

margin: 0 auto;

}

.content {

height: 100%;

margin: 0 auto;

}

body,ul{

margin:0;

padding: 0;

}

.content ul .item{

float: left;

width: 25%;

height: 100px;

background-color: blueviolet;

}

.uuu{

width: 100px;

height: 400px;

background-color: red;

}

.clearfix{

clear: both;

}

</style>

</head>

<body>

<ul>

è放在li的下面即可，放里面和外面都行

</ul>

</div>

<span class="ttt">个哈哈哈哈</span>

</body>

</html>

3）伪元素清除法：推荐使用

解释：原理其实就是后面加个元素，将元素变成块并隐藏）

代码：

}

.clearfix:after{

content: '.'; è在content块下追加一个"."元素

clear: both; è清空追加后的盒子

display: block;è将追加后的“.”元素变成块

visibility: hidden; è隐藏块

height: 0;è将隐藏后的块高度设置为0

}

</style>

</head>

<body>

</ul>

</div>

<span class="ttt">个哈哈哈哈</span>

</body>

</html>

输出：

4）给父元素添加owerflow:hidden 推荐使用

解释：方法参数是清除多余浮动内容，简单方便实用

代码：

<!DOCTYPE html>

<head>

<title>li标签的用法</title>

html{

font-size: 14px;

}

body,ul{

margin: 0;

padding: 0;

}

ul{

list-style: none;

}

.container{

width: 1226px;

height: 100%;

margin: 0 auto;

}

.content {

height: 100%;

margin: 0 auto;

}

body,ul{

margin:0;

padding: 0;

}

.content ul .item{

float: left;

width: 25%;

height: 100px;

background-color: blueviolet;

}

.uuu{

width: 100px;

height: 400px;

background-color: red;

}

ul{

overflow: hidden;

}

</style>

</head>

<body>

<ul>

</ul>

</div>

<span class="ttt">个哈哈哈哈</span>

</body>

</html>

输出：

6.3 修改盒模型

解释: 重要作用于每个盒子之间的距离调整，及盒子中的内容格式调整

作用：/*如果保持盒模型不变，加padding，就要减内容的宽高*/

6.3.1 练习：

代码：

<!DOCTYPE html>

<head>

<title>Title</title>

<style>

.box{

width: 180px;

height: 180px;

background-color: green;

/*padding: 20px;*/

padding-top: 20px; è

padding-left: 20px;

/*border: 1px double red;*/

/*如果保持盒模型不变，加padding，就要减内容的宽高*/

border-radius: 5px ;

/*margin垂直方向会出现塌陷问题，避免问题的问题只设置一个标准文档流的盒子的垂直方向的margin*/

margin-bottom: 100px;

/*盒子的宽度= 内容的宽度+ 2*padding + 2*border*/

}

.box2{

width: 100px;

height: 100px;

background-color: yellow;

margin-top: 50px;

}

</style>

</head>

<body>

<div class="box2">wusir</div>

</body>

</html>

6.4 padding

解释：margin是指从自身边框到另一个容器边框之间的距离，就是容器外距离。（外边距）

padding是指自身边框到自身内部另一个容器边框之间的距离，就是容器内距离。（内边距）

参数：

padding: 20px; 以内边框焦点处

/*padding-top: 20px; */ 以内边上上边处

/*padding-left: 20px;*/ 以内边框左边处

例：

padding:20px;

<style>

.box{

width: 180px;

height: 180px;

background-color: green;

padding: 20px;

padding:100px

6.5 double/ solid

解释：double增加边框

solid 实心展示

参数：border: 1px double red;

border: 1px solid red;

例：

.box{

width: 180px;

height: 180px;

background-color: green;

padding: 20px;

border: 1px double red;

输出

6.6 border-radius

解释：设置圆角一般5就可以

.box{

width: 180px;

height: 180px;

background-color: green;

padding: 20px;

border-radius: 5px ;

输出

6.7 margin-top

参考：

http://blog.51cto.com/dengshuangfu/1713937

第7章写表单交互

7.1 登录页面（练习）

代码：

<!DOCTYPE html>

<head>

<title>Title</title>

<style>

/**{*/

/*padding: 0;*/

/*margin: 0;*/

/*}*/

.reg{

width: 720px;

height: 400px;

/*background-color: darkgrey;*/

}

.reg p{

margin-bottom: 20px;

width: 720px;

height: 42px;

}

.reg p label{

float:left;

height: 42px;

width: 65px;

margin-right: 10px;

line-height: 42px;

font-size: 14px;

color: #666;

font-weight: 700;

text-align: right;

}

.reg p .a{

border:0;

float:left;

/*font-size: 20px;*/

height: 42px;

width: 313px;

padding-left: 15px;

margin-right: 10px;

border: 1px solid #ddd;

font-size: 14px;

color: #666;

}

.reg p .b{

width: 156px;

}

.reg p .code{

border: none;

width: 145px;

height: 42px;

padding-left: 0;

text-align: center;

border-radius: 3px;

background: #f7f7f7;

border: 1px solid #ddd;

font-weight: 400;

}

.regs{

margin-left: 81px;

}

.regs a input{

width: 270px;

height: 42px;

border: none;

/*background-color:rgba(0,0,0,.6);*/

background-color: #3f89ec;

border-radius: 5px;

color: rgb(255,255,255);

}

</style>

</head>

<body>

<p>

</p>

<p>

</p>

<p>

</p>

<p>

</p>

</a>

</p>

</form>

</div>

</body>

</html>

输出：

python_13(前端—cs)的更多相关文章

Gulp压缩前端CS,JS,图片文件
Gulp 基于Node.js的前端构建工具,Gulp有许多插件(这里是插件),使用Gulp可以实现前端代码的编译(sass.less).压缩.图片的压缩等,当然主要是前端工程化,不过我目前只是需要压缩 ...
一个初学者的辛酸路程-前端cs
一.主要内容继续CSS 二.CSS 第一个: postion 网页有一类就是返回顶部,一直在右下角,还有打开一个网页顶部有个菜单,滚动滑轮,顶部永远在上面. position: fiexd == ...
WPF listbox 实现动态滚轮下拉定位
private ObservableCollection<keymodel> _listlua; public ObservableCollection<keymodel> l ...
aspx页面前端使用js 调用aspx.cs后台的方法,不回传
本次使用 Ajax.dll,AjaxPro.dll 两个类库 1.首先添加引用:Ajax.dll,AjaxPro.dll 文件在 Libiary 目录下 2.配置 WebConfig 属性将下面2 ...
前端系列-CS与BS的区别
现在的系统架构有B/S与C/S之分. C/S,即Client/Server(客户端/服务器).我们一般使用的软件架构都是C/S架构,比如各个系统版本中的软件如qq管家.腾讯qq.office等.C/S ...
ASP.NET MVC5+EF6+EasyUI 后台管理系统（2）-easyui构建前端页面框架[附源码]
系列目录前言为了符合后面更新后的重构系统,本文于2016-10-31日修正一些截图,文字我们有了一系列的解决方案,我们将动手搭建新系统吧. 后台系统没有多大的UI视觉,这次我们采用的是标准的左右 ...
Asp.Net Core 项目实战之权限管理系统（1）使用AdminLTE搭建前端
0 Asp.Net Core 项目实战之权限管理系统(0) 无中生有 1 Asp.Net Core 项目实战之权限管理系统(1) 使用AdminLTE搭建前端 2 Asp.Net Core 项目实战之 ...
【干货分享】前端面试知识点锦集02（CSS篇）——附答案
二.CSS部分 1.解释一下CSS的盒子模型? 回答一:a.标准的css盒子模型:宽度=内容的宽度+边框的宽度+加上内边具的宽度b.网页设计中常听的属性名:内容(content).填充(padding ...
【原】作为前端需要了解的B/S架构
其实B/S架构是属于后台方面的东西,不过作为一个前端,也是需要了解一下滴 C/S架构简要介绍在了解什么是B/S架构之前,我们有必要了解一下什么是C/S架构: C/S架构是第一种比较早的软件架构,主要 ...

随机推荐

jws webservice code
1.服务器端建立 1.1.创建接口 [java] view plaincopy @WebService public interface IWebService { int add(int ...
编写自定义PE结构的程序(如何手写一个PE，高级编译器都是编译好的PE头部,例如MASM,TASM等，NASM,FASM是低级编译器.可以自定义结构)
正在学PE结构...感谢个位大哥的文章和资料...这里先说声谢谢一般高级编译器都是编译好的PE头部,例如MASM,TASM等一直都说NASM,FASM是低级编译器.可以自定义结构但是苦于无人发布相关 ...
setTimeout 传递的方法
function waitExe(param){ if(time < 20){ time ++; $("#content").html(time); var self=thi ...
javascript XMLHttpRequest 对象的open() 方法参数说明
下文是从w3c上摘录下来的,其中参数 method 说明的很简短,不是很理解,所以又找了些资料作为补充.文中带括号部分. XMLHttpRequest.open() 初始化 HTTP 请求参数语法o ...
Redis使用基本套路
Redis的数据,通常都是来自于数据库. 存入Redis当中,可以快速的查询.不用每次都关联查询,然后其他处理什么的. 通常可以把一些,不经常变的数据存储其中. 避免数据变动,而Redis缓存数据不变 ...
JavaScript 检查 email 地址的正则表达式
JavaScript 检查 email 地址的正则表达式1.代码(1)<html><head><title>Checking an email address - ...
g00 网站说明
最近在做dns tunnel检测,发现了一堆类似这样的域名:c-6rtwjumjzx7877x24uwjkjwjshjx78x2eywzx78yjx2ehtr.g00.medicinenet.com ...
SPOJ：Stack Overflow（并查集）
Stack is a basic data structure. Where 3 operation can be done- Push: You can push object to the sta ...
[Selenium] Actions.doubleClick
WebElement el = page.getTable_AssetMixesName().get(index); Actions action = new Actions(driver); act ...
flask logging 最佳实践
flask项目中, 你可以使用python 的 logging模块实现记录日志. 也可以使用 flask 基于logging模块封装过的app.logger实现. 直接上代码 config.py im ...

python_13(前端—cs)

第1章 前端三大标准：

1.1 三大标准介绍

1.2 html标签一览表

第2章 结构标准 html

2.1 html结构

2.2 html常用标签

2.2.1 h1-h6

2.2.2 span

2.2.3 span 高级用例

2.2.4 div

2.2.5 span

2.3 导入图片

2.3.1 <a href="#"> 显示超链接

第3章 style

3.1 margin

3.2 设置banner区域

3.3 外边距设置

3.4 设置板式style

3.5 设置边框样式

3.6 继承

第4章 仿照小米（练习）

4.1 设置外边框距离和字体

4.2 设置内边框距离及banner

4.3 设置导航栏的背景色

4.4 高级选择器

4.5 清除下划线text-decoration

第5章 flot

5.1 浮动特性

5.2 浮动

5.3 导航栏左移

5.4 编辑购物车

5.5 导航栏调试

5.6 li元素横向排布

5.7 组合选择器

5.8 list-style：none;

第6章 浮动产生的问题

6.1 浮动问题1

6.2 浮动问题2

6.2.1 问题解释：

6.2.2 解决方案：

6.2.3 问题截图

6.2.4 解决方法四种:

6.3 修改盒模型

6.3.1 练习：

6.4 padding

6.5 double/ solid

6.6 border-radius

6.7 margin-top

第7章 写表单交互

7.1 登录页面（练习）

python_13(前端—cs)的更多相关文章

随机推荐

热门专题

第1章前端三大标准：

第2章结构标准 html

第4章仿照小米（练习）

第6章浮动产生的问题

第7章写表单交互