css
文章平均质量分 85
前端学习
香甜的甲基橙
昨夜西风凋碧树,独上高楼,望尽天涯路。
展开
-
“不会动”的水货学生成绩掌握管理系统(只用html,css)
文章目录学生成绩掌握系统操作素材代码块01-封面.html02-登录界面.html03-注册页面.html04-教学课程设置.html05-学生信息向导.html06-课程信息向导.html07-数据添加界面.html08-班级整体情况.html学生成绩掌握系统第一次做这个东西,技术也很不成熟,只凭现有html,css知识做的一个简陋系统,写的可能很繁琐,方法也不是唯一的,之后学了更好的办法会改动操作 学生课程掌握原创 2022-01-29 21:45:00 · 2209 阅读 · 0 评论 -
web前端学习162-164(案例2:快报模块---品优购快报)
文章目录3. 综合案例案例2:快报模块分析布局使用到的小知识点及技巧新知识点:去掉li前面的项目符号(小圆点)代码块3. 综合案例案例2:快报模块案例样式:品优购快报分析布局注意品优购快报下面的那一条线:上面的盒子只给下边框,然后放到最大的盒子中最大的盒子用div大盒子里面上面的盒子标题用h3下面的盒子用无序列表ul,里面包含很多个小li使用到的小知识点及技巧垂直居中:让行高等于盒子高度;输入ul>li*5>a+enter键/tab得到<ul>原创 2022-01-21 10:52:52 · 1486 阅读 · 0 评论 -
web前端学习156-161(案例1:产品模块---小米手机产品)
文章目录3. 综合案例案例1:产品模块3. 综合案例案例1:产品模块分析一下:出现一个命名问题:我开始命名图片b2.png,.box b2 {}一直达不到效果,后来改成普通的英文名字img.png就可以了(为什么?我还没查,应该是命名规则问题)eg : 26-综合案例-产品模块.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <me原创 2022-01-20 17:42:35 · 1000 阅读 · 0 评论 -
web前端学习155(ps基本操作---选区,取色)
文章目录2. PS基本操作2. PS基本操作因为网页美工大部分效果图都是利用PS ( Photoshop )来做的,所以以后我们大部分切图工作都是在PS里面完成。文件—>打开:可以打开我们要测量的图片Ctrl+R:可以打开标尺,或者视图—>标尺右击标尺,把里面的单位改为像素**Ctrl+加号(+)**可以放大视图,**Ctrl+ 减号(-)**可以缩小视图按住空格键,鼠标可以变成小手,拖动PS视图用选区拖动 可以测量大小选区操作:(可以得到像素,高度,宽度)取色操作:(原创 2022-01-20 11:55:49 · 354 阅读 · 0 评论 -
web前端学习149-154(盒子模型---外边距,外边距应用,外边距合并,清除内外边距)
文章目录1 盒子模型1.7 外边距(margin)1.7 外边距典型应用1.8 外边距合并1.8.1 相邻块元索垂直外边距的合并1.8.2 嵌套块元素垂直外边距的塌陷1.9 清除内外边距1 盒子模型1.7 外边距(margin)margin属性用于设置外边距,即控制盒子和盒子之间的距离。属性作用margin-left左外边距margin-right右外边距margin-top上外边距margin-bottom下外边距margin简写方式代表的意义跟原创 2022-01-20 11:30:42 · 1445 阅读 · 0 评论 -
web前端学习145-148(盒子模型---案例:新浪导航案例-padding影响盒子好处,小米导航案例修改-padding影响盒子大小计算)
文章目录1 盒子模型案例:新浪导航案例-padding影响盒子好处案例: 小米导航案例修改-padding影响盒子大小计算1 盒子模型案例:新浪导航案例-padding影响盒子好处padding内边距可以撑开盒子,我们可以做非常巧妙的运用因为每个导航栏里面的字数不一样多,我们可以不用给每个盒 子宽度了,直接给padding最合适直接给每个盒子一个宽度不合理,因为每个盒子里面字数不同,会导致字与盒子间距不同,显得不合理。如果给每个盒子左右相等内边距,就会合理一些。相关取值:(之后学ps学测量原创 2022-01-16 13:17:17 · 611 阅读 · 0 评论 -
web前端学习135-144(盒子模型---网页布局,盒子模型组成,边框,表格细线边框,盒子实际大小,内边距)
文章目录盒子模型1. 盒子模型1.1 看透网页布局的本质1.2 盒子模型(Box Model)组成1.3 边框(border)1.4 表格的细线边框1.5 边框会影响盒子的实际大小1.6 内边距(padding)盒子模型能够准确阐述盒子模型的4个组成部分能够利用边框复合写法给元素添加边框能够计算盒子的实际大小能够利用盒子模型布局模块案例能够给盒子设置圆角边框能够给盒子添加阴影能够给文字添加阴影1. 盒子模型页面布局要学习三大核心,盒子模型,浮动和定位学习好盒子模型能非常好的帮助我们布原创 2022-01-16 11:04:30 · 1431 阅读 · 0 评论 -
web前端学习128-134(CSS三大特性---层叠性,继承性,优先级)
文章目录1 CSS的三大特性1.1 层叠性1.2 继承性1.3 优先级1 CSS的三大特性CSS有三个非常重要的三个特性︰层叠性、继承性、优先级。1.1 层叠性相同选择器给设置相同的样式,此时一个样式就会**覆盖(层叠)**另一个冲突的样式。层叠性主要解决样式冲突的问题。层叠性原则:样式冲突,遵循的原则是就近原则,哪个样式离结构近,就执行哪个样式样式不冲突,不会层叠eg : 01-层叠性.html<!DOCTYPE html><html lang="en">原创 2022-01-15 09:39:08 · 458 阅读 · 0 评论 -
web前端学习126-127(综合案例:五彩导航)
文章目录综合案例案例: 五彩导航小插曲:综合案例案例: 五彩导航展示效果:五彩的导航,当鼠标经过的时候会变换颜色练习价值:(下面的也可以看成是步骤)链接属于行内元素,但是此时需要宽度高度,因此需要模式转换成行内块元素里面文字需要水平居中和垂直居中.因此需要单行文字垂直居中的代码.链接里面需要设置背景图片.因此需要用到背景的相关属性设置.鼠标经过变化背景图片,因此需要用到链接伪类选择器.回顾之前的快捷键.nav+Enter键=<div class="nav"></d原创 2022-01-12 22:14:49 · 4248 阅读 · 0 评论 -
web前端学习114-125(CSS的背景颜色,背景图片,是否平铺,背景位置,背景附着,背景简写,背景颜色半透明)
文章目录3. CSS的背景3.1 背景颜色3.2 背景图片3.3 背景平铺3.4 背景图片位置背景位置案例一背景位置案例二---王者荣耀背景图片小插曲:从网上扒图3. CSS的背景通过CSS 背景属性,可以给页面元素添加背景样式。背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。3.1 背景颜色background-color属性定义了元素的背景颜色。background-color:颜色值;一般情况下元素背景颜色默认值是transparent(透明),我们也可以手原创 2022-01-12 12:52:56 · 1752 阅读 · 0 评论 -
web前端学习105-113(CSS 的元素显示模式,案例:简洁版小米侧边栏)
文章目录2. CSS 的元素显示模式2.1 什么是元素显示模式2.2 块元素2.2 行内元素2.3 行内块元素2.4 元素显示模式总结2.5 元素显示模式转换2.6 一个小工具的使用 snipaste案例:简洁版小米侧边栏2.7 一个小技巧单行文字垂直居中的代码2.8 单行文字垂直居中的原理2. CSS 的元素显示模式了解元素的显示模式可以更好的让我们布局页面.什么是元素的显示模式元素显示模式的分类元素显示模式的转换2.1 什么是元素显示模式作用︰网页的标签非常多,在不同地方会用到不同类型原创 2022-01-11 17:07:05 · 350 阅读 · 0 评论 -
web前端学习96-104(CSS的复合选择器)
文章目录1. CSS 的复合选择器1.1 什么是复合选择器1.2 后代选择器(重要)1.3 子代选择器(重要)1.4 并集选择器(重要)1.5 伪类选择器1.6 链接伪类选择器1.7 :focus 伪类选择器1.8 复合选择器总结1. CSS 的复合选择器1.1 什么是复合选择器在CSS中,可以根据选择器的类型把选择器分为基础选择器和复合选择器,复合选择器是建立在基础选择器之上,对基本选择器进行组合形成的。复合选择器可以更准确、更高效的选择目标元素(标签)复合选择器是由两个或多个基础选择器,通过原创 2022-01-11 10:22:50 · 330 阅读 · 0 评论 -
web前端学习92-95(emmet语法---快速生成HTML结构语法 ,快速生成CSS样式语法,格式化代码)
文章目录1. Emmet 语法1.1 .1快速生成HTML结构语法1. Emmet 语法Emmet语法的前身是Zen coding,它使用缩写,来提高html/css的编写速度, Vscode内部已经集成该语法快速生成HTML结构语法快速生成CSS样式语法1.1 .1快速生成HTML结构语法1.生成标签直接输入标签名按tab键即可比如div然后tab键,就可以生成< div>< /div>如果想要生成多个相同标签加上 * 就可以了。比如div*3就可以快速生成3个原创 2021-11-19 20:22:04 · 679 阅读 · 0 评论 -
web前端学习91(Chrome 调试工具)
文章目录7 Chrome 调试工具1 打开调试工具2 使用调试工具7 Chrome 调试工具html,css书写过程中可能会出错,就需要有个查找工具,帮忙调试Chrome浏览器提供了一个非常好用的调试工具,可以用来调试我们的HTML结构和CSS样式。1 打开调试工具打开Chrome浏览器,按下F12键或者右击页面空白处→检查。选elements:元素上面(橙色方框)是html,下面(蓝色)是css2 使用调试工具Ctrl+滚轮可以放大开发者工具代码大小。左边(上面)是 HTM原创 2021-11-19 19:40:22 · 295 阅读 · 0 评论 -
web前端学习87-90(综合案例:新闻页面)
文章目录6 综合案例---新闻页面6 综合案例—新闻页面案例:新闻页面制作页面整体可以分为两步:搭建html结构页面.CSS样式22-综合案例-新闻页面.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <met原创 2021-11-18 11:54:59 · 1655 阅读 · 3 评论 -
web前端学习83-86(CSS引入方式---内部样式表,行内样式表,外部样式表)
文章目录5 CSS 引入方式5.1 CSS的三种样式表5.2 内部样式表5.3 行内样式表5.4 外部样式表5.5 CSS引入方式总结5 CSS 引入方式5.1 CSS的三种样式表前面例子在写CSS时都是写在style中,但是并不是都写在里面的按照CSS样式书写的位置(或者引入的方式),CSS样式表可以分为三大类:行内样式表(行内式)内部样式表(嵌入式)外部样式表(链接式)5.2 内部样式表内部样式表(内嵌样式表)是写到html页面内部。是将所有的CSS代码抽取出来,单独放到一个*原创 2021-11-16 20:35:59 · 532 阅读 · 0 评论 -
web前端学习77-82(CSS文本属性---文本颜色,对齐文本,装饰文本,文本缩进,行间距)
文章目录4. CSS文本属性4.1 文本颜色4.2 对齐文本4.3 装饰文本4.4 文本缩进4.5 行间距4.6 文本属性总结4. CSS文本属性CSS Text (文本)属性可定义文本的外观,比如文本的颜色、对齐文本装饰文本、文本缩进、行间距等。4.1 文本颜色color属性用于定义文本的颜色。div { color: red;}表示属性值预定义的颜色值red, green, blue, 还有我们的御用色pink十六进制#FF000O, #FF6600, #原创 2021-11-15 19:44:17 · 687 阅读 · 0 评论 -
web前端学习71-76(CSS字体属性---字体系列、大小、粗细、文字样式、字体复合属性)
文章目录3 CSS文字属性3.1 文字系列3.2 字体大小3.3 字体粗细3.4 文字样式3.5 字体复合属性3.6 字体属性总结3 CSS文字属性CSS Fonts(字体)属性用于定义字体系列、大小、粗细、和文字样式(如斜体)。3.1 文字系列CSS使用font-family属性定义文本的字体系列。p { font-family:"微软雅黑";} div {font-family: Arial, "MicrosoftYahei","微软雅黑";}/*系统会先识别第一种字体,如果没有就下一原创 2021-11-14 21:10:58 · 2664 阅读 · 0 评论 -
web前端学习67-68(使用类选择器画盒子,类选择器-多类名的使用)
文章目录2. CSS基础选择器案例:使用类选择器画盒子2.4 类选择器-多类名2.4.1 多类名使用方式2.4.2 多类名开发中使用场景2. CSS基础选择器案例:使用类选择器画盒子练习:类选择器的使用div就是一个盒子,用来装网页内容的(验证了div就是一个盒子)eg:04-利用类画三个颜色的盒子.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">原创 2021-11-13 19:25:18 · 742 阅读 · 0 评论 -
web前端学习64-70(CSS基础选择器,选择器作用,选择器分类,标签选择器,类选择器,id选择器,通配符选择器)
文章目录2 CSS基础选择器2.1 选择器的作用2.2 选择器的分类2.3 标签选择器2.4 类选择器2 CSS基础选择器2.1 选择器的作用<div>我是div</div><div>我是div</div><p>我是段落</p><ul> <li>我是ul里面的小li哦</li></ul><ol> <li>我是ol里面的小li哦<原创 2021-11-13 13:12:14 · 524 阅读 · 0 评论 -
web前端学习62-63(HTML的局限性,CSS,CSS语法规范,CSS代码风格)
1. CSS简介CSS的主要使用场景就是美化网页,布局页面的.HTML的局限性CSS-网页的美容师1.1 HTML的局限性说起HTML,这其实是个非常单纯的家伙,他只关注内容的语义。比如< h1>表明这是一个大标题,< p>表明这是一个段落,< img>表明这儿有一个图片,< a>表示此处有链接。很早的时候,世界上的网站虽然很多,但是他们都有一个共同的特点:丑。虽然HTML可以做简单的央视,但是很繁琐。1.2 CSS-网页的美容师CSS是原创 2021-11-12 21:14:58 · 527 阅读 · 0 评论 -
web前端学习60(2开启CSS,加油)
文章目录CSS学习目录CSS学习目录CSS简介CSS基础选择器CSS字体属性CSS文本属性CSS的引入方式综合案例Chrome调试工具原创 2021-11-11 19:31:04 · 188 阅读 · 0 评论