自己设计一个美观的网页版介绍界面（HBuilder）

根据前三周的学习做了自我介绍和团队介绍的界面，其中的格式和颜色都可以通过代码调整（原谅我的直女审美和瘠薄的知识）

这是第一个界面，点击文字链接即可进入不同的介绍界面（没啥图片好加，一起欣赏下皮卡丘的可爱吧）附上代码：

<html><head><meta charset="utf-8"><title></title></head><style>a:link {color:#55ffff;}      /* 未访问链接*/a:visited {color:#000000;}  /* 已访问链接 */a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */a:active {color:#0000FF;}  /* 鼠标点击时 */.a{text-align:center;font-size:50pt;}img.normal{display: block;width: 50%; margin: 0 auto;height:auto;}img.big{display: block;width: 100%; margin: 0 auto;height:100px;}</style><body><head><meta charset="utf-8"><title></title><link rel="stylesheet" type=" text/css" href="style.css"</head><p class="a"><a href="my1.html">点击查看我的介绍</a></p><p class="a"><a href="my2.html">这是我的团队，还未完善</a></p><img class="normal" src="../images/皮卡丘.jpg" width="70" height="50"><br>   </body>
</html>

这是网页结果截图：

1.点击第一行进入我的介绍（一些信息我就不泄露啦）：

<html><head><meta charset="utf-8"><title></title></head><body><style>h1{color:red;text-align:center;}div{ text-align:center; font-size:15pt;}</style><h1>自我介绍</h1><div><p>姓名：田饶</p><p>性别：女</p><p>学校：</p><p>专业：</p><p>爱好：小说、动漫二次元</p><img src="../images/my2.png" width="200px"><p>上面是我的博客主页，通过之后的学习每周会一点一点完善的,欢迎进来看看，喜欢的话留下一个赞赞再走吧</p><a href="https://blog.csdn.net/AXN567?spm=1001.2100.3001.5343">我的博客主页</a><p><a href="index.html">返回主页</a></p></div></body>
</html>

附上结果：

2. 点击第二个链接就能看到我们的团队啦，成员确定，有了一点点想法，还没完善，将就看看吧：

<html><head><meta charset="utf-8"><title></title></head><body><style>a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */a:active {color:#0000FF;}  /* 鼠标点击时 */h1{color:orange;text-align:center;}.p{text-align:center;font-size:17pt;}#p{text-align:center;font-size:17pt;}.center{text-align:center;}</style><h1>团队名（未定）</h1><p></p><p class="p">团队成员：</p><p class="center">田饶</p><p class="center">张</p><p class="center">胡</p><h1>项目名称（未定）</h1><p id="p"><a href="my3.html">详情请看项目介绍</a></p><p class="center"><a href="index.html">返回主页</a></p></body>
</html>

例常打码：

3.详细介绍是从创新、创意、创业点三个方面来的，只有大概的框架，实在没经验想不出太多了。

<html><head><meta charset="utf-8"><title></title></head><body><style>a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */a:active {color:#0000FF;}  /* 鼠标点击时 */h1{color:black;text-align:center;}.center{text-align:center;font-size:17pt;}</style><div id="container" style="width:500px"><div id="header" style="background-color:#ffffff;"><h1 style="margin-bottom:0;">项目介绍</h1></div><div id="menu" style="background-color:#ffaaff;height:700px;width:50px;float:left;"><b></b><br>创新<br><p> <br>   </p><p><br>    </p><p><br>    </p><p>创意<br></p><p><br> </p> <p><br> </p><p><br> </p><p><br> </p><p><br> </p><p><br> </p>创业</div><div id="content" style="background-color:#00ffff;height:700px;width:450px;float:left;"><p>现如今</p><p>知识。</p><p>1.主要</p></div><p class="center"><a href="index.html">返回主页</a></p></body>
</html>

具体就不发出来啦，其中的代码</p><p><br>是因为具体内容太长容易窜位我也不知道咋改就加上的，肯定还有其他没这么冗余的办法，我学艺不精只能这样啦：

以上几个几乎涵盖了所有学到的知识点，除了类似“浮动”这样的功能我不知道怎样设计就没加进去，还有外部样式表因为不太熟练也因为显示不明确就没用，颜色也是我随便选的，可以任意改动。

新的一周学到了新的知识，暂时还没好好运用起来，会持续更新的！
如果喜欢的话留下脚印吧mua

自己设计一个美观的网页版介绍界面（HBuilder）相关推荐

PS经典教程：从零开始设计一个漂亮的网页
你是否曾经想过设计一个漂亮的网页,但是却不知道怎样入手?说实话,几年前我也是这样.当我浏览网页的时候我看到这么多好看的网页,我就希望自己有技术创作这样的设计作品. 今天我可以这么做了,而且我将教你怎么 ...
从零开始设计一个漂亮的网页（译）
译者:Joe 译文来源:http://xiebiji.com/2009/09/design_a_beautiful_website/ 原文来自:Design a Beautiful Website F ...
如何做一个简单的网页版地图
前言以前做了一个安卓版的地图应用,现在突然想做一个简单的网页版地图.这个简单的网页版地图能根据城市名进行位置查询(有个城市列表的小控件,支持城市列表选择),还能根据经纬度进行位置查询.当你进行城市搜 ...
如何去设计一个自适应的网页设计或HTMl5
如何去设计一个自适应的网页设计或HTMl5 如今移动互联网随着3G的普及,越来越火爆,更多需求跟随而来!APP应用市场和APP应用数量成倍成倍的增长!从而给移动互联网带来新的挑战! 移动设备正超过桌面 ...
如何设计一个简单的网页
设计一个简单的网页 1.按住文件新建文本(Ctrl+N),设计一个网页标题,点击创建 2.在<body>内部加入所需要的标签如图中需要标题标签,水平线标签,段落标签 3.保存(Ctrl+ ...
用WeRoBot和Python编写一个不使用网页版微信且能够回复消息微信群聊机器人
要用 WeRoBot 和 Python 编写一个不使用网页版微信且能够回复消息的微信群聊机器人,您需要以下步骤: 安装 WeRoBot 和相关依赖: pipinstall werobot 创建一个 P ...
设计一个简单的网页计算器
设计一个简单的网页计算器一.代码 <!DOCTYPE html> <html> <head><meta charset="UTF-8"& ...
用WeRoBot和Python编写一个不使用网页版微信的微信群聊机器人
要使用 WeRoBot 和 Python 编写一个不使用网页版微信的微信群聊机器人,您需要执行以下步骤: 安装 WeRoBot 库: pipinstall WeRoBot 创建一个 Python 脚本 ...
Java毕业作品设计：音乐管理系统(网页版)
音乐管理系统[网页版]功能目录系统登录用户注册首页功能展示管理全部歌曲搜索歌曲添加歌曲更新歌曲信息删除歌曲查看用户信息更新用户信息系统登录该音乐管理系统和其他平台相同,必须使用 ...

自己设计一个美观的网页版介绍界面（HBuilder）

自己设计一个美观的网页版介绍界面（HBuilder）相关推荐

最新文章

热门文章