使用html+css实现一个静态页面（含源码） |
您所在的位置：网站首页 › 静态网页设计代码余华 › 使用html+css实现一个静态页面（含源码） |
使用html+css实现一个静态页面（含源码）
|
我使用的编辑器是Hbuilder，使用html+css实现一个静态页面。我选择的是联通官网的一个页面。 原本页面如下： 先对整个页面进行分块，分成顶部，链接区域，导航区域，内容区域，footer区域等部分，每部分分开写内容。 html代码如下： 欢迎来到中国联通官方网站 官方微博 官方微信 网上营业厅 网上商城 手机营业厅 沃支付 首页 党的建设 新闻中心 品牌专区 业务介绍 人力资源 社会责任 企业文化 客户服务 信息公开 新闻中心 公司要闻 一线新闻 行业动态 通知公告 国资动态 专题专栏 全力争做中小企业数字化转型的使能者 中国联通以创新驱动中小企业迸发新活力 发布时间：2020-09-03 发布人：新闻宣传中心 近日，工业和信息化部相继印发了《中小企业数字化赋能服务产品及活动推荐目录》第一期和第二期的通知。中国联通凭借多项成果成功入选推荐目录，成为工信部推荐的中小企业上云用云首选服务商。 中国联通凭借多项成果入选 工业和信息化部《中小企业数字化赋能服务产品及活动推荐目录》 中小企业是国民经济和社会发展的生力军。为充分激发中小企业发展活力，中国联通积极发挥国有大型企业的主力军作用，在抓好常态化疫情防控的前提下，践行使命担当，加大惠企力度，引领技术创新，推出一系列政策“组合拳”为中小企业减压释负，助力中小企业增强内生动力，真正实现数字化转型。 分享到： 微信好友 朋友圈 QQ好友 QQ空间 新浪微博 党的建设 中央精神 党组动态 党建要闻 党风廉政建设 基层风采 新闻中心 公司要闻 一线新闻 通知公告 国资动态 行业动态 专题专栏 品牌专区 企业品牌 沃品牌 业务介绍 公众业务 政企客户业务 国际业务 创新业务 人力资源 校园招聘 社会招聘 社会责任 打好三大攻坚战 扶贫学习专区 一带一路建设 智慧冬奥 社会责任报告 社会责任实践 企业文化 企业愿景 企业使命 企业价值观 联通司歌 联通好员工2017 企业文化手册 联通劳模2018 客户服务 客户服务 信息公开 集团介绍 领导成员 股权架构 企业荣誉 大事记 期刊杂志 Copyright ©1999-2018 ChinaUnicom All Rights Reserved.中国联合网络通信集团有限公司;;;;|;;;;京ICP备11000964号-3;;;;|;;;;联系我们;;;;|;;;;法律声明css代码，分成四个部分来写，代码如下： 首先是new_base.css来定一个总体格式。 html,body{ min-width:1004px; height:100%; width:100%; } *{ margin:0; padding: 0; font:13px "microsoft yahei","微软雅黑"; box-sizing: border-box; -moz-box-sizing: border-box; /* -moz-Firefox */ -webkit-box-sizing:border-box; /* -webkit-Chrome Safari */ /* -o-:针对Opera内核的CSS写法 */ /* -ms-:针对IE内核的CSS写法 */ } a{ text-decoration: none; cursor: pointer; } li{ list-style:none; } .banner{ width: 1004px; margin: 10px auto; } .banner img{ width:100%; border-radius: 6px; }头部区域格式，header_css .header{ background-color: #fff; width: 100%; top: 0px; left:0px; } .welcome{ width:100%; min-width:1004px; height:36px; background-color: #f9fafa; /* border:1px solid red; */ } .welcome p{ width:1004px; /* border: 1px solid blue; */ margin: 0 auto; line-height: 36px; text-align: left; color:#c4c4c5; border-bottom: 1px solid #dedede; } .link{ /* border:1px solid red; */ width:100%; min-width:1004px; height:60px; } .link-box{ width:1004px; /* border:1px solid blue; */ margin: 0 auto; height:57px; position: relative; overflow: hidden; } /* logo */ .link-box .logo{ /* display:block; */ height:57px; position: absolute; /* position: absolute; */ /* width:365px; */ } .link-box .logo a{ /* display:block; */ display: block; /* border:100px solid blue; */ height: 57px; width: 365px; /* position: absolute; */ /* width:365px; */ } .link-box .logo a img{ /* width:100%; */ height:100%; } .link-box ul{ position:absolute; height: 57px; line-height: 57px; width:548px; /* float:right; */ padding: 0; right: -18px; /* border: 1px solid red; */ } .link-box ul li{ height: 57px; line-height: 57px; float: left; display: inline-block; } .link-box ul li a{ line-height: 57px; border-right:1px solid #b2b2b2; padding: 0 18px; color:#999; font-weight: 600; } /* menu导航区域 */ .menu{ width: 1004px; height: 43px; margin: 0 auto; overflow:hidden; background: url(../img/header.png); background-repeat: repeat-x; border-top: 3px solid #b30000; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; } .menu li{ width: 10%; float: left; border-left:1px solid red; /* list-style: none; */ } .menu li a{ display: block; font-size:16px; line-height: 40px; line-width:600; text-align: center; color:#fff; } .menu li a:hover{ background:#9a001d; } .active-menu{ background:#9a001d; }内容区域格式news_content.css /* 左右布局 */ .content{ width: 1004px; margin: auto; /* border:1px solid red; */ font-size: 16px; } .content .left_nav{ float:left; /* border:1px solid red; */ border-radius: 6px; width:200px; } .content .right_text{ /* border:1px solid red; */ width: 790px; float:right; border-radius: 6px; } .content .left_nav .title{ height: 50px; background: #da251c; } .content .left_nav .title h1{ color:#fff; font-size: 18px; font-weight: 600; line-height: 50px; padding-left: 15px; } .content .left_nav ul{ width: 100px; color: #666; margin: 20px 0; } .content .left_nav ul li{ font-size: 15px; margin: 10px 15px; cursor:pointer; width: 170px; } .content .left_nav ul li.active{ color: #DA251C; background-image: url(../img/left-arrow-red.png); background-repeat: no-repeat; background-position: right; background-size: 8px; } /* 右侧新闻详情样式 */ .right_text h2{ /* border: 1px solid; */ width: 100%; text-align: center; font-size: 18px; font-weight: 600; line-height: 30px; margin: 30px auto; } .right_text .sub_title{ width: 80%; /* border: 1px solid; */ margin: 0 auto; } .right_text .sub_title li{ float:left; font-size: 16px; text-align: center; width: 50%; } .right_text .sub_title::after{ content: ""; display: block; clear:both; visibility: hidden; } /* 正文样式 */ .right_text p{ /* border: 1px solid #999999; */ font-size: 15px; text-align: justify; text-indent: 2em; line-height: 2em; } .right_text p img{ display: block; max-width: 100%; margin: 0 auto; /* text-align: center; */ } .right_text p strong{ display: block; width: 100%; margin: 10px auto; text-align: center; font-size: 15px; } /* 分享列表 */ .share_list{ /* border: 1px solid; */ height: 32px; margin-top: 40px; } .share_list li{ float: left; font-size: 14px; height: 32px; line-height: 32px; text-align: left; margin-left: 20px; color: #999; } .share_list li img{ vertical-align: middle; margin-right: 4px; }最后实现页面如下，因为网页文字部分太多，我只选择了其中一部分，最后显示结果如下： |
代码已经上传到github上，有兴趣的同学可以自己去下载：https://github.com/dongxiaoshi/StaticWebPage.git【本文地址】