程序员的资源宝库

网站首页 > gitee 正文

No.1.9

sanyeah 2024-04-13 16:22:13 gitee 5 ℃ 0 评论

项目样式补充

精灵图(场景:项目中将多张小图片,合并成一张大图片,这张大图片称之为精灵图)

   (优点:减少服务器发送次数,减轻服务器的压力,提高页面加载速度)

精灵图的使用步骤:1.创建一个盒子,设置盒子的尺寸和小图片尺寸相同

         2.将精灵图设置为盒子的背景图片

         3.修改背景图位置(通过PxCook测量小图片左上角坐标,分别取负值设置给盒子的background-position: x y)

背景图片大小(作用:设置背景图的大小)(background-size: 宽度 高度)

      取值        场景

     数字+px     简单方便,常用

      百分比    相当于当前盒子自身的宽高百分比

     contain  包含,将背景图片等比例缩放,直到不会超出盒子的最大

      cover  覆盖,将背景图片等比例缩放,直到刚好填满整个盒子没有空白

/* background-size: 300px; */
      /* background-size: 50%; */
      /* 如果图的宽或高与盒子尺寸相同了,另一个方向停止缩放 -- 导致盒子可能留白 */
      background-size: contain;
      /* 如果宽或高和盒子尺寸完全相同,导致图片显示不全 */
      /* background-size: cover; */
      /* 工作中,图的比例和盒子的比例都是相同的  contain  cover效果完全相同 */
background连写拓展(background: color image repeat position/size)
background-size和background连写同时设置时,需要注意覆盖问题
解决:  1.要么单独的样式写连写的下面  2.要么单独的样式写在连写的里面
盒子阴影:作用:给盒子添加阴影效果,吸引用户注意,体现页面的制作细节(box-shadow)
取值      参数        作用
       h-shadow    必须,水平偏移量。允许负值
       v-shadow    必须,垂直偏移量。允许负值
        blur        可选,模糊度
       spread       可选,阴影扩大
        color       可选,阴影颜色
        inset      可选,将阴影改为内部阴影
      /* box-shadow: 5px 10px 20px 10px green inset; */
      /* 注意:如果是外阴影不能添加outset 添加类会报错 */
过渡作用:让元素的样式慢慢的变化,常配合hover使用,增强网页交互体验(属性名:transition)
常见取值    参数            取值
        过渡的属性  all: 所有能过渡的属性都过渡、具体属性名:width:只有width有过渡
        过渡的时长        数字+s(秒)
注意: 1.过渡需要:默认状态和hover状态样式不同,才能有过渡效果
    2.transition属性给需要过渡的元素本身加
    3.transition属性设置在不同状态下、效果不同的(给默认状态设置,鼠标移入移出都有过渡效果,给hover状态设置,鼠标移入有过渡效果,移出没有过渡效果)
    /* 过渡配合hover使用 ,谁变化给谁加过渡属性*/
骨架结构标签
(1)DOCTYPE文档说明
<!DOCTYPE html>文档类型说明,告诉浏览器该网页的HTML版本(HTML5)
(2)网页语言
<html lang="en"> 标识网页使用的语言(作用:搜索引擎归类+浏览器翻译)(常见语言:zh-CN简体中文/en中文)
(3)字符编码
<meta charset="UTF-8">标识网页使用的字符编码
作用:保存和打开的字符编码需要统一设置,否则可能会出现乱码
常见字符编码:  1.UTF-8:万国码,国际化字符编码,收录了全球语言的文字
         2.GB2312:6000+汉字
         3.GBK:20000+汉字
注意:开发中统一使用UTF-8字符编码即可
SEO(Search Engine Optimization):搜索引擎化
作用:让网站在搜索引擎上的排名靠前
提升SEO的常见方法:1.竞价排名2.将网页制作成html后缀3.标签语义化(在合适的地方使用合适的标签)4........
SEO三大标签:1.title:网页标题标签
       2.description:网页描述标签
       3.Keywords:网页关键词标签
ico图标设置(场景:显示在标签页标题左侧的小图标,习惯使用.ico格式的图标)
浏览器标题栏图标
<link rel="shortcut icon" href="ico图片路径" type="image/x-icon">
项目结构搭建
1.文件和目录准备
(1)新建项目文件夹(实际开发中,项目文件夹不建议使用中文,所有相关文件都放在项目目录中)
(2)复制favicon.ico到项目文件夹中(根目录)
(3)新建images和upload目录到项目文件夹中(images:存放网站固定使用的图片素材,如:logo、样式修饰图片...等)(uploads:存放网站非固定使用的图片素材,如:商品图片、宣传图片...等)
(4)新建index.html在根目录
(5)新建css文件夹保存网站的样式,并新建以下CSS文件:(base.css:基础公共样式)(common.css:该网站中多个网页相同模块的重复样式,如:头部、底部)(index.css:首页样式)
2.基础公共样式
3.index页面骨架
优化搜索引擎的做法:
logo:
        <div class="logo">
            <h1><a href="#">小兔鲜儿</a></h1>
        </div>
    /* 目的让h1里面的文字看不见 */
    font-size: 0;
行内标签  /* 绝对定位:盒子具备行内块特点 */

Tags:

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表