css
关注
分享
扫一扫
文章平均质量分 53
养羊得亿
这个作者很懒，什么都没留下…
展开
-
前端网页学习5（css元素显示模式）
元素显示模式元素显示模式元素显示模式：元素标签以什么方式进行显示。块与行内元素块元素 <h><p><ul><ol><div> 独占一行 高度宽度，外边距，内边距都可以控制。 默认宽度是容器（父级的百分百） 是一个容器或者盒子，可以放块级元素 文字类不能放块级元素，如p/h行内元素（内联元素） 相邻的行内元素一行可以占多个 高宽设置无效 默认宽度是本身宽度 智能容纳文本和其他行内元素 链接不能再放原创 2021-01-31 14:40:10 · 118 阅读 · 0 评论 -
前端网页学习4（css三种样式表和Chrome调试工具）
三种样式表1) 行内样式表<div style=”color:pink”></div>简单，但是作用范围是单个标签2) 内部样式表（嵌入）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&g原创 2021-01-31 14:16:17 · 186 阅读 · 0 评论 -
前端网页学习3（css文字属性和文本属性）
前端网页学习2（文字属性和文本属性）Css字体属性Css字体属性：font-family：字体；font-size: 字体大小；font-weight:字体粗细；font-style: 字体；正常书写：（注意事项在代码备注中）.font { font-family: '宋体',Arial, Helvetica, sans-serif; /* 单引号双引号都可以 */ /* 从左往右显示 */原创 2021-01-31 14:08:22 · 184 阅读 · 0 评论 -
Emmet语法（快速生成HTML与CSS的方法）
Emmet语法生成HTMLTab补充生成/KaTeX parse error: Expected 'EOF', got '#' at position 32: …+兄弟关系表达式：标签名./#̲属性名{内容$}*个数无空格生成css简写·加tabW200H5Text-indent2格式化a) 右键，格式化b) Shift alt fc) 自动格式化：文档-首选项-emmet.Include-用户-添加”editor.formatOnSave”:true和”editor.form原创 2021-01-31 12:19:12 · 263 阅读 · 0 评论 -
前端网页学习2（css简介和选择器）
CSSCSS介绍Css：层叠样式表/级联表样式风格：展开式，小写，选择器与大括号，冒号和键值，有空格结构：选择器+一条多条声明选择器选择器：单选择器和复合选择器单选择器单选择器：标签选择器，类选择器，id选择器，通配符选择器1. 标签选择器定义标签选择器: p { color: blue; }调用选择器：自动调用定义方式：标签名{}特点：选择某类标签。可快速全局设置样式。但不能差异化设置2. 类选择器定义类选择器:.red原创 2021-01-31 11:48:59 · 99 阅读 · 0 评论 -
前端网页学习6（css单行文字垂直居中）
css不提供单行文字垂直居中功能但是可以用小技巧使它垂直居中。让高度和文字行号相同。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>原创 2021-01-31 14:55:00 · 121 阅读 · 0 评论 -
前端网页学习12（设计优秀网页的三种布局方式）
网页布局三种方式：标准流浮动定位标准流：行内元素可以一行多个。块级元素独占一行。即每个元素都有自己的格式。常用于从上到下布局。浮动：定义：元素脱离原有的位置，处于更高的一个层次。语法选择器{float：属性值}none（默认）left。right特点：1. 脱标：脱离标准位置，即原有位置会被未浮动的格子占据。2. 并列：多个盒子都设置了浮动，且顶端对齐，在同一行排列，直至到达容器改行边缘。3. 行内块元素特性：任何元素都可以浮动，浮动后的元素具有行内块元素特性。原创 2021-02-04 15:13:55 · 1138 阅读 · 0 评论 -
前端网页学习7（css背景属性）
前端网页学习7（背景属性）背景属性：背景颜色background-color:透明的/颜色.（默认透明）背景图片相比于插入图片更容易控制位置background-image: none/url();（默认无）背景平铺background-repeat: repeat/no-repeat/repeat-x/repeat-y(默认平铺)平铺/不平铺/水平平铺/竖直平铺背景位置background-position: x y;xy可使用方位名词或精确位置。1方位名词（与xy顺序无关）：原创 2021-01-31 16:15:43 · 94 阅读 · 0 评论 -
前端网页学习8（css三大特性：层叠性，继承性，优先级）
css三大特性：层叠性，继承性，优先级。层叠性（覆盖性）：相同选择器的相同属性的不同值会发生冲突，此时采取就近原则。相同选择器的不同属性不会发生冲突。代码示例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"原创 2021-02-01 10:33:58 · 123 阅读 · 0 评论 -
前端网页学习9（css盒子）
盒子四大部分：border：边框padding：内边距margin：外边距content：内容盒子的长宽实际与内容的长宽相同。border：边框三大属性：边框颜色，边框线型，边框粗细四个边可分开设置。边框定义可以简写，且三大属性无顺序要求。padding：内边距四个边可分开设置。可共同设置意义如下padding: 10px;四个内边距都是10pxpadding: 10px 15px;四个内边距 代表上下，左右padding: 10px 15px 20px ;四个内边原创 2021-02-01 12:40:35 · 633 阅读 · 0 评论 -
前端网页学习11（css盒子阴影和文字阴影）
盒子阴影：注意事项：1. 默认为outset，但不写，否则会使阴影无效2. 盒子阴影不占空间，不影响网页布局代码示例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>盒子原创 2021-02-02 10:16:23 · 204 阅读 · 0 评论