【网页设计】实验报告

最新推荐文章于 2024-10-16 11:23:07 发布
最新推荐文章于 2024-10-16 11:23:07 发布
阅读量180 收藏
点赞数 4
分类专栏： 网页设计 文章标签： 前端 javascript 开发语言 css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_64077978/article/details/140474168
版权

 金朝阳集团

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{padding:0;margin:0;list-style:none;}
.all{width:903px;height:643px;margin:20px auto;font-family:"微软雅黑";}
.header{background:url(%E5%AE%9E%E9%AA%8C%E6%8A%A5%E5%91%8A-images/2.png) no-repeat left 0;clear:both;height:74px;border-bottom:10px solid #000;}
li{width:94px;float:right;font-size:16px;text-align:center;margin-top:30px;font-weight:bold;}
.one{border-right:1px solid #000;}
.content{height:130px;}
.left{float:left;}
.right{float:right;margin-top:8px;}
p{font-size:14px;margin-bottom:10px;}
.footer{width:903px;height:36px;background:#013300;text-align:center;padding-top:18px;color:#FFF;font-size:12px;}
</style>
</head>

<body>
<div class="all">
	<div class="header">
    	<ul>
    		<li>关于我们</li>
            <li class="one">在线订单</li>
            <li class="one">服务网站</li> 
            <li class="one">产品中心</li>
            <li class="one">公司简介</li>
            <li class="one">首页</li>
    	</ul>
    </div>
    <div class="banner"><img src="实验报告-images/1.png" /></div>
    <div class="content">
    	<div class="left"><img src="实验报告-images/3.png" /></div>
    	<div class="right">
        	<p><img src="实验报告-images/4.png" /></p>
            <p>金朝阳( 00878)全年赚17.3亿元升64%,派息0.1元_港股通</p>
            <p>金朝阳陶瓷2011年忧秀经销商年会盛大召开</p> 
            <p>关于金朝阳360三维展厅展示软件重新下载的通知</p>   
        </div>
    </div>
    <div class="footer">版权所有：@金朝阳集团有限公司</div>
</div>
</body>
</html>

 页面导航

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{padding:0;margin:0;list-style:none;}
.one,.four{width:570px;height:130px;margin:0 auto;}
.two li,.three li{margin-bottom:10px;color:#4A5F4D;width:230px;height:24px;padding-top:8px;padding-left:5px;font-size:14px;}
.t{background:url(%E5%AE%9E%E9%AA%8C%E6%8A%A5%E5%91%8Aimages/1.1-1.png);}
.w{background:url(%E5%AE%9E%E9%AA%8C%E6%8A%A5%E5%91%8Aimages/1.1-2.png);}
.o{background:url(%E5%AE%9E%E9%AA%8C%E6%8A%A5%E5%91%8Aimages/1.1-3.png);}
.two{float:left;}
.three{float:right;}
.three li{float:left;width:90px;}
.five{padding-left:100px;}
.six{padding-left:180px;}
</style>
</head>

<body>
<div class="one">
	<ul class="two">
    	<li class="t">班级首页</li>
        <li class="w">班级日志</li>
        <li class="o">个人风采</li>
    </ul>
	<ul class="three">
    	<li class="t">班级首页</li>
        <li class="w">班级日志</li>
        <li class="o">个人风采</li>          
	</ul>
</div>	
   <div class="four">
   		<c class="five">页面垂直导航</c>
   		<c class="six">页面水平导航</c>
   </div>
</body>
</html>

ul-li

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{padding:0;margin:0;list-style:none;}
ul{float:left;margin-left:20px;}
p{margin-bottom:30px;font-size:14px;text-align:center;}
a:hover{color:#F0F;}
</style>
</head>

<body>
<div>
	<ul>
    	<li><img src="实验报告images/海底.png"/><p><a href="#">海底</a></p></li>
        <li><img src="实验报告images/花朵.png"/><p><a href="#">花朵</a></p></li>
        <li><img src="实验报告images/沙漠.png" /><p><a href="#">沙漠</a></p></li>      
    </ul>
	<ul>
    	<li><img src="实验报告images/花园.png" /><p><a href="#">花园</a></p></li>
        <li><img src="实验报告images/波浪.png" /><p><a href="#">波浪</a></p></li>
        <li><img src="实验报告images/海港.png" /><p><a href="#">海港</a></p></li>
        
    </ul>
	<ul>
    	<li><img src="实验报告images/雪域.png" /><p><a href="#">雪域</a></p></li>
        <li><img src="实验报告images/别墅.png" /><p><a href="#">别墅</a></p></li>
        <li><img src="实验报告images/原野.png" /><p><a href="#">原野</a></p></li>
    </ul>
    	<ul>
    	<li><img src="实验报告images/菠萝.png" /><p><a href="#">菠萝</a></p></li>
        <li><img src="实验报告images/草坪.png"/><p><a href="#">草坪</a></p></li>
        <li><img src="实验报告images/大道.png" /><p>大道</p></li>
    </ul>
</div>
</body>
</html>

 佳能

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{padding:0;margin:0;}
table{width:720px;height:780px;font-size:17px;border-collapse:collapse;}
td{padding-left:5px;border:2px solid #F90;}
h1,h2{font-size:14px;color:#8B2E00;margin-top:5px;margin-bottom:5px;}
h2{margin-bottom:20px;}
.three{background:#FFCC66;}
.four{background:#FEFF99;}
.four p{margin-top:5px;}
p{margin-bottom:10px;}
.one{float:left;width:80px;text-align:center;color:#757575;}
.two{float:right;width:629px;}
</style>
</head>

<body>
<table>
	<tr>
    	<td><img src="实验报告images/佳能.png" /></td>
    	<td class="four">
        	<h2>产品名称:佳能 IXUS 130</h2>
        	<p>佳能IXUS130(官方标配)</p>
            <p>松下原装SD卡2G(高速正品)</p>
            <p>佳能IXUS系列专用皮包</p>
            <p>索尼2.7英寸LCD保护贴(防刮/高透光/静电吸附)</p>
            <p>摄影指南</p>        
        </td>
    </tr>
	<tr>
    	<td colspan="2" class="three"><h1>主要参数</h1></td>
    </tr>
    <tr>
    	<td colspan="2" >
        <div class="one">
        <p>型&nbsp;&nbsp;&nbsp;&nbsp;号</p>
            <p>内存容量</p>
            <p>屏幕尺寸</p>
            <p>屏幕特性</p>
            <p>视频功能</p>
        </div>
        <div class="two">
        	<p>:PMP169B</p>
            <p>:512M</p>
            <p>:2.12英寸〔最佳视觉比列16:9的宽屏）</p>
            <p>:LTPS TFT (720x240)</p>
            <p>:支持ASF格式的MPG4,或通过软件转换成ASF播放,播放效果:320×420,30fps/视频输出,输入/电视节目定时录制。</p>
        </div>	
		</td>
    <tr>
    	<td colspan="2" class="three"><h1>功能参数</h1></td>
    </tr>
	<tr>      
    	<td  colspan="2"> 
        <div class="one">     
        	<p>音频功能</p>
            <p>录音格式</p>
            <p>附加功能</p>
        </div>
        <div class="two">
               	<p>:支持音频格式:MP3,WMA,WAV/内置麦克风,支持LINEIN寻录/收音功能/内置喇叭。</p>
            <p>:44.1KHz，128 Kbps，MP3，支持MIC/LINE-IN直录</p>
            <p>:支持图片格式:JPEG 《EXIF2.1)/电子书浏览/多语言(中/英)设置.其它参数</p>
        </div>
		</td>
    <tr>
    	<td colspan="2" class="three"><h1>其它参数</h1></td>
    </tr>   
    <tr>
    	<td  colspan="2"> 
        <div class="one"> 
        	<p>接&nbsp;&nbsp;口</p> 
        	<p>扩展卡</p>
        	<p>电&nbsp;&nbsp;池</p>
            <p>尺&nbsp;&nbsp;寸</p>  
            <p>重&nbsp;&nbsp;量</p>       
		</div>
        <div class="two">
        	<p>:USB接口,AV OUT接口,AV IN接</p>
            <p>:可扩充2G SD,MMC卡</p>
            <p>:内置锂电池</p>
            <p>:105.2 x47.6x15.6mm</p> 
            <p>:90g</p> 
        </div>
        </td>
    </tr>	   
</table>
</body>
</html>

唐诗

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>唐诗</title>
<style type="text/css">
.all{width:700px;height:800px;margin-left:400px;}
h1{color:#F00;text-align:center;letter-spacing:15px;margin-left-width:200px auto;}
h2{color:#000;font-family:"楷体";font-size:15px;text-align:center;line-height:30px;}
p{font-family:"微软雅黑";font-size:20px;color:#F00;letter-spacing:16px;text-align:center;line-height:30px;}
h3{color:#000;font-family:"楷体";font-size:15px;line-height:30px;letter-spacing:10px;}
</style>
</head>

<body>
<div class="all">
<h1>早发白帝城</h1>
<h2>李白</h2>
<p>朝辞白帝彩云间，千里江陵一日还。</p>
<p>两岸猿声啼不住，轻舟已过万重山。</p>
<h3>【简析】&nbsp;诗是写景的。唐肃宗乾元二年（759），诗人流放夜郎，行至白帝遇赦，乘舟东还江陵时而作此诗。诗意在描摹自白帝至江陵一段长江，水急流速，舟行若飞的情况。首句写白帝城之高;二句写江陵路遥，舟行迅速:三句以山影猿声烘托行舟飞进，四句写行舟轻如无物，点明水势如泻。全诗锋棱挺拔，一泻直下，快船快意，令人神远。难怪乎明人杨慎赞日:“惊风雨而泣鬼神矣!”</h3></div>
</body>
</html>

 

pitytheriver
关注
专栏目录
Java个人网页设计实验报告_web实验报告.doc
weixin_35654499的博客
02-27 2798
web实验报告课案中国矿业大学计算机学院2012 级本科生课程报告课程名称 Web技术学生姓名 周鹏学 号专 业 计科 13-5班任课教师 赵莹报告时间 2015.11.12任课教师评语实验成果评价评价项目评分标准评价对课程的基础理论掌握很好地掌握了本课程的基础理论较好地掌握了本课程的基础理论一般地掌握了本课程的基础理论基础理论...
html网页表单设计实验报告,网页设计实验报告（学生）.doc
weixin_39915078的博客
06-08 4607
网页设计实验报告(学生)实 验 报 告2011 至 2012 学年度第 一 学期课程名称： 网 页 设 计系别班级： 10 数 本学 号：姓 名： 陶 士 林授课老师： 丁 邦 旭指导老师： 丁 邦 旭目 录实验项目一： 创建站点和管理站点实验项目二： 在网页中建立各种超链接实验...
html网页设计实验原理,网页设计实验报告
weixin_29290259的博客
06-02 2834
网页设计实验报告一、实验目的`及要求本实例是通过“站点定义为”对话框中的“高级”选项卡创建一个新站点。二、仪器用具1、生均一台多媒体电脑，组建内部局域网，并且接入国际互联网。2、安装windows xp操作系统;建立iis服务器环境，支持asp。3、安装网页三剑客(dreamweaver mx;flash mx;fireworks mx)等网页设计软件;三、实验原理通过“站点定义为”对话框中的“高...
中华菜系网页设计实验报告
安卓精品项目源码
07-03 648
中华菜系网页设计实验报告
html简单页面实验报告原理,html网页设计实验报告
weixin_42469243的博客
06-02 4767
1、学 生 实 验 报 告实 验 课 名 称 ： web 应 用 开 发 技 术实 验 项 目 名 称 ： 静 态 网 页 制 作专 业 名 称：计算机科学与技术班 级：学 号： 学 生 姓 名： 教 师 姓 名： 2011 年 3 月 29 日一、 实验名称：静态网页制作二、 实验目的与要求：1掌握 Dreamweaver 软件的使用。2掌握 html 语言中的表格和框架等的使用。3掌握 web...
html实验原理及目的,网页设计实验报告_图文
weixin_35901163的博客
05-31 3806
网页设计实验报告_图文更新时间：2017/2/12 11:45:00浏览量：1270手机版JIANGXI AGRICULTURAL UNIVERSITY本 科 课 程 报 告题目： 网页制作实验报告学 院： 软件学院 姓 名： 徐潇 学 号： 20101506 专 业： 软件工程 班 级： 软件1002班 指导教师： 唐建军、胡昶二0一一年...
大学计算机网页实验报告,大学计算机基础网页制作实验报告.doc
weixin_36269334的博客
07-26 748
大学计算机基础网页制作实验报告,网页制作实验报告,计算机基础实验报告,计算机网络实验报告,计算机图形学实验报告,计算机实验报告,计算机会计实验报告,计算机组装实验报告,计算机实验报告模板,计算机审计实验报告大学计算机基础网页制作实验报告2010/12/17目录一．实验目的：3二．实验内容：3三．实验地点：3四．实验小组成员3五．实验中遇到的问题及解决方案4六．实验成果截图展示4七．实验感想6组员1...
html基础实验的实验原理,html网页设计实验报告.doc
weixin_42510026的博客
05-30 1440
html网页设计实验报告.doc学 生 实 验 报 告实 验 课 名 称 web 应 用 开 发 技 术实 验 项 目 名 称 静 态 网 页 制 作专 业 名 称计算机科学与技术班 级学 号 学 生 姓 名 教 师 姓 名 2011 年 3 月 29 日一、 实验名称静态网页制作二、 实验目的与要求1掌握 Dreamweaver 软件的使用。2掌握 html 语言中的表格和框架等的使用。3掌...
html网页表单设计实验报告,Html设计实验报告.doc
weixin_29821223的博客
06-08 2740
Html设计实验报告《网页设计》实验报告(2010—2011学年第二学期)班 级：姓 名：学 号：指导老师：实验一 认识Dreamweaver CS3一、实验目的1、熟悉Dreamweaver CS3环境。2、了解HTML文件结构。二、实验环境计算机三、实验内容创建站点有两种方式：使用向导地进行设置，或者通过在管理站点中设置高级选项卡信息来创建。无论哪种方式，都要事先在本地磁盘...
网页设计实验报告三之使用jQuery
dw将限制条件全部检测通过后才能提交表单
11-26 1433
网页设计实验报告三之使用jQuery 1.改变第二P的字体大小，变为18px，蓝色，斜体 我之前是写法如下，但是不知道为什么不能添加上样式 $("p:eq(2)").css({"font-size":"18px","color":"blue", "font-style":"italic"}); 后来发现:eq()的下标index是从0开始的，改成如下代码就好 $("p:eq(1)").css({"font-size":"18px","color":"blue", "font-style
Web网页设计实验报告.doc
12-11
Web网页设计实验报告 一、设计目的 在Internet飞速发展的今天，互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。因此网站建设在Internet应用上的地位...
网页设计实验报告
06-04
这份"网页设计实验报告"可能详细记录了一个学生或专业人士在实践中学习和探索网页设计的过程，包括理论知识、工具应用、用户体验设计以及前端开发技术等多方面的内容。 在网页设计中，首先涉及到的是布局设计，这...
网页设计实验报告及代码.doc
01-08
【网页设计实验报告及代码】涉及的知识点涵盖了网页设计的基础理论、技术应用和开发实践。以下是对这些知识点的详细说明： 1. **网站功能与技术发展**：随着Web技术的进步，动态网站设计变得越来越重要，这包括交互...
网页设计实验报告要求.pdf
10-11
网页设计实验报告要求.pdf 本实验报告涵盖了网页设计的各个方面，包括 HTML、CSS、Dreamweaver、文本修饰与超链接、CSS应用、图像应用、多媒体应用、页面布局、表单应用等。通过实验一到实验八，学生将掌握网页设计...
004-按照指定功能模块名称分组
最新发布
xiaogang1226的博客
10-16 348
需要把一个功能模块的几个功能点放在同一个文档目录下，这几个功能点分布在不同的 Controller。需要把他们单独分组，方便前端对接。在@ApiOperation 里面增加属性 tags 赋值。
前端开发攻略---8种方法实现在浏览器中跨页面通信
nibabaoo的博客
10-15 1230
浏览器实现跨标签页通信的多种方式
前端地图数据开发
shuxiaoxii的博客
10-13 341
基于Turf.js教你快速实现地理围栏的合并拆分。turf js 地理空间分析库，处理各种地图算法。如何拆分一个乡镇或区的地图。获取市级的行政区域划分。直接导入地图的json。高德地图查看市级区域。js实现地图区域合并。
Element-plus el-form、el-dialog 数据回显同时用时，重置失效问题
Mr. Zhang Xiaojian's Blog
10-12 572
当第一次打开网页并点击“编辑”按钮时，虽然对话框变量变为 true 使对话框可见，但同步代码会将 formData 对象的属性设置为默认值。由于 Vue 的异步更新机制，DOM 实际上还未更新，因此表单组件内绑定了这些有值的初始数据。这样，在后续调用 resetFields 方法时，表单将会重置为这些默认值而不是空值。编辑时表单的初始值被设置成了回显的数据，而不是空字符串。时，表单会回到上次设置的初始值，即回显的数据。
基于monaco-editor的web日志组件
暗影刀客的博客
10-12 338
一个基于monaco-editor的web日志组件，支持灵活的扩展配置，支持vue和react
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值