10、截图:
第四章
一、第四章所学内容知识点:
在第四章中,我们主要学习了网页中列表的制作,包括有序列表,无序列表,列表嵌套以及自定义列表等;
二、 第四章实验:
实验4-1源代码:
16、dy>
apple网站
17、body>
实验5-1运行截图:
实验5-2源代码:
桂林山水风景图片
桂林山水风景图片
实验5-2运截图:
第六章
一、第六章所学内容知识点:
在第一章中,我们主要学习了怎样在网页插入图像和音乐,视频等多媒体,滚20、动文字,背景音乐使得网页更加炫酷了一点呢。
二、 第六章实验:
实验6-1原代码:
图像对齐方式应用
图像对齐方式应用
未设置对齐方式的图像:
PNG,图像文件存储格式,
21、其目的是试图(原来此处使用了"企图")替代GIF和TIFF文件格式,同时增加一些GIF文件格式所不具备的特性。
已设置对齐方式的图像:
PNG使用了从LZ77派生的一个非专利无失真式压缩算法(名为deflation)。
这个算法对图像里的直线进行预测然后存储颜色差值,这使得PNG经常能获得比原始图像甚至比GIF更大的压缩率。但也有一些软件不能使用适合的预测而造成过分臃肿的PNG文件。
PNG使用了从LZ77派生的一个非专利无失真式压
22、缩算法(名为deflation)。
这个算法对图像里的直线进行预测然后存储颜色差值,这使得PNG经常能获得比原始图像甚至比GIF更大的压缩率。但也有一些软件不能使用适合的预测而造成过分臃肿的PNG文件。
PNG使用了从LZ77派生的一个非专利无失真式压缩算法(名为deflation)。这个算法对图像里的直线进行预测然后存储颜色差值,这使得PNG经常能获得比原始图像甚至比GIF更大的压缩率。但也有一些软
23、件不能使用适合的预测而造成过分臃肿的PNG文件。
实验6-1运行截图:
实验6-2源代码:
图像画廊
早发白帝城
李白
朝辞白帝彩云间,
千里江陵一日还。
两岸猿声啼不住,
轻舟已过万重山。
实验7-1截图:
实验7-2源代码:
28、>
Web前端开发工程师工作内容
Web前端开发工程师工作内容
web前端工程师在不同的公司,会有不同的职能,但称呼都是类似。
- 做网站设计、网页界面开发
- 做网页界面开发
- 做网页界面开发、前台数据绑定和前台逻辑的处理
- 设计、开发、数据处理
实验7-2运行结果:
第八章
一、第八章所学内容知识点:
在第八章中,我们主要学习了DIV的定义已经简单使用,DIV的嵌套以及DIV的层叠,另外捎带学习了span标签的用法;
二、第八章实验:
实验8-1源代码:
31、
新闻
·2013
央视综艺节目发力 彰显公益大爱
32、>
·继北京、上海后,2013年腾讯视频推介会昨又在广州隆重举行
·“跨界融合 开放共赢”移动互联网营销峰会
·首届“联建杯”户外LED显示屏媒体大赛评审圆满落幕
外部CSS文件代码:
#d1{
width:600px;
height:360px;
33、 background-color:Lime;
}
#d2{
font-family:"幼圆";
font-size:20px;
}
.b{
font-weight:bold;
text-decoration:underline;
color:red;
}
.it{font-style:italic;font-size:24px;font-weight:bold;}
实验8-1运行结果:
实验8-2源代码:
匾牌设计
实验8-2运行结果:
第九章
一、第九章所学内容知识点:
在第一章中,我们主要学习了CSS样式属性,包括CSS的字体样式,文本样式,CSS的颜色和背景,CSS列表样式以及CSS的盒模型;网页中各种效果很多都是由CSS来控制的。
二、第九章实验截图:
实验9-1源代码:
Head Line
36、
Head Line
Mobile Widget使用的标准的Web技术,如HTML,CSS,javascript等。这些经典的Web技术规范是由W3C(万维网联盟)的下属各个工作组制定并推进的。作为开发Widget之前的知识准备,在本章中我们将逐一介绍
38、这些技术。
实验9-1截图
第十章
一、第十章所学内容知识点:
在第十章中,我们主要学习了DIV+CSS岁对页面进行整体的布局。以及简答的一级导水平导航条和二级水平导航条的设计;
二、 第十章实验截图:
实验10-1源代码:
Web页面设计实例
<39、link href="css/mycss.css" rel="stylesheet" type="text/css" />
欢度新春佳节
42、
mycss.css文件
body {
font-family:Verdana;
font-size:16px;
margin:0;
text-align:center; /*整个页面居中显示*/
}
p{
margin:2px; font-size:14px;
}
#Container {
margin:0 auto;
width:900px;
}
#Header {
height:118px;
border-bottom:5px;
background-color:
43、rgb(230,230,230);
border-bottom:5px solid #FFFFFF;
}
#PageBody {
height:380px;
border-bottom:5px solid #FFFFFF;
}
#SideBar {
float:left;
width:200px;
height:380px;
background:#Dff100;
text-align:center;
padding:50px auto;
border-right:5px solid #FFFFFF;
}
#Mai
44、nBody {
float:right;
width:695px;
height:380px;
background:#cff000;
}
#Footer {
height:60px;
background-color:rgb(230,230,230);
text-align:center;
font-family:"Courier New";
font-size:12px;
padding-top:10px;
}
img{
float:left;
}
span{
width:50px;height:30px;
f
45、ont-size:20px;
font-family:"华文新魏";
}
#Header span{padding-top:40px;}
a{ width:48px;height:24px;
font-size:20px;
font-family:"华文新魏";
}
ul{list-style-type:none;margin:0px;padding:0px;}
li{ width:50px;height:30px;
font-size:20px;
font-family:"华文新魏";
padding:10px 10px;
}
h3{text-
46、align:center;color:red;font-size:24px;
background:#CFF000;padding:6px auto;}
a:link,a:visited,a:hover,a:active{text-decoration:none;display:block; }
a:hover{border-bottom:2px solid #FF0000;
background:#55A0FF;color:#FFFFFF;}
实验10-1运行结果:
实验10-2源代码;
<
47、html lang="en">
DIV+CSS布局