边框的设定在web设计中使用率非常的高,border:1px solid #00f;属于标准的边线写法,也可以实现单方向边线border-left:1px solid red;
1px red solid边线
(单边线)左边线
在CSS标准盒模型中,边线border是计算在容器总宽度和高度之中的,
总宽高是102*102
浏览器中呈现的总宽度和总高度102*102
但随着web布局要求越来越高,自适应布局应用逐渐广泛,横向排布四个div 各占据四分之一的宽度,但如果某一个要有边线border修饰,因为border是占据宽度的,最终会导致最后一个元素掉下来,因为实际宽度大于了总宽度。
各占据四分之一的宽度
第四个元素掉了下来
outline可以实现和border相同的效果,标准语法也基本相同(outline:1px solid red),也支持outline-style,outline-width,outline-color等分散属性。
但是outline不占位,不会增加元素的宽高。
outline使用,总宽高不变还是100*100
outline标准写法
outline缺点:
①不支持圆角 outline-radius:3px;
②不支持单方向outline。
不支持部分属性
默认的文本框input[type="text"]获取光标时会有边线高亮。
文本框高亮获取光标(新版本之前是蓝色边线)
实际上高亮的部分为outline在起作用
.text:focus{outline: 3px solid #00f;}
使用outline:none,可以去除默认文本框获取光标时出现的边线
outline:none
.outline{
/*标准写法*/
outline:1px solid red;
/*单方向边线*/
outline-left:4px solid #000;
}
.outline:focus{
/*去除默认边线*/
outline: none;
}
outline作为一个特殊的属性存在,在特殊的场景中会产生很棒的效果,灵活使用才能发挥出最大作用。
天小编总结一下和单元格边线相关的技巧,个个非常实用。
1、最适合列宽
选取表格所有列,双击任一列的边线就会自动调整为最适合的列宽
2、调整为固定列宽
选取表格所有列,调整任一列,所有列的列宽也会调整为同样大小。
3、两列互换。
按shift不松,拖动表格边线,可以快速让两列互换。
4、快速插入空行
按shift不松,拖动行号右下角,可以快速插入空行。
5、设置立体界面
左上粗深边线右下浅或白边线,可以让界面向外突出,反之而可以产生凹陷效果。
6、设置细边线
表格设置成虚线,打印出来的是超细表格线。
本文来源于互联网,版权归原作者所有。如有侵权,请联系我们删除。
当能力还不足以撑起梦想那就跟我们
一起来学习吧
了解课程从试听开始!
关注微信公众号shhengqi 回复“会计+姓名+手机号码”即可
你可以先测试下你适不适合从事会计工作
http://m.hengqijy.com/Test.html?hqtg_gyh-mt_hqtg
学习目标
HTML 的全称为:HyperText Mark-up Language, 指的是超文本标记语言。
标记:就是标签, <标签名称> </标签名称>, 比如: <html></html>、<h1></h1>等,标签大多数都是成对出现的。
所谓超文本,有两层含义:
html是用来开发网页的,它是开发网页的语言。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网页标题</title>
</head>
<body>
网页显示内容
</body>
</html>
网页文件的后缀是.html或者.htm, 一个html文件就是一个网页,html文件用编辑器打开显示的是文本,可以用文本的方式编辑它,如果用浏览器打开,浏览器会按照标签描述内容将文件渲染成网页。
<!-- 1、成对出现的标签:-->
<h1>h1标题</h1>
<div>这是一个div标签</div>
<p>这个一个段落标签</p>
<!-- 2、单个出现的标签: -->
<br>
<img src="images/pic.jpg" alt="图片">
<hr>
<!-- 3、带属性的标签,如src、alt 和 href等都是属性 -->
<img src="images/pic.jpg" alt="图片">
<a href="http://www.baidu.com">百度网</a>
<!-- 4、标签的嵌套 -->
<div>
<img src="images/pic.jpg" alt="图片">
<a href="http://www.baidu.com">百度网</a>
</div>
提示:
标签 | 描述 |
<!--...--> | 定义注释 |
<!DOCTYPE> | 定义文档类型 |
<a> | 定义超文本链接 |
<abbr> | 定义缩写 |
<acronym> | 定义只取首字母的缩写,不支持HTML5 |
<address> | 定义文档作者或拥有者的联系信息 |
<applet> | HTML5中不赞成使用。定义嵌入的 applet。 |
<area> | 定义图像映射内部的区域 |
<article> | 定义一个文章区域 |
<aside> | 定义页面的侧边栏内容 |
<audio> | 定义音频内容 |
<b> | 定义文本粗体 |
<base> | 定义页面中所有链接的默认地址或默认目标。 |
<basefont> | HTML5不支持,不赞成使用。定义页面中文本的默认字体、颜色或尺寸。 |
<bdi> | 允许您设置一段文本,使其脱离其父元素的文本方向设置。 |
<bdo> | 定义文字方向 |
<big> | 定义大号文本,HTML5不支持 |
<blockquote> | 定义长的引用 |
<body> | 定义文档的主体 |
<br> | 定义换行 |
<button> | 定义一个点击按钮 |
<canvas> | 定义图形,比如图表和其他图像,标签只是图形容器,您必须使用脚本来绘制图形 |
<caption> | 定义表格标题 |
<center> | HTML5不支持,不赞成使用。定义居中文本。 |
<cite> | 定义引用(citation) |
<code> | 定义计算机代码文本 |
<col> | 定义表格中一个或多个列的属性值 |
<colgroup> | 定义表格中供格式化的列组 |
<command> | 定义命令按钮,比如单选按钮、复选框或按钮 |
<datalist> | 定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。 |
<dd> | 定义定义列表中项目的描述 |
<del> | 定义被删除文本 |
<details> | 用于描述文档或文档某个部分的细节 |
<dfn> | 定义定义项目 |
<dialog> | 定义对话框,比如提示框 |
<dir> | HTML5不支持,不赞成使用。定义目录列表。 |
<div> | 定义文档中的节 |
<dl> | 定义列表详情 |
<dt> | 定义列表中的项目 |
<em> | 定义强调文本 |
<embed> | 定义嵌入的内容,比如插件。 |
<fieldset> | 定义围绕表单中元素的边框 |
<figcaption> | 定义<figure> 元素的标题 |
<figure> | 规定独立的流内容(图像、图表、照片、代码等等)。 |
<font> | HTML5不支持,不赞成使用。定义文字的字体、尺寸和颜色。 |
<footer> | 定义 section 或 document 的页脚。 |
<form> | 定义了HTML文档的表单 |
<frame> | 定义框架集的窗口或框架 |
<frameset> | 定义框架集 |
<h1> to <h6> | 定义 HTML 标题 |
<head> | 定义关于文档的信息 |
<header> | 定义了文档的头部区域 |
<hr> | 定义水平线 |
<html> | 定义 HTML 文档 |
<i> | 定义斜体字 |
<iframe> | 定义内联框架 |
<img> | 定义图像 |
<input> | 定义输入控件 |
<ins> | 定义被插入文本 |
<kbd> | 定义键盘文本 |
<keygen> | 规定用于表单的密钥对生成器字段。 |
<label> | 定义 input 元素的标注 |
<legend> | 定义 fieldset 元素的标题。 |
<li> | 定义列表的项目 |
<link> | 定义文档与外部资源的关系 |
<main> | 定义文档的主体部分。 |
<map> | 定义图像映射 |
<mark> | 定义带有记号的文本。请在需要突出显示文本时使用 <em> 标签。 |
<menu> | 不赞成使用。定义菜单列表。 |
<meta> | 定义关于 HTML 文档的元信息。 |
<meter> | 定义度量衡。仅用于已知最大和最小值的度量。 |
<nav> | 定义导航链接的部分 |
<noframes> | 定义针对不支持框架的用户的替代内容。HTML5不支持 |
<noscript> | 定义针对不支持客户端脚本的用户的替代内容。 |
<object> | 定义内嵌对象 |
<ol> | 定义有序列表。 |
<optgroup> | 定义选择列表中相关选项的组合。 |
<option> | 定义选择列表中的选项。 |
<output> | 定义不同类型的输出,比如脚本的输出。 |
<p> | 定义段落。 |
<param> | 定义对象的参数。 |
<pre> | 定义预格式文本。 |
<progress> | 定义运行中的进度(进程)。 |
<q> | 定义短的引用。 |
<rp> | <rp> 标签在 ruby 注释中使用,以定义不支持 ruby 元素的浏览器所显示的内容。 |
<rt> | <rt> 标签定义字符(中文注音或字符)的解释或发音。 |
<ruby> | <ruby> 标签定义 ruby 注释(中文注音或字符)。 |
<s> | 不赞成使用。定义加删除线的文本。 |
<samp> | 定义计算机代码样本。 |
<script> | 定义客户端脚本。 |
<section> | <section> 标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。 |
<select> | 定义选择列表(下拉列表)。 |
<small> | 定义小号文本。 |
<source> | <source> 标签为媒介元素(比如 <video> 和 <audio>)定义媒介资源。 |
<span> | 定义文档中的节。 |
<strike> | HTML5不支持,不赞成使用。定义加删除线文本。 |
<strong> | 定义强调文本。 |
<style> | 定义文档的样式信息。 |
<sub> | 定义下标文本。 |
<summary> | <summary> 标签包含 details 元素的标题,"details" 元素用于描述有关文档或文档片段的详细信息。 |
<sup> | 定义上标文本。 |
<table> | 定义表格。 |
<tbody> | 定义表格中的主体内容。 |
<td> | 定义表格中的单元。 |
<textarea> | 定义多行的文本输入控件。 |
<tfoot> | 定义表格中的表注内容(脚注)。 |
<th> | 定义表格中的表头单元格。 |
<thead> | 定义表格中的表头内容。 |
<time> | 定义日期或时间,或者两者。 |
<template> | 定义在页面加载时隐藏的一些内容。 |
<title> | 定义文档的标题。 |
<tr> | 定义表格中的行。 |
<track> | <track> 标签为诸如 video 元素之类的媒介规定外部文本轨道。 |
<tt> | 定义打字机文本。 |
<u> | 不赞成使用。定义下划线文本。 |
<ul> | 定义无序列表。 |
<var> | 定义文本的变量部分。 |
<video> | <video> 标签定义视频,比如电影片段或其他视频流。 |
<wbr> | 规定在文本中的何处适合添加换行符。 |
属性 | 描述 |
accesskey | 设置访问元素的键盘快捷键。 |
class | 规定元素的类名(classname) |
contenteditable | 规定是否可编辑元素的内容。 |
contextmenu | 指定一个元素的上下文菜单。当用户右击该元素,出现上下文菜单 |
data-* | 用于存储页面的自定义数据 |
dir | 设置元素中内容的文本方向。 |
draggable | 指定某个元素是否可以拖动 |
dropzone | 指定是否将数据复制,移动,或链接,或删除 |
hidden | hidden 属性规定对元素进行隐藏。 |
id | 规定元素的唯一 id |
lang | 设置元素中内容的语言代码。 |
spellcheck | 检测元素是否拼写错误 |
style | 规定元素的行内样式(inline style) |
tabindex | 设置元素的 Tab 键控制次序。 |
title | 规定元素的额外信息(可在工具提示中显示) |
translate | 指定是否一个元素的值在页面载入时是否需要翻译 |
当我们使用img标签显示图片的时候,需要指定图片的资源路径,比如:
<img src="images/logo.png">
这里的src属性就是设置图片的资源路径的,资源路径可以分为相对路径和绝对路径。
从当前操作 html 的文档所在目录算起的路径叫做相对路径
示例代码:
<!-- 相对路径方式1 -->
<img src="./images/logo.png">
<!-- 相对路径方式2 -->
<img src="images/logo.png">
从根目录算起的路径叫做绝对路径,Windows 的根目录是指定的盘符,mac OS 和Linux 是/
示例代码:
<!-- 绝对路径 -->
<img src="/Users/apple/Desktop/demo/hello/images/logo.png">
<img src="C:\demo\images\001.jpg">
提示:
一般都会使用相对路径,绝对路径的操作在其它电脑上打开会有可能出现资源文件找不到的问题
<!-- ul标签定义无序列表 -->
<ul>
<!-- li标签定义列表项目 -->
<li>列表标题一</li>
<li>列表标题二</li>
<li>列表标题三</li>
</ul>
<!-- ol标签定义有序列表 -->
<ol>
<!-- li标签定义列表项目 -->
<li><a href="#">列表标题一</a></li>
<li><a href="#">列表标题二</a></li>
<li><a href="#">列表标题三</a></li>
</ol>
表格是由行和列组成,好比一个excel文件
示例代码:
<table border="1" cellspacing="3">
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>18</td>
</tr>
</table>
表格边线合并:
border-collapse 设置表格的边线合并,如:border-collapse:collapse;
表单用于搜集不同类型的用户输入(用户输入的数据),然后可以把用户数据提交到web服务器 。
示例代码:
<form>
<p>
<label>姓名:</label><input type="text">
</p>
<p>
<label>密码:</label><input type="password">
</p>
<p>
<label>性别:</label>
<input type="radio"> 男
<input type="radio"> 女
</p>
<p>
<label>爱好:</label>
<input type="checkbox"> 唱歌
<input type="checkbox"> 跑步
<input type="checkbox"> 游泳
</p>
<p>
<label>照片:</label>
<input type="file">
</p>
<p>
<label>个人描述:</label>
<textarea></textarea>
</p>
<p>
<label>籍贯:</label>
<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
</select>
</p>
<p>
<input type="submit" value="提交">
<input type="reset" value="重置">
</p>
</form>
<form>标签 表示表单标签,定义整体的表单区域
<form action="https://www.baidu.com" method="GET">
<p>
<label>姓名:</label><input type="text" name="username" value="11" />
</p>
<p>
<label>密码:</label><input type="password" name="password" />
</p>
<p>
<label>性别:</label>
<input type="radio" name="gender" value="0" /> 男
<input type="radio" name="gender" value="1" /> 女
</p>
<p>
<label>爱好:</label>
<input type="checkbox" name="like" value="sing" /> 唱歌
<input type="checkbox" name="like" value="run" /> 跑步
<input type="checkbox" name="like" value="swiming" /> 游泳
</p>
<p>
<label>照片:</label>
<input type="file" name="person_pic">
</p>
<p>
<label>个人描述:</label>
<textarea name="about"></textarea>
</p>
<p>
<label>籍贯:</label>
<select name="site">
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2">广州</option>
<option value="3">深圳</option>
</select>
</p>
<p>
<input type="submit" name="" value="提交">
<input type="reset" name="" value="重置">
</p>
</form>
*请认真填写需求信息,我们会在24小时内与您取得联系。