HTML即超文本标记语言,是WWW的描述语言。html是在sgml定义下的一个描述性语言,或可说html是sgml的一个应用程式,html不是程式语言,它只是标示语言。
、效果分析根据效果图使用html和css制作一个电商悬浮窗效果,外层使用一个大盒子<ul>定义,内部插入5个<li>列表并添加边框,最后插入图片背景。
二、制作结构
1.使用Dreamweaver新建一个html5文档,修改标题为“电商悬浮框”搭建结构后引入对应的文字。
2.定义整个body的公共的样式,在用并集选择器清除对应标签的样式
<style>
ul,li,body{
margin: 0
padding: 0
list-style: none/*清除列表的样式为none*/
/*定义公共的样式*/
}
body{
font-size: 16px
font-family: "黑体"
color: #999
/*定义公共的样式*/
}
ul{
width: 171px
height: 489px
background: url("bg.jpg") no-repeat
}
</style>
3.最后调整各元素对应的位置,不断调整达到最终效果
<html>
<head>
<meta charset="UTF-8">
<title>电商悬浮框</title>
<style>
ul,li,body{
margin: 0
padding: 0
list-style: none/**/
/*定义公共的样式*/
}
body{
font-size: 16px
font-family: "黑体"
color: #FFF
/*定义公共的样式*/
}
ul{
width: 120px
height: 295px
background: url("bg.jpg") no-repeat center center
padding-top: 194px
padding-left: 45px
/*引入ul的背景图片设置不平铺与图片大小*/
}
li{
width: 80px
height:40px
text-align: center
line-height: 40px
border-bottom: 1px #FFF solid
/*调整各列表对应的位置,添加边框*/
}
</style>
</head>
<body>
<ul>
<li>服装鞋帽</li>
<li>数码家电</li>
<li>运动户外</li>
<li>孕婴用品</li>
<li>厨卫家电</li>
</ul>
</body>
</html>
登录后复制
4.使用浏览器预览效果
html5解决的不是电子商务中的问题,而是移动端问题。电子商务只是运用这个HTML5技术。
HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准,是构建以及呈现互联网内容的一种语言方式.被认为是互联网的核心技术之一。
HTML5介绍:
HTML5是Web中核心语言HTML的规范,用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的,在浏览器中通过一些技术处理将其转换成为了可识别的信息。
HTML5在从前HTML4.01的基础上进行了一定的改进,虽然技术人员在开发过程中可能不会将这些新技术投入应用,但是对于该种技术的新特性,网站开发技术人员是必须要有所了解的。
HTML5 是HyperText Markup Language 5 的缩写,HTML5技术结合了 HTML4.01 的相关标准并革新,符合现代网络发展要求,在 2008 年正式发布。
HTML5 由不同的技术构成,其在互联网中得到了非常广泛的应用,提供更多增强网络应用的标准机。与传统的技术相比,HTML5 的语法特征更加明显,并且结合了SVG的内容。
这些内容在网页中使用可以更加便捷地处理多媒体内容,而且 HTML5中还结合了其他元素,对原有的功能进行调整和修改,进行标准化工作。HTML5 在 2012 年已形成了稳定的版本。