html的公共样式,求样例

html-css011

html的公共样式,求样例,第1张

.index-banner{

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>)定义。