CSS基础——h5中的框架集及CSS中奇葩异常

news/2024/11/27 11:45:47/

目录

框架集

CSS命名规范

id class和文件命名规范

浏览器的奇葩设计

CSS代码压缩

项目时间划分

总结


框架集

框架集和内联框架的作用他是类似的,都是用来将一个页面引入到其他的外部页面的。

框架集和一同事引入多个页面,而我们之前说的内联框架只能够引入一个页面,在H5开发标准中,他推荐的是使用框架集,而不是使用内联框架来实现引入效果

使用frameset来创建出一个框架集。注意:framset不能和body出现在同一个页面之内。所以我么在使用框架集的时候,页面中不能够使用body标签的。

在frameset中使用frame字标签来指定我们要引入的页面信息,引入几个页面,就添加几个frame

属性:

rows:指定框架集内的所有的框架,一行一行的进行排列;

cols:指定框架集内的所有的框架,一列一列的进行排列;

这两个属性frameset必须选择一个,并且需要在属性中执行每一部分所占据的空间大小。需要几个,就添加几列。

frameset中可以在入引入frameset

<frameset rows="50%,50%">

        <frame src="外部网页地址(a.html)"/>

        <frame src="外部网页地址(b.html)"/>

</frameset>

frameset和iframe一样,他里面的内容都是不会被搜索引擎所检索到的。

因此,如果搜索引擎检测所到了页面是一个框架页面的话,他是不可能去判断里面的具体内容的信息,使用框架集那么就会意味着页面中不能够有我们自己的定制内容,只能去引入其他的页面,没单独加载一个页面,浏览器就会多一次重复的请求,引入N个页面,则会发出N次请求,就会导致交互时的体验极差!

如果两者必须要使用的话,则建议使用frameset。

CSS命名规范

id class和文件命名规范

1、命名的时候,我们要尽量使用英文,当我们遇到不会的英文,可以使用拼音代替,但是不要英文和拼音混用

2、命名格式

1)驼峰命名法:首字母小写,后面每个单词的开头字母都要大写。

例:studyDemo

2)所有的字母全部小写,每个单词或者拼音中间用_或者-连接

例:study_demo   study-demo

浏览器的奇葩设计

1、chrome浏览器对字体支持最小12个像素,再小就没有变化。(1-11都是显示12像素)

CSS代码压缩

1、删除代码中的注释、换行、空格

2、也可以使用JsCssZip软件进行压缩(他的原理其实就是1中的操作)

3、图片拼成雪碧图在项目中使用加载。

注意:雪碧图只适用于宽高固定的背景图

项目时间划分

拿到项目后我们的时间是怎么划分的呢?

其实也有一个不成文的规定,

1、1/3的时间在做需求分析与设计;

2、1/6的时间是在开发;

3、1/2的时间是在测试并且修改bug

        1)、性能测试;

                 请求的时间,一般不能超过3S的时间

        2)、业务逻辑测试;

总结

到现在我们关于CSS相关的常用基础知识就讲解完毕了,接下来我们准本一下前往下一个阶段VEU进行学习吧。

好了,今天就到这里啊

欢迎大家点击下方卡片关注《coder练习生》


http://www.ppmy.cn/news/48876.html

相关文章

dB 、dBSPL、dBFS、dBTP

本文整理自&#xff1a;https://corychu.medium.com/%E9%8C%84%E9%9F%B3%E7%AD%86%E8%A8%98-%E6%95%B8%E4%BD%8D%E9%9F%B3%E9%87%8F%E6%A8%99%E6%BA%96-dbfs-dbtp-lufs-c47ca4646b7f 概述&#xff1a;dBFS&#xff08;相对于满刻度的分贝&#xff09;是数字系统中振幅水平的测…

由表及里的解读数据仓库

数据仓库作为商业智能BI系统中的一部分&#xff0c;已经成长为了企业信息化建设中必不可少的重要支撑&#xff0c;在可见的未来&#xff0c;数据仓库还会随着信息化、数字化技术、理念、应用的落地&#xff0c;继续成长。 数据仓库是一个面向主题的、集成的、随时间变化但信息…

OSCP-Sirol(docker容器到宿主机)

目录 扫描 WEB 提权 扫描 sudo nmap 192.168.64.54 -p- -sS -sVPORT STATE SERVICE VERSION 22/tcp open ssh OpenSSH 7.4p1 Debian 10+deb9u7 (protocol 2.0) 53/tcp closed domain 80/tcp open http Apache httpd 2.4.25 ((Debian)) 3306…

300元的蓝牙耳机什么牌子好?300内无线蓝牙耳机推荐

感受过无线的自在舒适后&#xff0c;越来越多的小伙伴爱上了蓝牙耳机白天出街更潇洒&#xff0c;目前市面上蓝牙耳机琳琅满目可选择性较多价格从几十、几百元到数千元不等然而蓝牙耳机的安全性、舒适性如何&#xff1f;连接稳吗&#xff1f;下面整理了几款300元价位的耳机分享给…

2023年值得关注的3个品牌趋势,帮你弯道超车

2023年&#xff0c;大环境开放&#xff0c;压抑三年的消费蓄势待发&#xff0c;品牌如何唤醒消费者的、热情成了重中之重的大事。 春风和煦&#xff0c;万物生长。又到了各类品牌、各位营销人踌躇满志、斗志昂扬的时候了&#xff0c;浅析一下2023品牌宣传趋势&#xff0c;抓住…

【java】 DirectoryStream 及其简单使用

DirectoryStream是Java NIO.2中用于遍历目录的一个接口类&#xff0c;它可以用来获取指定目录下的所有文件和子目录。在本篇文章中&#xff0c;将通过介绍DirectoryStream的一些常用方法和使用情景&#xff0c;并给出3个示例代码&#xff0c;帮助读者更深入地了解文件和目录操作…

提取文本关键词?很 easy 啊,用 Python 三行搞定

从大量文本中提取有用的关键信息是数据分析的一个重要环节。 Python 作为一门广泛应用于数据分析领域的编程语言&#xff0c;有着强大的文本处理库。 整理了几个用于文本关键词提取的优秀工具&#xff0c;一起学习下。 1、jieba库 jieba 是一个中文分词库&#xff0c;可以将…

Java 之 String、StringBuffer与StringBuilder 区别

String String 是被 final 修饰的类&#xff0c;不能被继承&#xff1b;String实现了 Serializable 和Comparable接口&#xff0c;表示String支持序列化和可以比较大小&#xff1b;String底层是通过char类型的数据实现的&#xff0c;并且被final修饰&#xff0c;所以字符串的值…