position: relative
background: #b3b3b3
}
.index-banner-bg{
height: 570px
overflow: hidden
}
.public-header .header-nav a{
color: #000000
}
.index-banner-bg img{
margin: 0 auto
}
.index-banner-text{
position: absolute
top:200px
left: 50%
margin-left:-388px
}
.index-banner-text .text-logo{
width: 776px
height: 117px
background: url("../images/text-logo.png") no-repeat
}
.index-banner-text .text-info{
margin-top: 17px
text-align: center
color: #fff
}
.index-banner-text .text-info .line{
display: inline-block
width: 40px
border-top: 1px solid #fff
vertical-align: middle
}
.index-banner-text .text-info .txt{
margin:0 26px
}
.index-banner-text .text-info .line-l{
margin-right:26px
}.index-banner-text .text-info .line-r{
margin-left:26px
}
.index-menu{
position: relative
border-top: 4px solid #f34949
}
.index-menu .menu-tips{
position: absolute
left:50%
top :0
margin-left:-78px
width: 156px
height:75px
text-align: center
line-height: 65px
color: #fff
background: #f34949
}
.index-menu .menu-tips:after{
position: absolute
content: ''
left:0
bottom: 0
width: 0
height: 0
border-left:78px solid transparent
border-right:78px solid transparent
border-bottom: 10px solid #fff
}
.index-menu .menu-list{
margin-top: 150px
color: #555
overflow: hidden
}
.index-menu .menu-list ul{
width: 1160px
}
.index-menu .menu-item{
float: left
width: 520px
margin-right:60px
margin-bottom:56px
}
.index-menu h4{
color: #000000
}
.index-menu .menu-item .title,.index-menu .menu-item .line{
float: left
}
.index-menu .menu-item .price{
float: right
}
.index-menu .men-item .title{
width: 230px
overflow: hidden
white-space: nowrap
text-overflow: ellipsis
}
.index-menu .menu-item .line{
margin-top: 9px
width: 192px
border-top: 1px solid #e3e1e1
}
.index-menu .menu-item .comment{
margin-top: 4px
color:#b7b7b7
font-size: 12px
}
.index-menu .menu-more-btn{
margin: 0 auto
width: 114px
height: 32px
padding-left: 16px
border: 1px solid #d7d5d5
font-size: 14px
line-height: 32px
color: #b7b7b7
}
.index-menu .menu-more-btn .icon{
display: inline-block
width: 11px
height: 7px
margin-left: 10px
background: url("../images/index-more.png") no-repeat
}
什么是HTML标签?HTML标签是使用“<>”括起来的有意义的英文单词,如标签<html>、<head>、<div>等都是符合HTML语法规范的标签。标签一般都是成对出现,分为开始标签和结束标签,标签定义的内容放置在开始标签和结束标签之间。例如,<html>是开始标签,</html>是结束标签,HTML文档内容放置在<html>标签和</html>标签之间。
HTML标签不能自己随意命名,W3C(万维网联盟)制定了HTML语法规范,规范定义了HTML所使用的标签及含义,HTML规范从1995年的HTML2.0到现在的HTML5.0,HTML标签也不断扩展。
HTML用什么软件来编辑?
编辑HTML的软件有很多,常用的记事本就可以直接编辑HTML文档。也可以使用高级一点的编辑工具,如EditPlus、UltraEdit、Dreamweaver等软件。当然使用Word软件也可以将编辑的内容直接保存为HTML文档。HTML文件的扩展名是html或html,文档扩展名不区分大小写。例如,inde.htm、about.html。
一个HTML文件样例
打开记事本,写入下面的内容,并保存为index.html。
<html>
<body>
<h1>这是第一个网页<h1>
</boyd>
</html>
使用浏览器打开index.html文档,浏览器会读取index.html文件内容,并将内容显示出来。如下图所示。
HTML文档结构
HTML文档使用标签来组织内容,标签使用“<>”括起来。例如前面HTML文档中有<html>、<body>、<h1>1标签,每个标签有不同的含义,学习HTML基础语法就是学习HTML标签的使用方法。HTML文档结构如下图所示。
HTML文档的第一行应该是<!DOCTYPE HTML>,使用该标签告诉浏览器此HTML文档符合标准HTML5语法标准。如果不使用该标签,浏览器将无法获知文档是否符合HTML5语法标准,尽管也可以正确显示HTML文档内容。
<html>标签是文档的根标签,文档内容放在<html>标签与</html>标签之间,<html>是开始标签,</html>是结束标签,<html>标签定义HTML文档的开始和结束。<head>标签定义HTML文档的头部信息,包括HTML文档的标题、关键词及其和其它
HTML 表单用于搜集不同类型的用户输入。实例
文本域 (Text field)
本例演示如何在 HTML 页面创建文本域。用户可以在文本域中写入文本。
密码域
本例演示如何创建 HTML 的密码域。
(可以在本页底端找到更多实例。)
表单
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中(比如:文本域、下拉列表、单选框、复选框等等)输入信息的元素。
表单使用表单标签(<form>)定义。