- 博客(17)
- 收藏
- 关注
RSS订阅原创 学成在线box-hd、footer模块
精品推荐大模块1号box版心水平居中对齐2号标题h3左浮动。右侧链接右浮动3号盒子无序列表有十个小li.box { margin-top: 30px;}.box-hd { height: 45px;}.box-hd h3 {float: left;font-size: 20px;color: #494949;}.box-hd a { float: right; font-size: 12px; color: #a5a5a5; m
2020-08-18 16:56:54
236
原创 学成在线banner、subnav、course
banner模块制作/* banner区域 */.banner { height: 421px; background-color: #1c036c;}.banner .w { height: 421px; background: url(images/banner2.png) no-repeat top center;}subnav模块制作a里面放个span用来放小三角>.subnav {width: 190px;height: 421px;.
2020-08-17 17:21:57
344
1
原创 学成在线案例
案例准备工作采取结构与样式相分离思想：最后把样式引入到HTML页面中：样式表写入清除内外边距来检测样式表是否引入成功。CSS属性书写顺序（重点）页面布局的整体思路确认页面的版心，通过测量可知分析页面中的行模块（标准流从上到下），每个行模块里面的列模块（即网页布局第一准则）一行中的列模块经常用浮动布局，确定每个列模块的大小以及位置（网页布局第二准则）制作HTML结构，遵循先有结构再有样式。先理清楚布局结构再写代码学成在线案例确定版心1200像素，版心水平居中对齐，定义
2020-08-15 17:40:08
185
原创 PS切图
常见的图片格式PS切图图层切图最简单的切图方式：右击图层->快速导出为PNG。合并图层再导出：1、选中需要的图层（按住shift）：图层菜单->合并图层（ctrl+e）2、右击->快速导出为PNG。切片切图PS插件切图cutterman能够自动将你需要的图层进行输出，代替传统的手工导出web所用格式。...
2020-08-14 15:24:34
242
原创 CSS浮动以及清除浮动
传统网页布局的三种方式本质：用CSS摆放盒子。实际开发中，一个页面基本都包含了这三种布局方式：1、普通流（标准流/文档流）：最基本的布局方式标签按照规定好默认方式排列块级元素自己独占一行行内元素按照顺序从左到右排列2、浮动3、定位浮动float属性用于创建浮动框，将其移动到一边知道左边缘或右边缘触及包含块或另一个浮动框的边缘。要想块元素水平排列如果转换成行内块之间会有大的空白缝隙很难控制。浮动可以改变元素标签默认的排列方式。网页布局第一准则：多个块级元素纵向排列找标准流，横向找
2020-08-10 17:13:31
192
原创 ps基本操作以及盒子综合案例、圆角边框、盒子阴影、文字阴影
网页美工大部分效果图都是利用ps做的，以后切图工作在ps完成。综合案例图片不超出box（和父亲一样宽）：标签都是有语义的，标题要用h4，合理的地方用合理的标签。每个盒子都取类名比较方便找到，利于后期维护。margin和padding大部分情况下可以混用。去掉li前面的项目符号（小圆点）圆角边框在css3中，盒子可以变圆角。语法：radius半径：圆与边框的交集形成圆角效果。半径越大弧度越明显。参数值可以是长度也可以是百分比。半径是正方形盒子宽度的一半，盒子为圆形。50
2020-08-03 17:11:08
353
原创 CSS盒子模型
盒子模型页面布局三大核心：盒子模型、浮动和定位。网页布局过程：网页布局的核心本质：利用CSS摆盒子。盒子模型的组成盒子模型:把HTML中的布局元素看作一个盒子/装东西的容器。CSS盒子模型本质上是一个盒子，封装周围的HTML元素，包括边框、外边距、内边距和实际内容。盒子模型的四个组成部分：边框（border）border设置元素边框。边框由三部分组成：边框宽度（粗细）、边框样式、边边框颜色。边框样式示例：现在记住 实线边框solid 虚线边框dashed 点线边框dotted
2020-08-03 17:10:53
93
原创 CSS的三大特性及注释
CSS的三大特性：层叠性、继承性、优先级。层叠性相同选择器给设置相同的样式，此时一个样式就会覆盖另一个冲突的样式。层叠性主要解决样式冲突的问题。样式冲突，就近原则，哪个样式离结构最近，就执行哪个。样式不冲突的地方不覆盖。继承性子标签继承父标签的某些样式恰当使用可以简写代码子元素可继承的样式（text-,font-,line-这些元素开头的，以及color属性）行高的继承性之前的写法：还有写法：行高可以跟单位也可以不跟。如果子元素没有设置行高，则继承父元素行高的1.5
2020-07-27 11:26:52
86
原创 CSS的元素显示模式以及背景
CSS元素显示模式就是元素（标签）以什么方式进行显示，如<div>自己占一行，比如一行可以放多个<span>。作用：网页标签很多，不同地方用不同类型的标签，了解他们的特点可以更好地布局我们的网页。HTML元素一般分为块元素和行内元素两种类型。块元素块级元素的特点：注意：文字类的元素不能使用块级元素。<p>标签主要用于存放文字，因此<p>里面不能放块级元素，特别是不能放<div>。同理<h1>~<h6>
2020-07-25 17:55:06
189
原创 Emmet语法和CSS复合选择器
Emmet语法Emmet语法的前身是Zen coding,它使用缩写来提高html/css的编写速度，Vscode内部已经集成该语法。1、快速生成HTML结构语法2、快速生成CSS样式语法3、快速格式化代码CSS的复合选择器复合选择器是建立在基础选择器之上的，对基础选择器进行组合形成的。复合选择器可以更准确、更高效的选择目标元素。复合选择器是由两个或多个基础选择器通过不同的方式组合而成的。常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等。后代选择器（重要）
2020-07-23 14:59:30
206
原创 CSS文本属性和CSS的引入方式
CSS文本属性CSS Text属性可定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。文本颜色color属性用于定义文本的颜色。 开发中最常用的是十六进制。 对齐文本text align属性用于设置元素内文本内容的水平对齐方式。装饰文本text-decoration属性规定添加到文本的修饰，可以给文本添加下划线、删除线、上划线等。重点记住如何添加（删除）下划线，其余了解即可。文本缩进text-indent属性用来指定文本的第一行的缩进，通常将段落的首行缩进
2020-07-22 12:10:15
256
原创 CSS基础选择器和字体属性
CSS选择器的作用选择器（选择符）根据不同的需求把不同的标签选出来。选标签用的。选择器的分类选择器分为 基础选择器和复合选择器 。基础选择器是由单个选择器组成的。基础选择器又包括： 标签选择器、类选择器、id选择器和通配符选择器 基础选择器标签选择器（元素选择器）用HTML标签名作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。作用：把某一类标签全部选择出来。优点：快速的为页面中同类型的标签统一设置样式。缺点：不能差异化样式，只能选择全部的当前标签。类选择器可
2020-07-22 10:10:50
293
原创 CSS简介
CSS简介CSS主要使用场景就是美化网页，布局页面的。HTML的局限性只关注内容的语义，比较丑。虽然可以做一些简单的样式，但是非常繁琐和臃肿。CSS-网页的美容师是层叠样式表（Cascading Style Sheets)的简称。也称为CSS样式表或者级联样式表。CSS也是一种标记语言主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。CSS让网页更加丰富，布局更加灵活自如。总结：1、HTML主要做结构，显
2020-07-20 09:07:57
140
原创 列表标签和表单标签 查阅文档
列表标签表格是用来显示数据的，那么列表就是用来布局的。列表最大的特点就是整齐，整洁，有序，它作为布局会更加自由和方便根据使用情景不同，列表可分为： 无序列表、有序列表和自定义列表 无序列表（重点）<ul>标签表示HTML页面中项目的无序列表，列表项使用<li>标签定义。1、无序列表各个列表项之间没有顺序级别之分，是并列的。2、<ul></ul>标签中只能嵌套<li></li>标签。3、<li>与</
2020-07-18 21:31:51
172
原创 HTML中的注释和特殊字符
HTML中的注释和特殊字符注释在HTML中田间一些便于阅读和理解但不需要显示在页面中的注释文字。以<!--开头 以-->结尾
2020-07-18 17:31:57
517
原创 DOCTYPE和lang以及字符集的作用 HTML常用标签
DOCTYPE和lang以及字符集的作用1、 <!DOCTYPE>标签文档类型声明，告诉浏览器使用哪种HTML版本来显示网页。声明位于文档中最前面位置，处于标签之前。不是一个HTML标签，它是文档类型声明标签。.2、lang语言 定义当前文档的显示语言 en定义语言为英语，zh-CN定义语言为中文。（英文网站和中文网站） 对浏览器和搜索引擎有提示和警示的作用。 3、 charset字符集 是多个字符的集合，以便计算机能够使别和存储各种文字。 通过标签的charse
2020-07-18 15:27:09
359
原创 HTML简介以及标签
前端入门学习路线先听再看动手练习分享交流基础班主要学习PC端网站布局最终网站：品优购静态网站目的：精通网页布局，也是我们前端人员的必备技能，为后面学习JavaScript打下坚实基础。学习路线：HTML5基础20%，主要学习最常见的没有兼容性的HTML标签。CSS3基础50%，主要学习最常用的没有兼容性的CSS样式，利用前面学习的标签完成传统PC端网页布局。H5C3提高10%，学习HTNL5新增的标签，CSS3样式。有一定兼容性，可以与未来更好的接轨。项目-品优购电商网站20%，综合以前学
2020-07-17 20:06:32
261
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人