Hello 前端俱乐部


  • 首页

  • 分类

  • 时间轴

  • 面试题

  • 私生活

  • 搜索

【前端自学之路】CSS之position定位

发表于 2018-01-21   |   分类于 前端自学之路

position标识定位,就类似于百度地图上一系列定位点,position就是给html元素定位的。

position有四种值:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/**
* 默认未设置的值,没有任何影响
*/
position: static;

<!-- more -->

/**
* 相对定位,以默认位置为参照起始点,进行偏移定位
*/
position: relative;

/**
* 绝对定位,以已经定位的最近的祖先元素为参考起始点,进行偏移定位,此时脱
* 离文档流
*/
position: absolute;

/**
* 固定定位,以浏览器窗口为参考起始点,进行偏移定位
*/
position: fixed;

上面所说的偏移定位,到底偏移多少呢?这个时候就要引出标识偏移值的属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/**
* left 标识当前元素左边沿相对于参考起始点左边沿向右偏移100px
*/
left: 100px;

/**
* right 标识当前元素右边沿相对于参考起始点右边沿向左偏移100px
*/
right: 100px;

/**
* top 标识当前元素上边沿相对于参考起始点上边沿向下偏移100px
*/
top: 100px;

/**
* bottom 标识当前元素底边沿相对于参考起始点底边沿向上偏移100px
*/
bottom: 100px;

关键是对以上定位意思和偏移学习了解,必然对元素定位熟悉透彻。

【前端自学之路】CSS之基础属性

发表于 2018-01-21   |   分类于 前端自学之路

CSS属性有很多,可以从这几个角度来区分

文字

1
2
3
4
5
6
7
8
9
10
font-size:   16px;     			// 字体大小

<!-- more -->

font-family: sans-serif; // 字体系列
font-weight: 600; // 粗体

font-style: italic; // 字体斜体风格

color: #ff0; // 颜色

文本

1
2
3
4
5
text-align: center;             // 文本对齐方式,left right center
text-decoration: underline; // 文本修饰方式,比如下划线

word-spacing: 1px; // 单词间距
letter-spacing: 1px; // 字母间距

背景

1
2
3
4
5
6
7
background-color: #fff;             // 背景颜色
background-image: url(./abc.png); // 背景图片

background-position: 1px 1px; // 背景位置
background-size: 100% 100; // 背景大小

background: #fff url() no-repeat 1px 1px 100% 100

盒子模型属性

1
2
3
4
5
width: 100px;               // 宽度
height: 100px; // 高度
padding: 10px; // 内边距
margin: 10px; // 外边距
border: 1px solid #f00; // 边框

定位属性

1
position: relative;         // 相对定位,有四种值

CSS单位详解

1
2
3
4
5
6
7
8
9
10
长度单位:   px = pixel; 像素
% = 百分比, 相对于父元素的百分比
em , rem 这两个也是相对单位,后面接触
width: 100%;

颜色单位: #ff00dd; 16进制 可以简写 #f0d; #ff00de ;
red white
rgb(10, 22, 33)
rgba(10, 22, 22, 0.4)
color: #f0d;

CSS属性值解析(存在4个方向的)

1
2
3
4
5
6
7
8
9
10
11
12
存在四个方向的有边框,padding内边距,还有margin外边距等

一般4个方向默认的顺序是 上 右 下 左
例子: padding:1px 2px 3px 4px; 标识 上 1px; 右2px; 下3px, 左4px
padding: 1px 2px 3px; 标识 上 1px; 右2px; 下3px;左2px; (对面方向)
padding: 1px 2px ; 标识 上和下是 1px; 左和右是2px;
padding: 1px; 标识上下左右都是1px

padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;

当然还有其他属性,各位要稍微留意学习就好

【前端自学之路】HTML入门

发表于 2018-01-21   |   分类于 前端自学之路
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>开始学习前端</title>
</head>
<body>

<!-- more -->

<div>今天是2018-01-21</div>
</body>
</html>

上面是一个入门级的HTML结构,包括了最主要的几个HTML元素,如:

html 表示html文档
head 表示html文档的头部信息,用于设置一些文档属性数据
meta 设置元数据属性标签,charset 是设置字符编码
title 表示文档标题,一般就是浏览器上的标题了
body 表示html主体显示内容
div 这里就先显示了一个div元素

我们来看下有哪些常见的html标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
html
head
title
meta
body
div
span
a
img
ul
li
ol
dl
dd
dt
h1-h6
form
input
select
button

header
footer
article
section
canvas
audio
video

【前端自学之路】学习路径

发表于 2018-01-21   |   分类于 前端自学之路

自学前端需要一个由浅入深的过程,先从简单的概念入手,再慢慢向深层概念。

下面我从学习班的初学者的学习过程来总结下自学的学习路径

【HTML】学习基础的HTML

阅读全文 »

base64加密与解密

发表于 2018-01-01   |   分类于 程序员的私生活

源字符串内容:

加密解密点此,查看Base64技术原理详解

Base64加密后的内容:

md5加密

发表于 2018-01-01   |   分类于 程序员的私生活

加密  >


md5加密密文:

程序员自学弹钢琴

发表于 2018-01-01   |   分类于 程序员的私生活

小汤 == 约翰汤普森简易钢琴教程

提示:本网站属于公益性质,提供免费的资源给钢琴爱好者学习,网站资源来源于互联网用户提供,如有侵权,联系删除!
小汤 1

钢琴谱电子版下载:小汤1 钢琴谱 五线谱 电子书 下载

在线视频学习 (公益性):
全 29 集,见
链接: 百度网盘
提取码: mpr3

在线弹奏演示视频: 点此开始播放学习

小汤 2

钢琴谱电子版下载:小汤2 钢琴谱 五线谱 电子书 下载

在线视频学习 (公益性):
全 35 集,见
链接: 百度网盘
提取码: j422

在线弹奏演示视频: 点此开始播放学习

小汤 3

钢琴谱电子版下载:小汤3 钢琴谱 五线谱 电子书 下载

在线视频学习 (公益性):
全 30 集,见
链接: 百度网盘
提取码: wn2u

在线弹奏演示视频: 点此开始播放学习

小汤 4

钢琴谱电子版下载:小汤4 钢琴谱 五线谱 电子书 下载

在线视频学习 (公益性):
全 26 集,见
链接: 百度网盘
提取码: 4re8
小汤 5

钢琴谱电子版下载:小汤5 钢琴谱 五线谱 电子书 下载

在线视频学习 (公益性):
全 32 集,见
链接: 百度网盘
提取码: qmyp

二维码生成器

发表于 2018-01-01   |   分类于 程序员的私生活

生成二维码


Go 电子书

发表于 2018-01-01   |   分类于 程序员的私生活
提示:本网站属于公益性质,提供免费的资源给编程爱好者学习,网站资源来源于互联网用户提供,如有侵权,联系删除!
Go 基础编程

gp.pdf

Python 电子书

发表于 2018-01-01   |   分类于 程序员的私生活
提示:本网站属于公益性质,提供免费的资源给编程爱好者学习,网站资源来源于互联网用户提供,如有侵权,联系删除!
Python 基础

Python-入门ppt.pdfPython-编程:从入门到实践_20190729_182448.pdfPython-Cookbook-英文-高清版.pdfPython-核心编程第二版.pdfPython-基础教程(第2版 修订版).pdfPython-简明教程.pdfpython-模块详解.pdfPython-快速入门.pdfPython-深入探查.pdfPython-Unix和Linux系统管理指南.pdfPython-编码规范.pdf

Python 爬虫

Python-网络爬虫实战入门教程.pdfPython-网络爬虫入门教程和开发实战.pdf

Python 图像处理

Python-图像处理库-英文-高清版.pdf

Python 网络编程

Python-socket网络编程-英文-高清版.pdf

Python 框架

Python-Django1.3.pdf

1…272829303132
312 日志
24 分类
友情链接
  • 首页
  • 友链
最新发表文章
  • 【Py
    2021-03-06
    【Python零基础学习】python 2.7.x升级刀3.6.X
  • 如何查
    2020-10-08
    如何查看mysql的历史命令
  • PHP
    2020-10-07
    PHP如何判断函数/类/属性/方法是否存在
  • 【微信
    2020-09-16
    【微信小程序自学之路】如何开发自定义tabBar
  • 【Th
    2020-09-15
    【ThinkPHP入门学习】ThinkPHP连接数据库乱码问题
热门分类
  • 程序员
    各种八卦
    程序员的私生活
  • 自学
    转行自学
    前端自学之路
  • 小程序
    自己开发小程序
    微信小程序自学之路
  • Python
    爬虫、AI
    Python零基础学习
© 2021 Difashi 由 Hexo 提供
访客数人 总访问量人