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

目录

框架集

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.mfbz.cn/a/14127.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

kafka延时队列内部应用简介

kafka延时队列_悠然予夏的博客-CSDN博客 两个follower副本都已经拉取到了leader副本的最新位置&#xff0c;此时又向leader副本发送拉取请求&#xff0c;而leader副本并没有新的消息写入&#xff0c;那么此时leader副本该如何处理呢&#xff1f;可以直接返回空的拉取结…

IEEE14节点系统在如短路分析,潮流研究,互连电网中的研究(Simulink)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

easyrecovery16最新数据恢复软件密钥使用方法教程

easyrecovery是一款专业的数据恢复软件,其最新版本为easyrecovery2023将于2022年底发布。总之,easyrecovery是一款功能齐全、性能稳定的专业数据恢复软件,无论删除文件、格式化分区或磁盘故障,它都可以提供最高的恢复成功率。值得个人用户选用。此版本在功能和性能上有较大提升…

BBR原版/魔改/plus/锐速/七合一脚本linux加速脚本/硬盘挂载/cc防御/宝塔

BBR原版/魔改/plus/锐速七合一脚本linux加速脚本/硬盘挂载/CC防御/宝塔 新云分享的七合一脚本&#xff0c;包含原版BBR、魔改BBR、bbrplus以及锐速可选。 在vultr上Centos 7, Debian 8/9, Ubuntu 16/18测试通过&#xff0c;不支持ovz。 安装指令&#xff1a;复制下面命令在s…

基于构效关系模型的药物设计(QSAR)

基于构效关系模型的药物设计&#xff08;QSAR&#xff09; 定量构效关系&#xff08;QSAR&#xff0c;Quantitative Structure-Activity Relationship&#xff09;分析是指利用理论计算和统计分析工具来研究系列化合物结构&#xff08;包括二维分子结构、三维分子结构和电子结…

【Maven 入门】第二章、Maven核心程序解压与配置

一、Maven 官网地址 首页&#xff1a; Maven – Welcome to Apache Maven(opens new window) 下载页面&#xff1a; Maven – Download Apache Maven(opens new window) 本文以maven-3.3.8为例 具体下载地址&#xff1a;https://dlcdn.apache.org/maven/maven-3/3.8.8/bina…

【问题记录】docker 搭建 minio

一、搭建过程 docker 搜索minio镜像 docker search miniodocker 拉取镜像 docker pull minio/miniodocker 启动 minio docker run -p 9900:9900 --name minio -d --restartalways -e MINIO_ACCESS_KEYminio -e MINIO_SECRET_KEY1qazWSX -v /usr/local/minio/data:/data -v …

vue-cli的使用和单页面应用程序、使用vue-cli脚手架创建vue项目步骤

1.vue-cli的使用 vue-cli是Vue.js开发的标准工具。它简化了程序员基于webpack创建工程化的Vue项目的过程。 引用自vue-cli官网上的一句话: 程序员可以专注在撰写应用上&#xff0c;而不必花好几天去纠结webpack配置的问题。 中文官网: https://cli.vuejs.org/zh/ 1.1 安装 …

8年测开年薪30W,为什么从开发转型为测试?谈谈这些年的心路历程……

谈谈我的以前&#xff0c;从毕业以来从事过两个多月的Oracle开发后转型为软件测试&#xff0c;到现在已近过去8年成长为一个测试开发工程师&#xff0c;总结一下之间的心路历程&#xff0c;希望能给徘徊在开发和测试之前的同学一点小小参考。 一、测试之路伏笔 上学偷懒&#…

updateByPrimaryKey和updateByPrimaryKeySelective的区别

版权声明 本文原创作者&#xff1a;谷哥的小弟作者博客地址&#xff1a;http://blog.csdn.net/lfdfhl MyBatis Generator概述 MyBatis Generator是一个专门为MyBatis框架使用者定制的代码生成器&#xff0c;它可以快速的根据表生成对应的映射文件、接口文件、POJO。而且&#…

哪个品牌的洗地机更好用?热门洗地机盘点

洗地机没有使用过之前一直怀疑是不是智商税&#xff0c;等到后面体验过之后&#xff0c;发现是真的香。因为不可否认的是&#xff0c;洗地机的清洁力还是不错的。不仅能够快速清洁干净地面&#xff0c;大大的节省了我们的清洁用时&#xff0c;操作起来也省心省力。作为一个洗地…

Linux下实现C语言程序

一.情况说明 写这篇博客的情况比较复杂&#xff0c;首先我本来是参加新星计划按照规划现在去学习shell脚本语言的&#xff0c;但是博主现在由于其他原因需要了解makefile&#xff0c;makefile是Linux系统下的一种工具&#xff0c;makefile的一些背景要涉及链接库的知识&#xf…

css初入门:网页布局之网格布局-grid

文章目录 网格布局-grid1、设置网格布局2、网格布局介绍3、网格容器grid-template-columns属性grid-template-rows 属性justify-content 属性justify-items属性align-content 属性 4、网格项目grid-column-start、grid-column-start、grid-column属性grid-row-start、grid-row-…

4.2.2字符串KMP算法

对朴素模式匹配算法的优化&#xff1a; 当我们匹配最后一个字符才发现匹配失败。 那么前面这些字符一定是与模式串对应的。 通过模式串的部分匹配 朴素模式匹配算法优化思路&#xff1a; 不匹配的字符之前&#xff0c;一定是和模式串一致的。 可以跳过中间好几个没有必要的对比…

如何将项目提交到别人的仓库

大纲&#xff1a; 1、在gitee中克隆(clone)别人仓库的代码。 首先&#xff0c;进入别人的仓库&#xff0c;点击 克隆/下载 2、在你存放项目的文件夹下克隆你刚刚复制的代码 &#xff08;右键点击Git Clone即可&#xff09; 点击OK 就开始克隆了 克隆成功之后&#xff0c;文件上…

Maya英文界面怎么改为中文界面

Maya是一款3D动画和视觉效果软件&#xff0c;用于创建逼真的角色和大片般的效果&#xff0c;也是受到电影、电视和游戏行业的 3D 建模师、动画师、照明艺术家和 VFX 艺术家等多数人喜爱的一款3D软件。我们在使用Maya的过程中&#xff0c;常常会遇到一些小阻碍&#xff0c;比如M…

蓝牙耳机接打电话哪个比较好?接打电话最好的蓝牙耳机

技术已经发展到如此程度&#xff0c;耳机可以淹没嘈杂环境中不断出现的杂音&#xff0c;同时还能让我们在通话、音乐和娱乐方面保持清晰&#xff0c;既然如此&#xff0c;我们就来整理一下2023年适合通话和娱乐的无线耳机清单。 一、南卡小音舱Lite2蓝牙耳机 参考价格&#x…

基于Java+jquery+SpringMVC校园网站平台设计和实现

基于JavajquerySpringMVC校园网站平台设计和实现 博主介绍&#xff1a;5年java开发经验&#xff0c;专注Java开发、定制、远程、指导等,csdn特邀作者、专注于Java技术领域 作者主页 超级帅帅吴 Java项目精品实战案例《500套》 欢迎点赞 收藏 ⭐留言 文末获取源码联系方式 文章目…

IDEA22.3.3的三个常用经常遇到的配置问题

1、期待效果&#xff1a;【打开iDEA的时候&#xff0c;让开发者选择需要打开的项目】 设置如下 2、期待效果&#xff1a;配置默认的Maven&#xff0c;避免每次新建项目后&#xff0c;都需要去修改Maven配置 同理&#xff0c;修改默认的java版本和自己本地java环境一致 3、新建…

【C++】哈希的应用——布隆过滤器

哈希的应用——布隆过滤器 文章目录 哈希的应用——布隆过滤器一、布隆过滤器的概念与性质1.布隆过滤器的引出2.布隆过滤器的概念3.布隆过滤器的误判4.布隆过滤器的应用场景5.布隆过滤器优缺点6.如何选择哈希函数个数和布隆过滤器长度 二、布隆过滤器的实现1.布隆过滤器基本框架…