前端学习所需要的一些html和css的基础基本已经了解完了 ,现在就应该着手做自己的静态页面
增加熟练度,便于之后学习js的时候更加顺畅
这几天会陆陆续续的增加一点小的细节,实际开发中会用的很少,但是如果用到也得会
这些都是会遇到,但是用的少,大家理解即可,知道些样式如何实现
一.双伪元素清除浮动
伪元素清除浮动升级版,即解决了清除浮动,有解决了塌陷
两个伪元素合并如下:
清除浮动:
.clearfix::after {
content: '';
display: block;
clear: both;
}
margin塌陷问题:
.clearfix;:before{
content:"";
display:table;
}
合并起来
.clearfix::before,
.clearfix::after{
display:table;
content:"";
}
.clearfix::after{
clear:both;
}
二.精灵图
把很多小图片合并成一张大图片,这张大图片就是精灵图.
使用精灵图的目的,就是减少服务器发送图片的次数,减轻服务器的压力,
原本每张小图片都要发送好多次,但是如果使用精灵图,只需要发送一次;
那么,如何使用精灵图呢?
步骤:
1.创建一个盒子
2.通过ps量取小图片的尺寸,将对应小图片的宽高直接设置给盒子
3.将精灵图设置为盒子的背景图片
4.将小图片的坐标取负值添加给background-position:x y;
*将背景图片往上移动,y轴坐标是负数
*将背景图片往左移动,x轴坐标是负数
注意:1.盒子大小和小图片大小一致.
2. 精灵图通过背景定位,让所有的小图片都能显示
3.在ps中,通过切片,量取对应的坐标,直接取负值
三.字体图标(会使用)
在网页的很多地方，比如下箭头、照相机图标、搜索图标
字体图标本质上就是文字，所以可以通过css中文字相关的属性操作字体图标。
场景：
页面中有很多的图标（左右箭头、购物车、用户、等等），怎么完成页面的效果？？
-
使用图片：可以完成效果，但是图片在放大的时候会失真（边缘模糊）
-
字体图标：可以完成效果，并且字体图标可以通过css设置样式，而且放大不会失真。
优点：
本质是文字，可以通过css文字相关样式设置字体图标的样式（颜色、大小、加粗），并且不会失真
使用步骤
下载字体图标（一般UI会给）：
-
登录阿里 iconfont 字库，将自己想要的图标加入购物车
-
点击购物车图标，选择下载代码
使用字体图标：
-
在项目目录新建 fonts 文件夹，将字体图标文件内所有文件拷贝进 fonts 文件夹
-
在项目中通过link标签引入字体css文件（iconfont.css）
字体文件包中的 demo_fontclass.html 为说明书
<link rel="stylesheet" href="fonts/iconfont.css">
-
通过i标签上面设置对应类名来使用
<i class="iconfont icon-refresh"></i>
注意：
-
设置字体图标样式时，注意层叠性问题！！（通过iconfont类名找到i标签）
-
不能改变字体图标的font-family，否则样式不生效
四.滑动门
类似于qq聊天的气泡,可以根据字数的多少来改变宽度,但是前后的样式不变
滑动门步骤：
-
三个盒子要在一行中显示，都需要浮动起来。
-
left：宽高和背景图片的大小一致
-
center：高度为背景图片的高度，宽度由内容撑开（浮动之后的元素宽度默认由内容撑开），背景平铺
-
right：宽高和背景图片的大小一致
-
五.边框圆角
可以用css画个圆:border-radius:圆的半径
border:边框
radius:半径
取值：
-
一个值：左上右上右下左下
-
两个值：左上右下、右上左下
-
三个值：左上、右上左下、右下
-
四个值：左上、右上、右下、左下
记忆方法： 先从左上开始赋值，顺时针赋值，如果没有赋值的，看对面的。
常见的应用：
-
画一个圆：
-
盒子必须是一个正方形
-
border-radius：50%
-
-
胶囊按钮
-
盒子是一个矩形
-
border-radius：盒子高度的一半
-
六.样式初始化的补充
有时候会需要去除input默认的边框和textarea的自由缩放
去除边框：
-
border：none
去除input点击之后的边框轮廓线：
-
outline-style: none
设置禁止textarea自由缩放：
-
resize：none
七.盒子宽高的百分比设置
如果需要一个父盒子中的四个子盒子，宽度为父盒子的四分之一，高度为父盒子的高度，怎么去完成？
-
可以直接设置数值（自己计算）
-
可以直接设置百分比（百分比相对于父盒子的宽高，让浏览器去计算）
八.项目搭建
每一个项目开始之前都要有项目的搭建。
对应有很多页面的大型的项目，因为每个页面都有自己对应的css文件，所以css文件需要单独放在一个css文件夹中
项目搭建步骤：
-
新建项目文件夹
-
新建images文件夹，把图片放在images文件夹中
-
新建css文件夹，把所有页面的css文件放入
大型项目有多个页面，每个页面都有对应的css文件，为了项目的查阅方便，一般会把所有的css专门放在一个文件夹汇总
-
新建index.css放入文件夹
-
-
新建页面index.html
样式的初始化：
-
index.css中进行样式的初始化（把项目中要用的样式先写好）
-
因为样式的初始化每个项目都是一样的，所有公司开发的时候会把样式初始化代码写成一个单独的base.css文件，开发的时候直接引入即可
-
页面ico图标的使用（了解）
较大的网站的title前面会有一个小的图标，这个小图标一般使用的就是ico图标
使用步骤：
-
获取
ico图标-
一般是由UI设计师提供.ico图片
-
可以通过 一些转换网站 将图片上传，获取ico图标
-
-
使用
ico图标-
<link rel="icon" href=" favicon.ico的路径">一般将ico图标放到根目录下面
-
页面seo三大标签（了解）
页面中有三个标签对于seo非常重要！
title：标题标签
表示网页的标题，对于网页的seo权重很高！！
一个大型的网页，也需要有对应的title标签的：
<title>38期品优购</title>
Description：描述标签
是对于网页内容的描述，可以是对于标题的补充，一般文字不超过120个字。
一个大型的网页，也需要有对应的description标签的：
<meta name="description" content="品优购-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />
Keywords：关键字标签
是页面内容的关键字，对于seo也较为重要。
一个大型的网页，也需要有对应的Keywords标签的：
<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,品优购" />