HTML&CSS
文章平均质量分 92
学习HTML和CSS笔记
前进的北极熊
这个作者很懒,什么都没留下…
展开
-
459~486(rem+媒体查询+Less+苏宁易购移动端首页)
rem(root em)是一个相对单位,类似于em,em是父元素字体大小。不同的是的基准是相对于html元素的。比如,根元素(html)设置font-size= 12px;非根元素设置width:2rem;则换成px表示就是24px。2 媒体查询2.1 什么是媒体查询媒体查询()是CSS3新语法。用@media开头 注意@符号mediatype 媒体类型关键字andy not onlymedia feature媒体特性必须有小括号包含mediatype查询类型将不同的终端划分为不同原创 2022-10-06 21:44:21 · 331 阅读 · 0 评论 -
433~458(flex+携程网移动端首页)
2.1 布局原理flex是flexible Box的缩写,为"弹性布局",来为盒状模型提供最大的灵活性,任何一个容器都可以指定为flex布局。以下由6个属性是对父元素设置的flex-direction属性决定主轴的方向(即项目的排列方向)注意:主轴和侧轴是会变化的,就看flex-direction设置谁为主轴,剩下的就是侧轴。而子元素是跟着主轴来排列的3.3 设置主轴上的子元素排列方式justify-content属性定义了项目在主轴上的对齐方式eg1:eg2:3.4 设置子元素是否换行默原创 2022-10-06 10:05:40 · 571 阅读 · 0 评论 -
408~432(移动端+京东移动端首页)
PC端常见浏览器360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器。移动端常见浏览器UC浏览器,QQ浏览器,欧朋浏览器,百度手机浏览器,360安全浏览器,谷歌浏览器,搜狗手机浏览器,猎豹浏览器,以及其他杂牌浏览器。就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口和理想视口3.3 背景缩放 background-sizebackground-size属性规定背景图像的尺寸3.4 多倍图切图 cutterman淘宝触屏版苏宁易购手机版通常情况下原创 2022-10-05 08:55:43 · 485 阅读 · 0 评论 -
375~407(2D+动画+3D+浏览器私有前缀)
是CSS3中具有颠覆性的特征之一,可以实现元素的位移、旋转、缩放等效果2D转换是改变标签在二维平面上的位置和形状的一种技术2D移动是2D转换里面的一种功能,可以改变元素在页面中的位置,类似。重点定义2D转换中的移动,沿着X和Y轴移动元素translate最大的优点:不会影响到其他元素的位置translate中的百分比单位是相对于自身元素的translate:(50%,50%);对行内标签没有效果eg:让盒子实现水平和垂直居中4.3 2D转换之旋转 2D旋转指的是让元素在2维平面内原创 2022-10-04 11:12:31 · 385 阅读 · 0 评论 -
CSS学习298~355(品优购+Web服务器)
项目名称: 品优购项目描述:品优购是一个电商网站,我们要完成PC端首页、列表页、注册页面的制作我们写的品优购网站,目前是放到自己电脑上的,只能自己访问浏览。如果想要很多人访问我们的网站,可以把品优购放到服务器上,这样就可以多人问我们的品优购网站了。服务器(我们也会称之为主机)是提供计算服务的设备,它也是一台计算机。在网络环境下,根据服务器提供的服务类型不同,服务器又分为文件服务器、数据库服务器、应用程序服务器、Web服务器等。Web服务器一般指网站服务器。原创 2022-10-02 22:41:15 · 268 阅读 · 0 评论 -
CSS学习273~297(HTML5和CSS新特性)
的新增特性主要是针对于以前的不足,增加了一些、和等。这些新特性都有兼容性问题,基本是IE9+以上版本的浏览器才支持,如果不考虑兼容性问题,可以大量使用这些新特性。以前布局,我们基本用div来做。div对于搜索引擎来说,是没有语义的。:1.2 HTML5新增的多媒体标签新增的多媒体标签主要包含两个:当前元素支持三种视频格式:尽量使用mp4格式使用它们可以很方便的在页面中嵌入音频和视频,而不再去使用flash和其他浏览器插件。语法:eg:音频 当前元素支持三原创 2022-09-30 23:56:01 · 535 阅读 · 0 评论 -
CSS学习250~272(精灵图+字体图标+CSS三角+CSS用户界面样式+vertical-align+溢出文本省略号显示+布局技巧+CSS初始化)
一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接收和发送请求图片,造成服务器请求压力过大,这将大大降低页面的加载速度。因此,,出现了(也称CSS Sprites、CSS雪碧)。使用精灵图核心:使用精灵图核心总结:拼出自己名字2 字体图标2.1字体图标的产生字体图标使用场景:主要用于显示网页中通用、常用的一些小图标。精灵图是有诸多优点的,但是缺点很明显。此时,有一种技术的出现很好的解决了以上问题,就是.可以为前端工程师提供一种方便高效的图标使用方式,。注意:字原创 2022-09-29 19:29:49 · 264 阅读 · 0 评论 -
CSS学习221~249(定位+元素的显示隐藏)
:将盒子定在某一个位置,所以定位 = 定位模式 + 边偏移。用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。定位模式定位模式决定元素的定位方式,它通过CSS的属性来设置,其值可以分为四个:边偏移边偏移就是定位的盒子的移动到的最终位置,有top、bottom、left和right属性。静态定位是元素的。语法:元素在移动位置的时候,是相对于它来说的(自恋型)。语法:相对定位的特点: (务必记住)因此,相对定位并没有脱标。它最典型的应用是给绝对定位当爹的。1.5 绝对定位 abso原创 2022-09-29 10:50:01 · 322 阅读 · 0 评论 -
CSS学习189~220(PS切图+学成在线案例)
PS有很多的切图方式:图层切图、切片图、PS插件切图等。最简单的切图方式:右击图层->快速导出为PNG。但是很多情况下,我们需要合并图层再导出:最好的方法是:沟通利用切片选中图片导出选中的图片文件菜单->导出->存储为web设备所用格式->选择我们要的图片格式->存储是一款运行在中的插件,能够自动将你需要的图层进行输出,以替代传统的手工"导出web所用格式"以及使用切片工具进行挨个切图的繁琐流程。官网: http://www.cutterman.cn/zh/cutterman注意: Cutterman插件原创 2022-09-17 23:22:21 · 131 阅读 · 0 评论 -
CSS学习165~188(圆角边框+浮动+清除浮动)
在CSS3中,新增了样式,这样我们的盒子就可以变圆角了。属性用于设置元素的外边框圆角。语法:: (椭)圆与边框的交集形成圆角效果5 盒子阴影CSS3中新增了盒子阴影,我们可以使用属性为盒子添加阴影。语法::6 文字阴影在CSS3中,我们可以使用text- shadow属性将阴影应用于文本。语法:1 浮动(float)1.1 传统网页布局的三种方式网页布局的本质-----用CSS来摆放子。把盒子摆放到相应位置CSS提供了三种传统布局方式(简单说就是盒子如何进行排列顺序) :以上都是标准流布局,我原创 2022-09-14 15:25:23 · 173 阅读 · 0 评论 -
CSS学习135~164(盒子模型+PS基本操作+案例)
网页布局过程:网页布局的核心本质:就是利用CSS摆盒子。所谓:就是把HTML页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器。CSS盒子模型本质上是一个舒,封装周围的HTML元素,它包括:边框、外边距、内边距、和实际内容盒子里面的内容border可以设置元素的边框。边框有三部分组成:边框宽度(粗细) 边框样式 边框颜色语法:eg:CSS边框属性允许你指定一个元素边框的和边框简写:边框分开写法:eg:边框的复合写法练习请给一个 200*200 的盒子,设置上边框为红色,其余边框为蓝色原创 2022-09-13 19:44:37 · 224 阅读 · 0 评论 -
CSS学习128~134(CSS的三大特性)
CSS有三个非常重要的三个特性:层叠性、继承性、优先级。原创 2022-09-12 21:29:24 · 54 阅读 · 0 评论 -
CSS学习114~127(CSS的背景)
背景图片:实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片,优点是非常便于控制位置(精灵图也是一种运用场景)原创 2022-09-12 16:46:10 · 117 阅读 · 0 评论 -
CSS学习105~113(CSS的元素显示模式)
作用:网页的标签非常多,在不同地方会用到不同类型的标签,。元素显示模式就是,比如自己占一行,比如一行可以放多个.HTML元素一般分为和两种类型。常见的块元素有~、、 、 、、等 ,其中标签是。块级元素的特点::2.3 行内元素常见的行内元素有、 、 、 、 、 、 、 、 、 等,其中标签是。有的地方也将行内元素称为。行内元素的特点::在行原创 2022-09-11 22:09:35 · 71 阅读 · 0 评论 -
CSS学习96~104(CSS复合选择器)
在CSS中,可以根据选择器的类型把选择器分为和,复合选择器是建立在基础选择器之上, 对基本选择器进行组合形成的。又称为,可以选择父元素里面子元素。其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔。当标签发生嵌套时,内层标签就成为外层标签的后代。语法:例如:1.3 子选择器(重要)只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素。语法:上述语法表示。例如:eg:选择div的儿子a标签1.4 并集选择器(重要)。通常用于集体声明是各选择器,任何形式的选择器都可以作为并集选择器的原创 2022-09-11 20:06:15 · 175 阅读 · 0 评论 -
CSS学习92~95(Emmet语法)
就可以了 比如div原创 2022-09-09 22:43:54 · 183 阅读 · 0 评论 -
CSS学习87~91(新闻案例+Chrome调试工具)
h1{/* 文字不加粗 */;/* 让h1里面的文字水平居中对齐 */text-align;}a{;font-size;text-align;width;}.btn{;}p{;}.pic{/* 想要图片居中对齐,则是让它的父亲p标签添加水平居中的代码 */text-align;font-size;}原创 2022-09-09 21:59:25 · 176 阅读 · 0 评论 -
CSS学习77~86(CSS文本属性+CSS引入方式)
行内样式表(行内式)内部样式表(嵌入式)外部样式表(链接式)原创 2022-09-09 21:56:57 · 182 阅读 · 0 评论 -
CSS学习71~76(CSS字体属性)
CSS Fonts(字体)属性用于定义、大小、粗细、和文字样式(如斜体)。CSS使用属性定义文本的字体系列。3.2 字体大小CSS使用属性定义字体大小。px(像素)大小是我们网页的最常用的单位谷歌浏览器默认的文字大小为16px不同浏览器可能默认显示的字号大小不一致,我们尽量给一个明确值大小,不要默认大小可以给body指定整个页面文字的大小3.3 字体粗细CSS使用属性设置文本字体的粗细。eg:3.4 文字样式CSS使用属性设置文本的风格。:平时我们很少给文字加斜体,反而要给斜体标原创 2022-09-09 09:35:38 · 157 阅读 · 0 评论 -
CSS学习61~70(CSS简介+CSS基础选择器)
每个基础选择器都有使用场景,都需要掌握如果是修改样式,类选择器是使用最多的。原创 2022-09-09 09:33:06 · 132 阅读 · 0 评论 -
HTML学习42~59(表单标签)
使用表单目的是为了在我们网页中,我们也需要跟用户进行交互,收集用户资料,此时就需要表单。在HTML中,一个完整的表单通常由、和3个部分构成。是一个在HTML标签中,标签用于定义表单域,以实现用户信息的收集和传递。常用属性:记住两点:3.4 表单控件(表单元素)3.4.1 表单元素表单元素中标签用于收集用户信息,它是一个单标签在标签中,包含一个属性,根据不同的属性值,输入字段拥有很多种形式(可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等)原创 2022-09-08 16:23:09 · 201 阅读 · 0 评论 -
HTML学习38~41(列表标签)
自定义列表的使用场景:自定义列表常用于对术语或名词进行解释和描述,定义列表的列表项前没有任何项目符号。在HTML标签中,标签用于定义描述列表(或定义列表),该标签会与 (定义项目/名字)和 (描述每一个项目/名字 )一起使用。其基本语如下: < dt > 名词1 < dd > 名词1解释1 < dd > 名词2解释2原创 2022-09-07 22:33:32 · 203 阅读 · 0 评论 -
HTML学习6~29(HTML语法规范)
双击打开软件。新建文件(Ctrl+N )。保存(Ctrl + S ),注意移动要保存为.html文件Ctrl + 加号键, Ctrl + 减号键可以放大缩小视图生成页面骨架结构。输入!按下Tab键。利用插件在浏览器中预览页面:单击鼠标右键,在弹出出口中点击"Open In Default Browser"。原创 2022-09-07 15:30:11 · 922 阅读 · 0 评论 -
HTML学习1~5(网页)
HTML指的是超文本标记语言(Hyper Text Markup Language) ,它是用来描述网页的一种语言。HTML不是一种编程语言 ,而是一种标记语言(markup language)。标记语言是一套标记标签 (markup tag)。所谓超文本,有2层含义:它可以加入图片、声音、动画、多媒体等内容(超越了文本限制)。它还可以从一个文件跳转到另一个文件,与世界各地主机的文件连接(超级链接文本)。原创 2022-09-07 08:57:13 · 323 阅读 · 0 评论 -
HTML学习30~37(表格标签)
表头单元格也是单元格,常用于表格第一行,突出重要性,表头单元格里面的文字会加粗居中显示。这部分属性实际开发不常用,后面通过CSS来设置两个目的:eg:1.5 案例分析:小说排行榜最后效果:点击盗墓笔记贴吧后,会跳转页面:eg:1.7 合并单元格特殊情况下,可以把多个单元格合并为一个单元格。eg:最后效果表格的相关标签我们学习了 table标签 tr行标签 td单元格标签 th表头单元格标签表格的相关属性合并单元格看例子即可原创 2022-09-06 23:02:49 · 128 阅读 · 0 评论