html教程 第2页 网页布局对改善网站的外观非常重要。 请慎重设计您的网页布局。 在线实例 使用 <div> 元素的网页布局如何使用 <div> 元素添加布局。 使用 <table> 元素的网页布局如何使用 <table> 元素添加布局。 网站布局 大多数网站会把内容安排到多个列中（就像杂志或报纸那样）。 大多数网站可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。 虽然我们可以使用HTML table 标签来设计出漂亮的布局，但是 table 标签是不建议作为布局工具使用的 – 表格不是布局工具。 HTML 布局 – 使用<div> 元素 div 元素是用于分组 HTML 元素的块级元素。 下面的例子使用五个 div 元素来创建多列布局： 实例 <!DOCTYPE html> <html> <body> <div id=”container” style=”width:500px”> <div id=”header” style=”background-color:#FFA500;”> <h1 style=”margin-bottom:0;”>网页的主标题</h1></div> <div id=”menu” style=”background-color:#FFD700;height:200px;width:100px;float:left;”> <b>菜单</b><br> HTML<br> CSS<br> JavaScript</div> <div id=”content” style=”background-color:#EEEEEE;height:200px;width:400px;float:left;”> 内容就在这里</div> <div id=”footer” style=”background-color:#FFA500;clear:both;text-align:center;”> Copyright © W3Cschools.com</div> </div> </body> </html> 尝试一下 » 上面的 HTML 代码会产生如下结果： 网页的主标题 Menu HTML CSS JavaScript 内容就在这里 Copyright © W3CSchool.cc HTML 布局 – 使用表格 使用 HTML <table> 标签是创建布局的一种简单的方式。 大多数站点可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。 即使可以使用 HTML 表格来创建漂亮的布局，但设计表格的目的是呈现表格化数据 – 表格不是布局工具！ 下面的例子使用三行两列的表格 – 第一和最后一行使用 colspan 属性来横跨两列： 实例 <!DOCTYPE html> <html> <body> <table width=”500″ border=”0″> <tr>...
2024-04-03
在 html 网页中，我们都知道大篇幅的长文章会占据网页的大部分空间，影响了整体网站页面的美观性和阅读体验，因此，在 html 网页中添加一个带有滚动条的文本框，就可以很好地解决上述问题。网页滚动条本身就是浏览器的一部分，使用它可以方便浏览较大的网页，下面就是相关语法： 实例 color: #ffffff; background-color: #000000; border: solid 2px black; width: 120px; height: 200px; overflow: scroll; scrollbar-face-color: #889B9F; scrollbar-shadow-color: #3D5054; scrollbar-highlight-color: #C3D6DA; scrollbar-3dlight-color: #3D5054; scrollbar-darkshadow-color: #85989C; scrollbar-track-color: #95A6AA; scrollbar-arrow-color: #FFD6DA; 上述语法生成一个带有黑色背景及灰蓝色边框的文本滚动框。语法里的参数相当简单，主要是控制不同部分的色彩，你可以做相应变化并在预览中观看实际效果。至于调整文本框的大小，你可以在插入此语法后退出HTML编辑模式，然后在日志编辑页面使用鼠标直接进行调整。 html中滚动条属性设置 scrollbar属性、样式详解 1、 overflow内容溢出时的设置（设定被设定对象是否显示滚动条） overflow-x水平方向内容溢出时的设置 overflow-y垂直方向内容溢出时的设置 以上三个属性设置的值为 visible(默认值)、 scroll、 hidden 、auto。 2、 scrollbar-3d-light-color立体滚动条亮边的颜色（设置滚动条的颜色） scrollbar-arrow-color上下按钮上三角箭头的颜色 scrollbar-base-color滚动条的基本颜色 scrollbar-dark-shadow-color立体滚动条强阴影的颜色 scrollbar-face-color立体滚动条凸出部分的颜色 scrollbar-highlight-color滚动条空白部分的颜色 scrollbar-shadow-color立体滚动条阴影的颜色 我们通过几个实例来讲解上述的样式属性： 1.让浏览器窗口永远都不出现滚动条 没有水平滚动条 <body style=”overflow-x:hidden”> 没有垂直滚动条 <body style=”overflow-y:hidden”> 没有滚动条 <body style=”overflow-x:hidden;overflow-y:hidden”>或<body style=”overflow:hidden”> 2.设定多行文本框的滚动条 没有水平滚动条 <textarea style=”overflow-x:hidden”></textarea> 没有垂直滚动条 <textarea style=”overflow-y:hidden”></textarea> 没有滚动条 <textarea style=”overflow-x:hidden;overflow-y:hidden”></textarea> 或<textarea style=”overflow:hidden”></textarea> 3.设定窗口滚动条的颜色 设置窗口滚动条的颜色为红色<body style=”scrollbar-base-color:red”> scrollbar-base-color设定的是基本色，一般情况下只需要设置这一个属性就可以达到改变滚动条颜色的目的。 加上一点特别的效果： <body style=”scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon”> 4.在样式表文件中定义好一个类，调用样式表。 <style> .coolscrollbar{scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon;} </style> 这样调用： <textarea class=”coolscrollbar”></textarea> Scrollbar-Face-Color为滚动条表面颜色设定；...
2024-04-03
在网页设计中，常常要使用 html 文本框来收集一些用户信息或是制作登录页，虽然只是简单的输入框，但是如果加入一些美化设计会使你的页面看起来更加有吸引力，下面就给大家提供了一些 html 文本框的参考样式和常见的 html 操作技巧，希望对你的网页制作有帮助。首先我们先看看一个最简单的文本框是如何实现的？ ————————————————————– W3Cschool文本输入框实例： ————————————————————– 如上实例所示，其实这个 html 文本框样式非常简单，用到了 css 的伪元素 focus。下面我们一起来重新做一个吧。首先我们需要在你的页面上添加一个文本框代码如下: 实例 W3Cschool文本输入框实例：<input type=”text” value=”请输入文本” > 尝试一下 » 这个是我们最常见到的按钮了，它没有任何的样式。现在我们来添加一些好看的样式，代码如下： 实例 .mytxt { color:#333; line-height:normal; font-family:”Microsoft YaHei”,Tahoma,Verdana,SimSun; font-style:normal; font-variant:normal; font-size-adjust:none; font-stretch:normal; font-weight:normal; margin-top:0px; margin-bottom:0px; margin-left:0px; padding-top:4px; padding-right:4px; padding-bottom:4px; padding-left:4px; font-size:15px; outline-width:medium; outline-style:none; outline-color:invert; border-top-left-radius:3px; border-top-right-radius:3px; border-bottom-left-radius:3px; border-bottom-right-radius:3px; text-shadow:0px 1px 2px #fff; background-attachment:scroll; background-repeat:repeat-x; background-position-x:left; background-position-y:top; background-size:auto; background-origin:padding-box; background-clip:border-box; background-color:rgb(255,255,255); margin-right:8px; border-top-color:#ccc; border-right-color:#ccc; border-bottom-color:#ccc; border-left-color:#ccc; border-top-width:1px; border-right-width:1px; border-bottom-width:1px; border-left-width:1px; border-top-style:solid; border-right-style:solid; border-bottom-style:solid; border-left-style:solid; } 当我们添加了样式以后，我们需要在文本框中引用此样式。修改文本框代码如下： 实例 <input type=”text” value=”” class=”mytxt” /> 尝试一下 » 好了我们基本的文本框样式完成了，现在我们需要再次添加 focus 按钮。首先简单的介绍一下 focus 按钮的作用：就是当我们箭头在文本框中的时候触发此样式。 添加 css 样式如下： 实例 .mytxt:focus { border: 1px solid #fafafa; -webkit-box-shadow: 0px 0px 6px #007eff; -moz-box-shadow: 0px 0px 5px #007eff; box-shadow: 0px 0px 5px #007eff; } 尝试一下 » 因为我们鼠标移进去的时候，需要修改边框的颜色和一些阴影，所以上面的代码就够了！希望你能从上面的例子中得到启发。 现在，我们一起来看看几个好用的 html 表单文本框是如何实现的。表单的文本框分为单行文本框和多行文本框，故名思义，单行文本框用于输入一些简短的信息，如：姓名、E_mail地址、口令等等；多行文本框用于输入内容较长的信息，如：用户意见、评论、留言等。只要你理解了表单的文本框参数的含义，制作接收信息的文本框是不难的，请看下面的例子。 一、一个单行文本框的例子 本例的源代码如下： 实例 <p>您的姓名： <input type=”text” name=”text1″ size=”12″ maxlength=”20″> 您的E_mail： <input type=”text” name=”text2″ size=”20″ maxlength=”24″ value=”*****@*.*”> 输入口令： <input type=”password” name=”text3″ size=”8″ maxlength=”8″> </p> <p align=”center”> <input type=”submit” name=”提交” value=”提 交”> <input type=”reset” name=”重写” value=”重 写”> 尝试一下 » 本例中用了三个单行文本框来分别接收用户的“姓名”、“E_mail地址”和“口令”信息，在三个文本框中都设定文本框的宽度（size）和最大输入文本长度（maxlength），在第二个文本框中还设定了初始值（value），你可能注意到了，我把每个文本框的名称（name）都取成了英文名，这样对用于程序外理比较方便，因下例中要用这个例子。若是用电子邮件接收表单信息并不用程序处理，那么用中文名比较直观。 为了使其成为一个具有实际交互功能的表单，加上了一个提交按钮，并在<form>标记中设定了action参数为：action=”mailto:3400982550@qq.com” ，同时把 method 参数设置为：method=”post”，这样，一旦按下“提交”按钮将会把信息通过电子邮件发到“3400982550@qq.com”信箱。看来制作并不难！是吗？不过要注意：size 的值小于 maxlength...
2024-04-03
//www.w3cschool.cn/htmldom/
2024-04-03
//www.w3cschool.cn/htmltags/
2024-04-03
在网站的最底端我们都可以看到类似于这样的一句话：“Copyright©2016 w3cschool.cn All Rights Reserved”，这就是网站的版权说明，虽然那只是一小行字，不过作为设计师也好，作为个人的爱好也好，版权的标志都是满重要的。从法律角度看，版权保护是随着作品（无论是文字作品还是图片作品）的完成即刻获得的，并不是必须要声明或进行登记后才可获得。这行文字可以多少提醒浏览者，所看到的内容是受到保护的！ 规范的格式可以是：Copyright/© + [dates] + [author/owner] © 通常可以代替Copyright, 但是不可以用(c)。 All Rights Reserved 在某些国家曾经是必须的，但是现在在大多数国家，都不是法律上必须有的字样。 参见下面几个正确的格式： ©1995-2004 Macromedia, Inc. All rights reserved. ©2004 Microsoft Corporation. All rights reserved. Copyright © 2004 Adobe Systems Incorporated. All rights reserved. ©1995-2004 Eric A. and Kathryn S. Meyer. All Rights Reserved. 请注意标点符号和大小写的用法，这也是专业精神的一种体现。 现在流行some rights reserved：creativecommons.org {Copyright © 2004 Adobe Systems Incorporated. All rights reserved.} Copyright:版权 © 时间 2008-2009 授权时间 XXX公司 有版权的公司 All rights reserved.：版权所有 在网页html里面版权符号可以直接写或者用符号来表示 1. 可以打出来，如：© 2. 可以这样写：© 这两种显示效果都是一样的。 直接写版权可能有点难看，你可以用CSS来定义它的布局如：<span style=”font-family:Arial;”>© 或 ©</span> 就可以了。 1、那个 [dates] 是指起至日期还是其他的什么意思？ 一般的，只要显示最新的年份即可，也可以显示从某个起始日期开始，到现在为止。如果你加了这行字，请注意每年及时更新。 2、日期后加网站名字？其他行吗？ 日期后面，只能跟网站，或者版权拥有者的名字，如果是个人网站，你可以用域名，也可以用你自己的名称。拼音的写法是你的名字的首字母，后面跟你的姓的全拼，首字母大写。很多人也用网名的，重要的是格式的次序，不加这个标注，你的版权也是同样被认可和保护的。 Html中版权符号的字体选择问题 ©是html的中版权的符号，但是字体选择的不对会带来一些问题。如果是宋体，这个符号显示的就是很奇怪的一个符号，所以有效的解决方法就是font-family:arial，遇到此问题的朋友可以参考下，希望对大家有所帮助。 代码如下: <span style="font-family:arial;">Copyright © </span> HTML 特殊符号编码对照表 特殊符号 命名实体 十进制编码 特殊符号 命名实体 十进制编码 特殊符号 命名实体 十进制编码 Α Α Α Β Β Β Γ Γ Γ Δ Δ Δ Ε Ε Ε...
2024-04-03
HTML 即超文本标记语言，是目前应用最为广泛的语言之一，是组成一个网页的主要语言。在现今这个 HTML5 华丽丽地占领了整个互联网的时候，如果想要通过网页抓住浏览者的眼球光靠因循守旧是不行的，程序猿们需要掌握一些必须知道的 HTML 常用代码，因为只有熟悉掌握了常用的 HTML 代码，程序猿们在编写网页的时候才可以做到流畅美观，用细腻的思维和创意的细节效果打动并留住网页浏览者。 HTML+CSS 代码 文本设置 font-size 字号大小 font-style 字体格式 font-weight 字体粗细 color 文本颜色 提示:注意使用网页安全色. 超链接设置 text-decoration 参数 underline 为文字加下划线 overline 为文字加上划线 line-through 为文字加删除线 blink 使文字闪烁 none 不显示上述任何效果 背景 background-color 设置背景色 背景图片 background-image: url(URL) URL就是背景图片的存放路径，none表示无。 背景图片重复 background-repeat: 参数 参数取值范围 no-repeat 不重复平铺背景图片 repeat-x 使图片只在水平方向上平铺 repeat-y 使图片只在垂直方向上平铺 如果不指定背景图片重复属性，浏览器默认的是背景图片向水平和垂直两个方向平铺 背景图片固定 background-attachment: 参数 参数取值范围 fixed：网页滚动时，背景图片相对于浏览器的窗口而言，固定不动 scroll：网页滚动时，背景图片相对于浏览器的窗口而言，一起滚动 区块 单词间距 word-spacing 字母间距 letter-spacing 文本对齐 text-align 参数的取值 left：左对齐 right：右对齐 justify：相对左右两端对齐 垂直对齐 vertical-align 参数 top：顶对齐 bottom：底对齐 text-top：相对文本顶对齐 text-bottom：相对文本底对齐 baseline：基准线对齐 middle：中心对齐 sub：以下标的形式显示 super：以上标的形式显示 文本缩进 text-indent: 缩进距离 显示样式 display block：块级元素，在对象前后都换行 inline：在对象前后都不换行 list-item：在对象前后都换行，增加了项目符号 none：无显示 方框 height 高度 width 宽度 padding 内边距 margin 外边距 float（浮动） 可以让块级元素在一行中排列，例如横向菜单。 clear 清除浮动 边框 样式 border style...
2024-04-03
HTML 颜色名 目前所有浏览器都支持以下颜色名。 141 个颜色名称是在 HTML 和 CSS 颜色规范定义的（ 17 标准颜色，再加 124 ）。下表列出了所有颜色的值，包括十六进制值。 提示: 17 标准颜色：黑色，蓝色，水，紫红色，灰色，绿色，石灰，栗色，海军，橄榄，橙，紫，红，白，银，蓝绿色，黄色。点击其中一个颜色名称（或一个十六进制值）就可以查看与不同文字颜色搭配的背景颜色。： 按颜色名排序 按十六进制的值排序 单击一个颜色名或者 16 进制值，就可以查看与不同文字颜色搭配的背景颜色。 Color Name HEX Color AliceBlue #F0F8FF AntiqueWhite #FAEBD7 Aqua #00FFFF Aquamarine #7FFFD4 Azure #F0FFFF Beige #F5F5DC Bisque #FFE4C4 Black #000000 BlanchedAlmond #FFEBCD Blue #0000FF BlueViolet #8A2BE2 Brown #A52A2A BurlyWood #DEB887 CadetBlue #5F9EA0 Chartreuse #7FFF00 Chocolate #D2691E Coral #FF7F50 CornflowerBlue #6495ED Cornsilk #FFF8DC Crimson #DC143C Cyan #00FFFF DarkBlue #00008B DarkCyan #008B8B DarkGoldenRod #B8860B DarkGray #A9A9A9 DarkGreen #006400 DarkKhaki #BDB76B DarkMagenta #8B008B DarkOliveGreen #556B2F DarkOrange #FF8C00 DarkOrchid #9932CC DarkRed #8B0000...
2024-04-03
XHTML 属性是以 XML 格式编写的 HTML 属性。 XHTML 属性 – 语法规则 XHTML 属性必须使用小写 XHTML 属性值必须用引号包围 XHTML 属性最小化也是禁止的 XHTML 属性必须使用小写 这是错误的： <table WIDTH="100%"> 这是正确的： <table width="100%"> XHTML 属性值必须用引号包围 这是错误的： <table width=100%> 这是正确的： <table width="100%"> 禁止属性简写 这是错误的： <input checked> <input readonly> <input disabled> <option selected> 这是正确的： <input checked="checked" /> <input readonly="readonly" /> <input disabled="disabled" /> <option selected="selected" />
2024-04-03
XHTML 元素是以 XML 格式编写的 HTML 元素。 XHTML 元素 – 语法规则 XHTML 元素必须正确嵌套 XHTML 元素必须始终关闭 XHTML 元素必须小写 XHTML 文档必须有一个根元素 XHTML 元素必须正确嵌套 在 HTML 中，某些元素可以不正确地彼此嵌套在一起，就像这样： <b><i>This text is bold and italic</b></i> 在 XHTML 中，所有元素必须正确地彼此嵌套，就像这样： <b><i>This text is bold and italic</i></b> XHTML 元素必须始终关闭 这是错误的： <p>This is a paragraph <p>This is another paragraph 这是正确的： <p>This is a paragraph</p> <p>This is another paragraph</p> 空元素也必须关闭 这是错误的： A break: <br> A horizontal rule: <hr> An image: <img src="happy.gif" alt="Happy face"> 这是正确的： A break: <br /> A horizontal rule: <hr /> An image: <img src="happy.gif" alt="Happy face" /> XHTML 元素必须小写 这是错误的： <BODY> <P>This is a paragraph</P> </BODY> 这是正确的： <body> <p>This is a paragraph</p> </body>
2024-04-03
国外主机测评 - 国外VPS，国外服务器，国外云服务器，测评及优惠码
