智能机器人——基于Html5和css3的聊天器界面设计与实现

最新推荐文章于 2025-02-25 15:39:13 发布

AmazingJadeWu

最新推荐文章于 2025-02-25 15:39:13 发布

阅读量1.1w

点赞数 2

分类专栏：前端文章标签： html5 css3 界面设计图灵机器人 Asp.net机器人

本文链接：https://blog.youkuaiyun.com/u013668852/article/details/50612131

版权

本文介绍了一个使用Html5和css3设计的跨平台聊天器界面，该界面灵感来源于聊天应用，并计划集成图灵机器人的API。开发者采用ASP.NET MVC模式进行后台开发，并分享了界面源码和自动滚屏的JavaScript实现。项目已上传至oschina.net，供有兴趣的人士查看和学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

（一）智能机器人——基于Html5和css3的聊天器界面设计

近日打算做一个智能机器人，界面的开发打算采用Html5和css3从而能够让其跨平台运行，界面的设计以聊天器为样本，其服务打算采用图灵机器人的api进行开发，后面再把网页嵌入在各个平台的框架中，实现所谓的跨平台。本人对微软的东西比较上手，呵呵，也许你会嘲笑一番，微软有些东西还是不错的，这次的网站搭建就采用ASP.NET的MVC模式。

这篇文章主要是讨论基于Html的界面设计，之后的相关材料我会放在另外的文章里，也欢迎访问我的博客。

下图是我在Google中模拟iphone4显示的效果，这个界面参考了其他人的源码，当然为了更好的在各种手机和平板中显示我进行了优化，如果有需要可以看下这个模板的来源：

http://www.html5tricks.com/tag/%E8%81%8A%E5%A4%A9%E7%AA%97%E5%8F%A3

好了，下面我上源码：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>基于Html5与css3的聊天界面</title>
  <link rel="stylesheet" href="style.css" media="screen" type="text/css" />
    <meta name="viewport" content="width=device-width,initian-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
</head>
<body>
  <div id="convo">  
	<ul class="chat-thread">
		<li role="me">Are we meeting today?</li>
		<li role="you">
			<div class="food">
				<img src="http://www.sinaimg.cn/dy/slidenews/1_img/2016_04/2841_658254_844711.jpg"/>
				<section>
					<img src="http://www.sinaimg.cn/dy/slidenews/1_img/2016_04/2841_658254_844711.jpg"/>
					<p>大苏打撒大飒飒</p>
					<p>大苏打撒大飒飒撒撒旦飒飒阿斯达克拉都拉多久啊了巨大倒萨大大阿瓦蒂</p>
				</section>
				<section>
					&

最低0.47元/天解锁文章