王剑编程网

分享专业编程知识与实战技巧

2025年03月03日

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

    标签：网页设计模板html代码 

    作者:ggcool , 分类:技术教程 , 浏览:18 , 评论:0

    控制面板
    您好，欢迎到访网站！
      查看权限
    网站分类
    最新留言