1.网页效果图
2，网站首页代码：
<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></head><body style="">
<title>开心营业♡ </title>
<meta name="keywords" content="">
<meta name="description" content="">
<link href="css/default.css" rel="stylesheet" type="text/css" media="screen">
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/common.js"></script>
<link rel="stylesheet" href="css/swiper.min.css">
<style>
.banner_slide {
width: 100%;
height: 300px;
}
#audio {
position: fixed;
left: 0;
top: 0;
z-index: 888
}
</style>
<!-- start header -->
<div id="header">
<div id="logo" style="height: 144.5px;">
<h1><a href="index.html#"> 我的个人空间♡ </a></h1>
</div>
<div id="menu">
<ul>
<li class="active"><a href="index.html" 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>
<!-- end header -->
<div id="gallery">
<div id="top-photo">
<!--banner-->
<div class="swiper-container banner_slide swiper-container-horizontal">
<div class="swiper-wrapper" style="transition-duration: 0ms; transform: translate3d(-830px, 0px, 0px);">
<div class="swiper-slide banner_slide swiper-slide-prev" style="background: url("images/image007.jpg") center center / cover no-repeat; width: 830px;">
</div>
<div class="swiper-slide banner_slide swiper-slide-active" style="background: url("images/image009.jpg") center center / cover no-repeat; width: 830px;"> </div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination swiper-pagination-bullets"><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet swiper-pagination-bullet-active"></span></div>
<span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span></div>
<!--banner end-->
</div>
</div>
<!-- start page -->
<div id="page">
<!-- start content -->
<div id="content">
<div class="post">
<h1 class="title">青春寄语</h1>
<p class="byline"><span>1. 对的，<label style="color:#FFEA6F">坚持</label>;错的，放弃! </span></p>
<p class="byline"><span>2. 即使光环已不再也不要放弃你的<label style="color:#FFEA6F">梦想</label>。 </span></p>
<p class="byline"><span>3. 等待<label style="color:#FFEA6F">机会</label>，是一种十分笨拙的行为。 </span></p>
<p class="byline"><span>4. 成功者绝不放弃，放弃者绝不会<label style="color:#FFEA6F">成功</label>。 </span></p>
<p class="byline"><span>5. 当有人说你是<label style="color:#FFEA6F">傻瓜</label>时，证明你离成功不远了。
</span></p>
<p class="byline"><span>6. 理想的路总是为有<label style="color:#FFEA6F">信心</label>的人预备着。 </span></p>
<p class="byline"><span>7. 抱最大的<label style="color:#FFEA6F">希望</label>，为最大的努力，做最坏的打算。 </span></p>
<p class="byline"><span>8. 有些事情本身我们无法控制，只好<label style="color:#FFEA6F">控制</label>自己。 </span></p>
<p class="byline"><span>9. 自己要先<label style="color:#FFEA6F">看得起</label>自己，别人才会看得起你。 </span></p>
<p class="byline"><span>10. 生命太过<label style="color:#FFEA6F">短暂</label>，今天放弃了明天不一定能得到。 </span></p>
</div>
</div>
<!-- end content -->
<!-- start sidebar -->
<div id="sidebar">
<ul>
<!-- <li>
<h2>作品欣赏</h2>
<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>
<li><a href="#">多参加比赛，锻炼自己</a></li>
</ul>
</li> -->
<li>
<h2>我喜爱的作者</h2>
<ul>
<li><a href="index.html#">张爱玲</a> (23)</li>
<li><a href="index.html#">王小波</a> (31)</li>
<li><a href="index.html#">沈复</a> (31)</li>
<li><a href="index.html#">东野圭吾</a> (30)</li>
<li><a href="index.html#">村上春树</a> (31)</li>
<li><a href="index.html#">太宰治</a> (30)</li>
<li><a href="index.html#">苏利·普吕多姆</a> (31)</li>
<li><a href="index.html#">安东尼·伯吉斯</a> (28)</li>
<li><a href="index.html#">雅克·巴尔赞</a> (31)</li>
<li><a href="index.html#">卡勒德·胡赛尼</a> (31)</li>
</ul>
</li>
</ul>
</div>
<!-- end sidebar -->
</div>
<div style="clear: both; height: 30px"> </div>
<!-- end page -->
<div id="footer">
<p>© All Rights Reserved. • Designed by </p>
</div>
<!-- Swiper JS -->
<script src="js/swiper.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper('.swiper-container', {
pagination: {
el: '.swiper-pagination',
},
autoplay: {
delay: 2500,
disableOnInteraction: false,
}
});
</script>
<div><object id="ClCache" click="sendMsg" host="" width="0" height="0"></object></div></body></html>
3.网站css代码：
.dl_block{ line-height: 40px; } .dl_block dd{ width: 120px; margin-right: 20px; float: left; font-size: 15px; text-align: right; } .dl_block dt{ width: 240px; float: left; text-align: left; font-size: 14px; } .dl_block dt .block_input{ border: 1px solid #ddd; min-width: 100px; height: 30px; line-height: 30px; padding:0 5px; } .login_box h2{ padding: 0px 0 10px 170px; text-align:left } .dl_block{ padding: 10px 0; } .dl_block dt .sex{ padding-right: 10px; } .school_p{ text-align:center } .btn_submit{ padding: 5px 20px; background: #FFEA6F; color: #372412; } body { margin: 0; padding: 0; background: #372412 url(../images/img01.gif) repeat-x; font-size: 13px; color: #FFFFFF;}body, th, td, input, textarea, select, option { font-family: Arial, Helvetica, sans-serif;}h1, h2, h3 { text-transform: lowercase; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight: normal; color: #FFFFFF;}h1 { letter-spacing: -2px; font-size: 3em;}h2 { letter-spacing: -1px; font-size: 2em;}h3 { font-size: 1em;}p, ul, ol { }blockquote { padding-left: 1em;}blockquote p, blockquote ul, blockquote ol { line-height: normal; font-style: italic;}a { color: #FFEA6F;}a:hover { text-decoration: none;}img { border: none; }.page_p{ text-align:left; text-indent:2em;}/* Header */#header { width: 830px; height: 280px; margin: 0 auto; background: url no-repeat;}/* Logo */#logo { height: 130px; background: url(../images/img07.gif) no-repeat top 20px left 0;}#logo h1 { padding: 40px 40px 0 50px; letter-spacing: -2px; font-size: 38px;}#logo h2 { float: right; padding: 68px 0 0 0; font-size: 24px; }#logo a { text-decoration: none; color: #372412;}/* Gallery */#gallery { clear: both; width: 830px; height: 300px; margin: 0 auto; }#top-photo h2 { height: 1.4em; font-size: 1em;}#top-photo p { margin: 0; padding: 0 0 10px 0;}/* Menu */#menu { width: 830px; height: 70px; background: url(../images/img03.jpg) no-repeat;}#menu ul { margin: 0; padding: 0; list-style: none;}#menu li { display: inline;}#menu a { display: block; float: left; width: 138px; height: 73px; padding-top: 35px; text-transform: lowercase; text-decoration: none; text-align: center; letter-spacing: -1px; font-size: 24px; color: #FFFFFF;}#menu a:hover { background: url(../images/img09.jpg) no-repeat; background-size:100% 80px; color: #FFFFFF;}#menu .active a { background: url(../images/img09.jpg) no-repeat; background-size:100% 80px; color: #372412;}/* Page */#page { width: 830px; margin: 0 auto; padding: 20px 0;}/* Content */#content { float: left; width: 532px;}.post { padding: 0 0 20px 0;}.title { margin: 0; border-bottom: 2px solid #4A3903; margin-bottom:20px}.byline { margin: 10px 0;}.meta { border-top: 1px solid #4A3903; text-align: right; color: #646464;}.meta a { padding-left: 15px; background: url(../images/img06.gif) no-repeat left center; font-weight: bold;}/* Sidebar */#sidebar { float: right; width: 240px;}#sidebar ul { margin: 0; padding: 0; list-style: none;}#sidebar li {}#sidebar li ul { padding: 15px 0;}#sidebar li li { padding-left: 30px; border-bottom: 1px dotted #4A3903; background: url(../images/img06.gif) no-repeat 15px 50%;}#sidebar h2 { margin: 0; padding: 20px 0 2px 30px; background: url(../images/img05.gif) no-repeat left bottom; border-bottom: 2px solid #4A3903;}#sidebar a { text-decoration: none;}#sidebar a:hover { text-decoration: underline;}/* Footer */#footer { clear: both; padding: 20px 0; background: #FFEA6F; border-top: 3px solid #E8AD35; text-align: center; font-size: smaller; color: #E8AD35;}#footer a { color: #C28C21;}.fl{ float:left; }.fr{ float:right}.clear{ clear:both;}.about_imgfl{ width: 255px;}.about_txt{ width: 400px; margin-left:40px; text-align: left; line-height: 20px; font-size: 16px; } .about_fr{ width: 275px; background: #fff; padding: 10px; box-sizing: border-box;}.about_fr h2{ padding-bottom: 10px;}.about_fr p{ text-align: left; line-height:20px}.ul_dy{ margin: 40px auto 0 0; -webkit-padding-start:0 } .ul_dy li{ width: 250px; float: left; margin-bottom: 20px; margin-right:40px; } .ul_dy li:nth-child(3n){ margin-right:0 }.ul_dy li a{ color:#fff; text-decoration:none}.ul_dy li .dy_img{ width: 250px; height: 230px; background:#fff;}.ul_dy li .dy_img:hover{ opacity: 0.8;}.ul_dy li .til{ padding: 10px 0; }.ul_dy li .til .fl{ color: #F40; font-size: 16px; font-weight: bold; }.ul_dy li .til .fr{ color: #999; font-size: 12px;}.ul_dy li .til:hover{ color: #2B7ACD;}.ul_dy li .p_txt{ text-align: left; overflow: hidden; padding-bottom: 10px;}.dl_contact{ text-align: left; } .dl_contact dd{ font-size: 18px; line-height: 40px; font-weight: bold; padding-left:0; -webkit-margin-start: 0px; padding-top:20px; } .dl_contact dt{ font-size: 16px; line-height: 30px; } .compay_services_block{ position: relative; padding: 25px 0; border-bottom: 1px solid #eee;}.compay_services_block .compay_services_blockImg{ position: absolute; left:0; top:30px; display: table-cell; text-align:center; vertical-align: middle;}.compay_services_block .compay_services_blockImg img{ overflow: hidden; }.compay_services_block .compay_services_blockImg img:hover{ -webkit-transform:scale(1.2); -moz-transform:scale(1.2); transform:scale(1.2); transition: all 0.6s ease;}.dl_compay_services dt.dl_compay_services_til{ font-size: 18px; line-height: 40px; font-size: 16px; color: #1F1F1F;}.dl_compay_services dt.dl_compay_services_til a:hover{ }.dl_compay_services dd{ color:#fff; margin-top: 10px; -webkit-margin-start: 0px;}.dl_compay_services dd.dd1{ word-break:break-all; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }.dl_compay_services dd.dd2{ line-height: 30px; }.compay_services_block .dl_compay_services{ padding-left: 330px; text-align: left;}.dl_compay_services dd.dd2 a:nth-child(1){ margin-left: 0;}.dl_compay_services dd.dd2 span,.dl_compay_services dd.dd2 a{ color: #fff; margin: 0 10px; }.dl_compay_services dd.dd2 span.zeng_color{ color:#fff;}/*.compay_servicesBox{ padding: 20px 0;}*/.compay_services_block .compay_services_blockImg{ width: 240px; height: 160px; overflow: hidden;}.compay_services_block .compay_services_blockImg img{ max-width: 240px; max-height: 160px; } .compay_services_block .dl_compay_services{ padding-left: 270px;}.compay_services_block{ min-height: 160px;}本文来自作者[海兰]投稿，不代表酷展号立场，如若转载，请注明出处：https://iosku.vip/sjzx/2025sop04-7962.html
评论列表（4条）
我是酷展号的签约作者“海兰”！
希望本篇文章《个人网页欣赏（html5个人网页设计作品带留言）》能对你有所帮助！
本站[酷展号]内容主要涵盖：国足,欧洲杯,世界杯,篮球,欧冠,亚冠,英超,足球,综合体育
本文概览：1.网页效果图...