前端学习所需要的一些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,相机,数码,配件,手表,存储卡,品优购" />