👨🎓网页题目
🧑个人网页设计、🙋♂️个人简历制作、👨💼简单静态HTML个人网页作品、👨🏭个人介绍网站模板 、等网站的设计与制作。
✍️网页描述
⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。
🌐网页效果
🔧 代码实现
🧱HTML结构代码
<html >
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>开心营业♡ </title>
<meta name="keywords" content="">
<meta name="description" content="">
<embed src="images/夜的钢琴曲.mp3" hidden="true">
<link href="css/default.css" rel="stylesheet" type="text/css" media="screen">
<script src="js/common.js"></script>
<link rel="stylesheet" href="css/swiper.min.css">
</head>
<body>
<div id="header">
<div id="logo">
<h1><a href="#"> 开心营业♡ </a></h1>
</div>
<div id="menu">
<ul>
<li class="active"><a href="" accesskey="1" title="">首页</a></li>
<li><a href="about.html" accesskey="4" title="">关于我</a></li>
<li><a href="school.html" accesskey="2" title="">我的学校</a></li>
<li><a href="class.html" accesskey="3" title="">我的专业</a></li>
<li><a href="jiaxiang.html" accesskey="5" title="">我的家乡</a></li>
<li><a href="msg.html" accesskey="6" title="">留言板</a></li>
<div class="clear"></div>
</ul>
</div>
</div>
<div id="gallery">
<div id="top-photo">
<div class="swiper-container banner_slide">
<div class="swiper-wrapper">
<div class="swiper-slide banner_slide" style="background: url(picture/image007.jpg) center no-repeat; background-size: cover; "> </div>
<div class="swiper-slide banner_slide" style="background: url(picture/image009.jpg) center no-repeat; background-size: cover; "> </div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
</div>
<div id="page">
<div id="content">
<div class="post">
<h1 class="title">青春寄语</h1>
<p class="byline"><small>1. 对的，<label style="color:#FFEA6F">坚持</label>;错的，放弃! </small></p>
<p class="byline"><small>2. 即使光环已不再也不要放弃你的<label style="color:#FFEA6F">梦想</label>。 </small></p>
<p class="byline"><small>3. 等待<label style="color:#FFEA6F">机会</label>，是一种十分笨拙的行为。 </small></p>
<p class="byline"><small>4. 成功者绝不放弃，放弃者绝不会<label style="color:#FFEA6F">成功</label>。 </small></p>
<p class="byline"><small>5. 当有人说你是<label style="color:#FFEA6F">傻瓜</label>时，证明你离成功不远了。
</small></p>
<p class="byline"><small>6. 理想的路总是为有<label style="color:#FFEA6F">信心</label>的人预备着。 </small></p>
<p class="byline"><small>7. 抱最大的<label style="color:#FFEA6F">希望</label>，为最大的努力，做最坏的打算。 </small></p>
<p class="byline"><small>8. 有些事情本身我们无法控制，只好<label style="color:#FFEA6F">控制</label>自己。 </small></p>
<p class="byline"><small>9. 自己要先<label style="color:#FFEA6F">看得起</label>自己，别人才会看得起你。 </small></p>
<p class="byline"><small>10. 生命太过<label style="color:#FFEA6F">短暂</label>，今天放弃了明天不一定能得到。 </small></p>
</div>
</div>
<!-- start sidebar -->
<div id="sidebar">
<ul>
<li>
<h2>我喜爱的作者</h2>
<ul>
<li><a href="#">张爱玲</a> (23)</li>
<li><a href="#">王小波</a> (31)</li>
<li><a href="#">沈复</a> (31)</li>
<li><a href="#">东野圭吾</a> (30)</li>
<li><a href="#">村上春树</a> (31)</li>
<li><a href="#">太宰治</a> (30)</li>
<li><a href="#">苏利·普吕多姆</a> (31)</li>
<li><a href="#">安东尼·伯吉斯</a> (28)</li>
<li><a href="#">雅克·巴尔赞</a> (31)</li>
<li><a href="#">卡勒德·胡赛尼</a> (31)</li>
</ul>
</li>
</ul>
</div>
</div>
<div style="clear: both; height: 30px"> </div>
<div id="footer">
<p>©2007 All Rights Reserved. • Designed by <a href="javascript:;">Free CSS Templates</a></p>
</div>
</body>
</html>
🎁更多干货
1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！
2.💗【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！
3.
以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻🔥
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
