大小尺寸	说明	间距边距	说明	各类颜色	说明
width	宽	margin	外边距	color	颜色
height	高	padding	内边距	background-color	背景色
font-weight	字体加粗	float	浮动	详见下面4.6笔记	块盒子水平居中
font-size	字体大小	text-align	水平对齐	详见下面4.4笔记	文字垂直居中

字体左中居中20px加粗: text-align:center;font-size:20px;font-weight:bold;

文件名称	定义内容说明
001-reset.less	音/视频显示块定义、HTML页/图片/按钮/输入框显示位置及大小基本定义
002-variables.less	变量定义：常用的颜色值、链接/按钮/表格/布局/表单等元件等使用的颜色及字符大小的变量定义、Bootstrap图标文件地址定义
003-mixins.less	Mixins可以将一部分需重用的样式抽出，只需定义一次，可被重复使用
004-scaffolding.less	HTML 主体/链接/图片的默认样式
005-grid.less	Grid网格对象中的样式定义
006-layouts.less	布局元件使用，定义一个container名称的样式类，并定义其中子元件显示样式
007-type.less	页面中字符样式定义、特别的字号、标题标签如h1 h2 h3…、表头样式、列表样式、缩写类样式、引用内容样式、地址样式
008-code.less	代码内容显示的样式
009-forms.less	表单的样式、带标签的输入框样式、各类输入框元件样式、勾选等元件样式
010-tables.less	表格对象的样式、基本样式/紧凑样式/带边框样式/斑马条样式/滑动变色样式/单元格大小样式/背景色样式等定义内容
011-sprites.less	Bootstrap图标名称位置定义，黑色及白色类定义，注意对应的图标文件地址在002-variables.less有定义
012-dropdowns.less	下拉按钮的样式定义
013-wells.less	一种会引起内容凹陷显示或插图效果的容器样式定义
014-component-animations.less	渐变等动态效果样式
015-close.less	关闭图标的样式
016-buttons.less	按钮的样式定义，包括按钮颜色样式/尺寸/状态/背景色
017-button-groups.less	按钮组样式，按钮组中各类不同按钮显示样式
018-alerts.less	报警类提示类的样式，不同颜色定义
019-navs.less	导航类的样式定义
020-navbar.less	导航条的样式定义
021-breadcrumbs.less	面包屑导航样式定义
022-pagination.less	分页为每个页面做导航的样式
023-pager.less	翻页导航样式
024-modals.less	弹窗的样式，包括正常弹窗/大弹窗定义/弹窗头部样式/内部主体样式/底部样式定义
025-tooltip.less	工具提示框样式，包括提示框内部设定图标
026-popovers.less	简单弹窗样式，标题/内容/图标等样式
027-thumbnails.less	缩略图的样式
028-media.less	媒体类型的样式
029-labels-badges.less	标签显示及徽章类的样式
030-progress-bars.less	进度条样式定义
031-accordion.less	垂直手风琴效果样式
032-carousel.less	轮播图样式，控制及图中文字显示样式
033-hero-unit.less	巨幕样式，用于展示放大提示的样式
034-utilities.less	类对象属性的样式，如是否显示，靠左靠右等
035-responsive-utilities.less	响应式处理样式
responsive-767px-max.less	响应式处理样式，最大767px
responsive-768px-979px.less	响应式处理样式768px-979px
responsive-1200px-min.less	响应式处理样式，最小1200px
responsive-navbar.less	导航条响应式处理样式

4.H5标签属性

<Value>将变变量中的值放到里面显示

<placeholder>对输入框文本提示

<readonly>对输入框限制设置为禁止输入数据

<Disabled>按钮不能点击

<Visible>是否显示(也可以不隐藏其它显示元件)

4.CSS常用基础

4.1 HTML元素分为块元素(<h1>-<h6>,<p>,<div>,<ul>,<ol>,<li>,<div>)和行内元素(<a>,<stong>,<b>,<em>,<i>,<del>,<s>,<ins>,<span>)

(男人)块元素特点:

1.比较霸道,自已独占一行

2.高度,宽度,外边距及内边距都可以控制

3.宽度默认是容器(父级宽度)的100%

4.是一个容器及盒子,里面可以放行内或块级元素

(女人)行内元素特点:

1.相邻行内元素在一行上,一行上可以显示多个

2.宽和高设置是无效的

3.默认宽度就是它本身内容的宽度

4.行内元素只能容纳文本或其它行内元素,不能放块元素(<a>可以放块元素)

(人妖)行内块元素特点:

1.<img/>,<input/>,<td>同时具有块元素和行内元素的特点

2.和相邻行内元素(行内块)在一行上,他们之间会有空白缝隙,一行可以显示多个(行内元素特点)

3.默认宽度就是他本身内容的宽度(行内元素特点)

4.高度和行高,外边距以及内边距都可以控制(块级元素的特点)

4.2 元素晃示模式的转换(一个模式的元素需要另外一种模式的特性,比如想要增加链接<a>的触发范围,<a>是行内元素不能高高宽,如果要设就得转成块元素)

1.转换成块元素: display:block (display显示,block块)

2.转换成行内素: display:inline

3.转换成行内块元素: display:inline-block

4.3 案例:简洁侧边栏(鼠标移到上面变色,点击跳转页面)

1.每个分类是一个a链接,要将a链接转换成块元素,单独占一行,并且有宽度和高度

2.鼠标经过a时,a链接变成橙色背景

4.4 单行文字垂直居中的代码:让文字和行高等于盒子的高度( line-height:盒子height的高度 )

4.5 CSS的背景(背景属性可以设置背景颜色,背景图片,背景平铺,背景图片位置,背景图片固定)

1.background-color: red; 背景颜色(颜色值)

2.background-image:url(image/logo.png); 背景图片(url),默认平铺的,网页标志小的装饰图片或超大图片(与插入图片相比,背景图片非常便于控制位置)

3.background-repeat:repeat/no-repeat/repeat-x/reapeat-y; 背景平铺/不平铺/向x轴横向向右平铺/向y轴纵向向下平铺

4.background-attachment:

5.background-position:x y;背景图片位置,两个值

1.background-position:top/center/bottom/left/right; 背景图片位置,方位名词(取向上水居中或底部水平居中,两个值位置不分顺序,可以写一个参数,第二个参数默认水平居中或垂直居中),向上/水平居中/底部/向左/向右

2.background-position:10px 10px; 背景图片位置,精确单位(百分数/数字/像素),第一个是x轴横向坐标,第二个是y轴纵向坐标

3.background-position:10px center; 背景图片位置,混合单位,前面一定是x,后面是y的顺序

6.background-attachment:scroll/fixed;背景图片固定,背景附着,可制作视差滚动的效果,滚动的/固定的

7.合并到一起写:backround:背景颜色/背景图片/背景平铺/背景图片固定/背景图片位置;中间有空格隔开,没有固定顺序,这只是习惯性的顺序

8.background:rgba(0,1,2,0.3);背景色半透明,0=r,1=g,2=b,0.3=a,最后一个参数是alpha透明度,取值范围在0-1之间,前面rgb就是颜色的三个值

4.6 网页布局(利用CSS摆盒子)

1.border边框(样式和粗线同时要设才能显示)https://www.w3school.com.cn/css/css_border.asp

2.内边距padding,如果盒子已经有了宽度和高度(不设就不会撑大盒子),此时再指它内边框,会撑大盒子,如果保证盒子跟效果图大小保持一致,则让width/height减去多出来的内边距大小即可.

3.外边距margin,盒子与盒子的距离

4.块级盒子水平居中,auto(自动的意思)

4.7 网页布局(利用浮动float摆盒子) https://www.w3school.com.cn/css/css_float.asp

1.浮动可以改变元素标签默认的排列方式,可以让多个块级元素一行内排列显示,并且没有间隙,如果用行内块转换,中间排列会有一个间隙.

2.网页布局第一准则:多个块级元素纵向排列找标准流(块自带的本身特性),多个块级元素横向排列找浮动

3.加了浮动后的特性

4.清除浮动

4.8 定位 https://www.w3school.com.cn/css/css_positioning.asp

1.定位模式

2.边偏移

3.相对定位 relative

4.绝对定位 absolute

5.固定定位 fixed

6.定位总结

===============================================================================================

上一篇:TERSUS无代码开发(笔记03)-常用快捷键

下一篇:TERSUS无代码开发(笔记05)-简单实例电脑端页面设计

TERSUS无代码开发(笔记04)CSS样式设置

上一篇:TERSUS无代码开发(笔记03)-常用快捷键

下一篇:TERSUS无代码开发(笔记05)-简单实例电脑端页面设计