补充前面文章的小知识点:
清除浮动:
设置浮动时,若子级浮动,且父级没有高度,后面的标准流盒子就会收到影响,显示到上面的位置
当将父级标签father的高度注释掉时,(该情况多用于其文本内容不固定,则该盒子的高度由内容多少来决定),下面的标准流标签就会顶替其父级标签的位置,因为两个left、right子标签设置了浮动,此时应该将浮动清除:
解决方法:①额外标签法:在父元素内容的最后添加一个块级元素,设置clear:both
②单伪元素法:即用伪元素代替额外标签
③双伪元素法:既可以解决塌陷问题,又可以清除浮动
④给父级标签增加属性overflow:hidden
实际应用案例-学成在线
01、准备工作
做网站首先要整理一个项目根目录,即网站的第一级文件夹,里面存放①图片文件夹:images②样式文件夹:CSS③网站首页:index.html(文件夹内所有名称均应为英文字符,因为要上传至服务器)
02、实际操作步骤:略。
页面布局的方式除标准流、浮动之外,还有定位。
定位:可以解决盒子与盒子之间的层叠问题。①定位之后的元素层级最高,可以层叠在其他盒子上面②可以让盒子始终固定在屏幕的某个位置
设置定位的方式,添加属性:position
(static就相当于不定位)
设置定位时的偏移量:
相对定位 relative:相对于自己之前的位置进行移动,且元素级别不变,在页面中占位,没有脱标(即没有脱离标准流)
测试相对定位01:
添加属性:
黄色块相对自己的左边移动了40px,相对自己的上边移动了80px
测试相对定位02:
绝对定位 absolute:首先找到设置了绝对定位的元素的父级,若该父级没有设置定位;则以浏览器窗口为参照物进行定位,元素变为行内块元素,且在网页中不占位,脱标;
div的父级为body,body未设置定位:
当父级有定位时候,则参照物为父级元素(父级元素最好设置为relative)(子绝父相)
绝对定位-居中
当标签设置为绝对定位时,使用margin是没有作用的,要position属性值与margin属性值配合使用
left与margin-left要配合使用,right也同理(应该是英文此时father的父级没有设定定位,故相对浏览器进行移动,它的侧边已达到边界值)
当要频繁更改盒子的宽高,又要保持居中时;可以加上如下语句
遮罩功能:
固定定位:fixed
添加上述语句后,可使得即使滚动页面,元素固定在相对于浏览器的某个区域。
层级显示:
层级显示次序:标准流<浮动<定位
当同时有定位时,则定义顺序显示(层叠样式)
现在仅将div的定义顺序改变:
若不改变定义顺序,但是想小粉在上面,则可以添加属性z-index(默认值为0)(!important是用于选择器的优先级)
注: 我们可以发现此次的小粉在上与第一幅图的小粉在上是不一样的;由此可知:加z-index只是改变其层级属性,并没有改变其定义顺序。
元素的装饰效果
1、垂直对齐方式(因为浏览器默认行内和行内块元素当作文字处理,按照基线排版对齐,故处理边边角角对齐的时候要用到此属性(或者显示模式改为block也行))
光标的类型
设置鼠标光标在元素上时显示的样式
边框圆角
让盒子的四个角变得圆润,属性名为border-radius,常见取值为数字+px或者百分比,赋值规则:从左上角开始赋值,顺时针进行,没有赋值的看对角。
如果要让盒子变为正圆:border-radius取50%
让盒子变为胶囊型:boder-radius取高度的一半
溢出显示效果
隐藏显示
拓展:元素整体透明(包括元素中的内容)
属性名:opacity
属性值:0~1,0表示完全透明
实际应用案例-小兔鲜
项目前置认知
1、精灵图的介绍
项目中的多张小图片,合并成一张大图片,这张大图片就被称为精灵图。这么做的优点是可以减少服务器发送次数,减轻服务器的压力,从而提高页面加载速度。
精灵图的使用步骤:①创建一个和小图片尺寸相同尺寸的盒子(一般都是行内元素)
②将精灵图设置成背景图片
③修改背景图位置(background-position),使要出现的小图片显示在①设置的盒子内
精灵图
2、背景图缩放
3、盒子阴影
3、过渡(与hover使用,增强网页交互体验)
属性名:transition 属性值:需要过渡的属性名/或者all(所有能过渡的属性都过渡)过渡的时间
注意:transition属性给需要过渡的元素本身加
4、骨架标签解析
5、SEO简介
SEO(Search Engine Optimization):搜索引擎优化,即让网站在搜索引擎上排名靠前
提升SEO的常见方法:
①竞价排名 ②将网页制作成html后缀 ③标签语义化
SEO三大标签:①title:网页标题标签 ②description:网页描述标签 ③keywords:网页关键词标签
6、ico图标设置
显示在标签页标题左侧的小图标,习惯使用.ico格式的图标,通常放在根目录下
不设置时,网页ico图标默认为浏览器图标
添加语句:
项目结构搭建前文件和目录准备
ico图标放进项目根目录中;
图片分为两个文件夹,一个为images:存放网站固定使用的图片素材,如logo、样式修饰图片等,一个为uploads:存放网站非固定使用的图片素材,如商品图片、宣传图等;
CSS文件可分为三个,一个为base.css,存放基础公共样式,如所有选择器样式默认边距清理、超链接下划线清除等;一个为common.css,存放该网站中多个页面相同模块的重复样式,如头部、底部等;最后一个为index.css,存放首页其他样式
小兔鲜儿成品
至此 静态网页完结撒花啦~