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

1.网页效果图

2，网站首页代码：









	开心营业?














	我的个人空间?




	首页
	关于我
	我的学校
	我的专业
	我的家乡
	留言板
































	青春寄语
	1. 对的，坚持;错的，放弃!
	2. 即使光环已不再也不要放弃你的梦想。
	3. 等待机会，是一种十分笨拙的行为。
	4. 成功者绝不放弃，放弃者绝不会成功。
	5. 当有人说你是傻瓜时，证明你离成功不远了。

	6. 理想的路总是为有信心的人预备着。
	7. 抱最大的希望，为最大的努力，做最坏的打算。
	8. 有些事情本身我们无法控制，只好控制自己。
	9. 自己要先看得起自己，别人才会看得起你。
	10. 生命太过短暂，今天放弃了明天不一定能得到。










	我喜爱的作者

	张爱玲 (23)
	王小波 (31)
	沈复 (31)
	东野圭吾 (30)
	村上春树 (31)
	太宰治 (30)
	苏利·普吕多姆 (31)
	安东尼·伯吉斯 (28)
	雅克·巴尔赞 (31)
	卡勒德·胡赛尼 (31)









	? All Rights Reserved. ? Designed by

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

我的个人空间?

青春寄语

我喜爱的作者

相关推荐

取消回复欢迎你发表评论:

指数蛙分享提升百度指数的方法教程

如何查询自己连接的WiFi无线网络或者是数据流量使用了多少流量?

SEO优化技巧探讨-必应SEO优化快速排名与推广方法-墨家研究院

今日头条关键词优化怎么做? 今日头条关键字查询

不限速!这6个磁力下载工具推荐，强到离谱!

10个珍藏多年的宝藏网站分享，个个都很厉害，资源+工具一网打尽

你想要的8个宝藏网站来喽!

抖音识图功能，开启流量新渠道!

在线查询与防御:网站安全挂马检测指南

无需翻墙:精选网站大集合无需付费的网站大全推荐

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

我的个人空间?

青春寄语

我喜爱的作者

相关推荐

取消回复欢迎 你 发表评论:

指数蛙分享提升百度指数的方法教程

如何查询自己连接的WiFi无线网络或者是数据流量使用了多少流量?

SEO优化技巧探讨-必应SEO优化快速排名与推广方法-墨家研究院

今日头条关键词优化怎么做? 今日头条关键字查询

不限速!这6个磁力下载工具推荐，强到离谱!

10个珍藏多年的宝藏网站分享，个个都很厉害，资源+工具一网打尽

你想要的8个宝藏网站来喽!

抖音识图功能，开启流量新渠道!

在线查询与防御:网站安全挂马检测指南

无需翻墙:精选网站大集合 无需付费的网站大全推荐

取消回复欢迎你发表评论:

无需翻墙:精选网站大集合无需付费的网站大全推荐