![](https://img-blog.csdnimg.cn/20190918140145169.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
html+css
文章平均质量分 52
有关知识点及截图
Tr4n
路漫漫其修远兮,吾将上下而求索!
展开
-
响应式布局、bootstrap栅格系统
1.1响应式开发原理响应式布局主要是通过媒体查询,在不同的屏幕宽度下采用不同的布局方式, 从而适配不同设备的目的设备划分 尺寸区间 超小屏幕(手机) < 768px 小屏设备(平板) >=768px~<992px 中等屏幕(桌面显示器) >= 992px ~ <1200px 宽屏设备(大桌面显示器) >= 1200px 1.2响应式布局容器响应式需要一个父级做为布局容器,搭配子级元素来实现变化效果。原.原创 2022-02-15 14:42:08 · 629 阅读 · 0 评论 -
less+rem+媒体查询布局
问题:1. 页面布局文字能否随着屏幕大小变化而变化?2. 流式布局和flex布局主要针对于宽度布局,那高度如何设置?3. 怎么样让屏幕发生变化的时候元素高度和宽度等比例缩放?1. rem基础rem单位rem (root em)是一个相对单位, 类似于em , em是父元素字体大小。不同的是rem的基准是相对于htm元素的字体大小。比如,根元素( html )设置 font-size= 12px; 非根元素设置 width:2rem; 则换成px表...原创 2022-02-15 11:39:54 · 1326 阅读 · 0 评论 -
移动端开发选择、技术解决方案、流式布局
4.2单独移动端页面(主流)通常情况下,网址域名前面加m(mobile)可以打开移动端。通过判断设备,如果是移动设备打开,则跳到移动端页面。例如:m.taobao.comm.jd.comm.suning.com4.3响应式兼容PC移动端三星电子官网: www.samsung.com/cn/ .通过判断屏幕宽度来改变样式,以适应不同终端。缺点:制作麻烦,需要花很大精力去调兼容性问题4.4总结现在市场常见的移动端开发有 单独制作移动端页面 和 响应...原创 2022-02-09 20:49:48 · 461 阅读 · 0 评论 -
css视口、多倍图
2.3理想视口ideal viewport为了使网站在移动端有最理想的浏览和阅读宽度而设定●理想视口,对设备来讲,是最理想的视口尺寸需要手动添写meta视口标签通知浏览器操作●meta 视口标签的主要目的:布局视口的宽度应该与理想视口的宽度一致,简单理解就是设备有多宽,我们布局的视口就多宽2.4总结●视口就是浏览器 显示页面内容的屏幕区域●视口分为布局视口、视觉视口和理想视口●我们移动端布局想要的是理想视口就是手机屏幕有多宽 ,我们的布局视口就有多宽●想...原创 2022-02-09 20:42:35 · 314 阅读 · 0 评论 -
浏览器私有前缀、现状
浏览器私有前缀 浏览器私有前缀是为了兼容老版本的写法, 比较新版本的浏览器无须添加。-moz-: 代表firefox浏览器私有属性-ms-: 代表ie浏览器私有属性-webkit-: 代表safari、chrome 私有属性-o-: 代表Opera私有属性2. 提倡的写法-moz-border-radius: 10px;-webkit-border-radius: 10px;-o-border-radius: 10px;border-radius...原创 2022-02-09 20:26:04 · 76 阅读 · 0 评论 -
网站favicon图标、网页TDK三大标签SEO优化(title、description、keywords)、常用模块命名、logo优化
favicon图标例如:一. 制作favicon图标(将图片转化为ico为后缀)二、favicon图标放到网站根目录下三、HTML页面引入favicon图标引入图标在html 页面里面的<head> </head>元素之间引入代码。<link rel=" shortcut icon" href="favicon. ico" type= "image/x- icon" />网页TDK三大标签SEO优化(title、descrip.原创 2022-01-26 21:23:18 · 781 阅读 · 0 评论 -
css3盒子模型、filter滤镜、calc函数、过渡
1.21目录css3盒子模型filter滤镜calc函数过渡css3盒子模型CSS3中可以通过box- sizing来指定盒模型,有2个值:即可指定为content- box、border-box ,这样我们计算盒子大小的方式就发生了改变。可以分成两种情况:1. box-sizing: content- box ; 盒子大小为width + padding + border ( 以前默认的)2. box-sizing: border-box; 盒子大小为wi...原创 2022-01-21 18:13:35 · 290 阅读 · 0 评论 -
html新增属性及css新增属性
22.1.20html5新增语义化标签多媒体标签新增的多媒体标签主要包含两个:1. 音频: <audio>(尽量使用MP3格式)2. 视频: <video>(尽量使用MP4格式)使用它们可以很方便的在页面中嵌入音频和视频,而不再去使用flash和其他浏览器插件。HTML5在不使用插件的情况下,也可以原生的支持音频格式文件的播放,当然,支持的格式是有限的。1.视频<video>语法:<video src="文件地址" con.原创 2022-01-20 13:51:41 · 685 阅读 · 0 评论 -
css属性用法(22.1.20)
1.20目录:1、css三角及强化2、鼠标样式(cursor)3、表单去掉轮廓线(outline)4、防止多行文本域可拖拽(resize)5、vertical-align属性运用6、溢出的文字省略号显示7、margin负值的妙用1、css三角首先,创建一个块级盒子(可以确定宽高)然后将盒子宽高设置为零,然后设置一个边框,例如:border:50px solid transparent;(先把四个方向的边框弄成透明隐藏起来),然后选择一个想要的方向的边框更改颜色原创 2022-01-20 12:10:13 · 309 阅读 · 0 评论 -
精灵图、阴影、字体图标
22.1.18目录:1、精灵图2、盒子、文字阴影(复习)3、字体图标的使用(以iconfont为例)1、精灵图精灵图样例:例如王者荣耀官网所使用的精灵图精灵图 就是将许许多多小图片拼在一张大图片上精灵技术目的:为了有效地减少服务器接收和发送请求的次数,提高页面的加载速度。精灵图的使用( 就是通过盒子大小是一定的,让精灵图的特定位置上的图标移动到盒子中显示出来,其余部分不显示)使用精灵图的核心:1.精灵技术主要针对于背景图片使用。就是把多个小背原创 2022-01-18 15:26:24 · 480 阅读 · 0 评论 -
css定位
固定定位跟父级没有关系 它以屏幕为准固定的盒子应该有宽度原创 2021-11-13 21:45:00 · 65 阅读 · 0 评论 -
2D、动画、3D
原创 2021-11-13 21:55:17 · 73 阅读 · 0 评论 -
(初识html)基本html标签
web标准***主要包括:结构、表现、行为三个方面。html-模板<!DOCTYPE html> 文档类型申明,此处告诉浏览器使用html5版本显示网页不是一个html标签,是文档类型申明标签,位于<html>标签之前。doc是document缩写<html lang="en"> <html>标签通常成对出现,称为 双标签 ,由尖括号包围lang是language缩写,意为语言,en表示English,zh-CN表示中文。...原创 2021-10-18 22:41:19 · 220 阅读 · 0 评论 -
css基础选择器、字体属性、文本属性、引入方式、显示模式
原创 2021-10-22 20:46:44 · 100 阅读 · 0 评论 -
css复合选择器、伪类选择器、背景、三大特性、(清除)浮动
原创 2021-10-26 21:59:02 · 74 阅读 · 0 评论 -
css盒子内外边距及清除、ps基本操作、圆角边框
原创 2021-11-06 14:00:01 · 100 阅读 · 0 评论 -
表格、表单标签
<div> <span> 标签表格标签原创 2021-10-20 21:09:10 · 73 阅读 · 0 评论 -
元素的显示与隐藏
原创 2021-11-28 10:06:18 · 69 阅读 · 0 评论 -
flex布局
原创 2021-11-13 21:49:55 · 196 阅读 · 0 评论