html5个人网页设计作品带留言

connygpt 2024-12-12 11:30 7 浏览

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;
}

swiper-container

上一篇：一分钟学会:swiper实现轮播效果
下一篇：狼人杀微信小程序项目实例(附源码)

html5个人网页设计作品带留言

相关推荐

在.net core中使用nginx做负载均衡

React 18 超全升级指南

LTUI v1.7 发布，一个基于 Lua 的跨平台字符终端 UI 界面库

《若依ruoyi》第二十五章:Spring boot 上传下载封装详解二

生成对抗网络(GAN)的半监督学习

QT进阶之路 : 布局详解

如何在 Element UI 中使用栅格布局实现响应式设计?

IDEA 中 Jetty 的配置操作手册 idea jfinal

如何在Dify平台上创建智能Agent:一步步教你实现超级智能体搭建

k8s自动化运维三