简单个人网页制作 大学生网页设计作业 静态HTML个人博客主页 DW个人网站模板下载 大学生简单个人网页作品代码

作品介绍

知识点应用

背景音乐、背景图片、留言表单、鼠标经过

作品简介绍

学生个人博客主页网页成品由DIV CSS制作,代码简单。模板下载后要把个人介绍及对应图片进行替换,修改方法比较简单,直接参考帮助中心即可。作品首页嵌入了背景音乐,使用CSS制作了背景图,制作了导航鼠标经过效果,有留言表单页面。适合学生个人主页、个人博客、简单个人网站使用。

网页演示

网页首页演示

以下为网页作品首页截图,更多页面效果可查看作品原网页
静态网页效果展示

源码文件展示

简单个人网页制作

网页代码预览

代码说明:为保障作品的原创性,以下仅展示首页部分代码供参考:

<div class="title">我的个人主页</div>
    <div class="menu">
    <ul>
    <li><a href="index.html"><b>个人主页</b></a></li>
    <li><a href="jieshao.html">个人介绍</a></li>
    <li><a href="zuopin.html">我的作品</a></li>
    <li><a href="jineng.html">个人技能</a></li>
	<li><a href="liuyan.html">在线留言</a></li>
    </ul>
	</div>
    <div class="left">
    <p><img src="img/tx.jpg" width="200"></p></div>
    <div class="right">
	<p>姓名:蜡笔小新<br>籍贯:日本<br>电话:********<br>邮箱:********<br>
	本科专业与新媒体相关,经过学习与探索后,已掌握写作,营销,平面设计、图像拍摄剪辑等多项技能。<br>除了技术,本人同时注重自身职业素养的培养。因为要做好新媒体,考验的正是沟通协作与资源整合的能力。<br>如今,大众行为都已迁至线上,新媒体必创造更多价值,我愿为此努力.</p>
	</div>

作品修改

作品下载后可使用任意HTML编辑软件(例如:DW、HBuilder、NotePAD等软件)编辑修改为个人信息。

作品地址

网页作品下载https://www.stu-works.com/html/geren/286.html

  • 35
    点赞
  • 218
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个简单HTML+CSS 代码示例,用于制作“银杏美食一条街”的静态网页: ``` <!DOCTYPE html> <html> <head> <title>银杏美食一条街</title> <style> body { background-color: #f2f2f2; font-family: Arial, sans-serif; } header { background-color: #ffc107; color: white; padding: 20px; text-align: center; font-size: 32px; font-weight: bold; } nav { background-color: #333; color: white; padding: 10px; } nav ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; } nav li { float: left; } nav a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } nav a:hover { background-color: #ddd; color: black; } section { float: left; width: 70%; padding: 20px; margin-left: 10%; background-color: white; } aside { float: left; width: 20%; padding: 20px; background-color: #f2f2f2; } footer { clear: both; background-color: #333; color: white; padding: 10px; text-align: center; } h1 { font-size: 28px; margin-top: 0; } h2 { font-size: 24px; margin-top: 0; } p { font-size: 16px; line-height: 1.5; } img { max-width: 100%; height: auto; margin-bottom: 10px; } </style> </head> <body> <header>银杏美食一条街</header> <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">美食推荐</a></li> <li><a href="#">特色小吃</a></li> <li><a href="#">美食攻略</a></li> <li><a href="#">联系我们</a></li> </ul> </nav> <section> <h1>欢迎来到银杏美食一条街</h1> <p>银杏美食一条街位于广州市越秀区,是一个集合了各种美食的街区。这里有广州特色小吃,也有来自各地的美食佳肴。</p> <h2>美食推荐</h2> <p>以下是我们为您推荐的几款美食:</p> <ul> <li>广州煲仔饭</li> <li>潮汕牛肉火锅</li> <li>四川麻辣烫</li> <li>重庆小面</li> </ul> <h2>特色小吃</h2> <p>以下是我们推荐的几种特色小吃:</p> <ul> <li>广东肠粉</li> <li>广州早茶</li> <li>湖南米粉</li> <li>江苏糖醋排骨</li> </ul> </section> <aside> <h2>联系我们</h2> <p>地址:广州市越秀区xxx路xxx号</p> <p>电话:xxx-xxxx-xxxx</p> <img src="https://www.example.com/images/map.png" alt="地图"> </aside> <footer>版权所有 © 银杏美食一条街</footer> </body> </html> ``` 上述代码包含了一个简单的网页布局,包括了一个页眉、导航菜单、内容区域、侧边栏和页脚。可以根据需要自行修改样式和内容。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值