重新整理了一遍,花了小半月终于将基础Html+css系统的学完,期间的学习笔记+中文手册都在这,分享..

html+css基础入门月总结

文章目录
一.HTML初识
二.HTML常见标签
三.CSS初识
四.基础选择器
五.后代选择器
六.display转换模式
七.CSS 背景(background)
八.选择器优先级
九.盒子边框(border)
十. 内边距(padding)
十一.外边距(margin)
十二.浮动(float)
十三定位(position)
十四.overflow 溢出
十五.鼠标样式cursor
十六.溢出的文字省略号显示

一.认识WEB。
网页主要由文字、图像和超链接等元素构成。当然,除了这些元素,网页中还可以包含音频、视频以及Flash等。
2. 常见的主流浏览器。
在这里插入图片描述
3.常见浏览器内核

浏览器内核备注
IETridentIE、猎豹安全、360极速浏览器、百度浏览器
firefoxGecko可惜这几年已经没落了,打开速度慢、升级频繁、猪一样的队友flash、神一样的对手chrome。
Safariwebkit现在很多人错误地把 webkit 叫做 chrome内核(即使 chrome内核已经是 blink 了)。苹果感觉像被别人抢了媳妇,都哭晕再厕所里面了。
chromeChromium/Blink在 Chromium 项目中研发 Blink 渲染引擎(即浏览器核心),内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分支。大部分国产浏览器最新版都采用Blink内核。二次开发
Operablink现在跟随chrome用blink内核。
一.HTML初识
  • HTML 指的是超文本标记语言 (Hyper Text Markup Language)是用来描述网页的一种语言。
  • HTML 不是一种编程语言,而是一种标记语言。
  • 标记语言是一套标记标签。
    贴出html的骨架图:
    在这里插入图片描述
    1.HTML标签关系
    ①嵌套关系,缩进一个tab键的身位(一个tab是4个空格)
 <head>  
 	<title> </title> 
 </head>

②并列关系

 <head></head>
 <body></body>

2.常见的开发工具(个人比较喜欢VScode,用起来舒服极了^_^)
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

二.HTML常见标签

1.为了使网页更具有语义化,我们经常会在页面中用到标题标签,HTML提供了6个等级的标题,即

标题标签语义: 作为标题使用,并且依据重要性递减

其基本语法格式如下:

<h1>   标题文本   </h1>
<h2>   标题文本   </h2>
<h3>   标题文本   </h3>
<h4>   标题文本   </h4>
<h5>   标题文本   </h5>
<h6>   标题文本   </h6>

在这里插入图片描述

  • : 加了标题的文字会变的加粗,字号也会依次变大
  • 一行是只能放一个标题的

2.段落标签p(常见)

<p>  文本内容  </p>

3.水平线标签hr

<hr />是单标签

4.换行标签br

<br />

5.div 和 span标签

<div> 这是头部 </div>    <span>今日价格</span>

注: 他们两个都是盒子,用来装网页元素

  • div标签 用来布局的,但是现在一行只能放一个div
  • span标签 用来布局的,一行上可以放好多个span

排版标签总结

标签名定义说明
< h x> </ hx>标题标签作为标题使用,并且依据重要性递减
< p></ p>段落标签把 HTML 文档分割为若干段落
< hr />水平线标签就是一条线
< br/>换行标签
< div>< /div>div标签用来布局,但是现在一行只能放一个div
< span>< /span>span标签用来布局,一行上可以放多个span

6.文本格式化标签
在这里插入图片描述
7.图像标签img

在这里插入图片描述

	正常的<br />
    <img src="cz.jpg" width="300" height="300" /><br />
	有提示文本的<br />
	<img src="cz.jpg" width="300" height="300" border="3" title="这是个小蒲公英" /><br />
	有替换文本的<br />
	<img src="cz.jpg" width="300" height="300" border="3" alt="图片不存在" />
  1. 链接标签
    <a href=“跳转目标” target=“目标窗口的弹出方式”>文本或图像
属性作用
href用于指定链接目标的url地址,(必须属性)当为标签应用href属性时,它就具有了超链接的功能
target用于指定链接页面的打开方式,其取值有_self和_blank两种,其中_self为默认值,__blank为在新窗口中打开方式。

9.表格标签
创建表格的基本语法:

<table>
  <tr>
    <td>单元格内的文字</td>
    ...
  </tr>
  ...
</table>
  1. table用于定义一个表格标签。

  2. tr标签 用于定义表格中的行,必须嵌套在 table标签中。

  3. td 用于定义表格中的单元格,必须嵌套在标签中。

  4. 字母 td 指表格数据(table data),即数据单元格的内容。

例如:

<table width="500" height="300" border="1" cellpadding="20" cellspacing="0" align="center">
   <tr>  <th>姓名</th>   <th>性别</th> <th>年龄</th>  </tr>
   <tr>  <td>刘德华</td> <td></td> <td>55</td>  </tr>
   <tr>  <td>郭富城</td> <td></td> <td>52</td>  </tr>
   <tr>  <td>张学友</td> <td></td> <td>58</td>  </tr>
   <tr>  <td>黎明</td>   <td></td> <td>18</td>  </tr>
   <tr>  <td>刘晓庆</td> <td></td> <td>63</td>  </tr>
</table>

在这里插入图片描述
表格标题caption

<table>
   <caption>我是表格标题</caption>
</table>
  1. 注: caption 元素定义表格标题,通常这个标题会被居中且显示于表格之上。
  2. caption 标签必须紧随 table 标签之后。

合并单元格2种方式

  • 合并:rowspan=“合并单元格的个数”
  • 合并:colspan=“合并单元格的个数”
标签名定义说明
< table>< /table>表格标签表格模型
< tr>< /tr>表格行标签行标签要再table标签内部才有意义
< td>< /td>单元格标签单元格标签是个容器级元素,可以放任何东西
< th>< /th>表头单元格标签它还是一个单元格,但是里面的文字会居中且加粗
< caption> < /caption>表格标题标签表格标题,跟着表格一起走,和表格居中对齐
clospan 和 rowspan合并属性合并单元格

10.列表标签

  • 概念:
    容器里面装载着结构,样式一致的文字或图表的一种形式,叫列表
  • 特点:
    列表最大的特点就是 整齐 、整洁、 有序,跟表格类似,但是他可组合自由度会更高。

①无序列表 ul
无序列表的各个列表项之间没有顺序级别之分,是并列的。其基本语法格式如下:

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ul>

②有序列表
有序列表即为有排列顺序的列表,其各个列表项按照一定的顺序排列定义,有序列表的基本语法格式如下:

<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ol>

③自定义列表
定义列表常用于对术语或名词进行解释和描述,定义列表的列表项前没有任何项目符号。其基本语法如下:

<dl>
  <dt>名词1</dt>
  <dd>名词1解释1</dd>
  <dd>名词1解释2</dd>
  ...
  <dt>名词2</dt>
  <dd>名词2解释1</dd>
  <dd>名词2解释2</dd>
  ...
</dl>
标签名定义说明
< ul>< /ul>无序标签里面只能包含li, 没有顺序
< ol>< /ol>有序标签里面只能包含li, 有顺序
< dl>< /dl>自定义列表里面有2个兄弟, dt 和 dd

11.表单标签
表单控件:
包含了具体的表单功能项,如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。
提示信息:
一个表单中通常还需要包含一些说明性的文字,提示用户进行填写和操作。
表单域:
他相当于一个容器,用来容纳所有的表单控件和提示信息,可以通过他定义处理表单数据所用程序的url地址,以及数据提交到服务器的方法。如果不定义表单域,表单中的数据就无法传送到后台服务器
① input 控件
语法:

<input type="属性值" value="你好">
  • input 输入的意思
  • <input />标签为单标签
  • type属性设置不同的属性值用来指定不同的控件类型
  • 除了type属性还有别的属性
属性说明作用
type表单类型用来指定不同的控件类型
value表单值表单里面默认显示的文本
name表单名字页面中的表单很多,name主要作用就是用于区别不同的表单。
checked默认选中表示那个单选或者复选按钮一开始就被选中

12.label标签
目标:
label标签主要目的是为了提高用户体验。 为用户提高最优秀的服务。
概念:
label 标签为 input 元素定义标注(标签)。
作用:
用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点
如何绑定元素呢?
1.第一种用法就是用label直接包括input表单。

<label> 用户名: <input type="radio" name="usename" value="请输入用户名">   </label>

2 . 第二种用法 for 属性规定 label 与哪个表单元素绑定。

<label for="sex"></label>
<input type="radio" name="sex"  id="sex">

13 . textarea控件(文本域)

  • 语法:
<textarea >
  文本内容
</textarea>

作用:
通过textarea控件可以轻松地创建多行文本输入框.

文本框和文本域区别

表单名称区别默认值显示用于场景
input type=“text”文本框只能显示一行文本单标签,通过value显示默认值用户名、昵称、密码等
textarea文本域可以显示多行文本双标签,默认值写到标签中间留言板

14.select下拉列表
目的:
如果有多个选项让用户选择,为了节约空间,我们可以使用select控件定义下拉列表.
语法:

<select>
  <option>选项1</option>
  <option>选项2</option>
  <option>选项3</option>
  ...
</select>
  • 注意:
  1. <select> 中至少包含一对 option
  2. 在option 中定义selected =" selected "时,当前项即为默认选中项。

15 . form表单域

  • 目的:
    在HTML中,form标签被用于定义表单域,以实现用户信息的收集和传递,form中的所有内容都会被提交给服务器。

**语法: **

<form action="url地址" method="提交方式" name="表单名称">
  各种表单控件
</form>

常用属性:

属性属性值作用
actionurl地址用于指定接收并处理表单数据的服务器程序的url地址。
methodget/post用于设置表单数据的提交方式,其取值为get或post。
name名称用于指定表单的名称,以区分同一个页面中的多个表单。

HTML笔记整理到这里
这是最近收集到的前端中文手册,有需要自取了
整理不易,转载附上链接(# ^ .^#)这儿呢

链接:https://pan.baidu.com/s/1pJZeQb11Zn4euik5i8BtGg
提取码:u6my

在这里插入图片描述


三.CSS初识
  • 概念:
    CSS(Cascading Style Sheets) ,通常称为CSS样式表或层叠样式表(级联样式表)
  • 作用:
  • 主要用于设置 HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局和外观显示样式。

1.行内式(内联样式)
概念:
称行内样式、行间样式.
是通过标签的style属性来设置元素的样式

<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>

2.内部样式表(内嵌样式表)

  • 概念:
    是将CSS代码集中写在HTML文档的head头部标签中,并且用style标签定义
  • 其基本语法格式如下:

<head>
<style type="text/CSS">
    选择器(选择的标签) { 
      属性1: 属性值1;
      属性2: 属性值2; 
      属性3: 属性值3;
    }
</style>
</head>
<style>
	 div {
	 	color: red;
	 	font-size: 12px;
	 }
</style>

3 外部样式表(外链式)

  • 概念:
    ​是将所有的样式放在一个或多个以**.CSS**为扩展名的外部样式表文件中,
    通过link标签将外部样式表文件链接到HTML文档中
  • 其基本语法格式如下:
<head>
  <link rel="stylesheet" type="text/css" href="css文件路径">
</head>
总结:
样式表优点缺点使用情况控制范围
行内样式表书写方便,权重高没有实现样式和结构相分离较少控制一个标签(少)
内部样式表部分结构和样式相分离没有彻底分离较多控制一个页面(中)
外部样式表完全实现结构和样式相分离需要引入最多,强烈推荐控制整个站点(多)
四.基础选择器

选择器参考表:
在这里插入图片描述
1 标签选择器

  • 概念:
    标签选择器(元素选择器)是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。
  • 语法:
标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 
  • 作用:
    标签选择器 可以把某一类标签全部选择出来 比如所有的div标签 和 所有的 span标签
  • 优点:
    是能快速为页面中同类型的标签统一样式
  • 缺点:
    不能设计差异化样式。

2 类选择器

类选择器使用“.”(英文点号)进行标识,后面紧跟类名.

  • 语法:

    • 类名选择器
  .类名  {   
      属性1:属性值1; 
      属性2:属性值2; 
      属性3:属性值3;     
  }
  • 标签
<p class='类名'></p>
  • 优点:
    • 可以为元素对象定义单独或相同的样式。 可以选择一个或者==多个标签 ==
  • 注意
    • 类选择器使用“.”(英文点号)进行标识
    • 长名称或词组可以使用中横线来为选择器命名。
    • 不要纯数字、中文等命名, 尽量使用英文字母来表示。

3.id选择器

id选择器使用#进行标识,后面紧跟id名

  • 其基本语法格式如下:
  • id选择器
 #id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
  • 标签
<p id="id名"></p>
  • 元素的id值是唯一的,只能对应于文档中某一个具体的元素。
  • 用法基本和类选择器相同。

5 . 通配符选择器

  • 概念
    通配符选择器用*号表示, * 就是 选择所有的标签 ,作用范围最广的,能匹配页面中所有的元素。
  • 其基本语法格式如下:
* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

例如下面的代码,使用通配符选择器定义CSS样式,清除所有HTML标记的默认边距。

* {
  margin: 0;                    /* 定义外边距*/
  padding: 0;                   /* 定义内边距*/
}
  • 注意:
    会匹配页面所有的元素,降低页面响应速度,不建议随便使用
选择器作用缺点使用情况用法
标签选择器可以选出所有相同的标签,比如p不能差异化选择较多p { color:red;}
类选择器可以选出1个或者多个标签可以根据需求选择非常多.nav { color: red; }
id选择器一次只能选择器1个标签只能使用一次不推荐使用#nav {color: red;}
通配符选择器选择所有的标签选择的太多,有部分不需要不推荐使用* {color: red;}

五.字体样式
1 font-size:大小

  • 作用:
    font-size属性用于设置字号
p {  
    font-size:20px; 
}
  • 单位:
  • 可以使用相对长度单位,也可以使用绝对长度单位。
  • 相对长度单位比较常用,推荐使用像素单位px,绝对长度单位使用较少。

注意:

  • 单位基本就用px了
  • 谷歌浏览器默认的文字大小为16px
  • 但是不同浏览器可能默认显示的字号大小不一致,我们尽量给一个明确值大小,不要默认大小。一般给body指定整个页面文字的大小

2 .font-family:字体

  • 作用:
    font-family属性用于设置哪一种字体。
p{ font-family:"微软雅黑";}
字体名称英文名称Unicode 编码
宋体SimSun\5B8B\4F53
新宋体NSimSun\65B0\5B8B\4F53
黑体SimHei\9ED1\4F53
微软雅黑Microsoft YaHei\5FAE\8F6F\96C5\9ED1
楷体_GB2312KaiTi_GB2312\6977\4F53_GB2312
隶书LiSu\96B6\4E66
幼园YouYuan\5E7C\5706
华文细黑STXihei\534E\6587\7EC6\9ED1
细明体MingLiU\7EC6\660E\4F53
新细明体PMingLiU\65B0\7EC6\660E\4F53

3.font-weight字体粗细
总结:

属性表示注意点
font-size字号我们通常用的单位是px 像素,一定要跟上单位
font-family字体实际工作中按照团队约定来写字体
font-weight字体粗细记住加粗是 700 或者 bold 不加粗 是 normal 或者 400 记住数字不要跟单位
font-style字体样式记住倾斜是 italic 不倾斜 是 normal 工作中我们最常用 normal
font字体连写1. 字体连写是有顺序的 不能随意换位置 2. 其中字号 和 字体 必须同时出现

五. CSS外观属性

1 color:文本颜色

  • 作用:
    color属性用于定义文本的颜色,
  • 其取值方式有如下3种:
表示表示属性值
预定义的颜色值red,green,blue,还有我们的御用色 pink
十六进制#FF0000,#FF6600,#29D794
RGB代码rgb(255,0,0)或rgb(100%,0%,0%)

2 text-align:文本水平对齐方式

  • 作用:
    text-align属性用于设置文本内容的水平对齐,相当于html中的align对齐属性

  • 其可用属性值如下:

属性解释
left左对齐(默认值)
right右对齐
center居中对齐
  • 注意:

    是让盒子里面的内容水平居中, 而不是让盒子居中对齐

3 line-height:行间距

  • 作用:
    line-height属性用于设置行间距,就是行与行之间的距离,即字符的垂直间距,一般称为行高。
  • 单位:
  • line-height常用的属性值单位有三种,分别为像素px,相对值em和百分比%
  • 技巧:
一般情况下,行距比字号大7.8像素左右就可以了。
line-height: 24px;

4 text-indent:首行缩进

  • 作用:
    text-indent属性用于设置首行文本的缩进,

  • 属性值

    • 其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%,允许使用负值,
    • 建议使用em作为设置单位。

1em 就是一个字的宽度 如果是汉字的段落, 1em 就是一个汉字的宽度

p {
      /*行间距*/
      line-height: 25px;
      /*首行缩进2个字  em  1个em 就是1个字的大小*/
      text-indent: 2em;  
 }

5 text-decoration 文本的装饰

描述
none默认。定义标准的文本。 取消下划线(最常用)
underline定义文本下的一条线。下划线 也是我们链接自带的(常用)
overline定义文本上的一条线。
line-through定义穿过文本下的一条线。

总结:

属性表示注意点
color颜色通常用 十六进制 比如 而且是简写形式 #fff
line-height行高控制行与行之间的距离
text-align水平对齐可以设定文字水平的对齐方式
text-indent首行缩进通常用于段落首行缩进2个字的距离 text-indent: 2em;
text-decoration文本修饰记住 添加 下划线 underline 取消下划线 none
五.后代选择器
选择器作用特征使用情况隔开符号及用法
后代选择器用来选择元素后代是选择所有的子孙后代较多符号是空格 .nav a
子代选择器选择 最近一级元素只选亲儿子较少符号是**>** .nav>p
交集选择器选择两个标签交集的部分既是 又是较少没有符号 p.one
并集选择器选择某些相同样式的选择器可以用于集体声明较多符号是逗号 .nav, .header
链接伪类选择器给链接更改状态较多重点记住 a{} 和 a:hover 实际开发的写法
六.display转换模式
元素模式元素排列设置样式默认宽度包含
块级元素一行只能放一个块级元素可以设置宽度高度容器的100%容器级可以包含任何标签
行内元素一行可以放多个行内元素不可以直接设置宽度高度它本身内容的宽度容纳文本或则其他行内元素
行内块元素一行放多个行内块元素可以设置宽度和高度它本身内容的宽度
七.CSS 背景(background)

1.背景颜色(color)

  • 语法:

    background-color:颜色值;   默认的值是 transparent  透明的
    

2 背景图片(image)

  • 语法:
background-image : none | url (url) 
参数作用
none无背景图(默认的)
url使用绝对或相对地址指定背景图像
background-image : url(images/demo.png);

3 背景平铺(repeat)

  • 语法:
background-repeat : repeat | no-repeat | repeat-x | repeat-y 
参数作用
repeat背景图像在纵向和横向上平铺(默认的)
no-repeat背景图像不平铺
repeat-x背景图像在横向上平铺
repeat-y背景图像在纵向平铺

4 . 背景位置(position) 重点

  • 语法:
background-position : length || length

background-position : position || position 
参数
length百分数 | 由浮点数字和单位标识符组成的长度值
positiontop | center | bottom | left | center | right 方位名词

5 背景附着

  • 语法:

    background-attachment : scroll | fixed 
    
参数作用
scroll背景图像是随对象内容滚动
fixed背景图像固定

6 背景简写

  • background:属性的值的书写顺序官方并没有强制标准的。为了可读性:
  • background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;
  • 语法:
background: transparent url(image.jpg) repeat-y  scroll center top ;

7 背景透明(CSS3)

  • 语法:
background: rgba(0, 0, 0, 0.3);
  • 最后一个参数是alpha 透明度 取值范围 0~1之间
  • 我们习惯把0.3 的 0 省略掉 这样写 background: rgba(0, 0, 0, .3);

8 背景总结

属性作用
background-color背景颜色预定义的颜色值/十六进制/RGB代码
background-image背景图片url(图片路径)
background-repeat是否平铺repeat/no-repeat/repeat-x/repeat-y
background-position背景位置length/position 分别是x 和 y坐标, 切记 如果有 精确数值单位,则必须按照先X 后Y 的写法
background-attachment背景固定还是滚动scroll/fixed
背景简写更简单背景颜色 背景图片地址 背景平铺 背景滚动 背景位置; 他们没有顺序
背景透明让盒子半透明background: rgba(0,0,0,0.3); 后面必须是 4个值
八.选择器优先级
标签选择器计算权重公式
继承或者 *0,0,0,0
元素(标签选择器)0,0,0,1
类,伪类0,0,1,0
ID0,1,0,0
行内样式 style=""1,0,0,0
!important∞ 无穷大
九.盒子边框(border)
属性作用
border-width定义边框粗细,单位是px
border-style边框的样式
border-color边框颜色
十. 内边距(padding)

1 内边距:

​ padding属性用于设置内边距。 是指 边框与内容之间的距离。

属性作用
padding-left左内边距
padding-right右内边距
padding-top上内边距
padding-bottom下内边距

简写:

值的个数表达意思
1个值padding:上下左右内边距;
2个值padding: 上下内边距 左右内边距 ;
3个值padding:上内边距 左右内边距 下内边距;
4个值padding: 上内边距 右内边距 下内边距 左内边距 ;
十一.外边距(margin)
属性作用
margin-left左外边距
margin-right右外边距
margin-top上外边距
margin-bottom下外边距
十二.浮动(float)
属性值描述
none元素不浮动(默认值
left元素向浮动
right元素向浮动

什么时候用清除浮动?

  1. 父级没高度
  2. 子盒子浮动了
  3. 影响下面布局了,我们就应该清除浮动了。
清除浮动的方式优点缺点
额外标签法(隔墙法)通俗易懂,书写方便添加许多无意义的标签,结构化较差。
父级overflow:hidden;书写简单溢出隐藏
父级after伪元素结构语义化正确由于IE6-7不支持:after,兼容性问题
父级双伪元素结构语义化正确由于IE6-7不支持:after,兼容性问题
十三定位(position)

定位 = 定位模式 + 边偏移

1 边偏移

通过边偏移来移动位置的。

在 CSS 中,通过 topbottomleftright 属性定义元素的边偏移:(方位名词)

边偏移属性示例描述
toptop: 80px顶端偏移量,定义元素相对于其父元素上边线的距离
bottombottom: 80px底部偏移量,定义元素相对于其父元素下边线的距离
leftleft: 80px左侧偏移量,定义元素相对于其父元素左边线的距离
rightright: 80px右侧偏移量,定义元素相对于其父元素右边线的距离

2.定位模式 (position)

语义
static静态定位
relative相对定位
absolute绝对定位
fixed固定定位

总结:

定位模式是否脱标占有位置移动位置基准模式转换(行内块)使用情况
静态static不脱标,正常模式正常模式不能几乎不用
相对定位relative不脱标,占有位置相对自身位置移动不能基本单独使用
绝对定位absolute完全脱标,不占有位置相对于定位父级移动位置要和定位父级元素搭配使用
固定定位fixed完全脱标,不占有位置相对于浏览器移动位置单独使用,不需要父级
十四.overflow 溢出
  • 检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
属性值描述
visible不剪切内容也不添加滚动条
hidden不显示超过对象尺寸的内容,超出的部分隐藏掉
scroll不管超出内容否,总是显示滚动条
auto超出自动显示滚动条,不超出不显示滚动条
十五.鼠标样式cursor

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

属性值描述
default小白 默认
pointer小手
move移动
text文本
not-allowed禁止

用户界面样式总结:

属性用途用途
鼠标样式更改鼠标样式cursor样式很多,重点记住 pointer
轮廓线表单默认outlineoutline 轮廓线,我们一般直接去掉,border是边框,我们会经常用
防止拖拽主要针对文本域resize防止用户随意拖拽文本域,造成页面布局混乱,resize:none
十六.溢出的文字省略号显示
  /*1. 先强制一行内显示文本*/
      white-space: nowrap;
  /*2. 超出的部分隐藏*/
      overflow: hidden;
  /*3. 文字用省略号替代超出的部分*/
      text-overflow: ellipsis;


这两天整理出来的H5+C3有需要可以点击《H5C3笔记整理》
一起学习JS部分的有嘛JavaScript_Day1笔记
分享到这。

©️2020 CSDN 皮肤主题: 游动-白 设计师:上身试试 返回首页