零基础第一章-Web前端零基础入门

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

vip

1. div居中显示:

margin:0 auto

2. 父子级的间距用padding

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

[展开全文]
KASN130 · 5天前 · 27-盒模型 0

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

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

 

[展开全文]

边框(border)

粗细  数值+px

线型  solid dashed dotted

颜色  英文单词、16进制#、rgba()

每个样式之间必须加空格

[展开全文]

background-attachment 背景图片是否滚动

 

 

两个参数供选择,scroll or fixed 后者使背景在滚轮or滚动条移动时保持稳定在屏幕上

 

可以将background-repeat image position attachment复合起来,构成复合样式的写法

其实就是把各个属性值写在一起用空格隔开,并且位置可以变换而不受顺序影响

[展开全文]

Web前端开发工程师:制作网站与用户交互的页面

工作要求:反复coding+热情

掌握技能:

工具软件:浏览器(chrome ie firefox safari)浏览器开发者工具(debug)&编辑器hbuilder/sublime/dreamweaver

 

b编程语言

[展开全文]

外层双引号

内层单引号

[展开全文]

授课教师

金牌讲师

学员动态

欣慰kumi 开始学习课时 24-padding内填充
欣慰kumi 开始学习课时 23-文本设置-2
欣慰kumi 开始学习课时 22-文本设置-1
欣慰kumi 开始学习课时 21-文本