商务服务
【02】 PC端网页布局之CSS3-pink老师-2022/03
2024-11-19 03:10

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili

【02】 PC端网页布局之CSS3-pink老师-2022/03

  1. css最大价值:让HTML专注做结构呈现,样式交给CSS,即结构和样式相分离。主要调整文本内容、图像、页面布局和外观美化等。(网页的美容师

  2. CSS代码风格

    • 样式格式书写:紧凑格式和展开格式(强烈推荐

    • 样式大小写风格全部使用小写(更加直观

    • 样式空格风格:冒号后,保留一个空格;选择器(标签)和大括号间保留一个空格

  1. CSS选择器作用:根据不同需求将不同标签选择出来,即选择标签用的

  2. CSS选择器分类基础/单个选择器(标签选择器、类选择器、id选择器、通配符选择器)和复合选择器

  3. 扩展多类名的使用场景:某个标签添加多个类,用空格隔开。合并相同的属性(公共部分)放到一个类选择器,便于统一修改,然后再调用自己独有的类,节省代码

基础选择器作用特点用法通配符选择器选择所有标签无需调用,自动给页面所有标签实用样式* {margin:0; padding:0;}标签选择器选择所有相同的标签不能差异化选择li {float:left;}类选择器选出1或多个标签可根据需求选择.nav {background-color: #ccc;}id选择器选出唯一的标签每个html文件,相同id只有一个#current {color:red;}

复合选择器就是多个基础选择器,通过不同组合方式而成的;可以更准确高效地选择目标元素(标签,常用的复合选择器包括:后代选择器、子选择器、并集选择器、伪类选择器等。

复合选择器(权重累加)作用特点用法后代选择器选择所有后代元素子孙后代 空格隔开父元素 后代元素 {目标样式}子选择器选择最近一级子元素亲儿子 >隔开父元素**>**子元素 {目标样式}并集选择器选择多组标签,定义相同样式集体声明 ,隔开元素1, 元素2 {样式声明}a:伪类选择器选择不同状态的链接链接 LVHA实际开发设定样式a,然后hover:focus伪类选择器选择获得焦点(光标)的表单元素表单元素input:focus {目标样式}

给某些元素添加特殊样式,比如给链接添加特殊效果,或者选择第n个元素;格式:用冒号:表示,比如、 链接伪类选择器

 

注意事项: 1. 为了确保生效,按照LVHA顺序书写:link;visited;hover;active 2. 链接a标签需要单独指定样式,实际开发一般设定样式a,然后hover 3.

  1. font-weightnormal(400)正常显示;bold加粗(700;100-900
  2. 文字样式:font-stylenormal正常显示;italic斜体
  3. 字体复合属性:font:类型,粗细,大小,字体 【02】 PC端网页布局之CSS3-pink老师-2022/03

定义文本的外观,比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等

  1. color属性值:预定义的颜色值、十六进制#000000、rgb(255,0,0)、rgba(255,0,0,.5)
  2. text-align:设置文本内容的水平对齐方式,right,left,center(水平居中
  3. text-decoration:可以给文本添加下划线、删除线、上划线等none、underline、line-through、overline
  4. text-indent:首行缩进,text-indent:2em;相对单位:当前元素1个文字大小
  5. line-height行间距,行高是由上间距、文字高度、下间距三部分组成。

分为、、;实际开发中都是外部样式表,适合于样式比较多的情况。关键是将样式单独写到css文件中,之后把css文件引入到HTML页面中使用。

外部引入样式表步骤

  1. 新建一个后缀名为.css的样式文件,将所有css代码放入其中
  2. 在HTML页面中,使用link标签引入文件。

【02】 PC端网页布局之CSS3-pink老师-2022/03

【02】 PC端网页布局之CSS3-pink老师-2022/03

Vscode内部已经集成emmet语法,可以快速生成HTML结构语法和CSS样式语法(采取简写

  1. 生成标签 直接输入标签名 按tab键即可 比如 div 然后tab 键, 就可以生成
  2. 如果想要生成多个相同标签 加上 * 就可以了 比如 div*3 就可以快速生成3个div
  3. 如果有父子级关系的标签,可以用 > 比如 ul > li就可以了
  4. 如果有兄弟关系的标签,用 + 就可以了 比如 div+p
  5. 如果生成带有类名或者id名字的, 直接写 .demo 或者 #two tab 键就可以了
  6. 如果生成的div 类名是有顺序的, 可以用 自增符号 $
  7. 如果想要在生成的标签内部写内容可以用 { } 表示

Vscode 快速格式化代码: shift+alt+f

也可以设置 当我们 保存页面的时候自动格式化代码:

1)文件 ------.>【首选项】---------->【设置】

2)搜索emmet.include;

3)在settings.json下的【工作区设置】中添加以下语句

 
 

即标签以什么方式显示,了解其特点可以更好的布局网页。HTML元素一般分为

  1. 行内元素(内联元素:a、strong、em、del、ins、u、span,其中span是最典型的行内元素

    注意事项

    • 链接里面不能再放链接
    • 特殊情况下,a里面可以放块元素,但是先将a转化为块级元素更安全
  2. 块元素:h、p、div、ul、ol、li,其中div是最典型的块元素

    注意事项

    • 文字类元素不能使用块元素
    • p标签常用于存放文字,因此p里不能放块元素,特别是div
    • h1~h6都是文字类块级元素,里面也不能放其它块元素
  3. 行内块元素 :img、input、td同时具有块元素和行内元素的特点,也被称为行内块元素(很重要

元素显示模式(display)排列方式样式设置默认宽度子元素类型块级元素(block)独占一行可以设置高度、宽度、内外边距父元素宽度100%任何标签行内元素(inline)一行显示多个不可以直接设置高度、宽度本身内容宽度文本、其他行内元素行内块元素(inline-block)一行显示多个,相邻有空白间隙可以设置高度、宽度、内外边距本身内容宽度-

居中解决方案(很重要

  1. 单行文字垂直居中:CSS没有提供文字垂直居中的代码,但可以通过小技巧实现让文字的行高盒子的高度,就可以实现让文字在当前盒子内垂直居中(line-height=height
  2. 块级盒子水平居中:1. 盒子必须指定宽度width,2. 只需要保证左右外边距设置为auto(margin:100px auto
  3. 行内元素/行内块元素水平居中:给其父元素添加text-align:center即可

背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定。

注意:页面元素可以添加背景颜色,也可以添加背景图片,但是背景图片会压住背景颜色

一般都是用盒子的背景图片替代直接插入图片,对位置的控制更加精确(重要

背景图片位置的参数值:方位名词(top、left、center)、精确单位(x,y

背景图像固定(背景附着:是否固定或随着页面的其余部分滚动,可以制作视差滚动效果;默认值为scroll,随内容滚动,fixed背景图像固定

背景属性复合写法:background:color、image、repeat、attachment、position

 

背景颜色半透明【02】 PC端网页布局之CSS3-pink老师-2022/03

  1. 层叠性(覆盖性,解决样式冲突问题,就近原则,不冲突就不会层叠

  2. 继承性(子承父业,后代会继承先辈的某些样式,text-、font-、line-开头的可以继承

    行高的继承性,一般在body设置行高=1.5,子元素可以根据文字大小自动调整行高

  3. 优先级:同一个元素指定多个样式,根据选择器权重设定

> > > > > (继承的权重为0,继承比不过自身样式

优先级无穷大

权重叠加:如果是复合选择器,则会有权重叠加,需要计算权重累加没有进位

【02】 PC端网页布局之CSS3-pink老师-2022/03

  • div ul li:0001+0001+0001=0003
  • .nav ul li:0010+0001+0001=0012
  • a:hover:0001+0010=0011(优先级:伪类选择器=类选择器,都是类嘛
  • .nav a:0010+0001=0011

页面布局要学习三大核心:盒子模型、浮动、定位

网页布局的核心本质:就是利用CSS摆盒子

网页布局过程

  1. 先准备好相关的网页元素,基本上都是盒子box
  2. 利用CSS设置好盒子样式,摆放到相应位置
  3. 往盒子里装内容

就是把HTML页面中的布局元素看做一个矩形盒子,也就是一个装内容的容器,包括边框border、内边距padding、外边距margin、实际内容。 【02】 PC端网页布局之CSS3-pink老师-2022/03

设置元素的边框,边框由三部分组成:边框宽度(粗细border-width)、边框样式(虚实border-style)、边框颜色(border-color

边框可以通过不同方位分别设置:border-top、border-bottom、border-left、border-right

border-style:none、solid(实线边框)、dashed(虚线边框)、dotted(点线边框

复合写法:border:5px solid pink(常用

border-collapse:两个边框重叠的盒子,合并相邻边框,这样看起来就不会是2倍的宽度

边框会影响盒子的实际大小=盒子设定的高度和宽度+边框,所以测量盒子时不带边框

复合写法(都需要记住【02】 PC端网页布局之CSS3-pink老师-2022/03

内边距会影响盒子的实际大小=盒子设定高度和宽度+内边距,如果要保证盒子和效果图的大小一致,则让width/height减去多余的内边距大小即可。但是当盒子没有指定对应的width和height,就不会撑开。

影响盒子大小的解决方案 默认盒子模型:box-sizing:content-box; 以内容大小不变为准的盒子,那边框和内边距当然会影响盒子大小 C3盒子模型:box-sizing:border-box;以盒子大小不变为准的盒子,设置边框和内边距时,内容的大小自适应变化

注意 当导航栏每个小盒子里面的文字数量不一致时,一般不设定小盒子的大小,而是给左右内边距padding,不可以用text-indent不精确(重要

外边距是控制盒子与盒子之间的距离的。复合写法和内边距一样。

1. 相邻块元素垂直外边距的合并(垂直塌陷,重要

使用margin定义块元素的垂直距离时,兄弟关系的上下两个盒子会出现外边距合并的、取两个值较大者的现象。

解决方案:尽量只给一个盒子添加margin值 【02】 PC端网页布局之CSS3-pink老师-2022/03

2. 嵌套块元素垂直外边距的塌陷

对于两个有父子关系的块元素,父元素有上外边距的同时,子元素也有上外边距,此时父元素会塌陷两个值较大者的现象

解决方案

  • 将父元素margin-top改为border-top
  • 将父元素margin-top改为padding-top
  • 为父元素添加overflow:hidden(更新05/01 该属性将父元素变为一个BFC, BFC算高度包括内部盒子
  • 浮动、固定、绝对定位的盒子不会有塌陷的问题,都脱标了,怎么会塌陷嘛。

【02】 PC端网页布局之CSS3-pink老师-2022/03

3. 清除内外边距

网页元素很多都带有默认的内外边距,而且不同的浏览器默认值也不一致,因此在布局前,首先要清除网页元素的内外边距

注意:为了照顾兼容性,尽量只设置行内元素左右内外边距,不要设置上下内外边边距。但是转化为块级和行内块元素则可。

 
 
  1. 界面展示【02】 PC端网页布局之CSS3-pink老师-2022/03

  2. PS有很多切图方式

    1. 图层切图(最简单:点击左菜单栏-移动工具(v,点击目标图片,对应图层高亮,右击-快速导出为PNG切片;若目标图像的底图和文字相分离,则选中相关图层合并(ctrl+E)再导出
    2. 切片切图:利用切片工具(裁剪工具c—>右键)手动划出目标图片再导出(文件菜单-存储为web设备所用格式-选择目标图片格式jpg,品质默认-存储,存储时最下方切片设置为——选中的切片。一般需要去掉背景色,在图层最下方,闭上眼睛再切片,由于背景为透明色,所以需要设置为png-24格式
    3. PS插件切图(Cutterman:一款运行在ps中的插件,能自动将目标图层导出,替代1和2的传统切图方式。要求PS必须是完整版(查看方式:窗口-扩展工具—可用)。Cutterman - 最好用的切图工具
  3. 常见的图片格式

    1. jpg(JPEG:色彩信息保留较好,高清,颜色多产品类图片多采用jpg格式
    2. gif:最多储存256色,常用于显示简单图形及字体,可保存透明背景和动画效果。实际常用于一些图片小动画效果
    3. png:结合jpg和gif优点,存储形式丰富,可保留透明背景。用于切成背景透明的图片
    4. PSD:Photoshop专用格式,可存放图层、通道、遮罩等多种设计稿。前端人员可直接从上面复制文字、获得图片、测量大小和距离

【02】 PC端网页布局之CSS3-pink老师-2022/03

  1. 竖线细节制作: 这个竖线在页面布局中经常出现,隔开不同的分类词条,实现方式

     
  2. 去掉li前面的 项目符号(小圆点):

  3. 圆角边框原理,在CSS3中新增了圆角样式

    1. 语法border-radius:length
    2. 原理:半径为length 的圆与边框的四个角交集形成圆角效果。
    3. 属性值:数值 百分比
    4. 圆形:属性值50%或 高度/宽度的一半
    5. 圆角矩形:属性值高度height的一半
    6. border-radius: 4个值顺时针 上左 上右 下右 下左;2个值主/副对角线;3个值

    【02】 PC端网页布局之CSS3-pink老师-2022/03

  4. 盒子阴影(box-shadow

    1. 语法:box-shadow:h-shadow v-shadow blur spread color inset

    2. 阴影:rgba(0, 0, 0, .3)

    3. 阴影盒子不占用空间 相邻的盒子还是挨着原来盒子的边缘,不影响其他盒子排列

    4. 默认的是外阴影(outset), 但是不可以写这个单词,否则造成阴影无效

    5. 文字阴影:text-shadow: h-shadow v-shadow blur color【02】 PC端网页布局之CSS3-pink老师-2022/03

传统网页布局的三种方式:

网页布局的本质就是用CSS摆放盒子,CSS提供3种传统布局方式,即盒子如何进行排列顺序

所谓的标准流就是标签按照规定好的默认方式排列,是最基本的布局方式

  • 块级元素独占一行:div、h、p、hr、ul、ol、dl、form、table
  • 行内元素从左到右排列,碰到父元素边缘则自动换行:span、a、i、em
  1. 为什么需要浮动

    例子: 1. 虽然可以将块元素通过转换为行内元素排成一行,但是它们之间会出现很大的空白空隙,难以控制。 2. 需要实现两个盒子左右两端对齐

    总结:有很多的布局效果,标准流没办法完成,此时需要浮动完成布局。因为浮动可以改变标签默认的显示模式。

    最典型应用:可以让多个块级元素一行无间隙地排列显示

    网页布局第一准则:多个块级元素纵向排列用标准流;横向排列用浮动

  2. 什么是浮动

    float属性:用于创建浮动框,将其移动到一边,直到左/右边缘触及包含块或另一个浮动框的边缘

    语法:选择器 { float:属性值(none、left、right;}

  3. 浮动的特性

    • 浮动元素会脱离标准流。即脱离标准流的控制(浮)移动到指定位置(动(俗称脱标
    • 浮动的盒子不再保留原位置(类似于PPT里层级+1, 具体细节需要了解 stacking context 层叠上下文
    • 多个浮动盒子会按照属性值一行内显示,并呈现顶部对齐排列
    • 浮动盒子相互无缝隙的贴靠在一起,若父级宽度装不下,则多余的浮动盒子另起一行对齐
    • 浮动盒子压住后边的标准流盒子,但不会压住下面标准流盒子里面的文字,因为浮动的诞生目的是为了做文字环绕效果
    • 不论是块级元素还是行内元素,转化为浮动后,具有行内块元素的特性, 块级元素未指定宽度时,默认宽度等于父元素;但添加浮动后,其盒子大小由内容决定(行内块元素特点
  4. 浮动元素经常和标准流父级搭配使用

    • 网页布局第一准则:先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置
    • 网页布局第二准则:先设置盒子的大小,之后设置盒子的位置
    • 兄弟元素中的某一元素浮动后只会影响后面的标准流不会影响前面的标准流,理论上兄弟元素要一起浮动

    【02】 PC端网页布局之CSS3-pink老师-2022/03

  5. 为什么清除浮动

    思考题:所有的父元素有必须有高度吗?并不是,比如商品浏览页,文章阅读页,需要随着商品数量和文字数量变化而变化

    设想:不给父元素高度,让子元素撑开盒子,根据子元素的内容多少决定父元素的高度

    问题:当父元素高度为0时,会影响下面标准流盒子,因为浮动元素不占用原文档流的位置,所以会对后面元素的排版产生影响

    总结:父元素没高度,子盒子浮动了,影响下面布局 【02】 PC端网页布局之CSS3-pink老师-2022/03 解决方案:清除浮动

    1. 清除浮动指的是清除浮动元素脱离标准流造成的影响
    2. 如果父级元素本身具有高度,则不需要清除浮动。
    3. 清除浮动后,父级元素会根据子元素自动检测高度。此时,父级元素有了高度,就不会影响下面的标准流了
    4. 语法:选择器{clear:属性值},left清除左侧浮动效果;right清除右侧浮动效果;both同时清除两侧浮动(always it
    5. 策略闭合浮动,只让浮动在父盒子内部影响,不影响父元素外面的其他盒子(关起门来收拾熊孩子

    清除浮动方法(闭合浮动

    1. 额外标签法(隔墙法:W3C推荐做法

      在最后一个浮动子元素末尾添加一个额外空标签,比如,或者其他块级元素空标签

      优点:通俗易懂,书写方便;缺点:添加许多无意义的空标签,结构化较差不常用

    2. 父级添加overflow属性

      父元素添加overflow属性,将其属性值设置为hidden、auto、scroll(子不教,父之过

      优点:代码简洁;缺点:无法显示溢出的部分

    3. 父级添加after伪元素(隔墙法的升级版

       
    4. 父级添加双伪元素(更符合闭合浮动的原意:前后都堵上

       

      优点:代码更简洁 缺点:照顾定版本浏览器

    5. 给父类添加

【02】 PC端网页布局之CSS3-pink老师-2022/03

  1. 为什么需要定位

    让小盒子在大盒子内自由地移动位置或者固定在屏幕上的某个位置,并且可以压住其他盒子

  2. 什么是定位

    将盒子定在某一位置,所以定位也是在摆盒子,按照定位的方式摆盒子

    定位=定位模式(4个+边偏移(4个

  3. 定位模式,通过position属性设置

    • static(静态定位:默认值,无定位的意思,就是标准流
    • relative(相对定位:自恋型,相对于自身原本位置而移动
      • 不脱标,并保留原本在标准流占据的位置(停职留薪
      • 最典型应用是给绝对定位当爹的。
    • absolute(绝对定位:拼爹型,相对于其祖先元素而言
      • 如果没有祖先元素或祖先元素没有定位,则以浏览器为准定位(document文档
      • 只要祖先元素有定位,则以最近一级有定位的祖先元素为参考点移动位置
      • 绝对定位不再占据原位置脱标
    • fixed(固定定位:固定于浏览器可视区的位置
      • 浏览器可视窗口为参照系移动元素位置,和父元素没有任何关系,不随滚动条滚动
      • 不占有原位置脱标
      • 主要使用场景:在浏览器滚动时元素位置保持固定(案例:电梯导航栏
      • 定位小技巧:固定在版心右侧位置
        1. 让固定定位盒子left:50%,位于可视区的中线右侧
        2. 让固定盒子margin-left:版心宽度的一半,就与版心右侧对齐了
    • sticky(粘性定位:相对定位和固定定位的结合版(侧边栏
      • 以浏览器的可视窗口为参照点移动元素(固定定位特点
      • 粘性定位占有原位置、不脱标(相对定位特点
      • 必须添加边偏移X,即当该元素与边的距离为X时,变为固定定位效果
  4. 边偏移

    top:顶部偏移量,定义元素相对于其父元素上边线的距离(top:90px;bottom;left;right

  5. 绝对定位和相对定位的使用场景子绝父相

  6. 一般为子绝父相:子级使用绝对定位,父级则需要相对定位

    • 子级绝对定位,脱标,不占有位置,可以放到父盒子的任何一个地方,并且不影响其他兄弟盒子
    • 父级需要加定位,限制子元素在父元素内部移动
    • 父元素不能脱标,因此只能是相对位置
  7. 定位总结

    定位模式是否脱标移动位置使用频率static 静态定位否不能使用边偏移几乎不relative 相对定位(占有位置)相对于自身位置移动常用absolute 绝对定位(不占有位置)最近一级有定位的父级常用fixed 固定定位是(不占有位置)浏览器可视区常用 头部导航栏sticky 粘性定位否(占有位置)浏览器可视区- 侧边栏
  8. 定位的叠放次序z-index:使用定位布局时,可能出现盒子重叠情况,此时,可以使用z-index来控制盒子的前后次序(Z轴), 这里有坑, 具体需要去了解 层叠上下文 这个知识点

    1. 语法:选择器{z-index:1;}
    2. 数值可以为任意整数值,默认是auto,数值越大,盒子越靠上
  9. 绝对定位的盒子居中:不能通过 margin:0 auto 水平居中,需要用算法如下

    水平居中:left/margin-left:50%,父盒子宽度的一半;transform: translateX(-50%) 自身盒子宽度的一半

    垂直居中:top:50%,父盒子高度的一半;transform: translateY(-50%) 自身盒子宽度的一半

    或者 flex 弹性盒子 给父元素设置 position: flex, justify-content: center; align-items:center;

  10. 定位特殊特性

    绝对定位和固定定位也和浮动类似(转化为行内块元素

    1. 行内块元素特点: 宽高取决于自身内容, 但可以直接设置高度和宽度
    2. 浮动元素会压住下面标准流的盒子,但不会压住下面标准流盒子里的文字
    3. 但绝对定位和固定定位会压住下面标准流所有的内容

本质:让一个元素在页面中显示或隐藏

  • display属性:block(除了转化为块级元素之外,还有显示目的)、inline、inline-block、none(隐藏对象,不再占有原位置
  • visibility属性:inherit、visible、hidden(隐藏对象,保留原位置
  • overflow属性:只是对对溢出部分显示或隐藏,保证在盒子内。visible、hidden、scroll显示滚动条、auto溢出才显示滚动条
  1. 布局定位属性:display、position、float、clear、visibility、overflow
  2. 自身属性:width、height、margin、padding、border、background
  3. 文本属性:color、font、text-decoration、text-align、vertical-align、white-space、break-word
  4. 其他属性(CSS3:content、cursor、border-radius、box-shadow、text-shadow
  1. CSS精灵技术(CSS Sprites CSS雪碧

  2. 目的:为了有效地减少服务器接收和发送请求的次数,提高网页的加载速度

  3. 核心原理:将网页中的一些小背景图像整合到一张大图中,这样服务器只需要一次请求就可以了

  4. 使用

    1. 主要针对小的背景图片的使用,将多个小背景图片整合到一张大图片中,即精灵图
    2. 通过移动精灵图位置获取背景目标icon,使用background-position
    3. 移动的距离就是目标icon的(x,y)坐标,注意网页中的坐标有所不同,以左上角为轴心,向右为x+,向下为y+
    4. 一般情况下都是往上和往左移动精灵图,所以数值是负值
  5. 缺点

    1. 图片文字还是比较大的
    2. 图片放大和缩小会导致失真
    3. 一旦精灵图制作完毕,背景icon设置完成,想要更换是非常复杂的,需要前端和美工(解决方案:字体图标iconfont

【02】 PC端网页布局之CSS3-pink老师-2022/03

  1. 使用场景:主要应用于网页中通用、常用的一些小图标

  2. 特点:为前端工程师提供一种方便高效的图标使用方式展示的是图标,本质属于字体

  3. 优点

    • 轻量级:一旦字体加载,字体图标马上就渲染出来,减少服务器请求
    • 灵活性:本质是文字,可以随意更改颜色、阴影、透明、旋转等效果
    • 兼容性:几乎支持所有的浏览器,可放心使用
  4. 注意:字体图标不能替代精灵技术,只是对图标展示技术的提升和优化,只针对结构和样式比较简单的小图标

  5. 使用

    1. 下载:字体图标是一些常见的小图标,直接网上下载即可([icomoon 字库](Icon Font & SVG Icon Sets ❍ IcoMoon))( 阿里 iconfont 字库)

    2. 引入:引入到html页面中(4个步骤

      • 将下载包里的font文件夹放到页面根目录下
      • 在CSS样式中 全局声明字体:即通过CSS将字体文件引入页面中
       
    3. 在html标签内添加小图标(span,小图标在下载包的demo.html里; 给标签定义字体,务必保证 定义字体与CSS声明@font-face里的字体保持一致 font-family:‘icomoon’ 【02】 PC端网页布局之CSS3-pink老师-2022/03

  6. 追加:便于日后添加新的小图标;只需要将压缩包里的selection.json在iconfont下载页面的import Icons重新加载即可,并按原来的步骤下载压缩包替换

【02】 PC端网页布局之CSS3-pink老师-2022/03

口诀: 宽高皆为0, 三边皆透明

 
 
  1. 定义:更改一些用户操作样式,以便提高用户体验

  2. 更改用户鼠标样式

    语法: li {cursor:pointer;} 属性值:default小白箭头|pointer小手|move移动十字架|text插入|not-allowed禁止

  3. 表单轮廓

    语法:input{outline:none或0;}去掉表单框选中后默认的蓝色边框

  4. 防止文本域拖拽

    语法:textarea{resize:none; outline:none} 文本域标签放在一行上,不然会有一些空格

  1. 使用场景:经常用于设置图片、表单、文本域(行内块元素)和文字垂直对齐(对图像或表单设置vertical-align=middle
  2. 官方解释:用于设置一个元素垂直对齐方式,但只针对行内元素或行内块元素
  3. 语法:vertical-align: baseline(默认) | top | middle | bottom
  4. 图像㡳侧有空白缝隙的解决方案
    • 因为默认与文字基线对齐,下方会留出底线与基线之间的空白缝隙,对img添加vertical-align:bottom/middle
    • 将图片转换为块级元素,display:block

【02】 PC端网页布局之CSS3-pink老师-2022/03

  • 单行文本溢出显示省略号-必须满足3个条件
    1. 强制一行内显示文本:white-space:nowrap(默认normal自动换行
    2. 超出部分隐藏:overflow:hidden
    3. 文字用省略号代替超出部分:text-overflow:ellipsis
  • 多行文本显示溢出省略号-有较大的兼容性问题,适合移动端或webkit浏览器(google,更推荐后台人员做这个效果,因为后台人员可以设置显示多少个字,操作更简单
 
 
  1. margin负值的运用

    现象:比如商品显示ul li,有一行排列的多个大小相等的盒子,浮动后,相邻盒子边线重合在一起,中间就会出现2倍边线。

    解决方案:给每个li添加margin-left:-border-line;但会出现鼠标经过中间盒子的右边线被压住的现象

    • 如果盒子没有定位,则给鼠标经过盒子添加相对定位即可
    • 如盒子有定位,则给鼠标经过盒子添加z-index提升层级优先级即可
  2. 文字围绕浮动元素浮动的前世今生是为了文字环绕产生的

    【02】 PC端网页布局之CSS3-pink老师-2022/03

    上图效果可以通过巧妙运用浮动元素不会压住文字的特性解决

    解决方案:一个大盒子,里面放一张图+文字(最好将这张图用div包起来便于后续修改,将放图片的盒子浮动起来,文字自动环绕

  3. 行内块的巧妙应用(页码在页面中间显示

    每一个小框都是一个a链接,将这些链接盒子转换为行内块元素,之后给父级指定text-align:center

    利用行内块元素相邻间隙,实现a与a之间的空白缝隙

    【02】 PC端网页布局之CSS3-pink老师-2022/03

  4. CSS三角强化

     

【02】 PC端网页布局之CSS3-pink老师-2022/03

  1. 为什么需要css初始化:不同浏览器对部分标签的默认值不同,为了消除它们对HTML文本呈现的差异,照顾浏览器的兼容性
  2. 定义:CSS初始化指重设浏览器的样式(也称为CSS reset每个网页都必须首先进行CSS初始化
  3. Unicode编码字体:将中文字体名称用Unicode编码替代,有效避免中文导致浏览器解析CSS代码出现乱码,比如
    • 黑体: 9ED14F53
    • 宋体: 5B8B4F53
    • 微软雅黑: 5FAE8F6F96C59ED
  1. 新增语义化标签:header、nav、article、section、aside、footer
  2. 主要针对搜索引擎,可多次使用,IE9需要转化为块级元素,在移动端不存在兼容性问题,更大量使用
  3. 新增多媒体标签:video、audio,不再去使用flash和浏览器插件
  4. video
    • 支持3种视频格式mp4(几乎所有浏览器都支持,尽量使用)、WebM、Ogg
    • video语法: 双标签
    • video属性

【02】 PC端网页布局之CSS3-pink老师-2022/03

  1. audio支持格式:MP3(几乎所有浏览器都支持,尽量使用)、Wav、Ogg;属性autoplay、controls、loop、src

  2. 多媒体标签总结

    • audio和video使用方式基本一致

    • google禁止video和audio自动播放、但video可以通过muted属性解决,audio不可以

    • video标签是重点,常设置自动播放,循环和设置大小属性,不使用control控件

  3. 新增input表单

    1. 类型:重点number、tel、search这三个

      【02】 PC端网页布局之CSS3-pink老师-2022/03

    2. 属性:重点placeholder、required、multiple

      【02】 PC端网页布局之CSS3-pink老师-2022/03

    3. 修改placeholder里字体的颜色

      input::placeholder { color:pink; }

css3新增选择器:可以更便捷、自由地选择目标元素

  • 作用:根据元素特定属性来选择元素,更改样式

  • 重点类选择器、属性选择器、伪类选择器的权重是10(0,0,1,0

【02】 PC端网页布局之CSS3-pink老师-2022/03

  1. 作用:主要根据文档结构来选择元素常用于选择父类里面的第几个子类

  2. 选择符:ul li:nth-child(n)(总权重=0001+0001+0010=0012;冒号后面的代表结构伪类选择器 【02】 PC端网页布局之CSS3-pink老师-2022/03

  3. nth-child(n):选择某个父元素的一个或多个特定的子元素(重点!非常重要

    • n可以是数字,关键字和公式

    • 数字:选择第几个元素,从1开始

    • 关键字:even偶数、odd奇数

    • 公式n从0开始计算,但第0个元素或超出元素个数会被忽略;直接写(n)选择所有的孩子(n要在数字的前面n要写在数字的前面 【02】 PC端网页布局之CSS3-pink老师-2022/03

  4. E:nth-child(n)和E:nth-of-type(n)用法一致,主要区别在于

     
  1. 作用:利用CSS创建新标签元素,而不需要HTML标签,从而简化HTML的结构

  2. 语法:element::after {样式}(before和after必须有content属性

    选择符简介::before在元素内部的前面插入内容::after在元素内部的后面插入内容
  3. 特点

    • before和after创建一个元素,但是属于行内元素
    • 新创建的元素实际上在文档树(结构)中并不存在,所以称之为伪元素
    • before和after必须有content属性
    • 伪元素选择器和标签选择器一样,权重为1
    • 有的地方双冒号写作单冒号,是为了照顾低版本浏览器兼容性
  4. 使用场景

    • 伪元素字体图标
    • 仿土豆遮罩效果
    • 伪元素清除浮动

CSS3中够可以通过box-sizing来指定盒模型,有2个属性值:content-box、border-box,导致计算盒子的大小发生了变化

属性值盒子大小content-box(默认值)盒子大小=width+padding+border;可用内容空间不变,盒子变大border-box盒子大小=width;盒子不变,可用内容空间变小
  1. 让图片变模糊

    滤镜filter:将模糊或颜色偏移等图形效果应用于元素

    格式: filter:函数

    例子:filter:blur(5px); blur模糊处理,数值越大越模糊

  2. 计算盒子宽度

    格式:width:calc(100%-80px;括号里可以使用±*/计算

    例子:需要子盒子的宽度永远比父盒子小30px:width:calc(100%-30px)

过渡(transition:CSS3中具有颠覆性的特征之一,可以在不适用Flash动画或JS的情况下,在元素样式变换时添加效果

过渡动画:从一个状态 渐渐过渡到 另一个状态

目的:页面更好看,更具动感,即使低版本浏览器不支持,但不影响页面布局

特点:经常和:hover一起 搭配使用(鼠标经过、过渡样式

语法:transaction(谁来变化给谁加

  • 要过渡的属性:想要变化的属性,宽高、背景、内往外边距都可以,all表示所有属性都变化过渡
  • 花费时间:单位是秒 比如0.5s
  • 运动曲线:默认是ease(可省) 【linear、ease、ease-in、ease-out、ease-in-out】
  • 开始时间:单位是秒 可设置触发延迟时间 默认是0s (可省

案例:进度条

 
 

1. 2D转换

特点:CSS3具有颠覆性的特征之一,可以实现元素的位移、旋转、缩放等效果,可简单理解为变形

  • 移动:transform:translate(x,y),改变元素在页面中的位置,类似定位

    移动盒子位置的3种方式:定位position、外边距margin、2D转换移动transform:translate(x,y)

    特点

    • 不会影响其他盒子的页面布局,position和margin会影响其他盒子位置(优势
    • 行内元素无效果
    • 若x,y是百分比单位,则移动距离是针对自身宽度和高度而言的transform:translate(-50%,-50%),可以结合posittion实现让子盒子水平垂直居中效果
  • 旋转:transform:rotate(45deg)+顺时针,-逆时针,旋转中心是中心点

  • 缩放:transform:scale(x,y);无单位,一个参数代表等比例缩放,不影响其他元素的页面布局,可以设置缩放中心点

  • 转换中心点transform-origin:x y;设置元素转换的中心点,x和y空格隔开,默认50%,50%,还可以设置px、方位名词top、left…

  • 综合写法:transform: translate()、rotate()、scale(),顺序会影响转换效果;同时有位移和其他属性,要将位移放到最前面

2. 3D转换

特点:近大远小;物体遮挡后不可见

三维坐标系(左手坐标系:X轴水平向右;Y轴垂直向下;Z轴垂直屏幕向外+

透视(perspective:如果想要在网页产生3D效果需要透视,即3D物体在2D平面的投影;也称为视距,即人眼睛到屏幕的距离;距离视觉点越近在电脑屏幕成像越大,越远越小,单位是像素px

透视写在实现3D效果(被观察元素)的父元素身上

d:视距,即人眼睛到屏幕的距离;d越小看到的物体越大

z:z轴,物体距离屏幕的距离;z越大(正值)看到的物体越大

【02】 PC端网页布局之CSS3-pink老师-2022/03

  • 3D位移:translate3d(x,y,z);translateZ一般用px单位(100px);前提透视视距已经固定
  • 3D 旋转:rotate3d(x,y,z,deg);rotate3d(1,0,0,45deg);对于元素旋转的方向判断用 左手准则,大拇指指向旋转轴正方
  • 3D呈现:transform-style:preserve-3d; 决定子元素是否开启3D立体环境,代码写给父元素,影响的是子盒子,重点

案例:两面翻转盒子;3D导航栏;旋转木马案例

特点:CSS3中具有颠覆性特征之一,可以通过设置多个节点来精确控制一个或一组动画,常用于复杂动画效果。相比较于过渡,可以实现更多变化、控制、连续自动播放等效果

动画序列

  • 0%动画开始,100%动画完成
  • @keyframes中规定某项CSS样式,就能创建由当前样式逐渐变化为新样式的动画效果
  • 动画是一种样式逐渐变化为另一种样式的效果,可以改变任意多的样式、任意多的次数
  • 用百分比规定发生变化的时间,或用关键词“from”和“to”,等价于0%和100%

简写:animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或结束状态

需要注意:animation-timing-dunction:setps(10);就是分几步来完成动画,可以实现打字效果

动画常用属性

【02】 PC端网页布局之CSS3-pink老师-2022/03

由于CSS3很多属性尚未成为W3C标准的一部分,因此每种内核的浏览器都只能识别带有自身私有前缀的CSS3属性。我们在书写CSS3代码时,需要在属性前加上浏览器的私有前缀,然后该种内核的浏览器才能识别相应的CSS3属性。

目的:兼容老版本的写法,比较新版本的浏览器无需添加

  • -moz-:代表firefox浏览器私有属性
  • -ms-:代表ie浏览器私有属性
  • -webkit-:代表safari、chrome私有属性
  • -o-:代表opera私有属性
 
 
 
  1. 采取结构与样式相分离的思想
  2. 网站首页统一规定为index.html,样式表style.css
  3. 样式引入 <link rel=“stylesheet” href=“style.css”>
  4. 样式表写入清除内外边距的样式,来检测样式表是否引入成功
  5. 页面布局分析
    • 必须确定页面版心(可视区)的宽度,测量可知
    • 分析页面行模块,再分析每个行模块中的列模块(页面布局第一原则
    • 制作HTML结构,遵循先有结构,再有样式的原则。结构永远是最重要的
    • 运用盒子模型原理,通过DIV+CSS布局控制页面的各个模块
  6. 导航栏关键
    • 实际开发中,不直接使用链接a而是用li包含链接,即(li+a,这样语义更清晰,有条理的列表类型内容。
    • 直接用 a会被搜索引擎辨别为有堆砌关键字嫌疑,导致降权,从而影响网站排名
    • 让导航栏一行显示,是给li加浮动,因为li是块级元素
    • nav导航栏可以不给宽度,便于后续添加其余文字
    • 因为导航栏的文字不一样多,最好给链接a左右padding撑开盒子,而不是指定宽度
  7. input和button都属于行内块元素 放在一行会有个默认的小缝隙,需要给它们加上float属性
  8. 按钮默认有个边框需要手动去掉(border: 0;
  9. 背景图片顶部垂直居中对齐 background: url(images/banner2.png) no-repeat top center;
  10. 浮动的盒子不会有外边距合并的问题
  11. 精品推荐大模块 推荐数量不确定所以不给高度。但是里 面的盒子浮动会影响下面的布局,因此需要清除浮动。给父类添加<ul class=“clearfix”>
  12. 只要是相同类型的盒子,都用ul li封装。每个盒子之间用margin隔开,但边缘盒子需要手动去除margin值否则一行摆不下,此时可以将父盒子宽度+一个margin值,就可以一行装上
  13. 不直接控制图片,而是给每一个图片元素套上一个父盒子,控制盒子是最好的
  14. 正常开发中,我们制定logo的时候,首先会先用一个div的大盒子来包裹,然后再div大盒子中放一个a标签的小盒子(目的在于logo是可以被点击的,div>a>h5+img 在a标签中要写上 官网的名字,但是这个名字不是给用户看的,是为了更好的被搜索引擎搜索到,所以我们会把这个文字进行隐藏(text-indent: -9999em;

网站制作流程

  1. 客户沟通、制定方案
  2. 签订合同、预付订金
  3. 初稿审核(网页美工制作原型图和PSD效果图
  4. 前台页面设计、后台功能开发
  5. 测试验收、上线培训、后期维护

模块化开发:将项目按照功能划分,一个功能一个模块,互不影响。模块化开发具有重复使用、更换方便等优点

  • 有些样式和结构在多个相关页面出现,比如页面头部和尾部,则可以将其单独作为一个模块,以便重复使用
  • 典型应用:CSS公共样式common.css,写好一个样式,多个相关页面重复使用(首页、列表页、详情页等
  • 还可以包含:版心宽度、清除浮动、页面文字颜色等公共样式

网站图标favicon.ico:一般用于作为略缩的网站标志,显示在浏览器的地址栏或者标签上

  • 制作favicon图标(png转换为icon),制作ico图标 | 在线ico图标转换工具 方便制作favicon.ico - 比特虫 - Bitbug.net
  • 将favicon图标放到网站的根目录下,在引入

搜索引擎优化(SEO:利用搜索引擎的规则提高网站在有关搜索引擎自然排名的方式,帮助网站获取免费流量和知名度

TDK三大标签:title、description、keyword

  • title网站标题:不可替代性,是内页第一个重要标签,是搜索引擎了解网页的入口,判定网页主题归属。

    建议:网站名(产品名)-网站介绍(不超过30个汉字

    • 京东(JD.COM)-综合网购首选-正品低价、品质保障、配送及时、轻松购物

    • 小米商城 - 小米5s、红米Note 4、小米MIX、小米笔记本官方网站

  • description网站说明:对网站总体业务和主题的概括

    建议:多采用“我们是…”“我们提供…”“XX网作为…”“电话010…”之类语句

  • keyword:页面关键词,搜索引擎关注点之一

    建议:6-8个关键词,英文逗号隔开

常用模块类名命名

名称说明名称说明快捷导航栏shortcut头部header标志logo购物车shopcar搜索search热点词hotwords导航nav页面底部footer导航左侧dropdown 包含.dd .dt导航右侧navitems页面底部服务模块mod_service页面底部帮助模块mod_help页面底部版权模块mod_copyright

详情页常用的单词

名称说明主体de_container面包屑导航crumb_wrap产品介绍product_intro (introduction介绍)预览包preview_wrap(左侧部分)预览缩略图preview_img预览列表preview_list左按钮arrow_prev右按钮arrow_next小图列表preview_items产品详细信息区域itemInfo_wrap (右侧部分)头部名称sku_name skull 头骨新闻news摘要summary评价remark价格摘要summary_price促销摘要summary_promotion配送至summary_stock支持summary_support选择choose选择版本choose_version选择类型choose_type选择按钮组choose_btns选择数量choose_amount减去reduce cursor: not-allowed; 禁止符号加入购物车addshopcar产品细节product_detail (detail描述)左侧边aside详细描述detail

logo SEO优化

  • logo里面首先放一个h1标签,目的是为了提权,告诉搜索引擎,这个地方很重要
  • h1里面再放一个链接,可以返回首页,将logo的背景图片给链接即可
  • 为了搜索引擎收录,链接里面要放文字(网站名称,但是文字不能显现
    1. 淘宝做法:text-indent移到盒子外面(text-indent:-9999px,然后overflow:hidden
    2. 京东做法:font-size:0;
  • 给链接一个title属性,鼠标放到logo上就可以看到提示文字了

里面放的时候,给链接一个padding值撑开盒子,产生间隔,而不是给li,因为这样的a范围更广,用户更好点击链接,即在有链接的情况下,优先考虑使a布局更大的做法

服务器(主机:提供计算服务的设备,也是一台计算机。在网络环境下,根据服务器提供的服务类型不同,服务器又分为文件服务器、数据库服务器、应用程序服务器、Web服务器等。根据服务器在网络中的位置不同,又分为本地服务器和远程服务器。

Web服务器:一般指网站服务器,指驻留于因特网上某种类型计算机的程序,可以向浏览器等Web客户端提供文档,也可以放置网站文件,让全世界浏览;可以放置数据文件,让全世界下载。

本地服务器(针对局域网:将此电脑设置为服务器,则一个局域网内的同学就可以访问此电脑。(ajax

远程服务器(针对互联网:某公司提供的一台电脑(主机,将品优购项目上传到该电脑,则任何人都可以通过域名访问此网站了

    以上就是本篇文章【【02】 PC端网页布局之CSS3-pink老师-2022/03】的全部内容了,欢迎阅览 ! 文章地址:http://xiaoguoguo.dbeile.cn/news/1049.html 
     资讯      企业新闻      行情      企业黄页      同类资讯      首页      网站地图      返回首页 多贝乐移动站 http://xiaoguoguo.dbeile.cn/mobile/ , 查看更多   
最新新闻
李子柒停更期间拜访了许多非遗传人,前公司:双方已完全和解
李子柒回归依然是顶流!在长达1200多天的停更之后,11月12日,知名网红在社交平台公开更新两条视频,表示“把这份祝愿送给看到视
李子柒复出热搜背后的文化传承探索
自从李子柒在社交媒体上停更以来,粉丝们一直在翘首以待她的再次亮相。近日,一段关于李子柒参与熊猫家园宣传活动的官方视频意外
震撼!李子柒三年后回归,热搜霸榜揭秘背后故事
2024年11月12日,李子柒再次引发热议,她的最新视频正式上线,并引发了一波热潮。时隔三年,她的回归不仅令无数粉丝为之振奋,更
火年还是水年?2025年属蛇人的命运如何
每个人的命运都各有不同,十二生肖的性格差异很大,即便是同一个属相,不同年份出生的人,命运也会有所不同。随着2025年的到来,
李子柒回归:她的“王者归来”揭示了哪些社会密码?
在社交媒体上曾风靡一时的李子柒,最近以全新的创作宣告回归,瞬间点燃了网络的热情。这位因其对传统文化的深刻理解而备受喜爱的
李子柒复出,背后的IP运营启示
在停更3年之后,依靠传统文化视频创作火遍国内外网络的李子柒再次更新了视频。11月,李子柒久违发布视频,仅仅几小时播放量就破
李子柒复出:从宁静乡村到数字流量的传奇旅程
在社交媒体上,一位女子以她独特的田园生活视频与传统技艺作品,深深触动了亿万观众的心,她就是李子柒。2024年11月12日,她的正
三年归来仍是顶流,李子柒给所有跨境商家上了一课
文:晓鹏,编辑:赵元,出品:增长工场离开的三年,无数人想成为她们、替代她们,但无一成功。李子柒离开的三年,是中国企业出海
2025年火运最旺的属相
2024年已经接近尾声了,相信之前运势不利的朋友也感到疑惑,为何进入九紫离火运了,自己的事业和财运仍然没有好起来?但实际上,
张了凡:2025年普通人,最赚钱的3个行业
​​嘿,朋友们,你们知道吗?明年开始,有三个行业简直是赚钱的黄金赛道,普通人只要踩中其中一个,身价翻个10倍都不是梦! 不