零基础第一章-Web前端零基础入门(免费)

零基础第一章-Web前端零基础入门(免费) 扫二维码继续学习

vip

左边是工具栏上面是菜单栏 右边是工具面板

 

工具面板:窗口里面放的是多有的工具面板  如果你想要用什么,找不到就去窗口里面找

图层:设计师在作图的时候网页中所有元素都放在图层中,一层一层组成的,前面有小眼睛,点击就能关掉,点击就能看到

工具栏

移动工具 点击就能移动图上面的东西-自动选择

移动图层

选区工具:点击拖拽,可以选中,蚂蚁线

功能非常大,可以用来测量,选完之后可以在信息栏看宽高,有小数单位,换成像素,因为我们网页的基本单位就是像素

用来复制一块内容,选中,注意右侧一定要选中要复制内容的图层,选中对应图层按住ctrl+c,ctrl+v发现图层哪里又多出一个图层,就复制成功了,选区作用很大

测量什么不好判断,所以需要放大测量,有时候还总是不能很精确的测量,所以需要辅助线

首先把标尺调出来ctrl+R,可以从标尺上面拉出辅助线,四面拉辅助线神经加入。用选区工具直接划过来,有时候还是不能很精确的选中,所以这时候在划选区的时候可以按下crrl键,还有时候选中的区域,想要取消点选框,可以ctrl+d

裁剪工具,可以直接划大小裁剪,还可以左右旋转,先要剪切,直接回车,如果不想要了可以通过历史记录

吸管,吸取颜色的,直接点一下,拾色器,只需要关注点击吸取的颜色就是小圆圈框选中的,需要记住rgb,学过美术的人指定都知道,可能有的其他同学也知道,这个就是三原色,红绿蓝,rgb的缩写,取值范围255,以后会讲,#加数字加字幕的组合,用来表示颜色

文字工具:设计师设计页面的各种字体,需要获取文字的信息就要使用字符面板,文字是多大的,什么字体什么颜色都是需要知道的,不然你怎么给它添加样式呢,用到文字工具,在想要获取文字的内容,点击,可以选中,打字等等,选中然后上面的工具栏也变了,有下拉框,文字有大小,颜色。选中不想选种了按esc按键取消

抓手工具 托啊托 非常方便

放大镜 

切图

清除参考线 放大 切图用一个工具 用选区选中选中这个图层,ctrl+c 新建一个画板,ctrl+n新建一个画板,宽高会自动跟着你剪切文件的大小变化,ctrl+v,然后我们需要保存下来 文件保存--保存为web格式,右上预设,图片的格式,gif,png8格式差不对,支持透明不支持半透明,全透明就是图后面啥也没有,他俩都支持但是支持的不是很好,有毛边,半透明会变成一个实色,那么如果有动图用gif,左下角有个大小,png比gif小。

jpg总是看吧,图片很大很清晰适合大图,一般网页的banner图适合用jpg,

png24支持半透明,如果有半透明找他

如果不想要文字,大家看图片背景是从上到下,左右是一样的,用选区选一个长方形的选区,        出现一个滑块,点击边划过去

 

百度干嘛的测试我么你的网通不通,qq就是用来截图的对吧

 

[展开全文]

web开发工程师是做什么的,打开一个浏览器,打开官网,当我输入一个网址敲入回车以后是不是变成这个样子了,很丰富,我们看看看我们网站的内容,文字,图片,视频,,那饿哦们从这个网站中得知了呢,我们web前端开发工程师要和网站打交道的,需要知道这个前提条件,你做的所有事都是为了网站,至于怎么做出来一个网站呢,我刚刚说过对吧,就是有一些图片,文字、视频,我们所做的就是把这些文字视频、图片等等整合起来变成这样一个精美的网页,网页放到一个网站上面,用户输入网址就可以打开这个网页,可以这么说吧,我们就是与千千万万的网站打交道,我们做的页面组合成一个网站、千千万万个用户可以看到我们写的网站,你做的内容就是你眼睛看到得东西都是前端开发工程师做的是不是会感觉很骄傲

web很简单,门槛非常低

你要在我们的学习中找到兴趣

敲代码

[展开全文]

font 文字   bold微软雅黑

font-weight 文字加粗

    -normal 文字正常

font-style 文字倾斜

     -italic 倾斜

     -normal 文字正常 

font-size 文字大小(一般都为偶数)

    -50px

line-height文字行高

font-family 字体(中文默认是宋体)

[展开全文]

1. div居中显示:

margin:0 auto

2. 父子级的间距用padding

3. 同级之间用margin (叠加取最大值)

[展开全文]

内容可以把容器的宽高撑开,但背景不会占用宽高

background-color 背景颜色

background-color:red

background-color:raba(255,0,0,1)后面的1表示不透明

background-color:#008800(#080)

transparent 背景透明(默认)

 

 

 

 

[展开全文]

用border做一个实心的三角形

width:0

height:0

border:20px solid #fff

border-top-color:red

[展开全文]

border-top 上边框

border-right  右边框

border-bottom 下边框

border-left 左边框

 

下面的内容可以把之前的覆盖

border-top:3px solid green

border-bottom-width:10px

[展开全文]

border的单一样式表示

border-width:1px 2px 3px 4px(上,右,下,左)顺时针方向

border-style:solid dashed(上下,左右)

border-coler:blue green red(上,左右,下)

 

[展开全文]

border:1px solid red;

边框的粗细,样子,颜色

样子:solid (实线)

           dashed(虚线)

           dotted(点划线)不同的浏览器显示的不一样

[展开全文]

外部样式表

当多个页面用到相同的页面是需要用到,外部样式表:把样式写在一个单独的文件里面,可以用地址引入(在head标签里面<link rel="stylesheet" href="index.css" />

[展开全文]

文字的样式 

font

font-weight 

   加粗weight 

   不加粗normal,有些标签的默认字体加粗

font-style 

   倾斜italic

   normal正常,不倾斜

font-size 大小

   数字加单位

一般是偶数,奇数有可能出兼容性问题

 

font-family 字体,中文默认是宋体

   用户的电脑中需要有对应的字体

   可以设置多个字体,逗号间隔,如果没有依次向后查找,都找不到取宋体

   可以设置中文和英文字体

   css3自定义字体

line-height 行高

 

[展开全文]

背景是否滚动

background-attachment

scroll 滚动 默认值

fixed 不滚动

 

复合样式 

空格间隔,不受顺序影响 位置信息不能分开,如 center top 

[展开全文]

背景图片的位置

background-position 

1、传数值:图片距离左上角的距离,数值分正负

正负与坐标轴的方向一致

第一个数值 x

第二个数值 y 

两个数值之间空格间隔 注意加单位 px

2、传关键字

x  left center right

y  top center bottom

3、如果只传一个值,另一个值默认为关键字

两个值都不写,默认为左上角0px 0px

 

 

[展开全文]

背景图默认铺满整个容器

background-image:url()  none

background-repeat:例如用在项目图标中

no-repeat 不平铺

repeat 全部平铺 默认值

background-repeat-x 横向平铺(导航条背景)

background-repeat-y 纵向平铺

 

 

 

[展开全文]

background 复合样式

单一样式

background-color 颜色的三种表示方法

background-image

background-repeat   重复

background-position  位置

background-attachment 背景图片是否滚动

 

内容可以把容器撑开,北京不会

 

[展开全文]

边框是一个非矩形

具体是什么图形由宽高决定

巧用边框样式画三角形

[展开全文]

边框的方向

boder-top 

boder-right

boder-bottom 

boder-left

 

单独设置某条边框的某个样式(width style color)

boder-方向-属性 

 

常用第一种方式

 

 

 

[展开全文]

边框 单一样式

特点:可以接受多个值 给四条边设置不同的值

顺序:上、右、下、左顺时针

两个 上下 左右

三个值  上  左右  下

border-width 

border-style

border-color

 

[展开全文]