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

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

gaoyangw 2025-02-26 12:05 45 浏览 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;
    }
    

    相关推荐

    招标公告-网络销售农资治理数据服务项目磋商公告

    招标公告-网络销售农资治理数据服务项目磋商公告...

    销售的几种方式(销售的十大方式)

    以下是几种常见的销售方式介绍:传统线下销售-门店销售:在实体店铺中,销售人员与顾客面对面交流,介绍产品或服务,帮助顾客挑选合适的商品,促成交易。例如在商场的服装专卖店,销售人员会根据顾客的身材、喜...

    AI要干掉SaaS销售?(ai销售是什么意思)

    随着AI技术的飞速发展,许多行业都在经历前所未有的变革,SaaS销售领域也不例外。最近,行业内关于“AI是否会取代SaaS销售人员”的讨论愈演愈烈,许多从业者感到焦虑不安。然而,SaaS行业老兵大D认...

    网络上的性暗示广告泛滥,是商业营销手段还是道德底线的滑落?

    刷到是缘分,感谢大家的阅读,希望您能动动小手帮忙点赞,关注,评论。你的支持和鼓励是我前进的动力。在此祝福大家天天快乐,日日开心!...

    互联网上,怎么销售 销售是你必须掌握的创造财富的核心技能。

    互联网上销售2个要点。销售是你必须要掌握的创造财富的核心技能,只有先促成交易才能获得利润。今天的内容非常重要,但是对于很多人来说并不容易理解,因为它和传统的教育理念有很多的冲突。我尽量慢一点,各位好好...

    浅谈网站优化之站内优化(网站的站内优化)

    网站优化分为站内优化和站外优化,今天我们只谈站内优化。在给网站做站内优化的同时,我们首先要做一个网站诊断,通过网站诊断,发现网站存在什么问题,然后进行优化。之所以需要优化,是发现网站没有排名,没有流...

    想成为一个Web前端开发工程师,需要掌握的知识总结

    前端工程师已经成为目前互联网企业极具竞争力的人才,企业不断提升薪资水平为了招聘到优秀的Web前端开发工程师。因此,越来越多的人想要学习Web前端。那么呢?Web前端的学习路线是什么?下面就和千锋武汉W...

    合理站内优化-放你200米先跑(200米队伍能站多少人)

    有一首民谣是这样说的:丢失了一个钉子,坏了一只蹄铁;坏了一只蹄铁,折了一匹战马;折了一匹战马,伤了一位国王;伤了一位国王,输了一场战斗;输了一场战斗,亡了一个帝国。从这首民谣中我们可以提炼出,一个微小...

    教你分析竞争对手的网站,借鉴快速做好自己网站的SEO

    关于seo爱好者来说,剖析竞争对手的网站是我们必需要做而且必需要做好的事情。但是很多SEO爱好者只晓得去察看,却不晓得应该如何剖析竞争对手的网站。...

    SEO优化重点在哪里?核心因素(seo的优化基础)

    seo优化是一个长久的过程,也是一个持续坚持的过程。当然,了解了其中重点的核心因素,会让很多朋友少走很多弯路,所以,今天牵线的木偶想给大家分享下关于SEO比较核心的有些需要重点注意!(完全不了解SE...

    站内SEO优化需要重视这16点才能提升网站排名!

    1.H标签网站单个页面的H标签尽量控制在一定数量,常见的用法是h1标签1次,h2标签2次,h3标签用3词,也有很大部分的网站不用h1标签直接使用h2标签,这种情况常见于门户站、新闻站等。2.Alt描述...

    广州网络包年推广 网络广告包年-易找网络服务中小企业

    易找网络专注搜索平台关键词优化排名,信息流广告,朋友圈广告,网站建设等,专注于互联网广告业务,致力于帮各类行业广告主提供PC、移动的互联网效果资源,与国内主流媒体建立了深度战略合作。易找是在搜索引擎上...

    网站建设公司背景与技术实力全面解析

    今天我要给大家详细讲解一下网站建设公司的情况,这个行业里学问挺多。这些公司能够按照客户的具体要求和需求,制作出功能丰富、外观漂亮的网站,这在互联网领域非常重要。接下来,我们就从几个角度来详细探讨一番。...

    全有家居朋友圈线上活动策划方案(附下载)

    部分内容预览...

    2025商业广场春季营销活动策划方案“春日放飞季”(附下载)

    部分内容预览...

    取消回复欢迎 发表评论: