美高梅网址注册-澳门mgm4858集团登录网址
做最好的网站
来自 澳门mgm4858集团登录网址 2019-09-30 15:41 的文章
当前位置: 美高梅网址注册 > 澳门mgm4858集团登录网址 > 正文

最后效果图,请不要用作商业用途

最近产品汪和运营商讨下来决定要做商品促销活动,然后设计妹子给到最终的效果图。

一,HTML有N多标签,根据显示的类型,主要可以分为3大类
  • 1,块级标签

  • 独占一行的标签

  • 能随时设置宽度和高度(比如div、p、h1、h2、ul、li)

  • 图片 1Snip20170119_1.png

  • 2,行内标签

  • 多个行内标签能同时显示在一行

  • 宽度和高度取决于内容的尺寸(比如span、a、label)

  • 图片 2Snip20170119_2.png

  • 3,行内-块级标签

  • 多个行内-块级标签可以显示在同一行

  • 能随时设置宽度和高度(比如input、button)

  • 图片 3Snip20170119_3.png

本课来自http://www.imooc.com/learn/9
请不要用作商业用途。

图片 4最后效果图

二,行内元素与块级函数的三个区别
  • 1,行内元素与块级元素直观上的区别

    • 行内元素会在一条直线上排列,都是同一行的,水平方向排列

    • 块级元素各占据一行,垂直方向排列。块级元素从新行开始结束接着一个断行。

  • 2,块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。

  • 3,行内元素与块级元素属性的不同,主要是盒模型属性上

  • 行内元素设置width无效,height无效(可以设置line-height),margin上下无效,padding上下无效

HTML5

第一感觉就是 so so easy 嘛,加个标签,费不了什么事儿。第一印象记得 Spanable 可以更改对应文字的颜色和背景,设置设置点击事件。

三,属性分类
  • 1,可继承属性父标签的属性值会传递给子标签一般是文字控制属性

  • 2,不可继承属性父标签的属性值不能传递给子标签一般是区块控制属性

  • 所有标签可继承的属性:

  • visibility、cursor

  • 内联标签可继承

  • letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction

  • 块级标签可继承

  • text-indent、text-align

  • 列表标签可继承

  • list-style、list-style-type、list-style-position、list-style-image

  • display、margin、border、padding、background

  • height、min-height、max-height、width、min-width、max-width

  • overflow、position、left、right、top、bottom、z-index

  • float、clear

  • table-layout、vertical-align

  • page-break-after、page-bread-before

  • unicode-bidi

HTML介绍

接着,发现了一个问题,上面说到的 Spanable 只能实现全色的背景,不能实现这种边框的背景。看来这种方案是行不通的。

四,CSS常用属性:

HTML代码由标签组成,标签的语法是< XXX>.......</XXX>。

第一感觉不奏效,那么就要分析下这种效果,我想到以下两种方案。

字体属性:
  • 1,font-style:

  • inherit; ;

  • oblique;

  • italic;

  • normal;

  • 2, font-weight:

  • 100-900;

  • bold;

  • bolder;

  • lighter;

  • normal;

  • 3,font-size:

  • 20px;

  • inherit;

  • medium;

  • large;

  • larger;

  • x-large;

  • xx-large;

  • small;

  • smaller;

  • x-small;

  • xx-small;

  • 4, font-family:font-family:“字体1”, "字体2"; 如果后面有多个参数以逗号隔开,则后面的选项是前面的备选方案,即第一个字体不存在的时候选择第二个,如果第二个也不存在,依次选择后面的字体

  • "宋体";

  • 常用字体: (font-family):Courier New, Courier, monospace, Times New Roman, Times, serif, Arial, Helvetica, sans-serif, Verdana

1 字体样式 {font:font-style font-variant font-weight font-size font-family}

6 字体颜色 {color:数值;}7 阴影颜色 {text-shadow:16位色值}8 字体行高 {line-height:数值|inherit|normal;单位:PX、PD、EM}9 字 间 距 {letter-spacing:数值|inherit|normal}10 单词间距 {word-spacing:数值|inherit|normal}11 字体变形 {font-variant:inherit|normal|small-caps }12 英文转换 {text-transform:inherit|none|capitalize|uppercase|lowercase}13 字体变形 {font-size-adjust:inherit|none}14 字体 {font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|normal| semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider}15

标签可以嵌套,而且一般为小写。

第一种方案就是是否可以直接给 TextView 设置指定的留白呢?就是前面的标签是一个控件,TextView 留白便签控件宽度+margin值。这个方案需要解决的问题是,这里是否有相关的 Api 可以直接设置每行留白的距离,另外首行标签和文字居中对齐问题,毕竟设计师都是像素眼,没有按要求对齐,行距不对都可能无法验收。

文本样式(Text Style)

1 行 间 距 {line-height:数值|inherit|normal;}2 文本修饰 {text-decoration:inherit|none|underline|overline|line-through|blink}3 段首空格 {text-indent:数值|inherit}4 水平对齐 {text-align:left|right|center|justify}5 垂直对齐 {vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super}6 书写方式 {writing-mode:lr-tb|tb-rl}

HTML有固定的格式:

<html> <head>...</head> <body>...</body> </html>

  • <html></html>称为根标签,所有的网页标签都在<html></html>中。
  • <head> 标签用于定义文档的头部,它是所有头部元素的容器。
  • 在<body>和</body>标签之间的内容是网页的主要内容,这里标签中的内容会在浏览器页面上显示出来。

第二种方案就是取巧,将 title 的 TextView 拆分为两个 TextView,第一行直接就是线性水平布局,第二行再是一个独立的TextView。这里需要解决的问题是,我怎么获取 TextView 第一行显示的文字,然后截取剩余的文字单独显示在第二行。这种方法实现似乎没有第一种优雅,但是可以轻松避开第一行标签和 title 文字居中对齐的问题。

背景属性: (background)

1 背景颜色 {background-color:数值}2 背景图片 {background-image: url|none}3 背景重复 {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}4 背景固定 {background-attachment:fixed|scroll}5 背景定位 {background-position:数值|top|bottom|left|right|center}6 背影样式 {background:背景颜色|背景图象|背景重复|背景附件|背景位置}框架样式(Box Style)色彩background-color: #FFFFFF;图片background-image: url();重复background-repeat: no-repeat;滚动background-attachment: fixed; scroll;位置background-position: left top;简写方法 background:#000 url repeat fixed left top;

<head>标签

下面这些标签可用在 head 部分:
<head> <title>...</title> <meta> <link> <style>...</style> <script>...</script> </head>

  • <title>标签:在<title>和</title>标签之间的文字内容是网页的标题信息,它会出现在浏览器的标题栏中。网页的title标签用于告诉用户和搜索引擎这个网页的主要内容是什么,搜索引擎可以通过网页标题,迅速的判断出网页的主题。
  • <meta>标签:(待补充)

在否定一种方案和提出新的两种方案后,可以看看后两种方案到底可以怎么实现。

区块属性:

字间距letter-spacing: normal; 数值对刘text-align: justify; left; right; center;缩进text-indent: 数值px;垂直对齐vertical-align: baseline; sub; super; top; text-top; middle; bottom; text-bottom;词间距word-spacing: normal; 数值空格white-space: pre; nowrap;显示display:block; inline; list-item; run-in; compact; marker; table; inline-table; table-raw-group; table-header-group; table-footer-group; table-raw; table-column-group; table-column; table-cell; table-caption;

HTML的注释

``

第一种方案:

方框属性:

width:; height:; float:; clear:both; margin:; padding:; 顺序:上右下左

认识标签(第一部分)

这里需要使用到 SpannableString 这个类,接着就是主角 LeadingMarginSpan 这个类。

边框属性:

1 边界留白 {margin:margin-top margin-right margin-bottom margin-left}2 补 白 {padding:padding-top padding-right padding-bottom padding-left}3 边框宽度 {border-width:border-top-width border-right-width border-bottom-width border-left-width} 宽度值: thin|medium|thick|数值4 边框颜色 {border-color:数值 数值 数值 数值} 数值:分别代表top、right、bottom、left颜色值5 边框风格 {border-style:dotted; dashed; solid; double; groove; ridge; inset; outset;}6 边 框 {border:border-width border-style color}上 边 框 {border-top:border-top-width border-style color}右 边 框 {border-right:border-right-width border-style color}下 边 框 {border-bottom:border-bottom-width border-style color}左 边 框 {border-left:border-left-width border-style color}7 宽 度 {width:长度|百分比| auto}8 高 度 {height:数值|auto}9 漂 浮 {float:left|right|none}10 清 除 {clear:none|left|right|both}简写方法border:width style color;

添加段落——<p>

<p>段落文本</p> 注意一段文字要一个<p>标签

A paragraph style affecting the leading margin. There can be multiple leadingmargin spans on a single paragraph; they will be rendered in order, eachadding its margin to the ones before it. The leading margin is on the rightfor lines in a right-to-left paragraph.LeadingMarginSpans should be attached from the first character to the lastcharacter of a single paragraph.

列表属性: (List-style)

类型list-style-type: disc; circle; square; decimal; lower-roman; upper-roman; lower-alpha; upper-alpha;位置list-style-position: outside; inside;图像list-style-image: url;

制作标题——<hx>

<hx>标题文本</hx> h1到h6字体逐渐变小

一句话,它可以给 TextView 每行设置指定的头间距,找到相关 API 之后,接着计算出标签的整体宽度。

定位属性:

Position: absolute; relative; static;visibility: inherit; visible; hidden;overflow: visible; hidden; scroll; auto;clip: rect(12px,auto,12px,auto)

下面详细讲解一下:

强调——<strong> <em>

<em>需要强调的文本</em> <em>默认用斜体表示
<strong>需要强调的文本</strong> <strong>默认用粗体表示

LeadingMarginSpan.Standard what = new LeadingMarginSpan.Standard;spannableString.setSpan(what, 0, spannableString.length(), SpannableString.SPAN_INCLUSIVE_INCLUSIVE);
CSS文字属性:

color : #999999; /文字颜色/font-family : 宋体,sans-serif; /文字字体/font-size : 9pt; /文字大小/font-style:itelic; /文字斜体/font-variant:small-caps; /小字体/letter-spacing : 1pt; /字间距离/line-height : 200%; /设置行高/font-weight:bold; /文字粗体/vertical-align:sub; /下标字/vertical-align:super; /上标字/text-decoration:line-through; /加删除线/text-decoration: overline; /加顶线/text-decoration:underline; /加下划线/text-decoration:none; /删除链接下划线/text-transform : capitalize; /首字大写/text-transform : uppercase; /英文大写/text-transform : lowercase; /英文小写/text-align:right; /文字右对齐/text-align:left; /文字左对齐/text-align:center; /文字居中对齐/text-align:justify; /文字分散对齐/vertical-align属性vertical-align:top; /垂直向上对齐/vertical-align:bottom; /垂直向下对齐/vertical-align:middle; /垂直居中对齐/vertical-align:text-top; /文字垂直向上对齐/vertical-align:text-bottom; /文字垂直向下对齐/

为文字设置单独的样式——``

文本 ``标签是没有语义的,它的作用就是为了设置单独的样式用的。

LeadingMarginSpan 是接口,内部的 Standard 看名字就知道是它的标准实现,它有两个构造方法,Standard(int every)Standard(int first, int rest) ,这个就是指定 TextView 每行的缩进值的,一个参数的就是给每一行都设置同样的值,最后当然就是调用两个参数的方法,两个参数的就是指定第一行和其他行的缩进值。

CSS边框空白

padding-top:10px; /上边框留空白/padding-right:10px; /右边框留空白/padding-bottom:10px; /下边框留空白/padding-left:10px; /*左边框留空白

短文本引用——<q>

<q>引用文本</q>引用的文本不用加双引号,浏览器会对q标签自动添加双引号。

接着看下 SpannableStringsetSpan() 的方法,这里需要设置四个参数,第一个就是我们创建出来的 LeadingMarginSpan ,第二个和第三个其实就是第一个对象的作用范围,第四个参数控制范围的边界包含情况。我们这里不是给具体第几个到第几个的字设置属性,所以后面的 start、end 以及边界限制随便写都会生效的。

CSS符号属性:

list-style-type:none; /不编号/list-style-type:decimal; /阿拉伯数字/list-style-type:lower-roman; /小写罗马数字/list-style-type:upper-roman; /大写罗马数字/list-style-type:lower-alpha; /小写英文字母/list-style-type:upper-alpha; /大写英文字母/list-style-type:disc; /实心圆形符号/list-style-type:circle; /空心圆形符号/list-style-type:square; /实心方形符号/list-style-image:url; /图片式符号/list-style-position: outside; /凸排/list-style-position:inside; /缩进/

长文本引用——<blockquote>

<blockquote>引用文本</blockquote> 浏览器解析是缩进样式

对于第四个参数,就是对上下边界是否包含自己的限定,这里你只需要认识这两个单词就好,「EXCLUSIVE」 就是不包含,「INCLUSIVE 」就是包含。所以这里就有四种情况,当然这个不是这次的重点。

CSS背景样式:

background-color:#F5E2EC; /背景颜色/background:transparent; /透视背景/background-image : url(/image/bg.gif); /背景图片/background-attachment : fixed; /浮水印固定背景/background-repeat : repeat; /重复排列-网页默认/background-repeat : no-repeat; /不重复排列/background-repeat : repeat-x; /在x轴重复排列/background-repeat : repeat-y; /在y轴重复排列/指定背景位置background-position : 90% 90%; /背景图片x与y轴的位置/background-position : top; /向上对齐/background-position : buttom; /向下对齐/background-position : left; /向左对齐/background-position : right; /向右对齐/background-position : center; /居中对齐/

换行——<br>

<br />是规范的写法,这是一个空标签,只有开始标签,没有结束标签

第二种方案:

CSS连接属性:

a /所有超链接/a:link /超链接文字格式/a:visited /浏览过的链接文字格式/a:active /按下链接的格式/a:hover /鼠标转到链接/

空格——&nbsp;

``表示空格

这里需要使用到 Layout 个类, TextView 使用它管理文字显示。

鼠标光标样式:

链接手指 CURSOR: hand十字体 cursor:crosshair箭头朝下 cursor:s-resize十字箭头 cursor:move箭头朝右 cursor:move加一问号 cursor:help箭头朝左 cursor:w-resize箭头朝上 cursor:n-resize箭头朝右上 cursor:ne-resize箭头朝左上 cursor:nw-resize文字I型 cursor:text箭头斜右下 cursor:se-resize箭头斜左下 cursor:sw-resize漏斗 cursor:wait光标图案 p {cursor:url("光标文件名.cur"),text;}

添加水平线——<hr>

<hr/>是规范写法,这是一个空标签,只有开始标签,没有结束标签

A base class that manages text layout in visual elements onthe screen.For text that will be edited, use a {@link DynamicLayout},which will be updated as the text changes.For text that will not change, use a {@link StaticLayout}.

CSS边框属性:

border-top : 1px solid #6699cc; /上框线/border-bottom : 1px solid #6699cc; /下框线/border-left : 1px solid #6699cc; /左框线/border-right : 1px solid #6699cc; /右框线/以上是建议书写方式,但也可以使用常规的方式 如下:border-top-color : #369 /设置上框线top颜色/border-top-width :1px /设置上框线top宽度/border-top-style : solid/设置上框线top样式/其他框线样式solid /实线框/dotted /虚线框/double /双线框/groove /立体内凸框/ridge /立体浮雕框/inset /凹框/outset /凸框/

为网页加入地址——<address>

<address>联系地址信息</address> 浏览器默认格式为斜体

通过这个 Layout,我们就可以获取到 TextView 每行的内容,然后就可以决定第二行是否显示及其内容。

CSS表单运用:

文字方块按钮复选框选择钮多行文字方块下拉式菜单 选项1选项2

加入代码——<code>

<code>代码语言</code>

 Layout layout = first.getLayout();int lineEnd = layout.getLineEnd;
CSS边界样式:

margin-top:10px; /上边界/margin-right:10px; /右边界值/margin-bottom:10px; /下边界值/margin-left:10px; /左边界值/

加入大段代码——<pre>

<pre>语言代码段</pre> 在标签中文本可以保留空格和换行

上面的 lineEnd 就是第一行文字显示的数量,拿到之后,就可以判断下,如果和总长度相等,那就说明第一行就可以显示完全,第二行根据具体情况,控制显示与否。如果小于总长度,那么久截取出剩余文字,用于第二行 TextView 显示。

认识标签(第二部分)

到这里,两种方案实现完毕,接着再聊一个问题,那就是测量时机,这里的需求总是出现在列表页面,这就涉及到一个计算时机问题,这里我的解决方案是添加一个 addOnPreDrawListener 的方式,这个方法是每次绘制之前都会调用,比较符合列表的刷新。

添加信息列表——<ul-li>

<ul> <li>信息<li> <ul>
ul-li是没有前后顺序的信息列表,ul-li在网页中显示的默认样式一般为:每项li前都自带一个圆点

最终效果:

添加有前后顺序的信息列表——<ol-li>

<ol> <li>信息<li> <ol>
网页中显示的默认样式一般为:每项<li>前都自带一个序号,序号默认从1开始

图片 5方案一方案二图片 6方案一方案二

独立逻辑快划分——<div>

<div>…</div>
为div命名(命名必须唯一)的方法:
<div id="版块名称">…</div>

贴下详细的代码:

添加表格——<table>

创建表格的四个元素:table、tbody、tr、th、td

  • table
    <table>…</table>整个表格以<table>标记开始、</table>标记结束,table表格在没有添加css样式之前,在浏览器中显示是没有表格线的
  • tbody
    <tbody>…</tbody>当表格内容非常多时,表格会下载一点显示一点,但如果加上<tbody>标签后,这个表格就要等表格内容全部下载完才会显示
  • tr
    <tr>…</tr>表格的一行,所以有几对tr 表格就有几行
  • td
    <td>…</td>表格的一个单元格,一行中包含几对td,说明一行中就有几列
  • th
    <th>…</th>表格的头部的一个单元格,表格表头,th标签中的文本默认为粗体并且居中显示
  • 用CSS为表格加上边框(待补充)
//方案一:将文字查分为两个两个TextView 显示public static void calculateTag1(TextView first, TextView second, final String text) { ViewTreeObserver observer = first.getViewTreeObserver(); observer.addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() { @Override public boolean onPreDraw() { Layout layout = first.getLayout(); int lineEnd = layout.getLineEnd; String substring = text.substring(0, lineEnd); String substring1 = text.substring(lineEnd, text.length; Log.i("TAG", "onGlobalLayout:"+ "+end:" + lineEnd); Log.i("TAG", "onGlobalLayout: 第一行的内容::" + substring); Log.i("TAG", "onGlobalLayout: 第二行的内容::" + substring1); if (TextUtils.isEmpty(substring1)) { second.setVisibility(View.GONE); second.setText; } else { second.setVisibility(View.VISIBLE); second.setText(substring1); } first.getViewTreeObserver().removeOnPreDrawListener; return false; } });}//方案二:动态设置缩进距离的方式public static void calculateTag2(TextView tag, TextView title, final String text) { ViewTreeObserver observer = tag.getViewTreeObserver(); observer.addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() { @Override public boolean onPreDraw() { SpannableString spannableString = new SpannableString; //这里没有获取margin的值,而是直接写死的 LeadingMarginSpan.Standard what = new LeadingMarginSpan.Standard(tag.getWidth() + dip2px(tag.getContext, 0); spannableString.setSpan(what, 0, spannableString.length(), SpannableString.SPAN_INCLUSIVE_INCLUSIVE); title.setText(spannableString); tag.getViewTreeObserver().removeOnPreDrawListener; return false; } });}public static int dip2px(Context context, double dpValue) { float density = context.getResources().getDisplayMetrics().density; return  (dpValue * density + 0.5);}
为表格添加摘要

<table summary="表格简介文本">

PS:SpannableStringBuilder 阔以用于快速给 TextView 设置Span,最后看了下某东的效果,它的标签不是一个独立的控件,看样子或许是使用的 ImageSpan 来实现。但是 ImageSpan 默认不是居中对齐,解决方案可以看看。

为表格添加标题——<caption>

<table> <caption>标题文本</caption> <tr> <td>…</td> <td>…</td> </tr> </table>

最新代码。

认识标签(第三部分)

链接到另一个页面——<a>

<a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a>
若要在新的浏览器窗口打开页面:
<a href="目标网址" target="_blank">click here!</a>

在网页中链接Email地址——mailto

如果mailto后面同时有多个参数的话,第一个参数必须以“?”开头,后面的参数每一个都以“&”分隔。

图片 7

example:

图片 8

为网页插入图片——<img>

![](图片地址)

  • src:
    标识图像的位置
  • alt:
    指定图像的描述性文本,当图像不可见时(下载不成功时),可看到该属性指定的文本
  • title:
    提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)
  • 图像可以是GIF,PNG,JPEG格式的图像文本

表单标签

与用户交互——表单标签

<form method="传送方式" action="服务器文件">

  • <form> :
    <form>标签是成对出现的,以<form>开始,以</form>结束
  • action :
    浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)
  • method :
    数据传送的方式(get/post)
  • 所有表单控件(文本框、文本域、按钮、单选框、复选框等)都必须放在 <form></form> 标签之间(否则用户输入的信息可提交不到服务器上哦!)

文本输入框,密码输入框

<form> <input type="text/password" name="名称" value="文本" /> </form>

  • type:
    当type="text"时,输入框为文本输入框
    当type="password"时, 输入框为密码输入框
  • name:
    为文本框命名,以备后台程序ASP 、PHP使用
  • value:
    为文本输入框设置默认值。(一般起到提示作用)

多行文本输入

<textarea rows="行数" cols="列数">文本</textarea>

  • <textarea>
    <textarea>标签是成对出现的,以<textarea>开始,以</textarea>结束。

  • cols :多行输入域的列数

  • rows :多行输入域的行数

使用单选框和复选框

<input type="radio/checkbox" value="值" name="名称" checked="checked"/>

  • type:
    当 type="radio" 时,控件为单选框
    当 type="checkbox" 时,控件为复选框
  • value:提交数据到服务器的值(后台程序PHP使用)
  • name:为控件命名,以备后台程序 ASP、PHP 使用
  • checked:当设置 checked="checked" 时,该选项被默认选中

下拉列表框

图片 9

  • value:
![](https://upload-images.jianshu.io/upload_images/5276931-accd6be19e2cc290.png)
  • selected="selected":
    设置selected="selected"属性,则该选项就被默认选中
  • 多选操作:
    设置multiple="multiple"属性,就可以实现多选功能
![](https://upload-images.jianshu.io/upload_images/5276931-3ece2d4c0a6a5d7d.png)

重置表单信息

<input type="reset" value="重置">

  • type:只有当type值设置为reset时,按钮才有重置作用
  • value:按钮上显示的文字
![](https://upload-images.jianshu.io/upload_images/5276931-17c6fba831a81a4b.png)

本文由美高梅网址注册发布于澳门mgm4858集团登录网址,转载请注明出处:最后效果图,请不要用作商业用途

关键词: