百度360必应搜狗淘宝本站头条
当前位置:网站首页 > SEO教程 > 正文

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

gaoyangw 2025-02-26 12:05 47 浏览 0 评论

1.网页效果图

2,网站首页代码:
















开心营业?




















我的个人空间?







  • 首页

  • 关于我

  • 我的学校

  • 我的专业

  • 我的家乡

  • 留言板








































  • 青春寄语

























  • 我喜爱的作者



  • 张爱玲 (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;
    }
    

    相关推荐

    跨境卖家必看:营销与产品,到底谁才是你的“摇钱树”?

    在跨境电商的江湖里,永远流传着两个极端传说:有人靠“一张神图”日销万单,也有人因“产品垃圾”被骂到关店。营销与产品,究竟谁才是跨境卖家的命根子?今天,我们不灌鸡汤,只讲能让你“活下去”的生存法则。...

    旺自己的三种方法,一定要牢记

    三种旺己之道,开启丰盈人生生活的转机往往藏在自我经营的智慧里。想要旺自己,不妨从这三个方向深耕,让生命绽放独特光彩。专注自我成长,夯实内在根基。...

    让顾客感觉占便宜的20种营销策略之赠品策略(三)

    赠品策略:巧妙馈赠,让顾客感知超值顾客不喜欢便宜,喜欢的是占便宜的感觉!如何让顾客感觉自己占到了便宜?赠品策略是一种能有效拉近与顾客距离,使其切实感受实惠与惊喜的营销方式。以下为您详细解读常见的赠品...

    成都网上注册公司流程

    成都注册公司:【四川龙眼企服】成都网上注册公司流程:先得给公司取个响亮又合规的名字,登录当地工商行政管理部门网站,在企业名称预先核准系统查。名字通过后,就得准备注册材料啦,像公司章程、股东身份证明、注...

    企业定制网站的优势有哪些?

    企业定制网站具有多方面的显著优势,能够精准契合企业需求,助力企业在网络世界中脱颖而出。以下是其主要优势的详细介绍:精准匹配业务需求定制网站能够依据企业的具体业务模式、行业特点以及目标受众,量身定制功能...

    学术交流新窗口:微网站搭建赋能会议组织全流程升级

    在当今信息化快速发展的时代,学术会议的组织与管理也逐渐向数字化转型。微网站作为学术会议前期准备的重要组成部分,不仅是会议宣传推广的窗口,更是注册报名、征文管理等多项功能的集成平台。本文将对学术会议微网...

    网站域名备案流程?分享一下自己的经历

    这里以腾讯云为例。想要开发一个网站,网站备案这个流程是必不可少的。首先你要买一个域名,还要买一个服务器,这样就可以备案了。备案分为企业备案和个人备案,企业备案我不清楚,但是个人备案相对比较简单。个人备...

    不容错过的网站建设公司总览!

    在当今数字化浪潮席卷全球的时代,网络世界的发展可谓日新月异。截至2025年,全球网站总量已然突破20亿个大关,在这个信息爆炸的网络时代,企业官网的重要性愈发凸显。数据显示,高达75%的用户会通过企业官...

    从零搭建网站?5个步骤详解网站建设全流程

    在数字化时代,拥有一个专业网站已成为企业或个人品牌展示的核心竞争力。但对于新手而言,网站建设往往显得复杂难懂。本文梳理出5大关键步骤,手把手带你完成从策划到上线的全流程,省时省力不踩坑!一、前期准备:...

    如何给自己的公司建网站?会打字就能自己做网站

    零基础快速使用观达云建站平台为公司建网站,可参考以下步骤:注册与登录访问观达云建站平台官网,点击注册按钮,填写相关信息完成账号注册,然后登录账号。...

    电商网的SEO优化策略方法

    1、内容质量:网站的内容质量在SEO优化中的分量是最大的,只有有了好的内容才能吸引客户,只有有了独特的内容才能让网页的排名超过泛泛而谈的网页。2、站内基本优化:站内的基本优化则包含网站的内部链接的最大...

    现在的网站SEO就该这么做

    笔者第一次正事的写一篇完整的博文,主要自己的写作能力很屌丝,一直没怎么完整的写过一篇文章,虽然有自己的博客,但是很多内容是自己收集和组织别人的内容,还有很多内容是直接转载而来。现在要改变下,之后会把自...

    逆冬:讲3个SEO相关小问题!权重+收录+15天定律

    又是一个周六,由于最近在忙另外一个项目,文章就耽误了,最近又有徒弟相关问题,还有一些同学催更。针对徒弟们问题,我们再来给大家统一讲解!一、15天定律(如何过)...

    企业如何抓住AI搜索优化红利?从SEO到GEO的实战转型指南

    你是否发现,最近在搜索问题时,答案直接显示在顶部而不需要点击链接?这背后是AI搜索革命正在改写流量规则。据统计,80%的消费者已在30%的搜索中依赖AI摘要,传统网站点击量下降高达10%。当DeepS...

    就得仿这样的~来自dribbble上的简约大气网页设计欣赏

    谁说简洁的排版不能出彩!好的页面永远是把最重要的信息传达给用户,简单利落!一组简洁的网站首页设计欣赏。下面收集来自于dribbble上的优秀网页设计作品希望对你带来帮助。...

    取消回复欢迎 发表评论: