1、网页设计代码案例：网页设计代码案例是将文字、图片、音频、视频等信息放置到HTML文档中，实现网页页面的浏览、阅读和交互。例如比较经典的有：网页设计样式表（CSS）案例，表示使用CSS代码来定义网页元素的外观，使网页看起来更加立体、更有美感；HTML案例，表示使用HTML代码定义网页结构、内容、样式和行为；JavaScript案例，表示使用JavaScript代码定义网页的行为，实现丰富多彩的动画、响应和交互；XML、XSLT案例，表示使用XML和XSLT技术，结合网页设计，不仅改善网页页面，而且实现跨浏览器平台无缝交互。
2、网页设计CSS案例：CSS案例是网页设计开发中比较常用的技术，可以使网页看起来更加立体、更有美感。例如：使用CSS3定义渐变的背景、定义不同的文字大小（最小12px，正文正常15px-26px，标题最大50px）、设置元素（div）的宽度和高度和边框（2px）、定义元素的样式，使其显示在正确的位置，这些都是实现网页设计的CSS案例。
3、HTML案例：HTML案例是指使用HTML代码定义网页结构、内容、样式和行为；使用结构元素设计网页，比如表格（table）、列表（List）、图片（img）；使用分组元素设计网页，比如div；使用HTML语义化标签描述网页的内容，比如h1-h6、strong、em等；使用 hyperlinks 设置网页的超链接，比如 a 元素；使用 iframes 框架对网页进行分帧；等等，这些都是将文字等信息放置到HTML文档中实现网页设计的代码案例。
4、JavaScript案例：JavaScript案例是使用JavaScript代码定义网页的行为，实现丰富多彩的动画、响应和交互，如定义变量、使用函数、使用dom操作网页内容、编写脚本进行调用，学习Ajax技术，结合Jquery库实现网页功能，学习JSON格式数据的解析和使用，这些都是实现网页设计的JavaScript代码案例。
5、XML、XSLT案例：XML是一种广义的文档描述标记语言，它由标记、嵌套及特殊的字符串组成，定义树形的结构数据，是描述数据的开放性标准；XSLT是一种文档转换标记语言，能将XML文档转换成其它文档，XSLT有助于实现跨浏览器跨平台、将XML转换成HTML的功能。例如：使用XML和XSLT文件创建一个可以在现有浏览器环境（IE，Firefox，Chrome，Safari）中有效运行的混合Web页面，将XML文件用XSLT文件进行转换，使用JSON数组与XSLT文件交互，这些都是使用XML、XSLT文件实现网页设计的代码案例。
一、 HTML网页设计代码案例
1、用HTML+CSS实现一个响应式网页：
<meta charset=\"utf-8\" />
<style>
/* 让div标签元素的宽度充满页面 */
div {
width: 100%;
}
/* 设置小于768px的移动端样式 */
@media screen and(max-width: 768px) {
.left {
float: left;
width: 50%;
}
.right {
float: left;
width: 50%;
}
}
/* 设置大于768px的桌面端样式 */
@media screen and(min-width: 768px) {
.left {
float: left;
width: 33.33%;
}
.right {
float: left;
width: 66.66%;
}
}
</style>
<body>
左列内容
右列内容
2、用HTML+CSS实现列表：
<meta charset=\"utf-8\" />
<style>
ul {
list-style: none; /*1.取消列表项的默认符号*/
padding: 0px; /*2.清除列表项左侧的缩进项*/
margin: 0px; /*3.取消列表项上方和下方的默认间距*/
}
li {
float: left; /*4.设置li标签元素为左浮动*/
padding: 5px; /*5.控制元素之间的间距*/
}
</style>
<body>
列表项1
列表项2
列表项3
列表项4
二、CSS网页设计代码案例
1、用CSS完成图片轮播：
/* 样式重置，重置HTML元素的默认样式 */
* {
padding: 0;
margin: 0;
}
/* 通用样式设置 */
img {
width: 100%;
border: 0 none;
vertical-align: middle;
}
.slider {
width: 200px;
height: 120px;
position: relative;
overflow: hidden;
}
.pic {
width: 600px;
height: 120px;
position: absolute;
left: 0;
top: 0;
}
.pic img {
float: left;
}
/* 鼠标移入启动定时器，移出清除定时器 */
.slider:hover {
-moz-animation-play-state: paused;
-o-animation-play-state: paused;
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
/* 动画设置 */
.pic {
-moz-animation: marquee 10s linear infinite;
-webkit-animation: marquee 10s linear infinite;
animation: marquee 10s linear infinite;
}
/* 动画时间曲线 */
@keyframes marquee {
0% { transform: translateX(0)}
100% { transform: translateX(-600px)}
}
2、用CSS完成图文混排：
/* 重置样式表 */
* {
padding: 0;
margin: 0;
}
/* 元素浮动 */
img {
float: left;
}
p {
float: left;
}
/* 设置换行 */
.clearfix:after {
content: \".\";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
zoom: 1;
