根据前三周的学习做了自我介绍和团队介绍的界面,其中的格式和颜色都可以通过代码调整(原谅我的直女审美和瘠薄的知识)
- 这是第一个界面,点击文字链接即可进入不同的介绍界面(没啥图片好加,一起欣赏下皮卡丘的可爱吧)附上代码:
<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/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)
发布评论