pink老师前端入门视频教程笔记(中)

CSS

圆角边框(重点)

可以使盒子模型变圆角,如:在这里插入图片描述
border-radius:length;
(圆的半径)
解释如下:
在这里插入图片描述
当length数值越大弧形越明显。如下:(可以在网页检查中直接调来看效果,但似乎代码本身是不会改变的?只是一个展示而已)
在这里插入图片描述

圆角边框的使用

length可以用px或百分比表示。如下:先给圆形准备一个正方形,然后使圆形的半径为正方形的一半。
在这里插入图片描述
在这里插入图片描述

注意:top-left这种顺序不能打乱;
如果只写两个数字,则左上右下为一对,剩余两个为一对

盒子阴影

在这里插入图片描述
相关代码如下:注意,盒子模型都可以使用:hover 包括div:hover p:hover…
在这里插入图片描述
(可以用F12检查页面查看不同数值的效果)

文字阴影(了解)

在CSS3中可以用 text-shadow设置阴影用于文字。
在这里插入图片描述

CSS浮动

在这里插入图片描述

浮动(float)

传统网页布局的三种方式

网页布局的本质-用CSS来摆放盒子
css提供了三种传统(pc)布局方式:

标准流(普通流/文档流)

即标签按照规定好默认方式排列。(块、行内元素、行内块元素。。。)
在这里插入图片描述

为什么需要浮动?

如:1.怎么让多个div在一个行内显示。在这里插入图片描述
此时用display:inline-block中间会有缝隙,不符合要求。
2.怎么让两个盒子左右对齐。
浮动可以改变标签默认的排列方式
网页布局第一准则:
多个块级元素纵向排列找标准流,多个块级元素横向排列找浮动;

什么是浮动?

float属性用于创建浮动框,将其移到一边,直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
相关代码如下:正常情况下两个盒子纵向排列,下面代码的效果:
在这里插入图片描述
在这里插入图片描述

浮动特性(重点)

在这里插入图片描述
1.脱离标准普通流的控制(浮)移动到指定位置(动)(脱标)。
2.浮动的盒子不再保留原先的位置。

下面蓝色的盒子是标准流盒子
(可以理解为浮动的已经飞起来的,下面的盒子就占有了它之前的位置)相关代码如下:
在这里插入图片描述2.如果多个盒子都设置了浮动,则它们会按照属性值(左浮动/右浮动)一行内显示并且顶端对齐排列。
如:左边俩左浮动 右边的右浮动
在这里插入图片描述
会随着浏览器的大小变化哦~
在这里插入图片描述
浮动元素具有行内块元素的特点!(浮动可以设置给任何元素)
首先行内元素本没有宽度和高度,但如果添加了浮动就有了;块级元素本来独占一行,但添加浮动以后就可以一行内有多个挨在一起(紧挨在一起中间没有缝隙);如果块级盒子没有指定宽度,默认和父亲一样宽,但添加浮动以后,它的大小由内容的多少来决定(行内块元素的特点,即盒子是被内容撑起来的)

浮动元素常和标准流父级搭配使用

在这里插入图片描述
如:因为盒子并不是贴着浏览器的,有时候需要一个父盒子,浮动的盒子在标准流的父盒子里。
在这里插入图片描述
代码:
在这里插入图片描述
效果:
在这里插入图片描述

网页布局第二准则:
先设置盒子的大小,再设置盒子的位置;

常见网页布局

常见网页布局

遵守第一准则
在这里插入图片描述

在这里插入图片描述
通栏(和浏览器一样宽)不需要设置盒子宽度

浮动布局注意点

如果三个兄弟盒子
特别是浮动的盒子只会影响后面的标准流
加浮动要给所有兄弟盒子加!

清除浮动

在这里插入图片描述
如果都是标准流,不给父盒子设置高度,子盒子可以撑开父盒子;
如果子盒子是浮动的,父盒子会高度塌陷(浮动相当于不占有位置,飘起来了)
清除浮动以后,父亲就有了高度,也不会影响后面的标准流。

语法:
选择器{clear:属性值;}
属性值:left right both(同时清除左右两侧浮动的影响)
实际中我们只使用clear:both;
清除浮动的策略:闭合浮动;
闭合浮动即把浮动的影响限制在父元素中。

额外标签法

也称作“隔墙法”。在浮动元素的末尾添加一个空标签,(就像一堵墙把它们堵住)例如:二毛盒子(即最后一个浮动的盒子)后面那个div(或者< br />但是不能是span等行内元素)
在这里插入图片描述
缺点是结构化比较差,这个新标签必须是块级元素!
在这里插入图片描述

清除浮动–父级添加 overflow

父级添加overflow属性,将其属性值设置为hidden、auto或scroll
缺点:无法显示溢出盒子(会把溢出的部分切掉)
在这里插入图片描述

代码:
在这里插入图片描述

清除浮动–:after 伪元素法

相当于在大盒子内部后面插入一个盒子
在这里插入图片描述
在style里面写,然后让需要清除浮动的父盒子拥有clearfix这个属性。
在这里插入图片描述
在这里插入图片描述

清除浮动–:双伪元素法

其实就是在盒子前后都插入盒子
在这里插入图片描述
在这里插入图片描述

PS切图

常见的图片格式

在这里插入图片描述

图层切图

切图即把PSD文件中某个图给导出来,可以点击,把图层右键导出为PNG;
有时候需要合并(shif一起选择,ctrl+e合并)再导出 ;

综合案例

CSS属性书写顺序

在这里插入图片描述
头部的制作:导航栏链接需要用li写
在这里插入图片描述

定位

定位原因和组成

1.需要某个元素能自由地在盒子里移动并能压住盒子;
2.当我们滚动窗口时,某些盒子固定在屏幕中;
定位=定位模式+边便宜
定位模式用于指定元素在文档中的定位方式,边偏移决定该元素的最终位置。
在这里插入图片描述
在这里插入图片描述

静态定位static(了解)

默认的定位方式(无定位)
语法:
选择器 { position:static;}
静态定位就是标准流,也没有边偏移;

相对定位 relative(重要)

相对定位是元素在移动位置时相对于它原来的位置来说。
在这里插入图片描述
**原来在标准流的位置继续占有,后面的盒子仍然在原来的位置。**如下:
蓝色盒子走后,粉色盒子没有变位置
在这里插入图片描述

绝对定位absolute(Important)

绝对定位相对于它的祖先元素。
特点:
1.如果父元素没有定位(只是标准流或浮动的盒子)则还是以浏览器为准定位。
2.如果父元素有定位(相对、绝对、固定)则会以最近一级带有定位的父元素为准定位。
3.绝对定位脱标不占有原来的位置。

子绝父相

常常子盒子用绝对定位;父盒子用相对定位。

固定定位fixed (重要)

固定定位是元素固定于浏览器可视区的位置,主要用于可以在浏览器页面滚动时元素的位置不会改变。
特点:以可视窗口为标准(即浏览器放大缩小后可见部分);跟父元素没有任何关系;不随着滚动条滚动;固定定位不占有原来的位置;
固定在版心右侧位置:让固定定位的盒子left50%,走到版心一半位置;让固定定位的盒子margin-left:版心宽度的一半,走版心宽度的一半位置。

粘性定位

粘性定位认为是相对定位和固定定位的混合;
以浏览器的可视窗口为参照点移动元素;
占有原先的位置;
必须添加top bottom left right中一个;

定位总结:
在这里插入图片描述

定位叠放次序

选择器{z-index:1;}
数值可以为正整数、负整数、0,默认为auto,数值越大,盒子越靠上;
如果属性值相同,按照书写顺序,后来者居上;
数字后面不加单位;
只有定位的盒子才加z-index

绝对定位的盒子水平居中

盒子加上绝对定位后,margin:auto不起作用,要想盒子水平居中,需要:
1.让盒子left:50%;
2.让盒子margin-left:-盒子的一半宽度像素;

让盒子垂直居中:
1.让盒子top:50%;
2.让盒子margin-top:-盒子的高度一半像素;

定位拓展

1.给行内元素添加绝对或固定定位,不需要转换就可以直接设置高度和宽度;
2.块级元素添加绝对或固定定位,不添加高度或宽度,默认大小为内容的大小;
3.脱标的盒子(加浮动、绝对定位、固定定位)都不会触发外边距塌陷;
4.绝对定位(固定定位)会完全压住盒子;
浮动元素是不同的,它只会压住后面标准流的盒子但不会压住盒子里的文字(图片);绝对定位(固定定位)会完全压住下面标准流盒子里所有内容;浮动产生的目的是为了文字环绕效果;

注意:如果一个盒子既有left属性又有right属性,则会执行left属性,同理top和bottom会执行top;

元素的显示与隐藏

如:网页广告点击关闭则关掉,刷新后则显示;
本质:让一个元素在页面中隐藏或显示出来;

display属性

display:none;隐藏对象。
不但可以隐藏元素,还不占有原来的位置;
display:block; 除了转换为块级元素之外,还有显示元素的意思。

visibility

visibility:visible;元素可视;
visibiity:hidden;元素隐藏;
visibility隐藏元素后,继续占有原来的位置;
注意display:none用处更多
(前面有在表格那里看到border-collapse,是为了合并表格边框)

overflow溢出隐藏显示

如果内容溢出了做什么:
visible:显示(默认)
hidden:不显示
scroll:显示滚动条
auto:在需要时添加滚动条(溢出时有滚动条,不溢出时不显示)
注意有定位的盒子慎用!下面hot
在这里插入图片描述

CSS高级技巧导读

精灵图

在这里插入图片描述
核心原理:将小图片整合到一张大图片中,就只需要请求一次;
在这里插入图片描述
使用精灵图的核心:
1.主要针对背景图片使用,即把多个小背景图整合到大背景图。
2.又叫做雪碧图,sprites
3.主要借助背景位置来实现–background-position
4.一般情况下精灵图都是负值(盒子位于背景图左上角,x轴正方向是右边,y轴往下是正方向)

代码:index就是存的精灵图
在这里插入图片描述

字体图标

字体图标iconfont本质是文字 可以更改大小颜色等
在这里插入图片描述
在这里插入图片描述
字体图标可以直接网上下载。
1.下载 2.引入到html页面 3.字体图标的追加
icomoon字体库 http://icomoon.io
阿里iconfont字库 www.iconfont.cn/

下载好压缩包后解压,将font放到html文件根目录下面,里面有四个不同字体文件(兼容性),使用icomoon里面的style文件的部分内容,写到style里,打开demo里,复制你想要的字体图标:
在这里插入图片描述
写到html里,然后在style里声明它的字体(和font-face里要一样)、大小、颜色等…
在这里插入图片描述
效果如下:
在这里插入图片描述
注意:font-face里url路径对的
字体图标的追加:
在这里插入图片描述

CSS三角

在这里插入图片描述
有时候要加入line-height font-size…为兼顾浏览器版本
想要如下效果:
在这里插入图片描述
要用到:子绝父相、span(子盒子)的大小为10px,border-bottom为5px,border-top也为5px
在这里插入图片描述

CSS用户界面样式

鼠标样式cursor

{cursor:pointer;}
在这里插入图片描述

表单轮廓线outline

给表单\文本域添加 outline:none 这样光标放在文本域内时就不会加轮廓线
文本域本身是可以拖拽大小的,添加 resize:none就不能;
在这里插入图片描述

vertical-align实现行内块和行内元素垂直居中对齐

在这里插入图片描述
怎么实现图片(表单域)和文字垂直居中对齐(即图片或表单域在文字中线上):
在这里插入图片描述
效果:
在这里插入图片描述

解决图片底侧有空白缝隙:
我们给图片加父盒子加边框时,边框并不会牢牢贴在图片上,一般底部会有一定空隙,这是由于图片和文字是基线对齐的原因。在这里插入图片描述
效果:
在这里插入图片描述

溢出文字省略号显示

单行文本溢出显示省略号

在这里插入图片描述

多行文本溢出显示省略号

有兼容性问题,适合于webkit浏览器或移动端
在这里插入图片描述
建议让后台来做哦~

常见布局技巧

margin负值

1.当两个盒子合并时(添加浮动)它们的Border合在一起会变粗(如1px加在一起就是2px),这样可以给盒子加margin负值,让它们border覆盖在一起。代码执行时是一个个盒子一行行style先后执行的。
2.鼠标经过某个盒子,让边框颜色改变,需要给当前盒子添加定位,提高盒子的层级(相对定位,保留位置)如果盒子都加了定位,则当前盒子添加z-index。
在这里插入图片描述

文字围绕浮动元素

在这里插入图片描述
浮动的盒子会压住后面的标准流盒子但不会压住盒子里的文字!不需要给文字添加浮动。
代码:
在这里插入图片描述
在这里插入图片描述

行内块(行内)元素水平居中对齐

给父盒子添加text-align:center;就能让里面的行内(块)元素全部水平居中对齐;
在这里插入图片描述
代码见文件夹;

CSS三角强化

当我们需要:
在这里插入图片描述
顺时针
效果:
在这里插入图片描述

css初始化

/* 把我们所有标签的内外边距清零 */

/* {
margin: 0;
padding: 0
}
/* em 和 i 斜体的文字不倾斜 /
em,
i {
font-style: normal
}
/
去掉li 的小圆点 */
li {
list-style: none
}

img {
/* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 /
border: 0;
/
取消图片底侧有空白缝隙的问题 */
vertical-align: middle
}

button {
/* 当我们鼠标经过button 按钮的时候,鼠标变成小手 */
cursor: pointer
}

a {
color: #666;
text-decoration: none
}

a:hover {
color: #c81623
}

button,
input {
/* “\5B8B\4F53” 就是宋体的意思 这样浏览器兼容性比较好 */
font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, “\5B8B\4F53”, sans-serif
}

body {
/* CSS3 抗锯齿形 让文字显示的更加清晰 12px/1.5表示12px字体,1.5倍行高*/
-webkit-font-smoothing: antialiased;
background-color: #fff;
font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, “\5B8B\4F53”, sans-serif;
color: #666
}

.hide,
.none {
display: none
}
/* 清除浮动 */
.clearfix:after {
visibility: hidden;
clear: both;
display: block;
content: “.”;
height: 0
}

.clearfix {
*zoom: 1
}

  • 9
    点赞
  • 56
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值