PC端的布局

通栏

自适应浏览器的宽度

版心

固定一个宽度，并且让容器居中

源码

HTML源码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="./css/common.css"><style>#banner{position:relative;}#banner .banner_list{width:100%; height:469px; position:relative;}#banner .banner_list li{width:100%; height:100%; background:center 0 no-repeat;position:absolute; left:0; top:0; opacity:0; z-index:1;}#banner .banner_list li.active{opacity:1; z-index:10;}#banner .banner_list a{display:block; width:100%; height:100%;}#banner .banner_btn{width:100%; position:absolute; bottom:19px; z-index:20; font-size:0;text-align:center;}#banner .banner_btn li{display:inline-block; width:12px; height:12px; border:2px solid white;border-radius:50%; box-sizing:border-box; margin:0 6px; cursor:pointer;}#banner .banner_btn li.active{background:white;}#service{overflow:hidden; min-height:407px;}#service .service_list{text-align:center; margin-top:34px;}#service .service_list li{float:left; width:250px; margin:0 10px;}#service .service_list div{width:102px; height:102px; margin:0 auto;}/*#service .service_list li:nth-of-type(1) div{background-image:url(./images/web1.png);}*//*#service .service_list li:nth-of-type(2) div{background-image:url(./images/graphic1.png);}*//*#service .service_list li:nth-of-type(3) div{background-image:url(./images/e-bussiness1.png);}*//*#service .service_list li:nth-of-type(4) div{background-image:url(./images/mail1.png);}*/#service .service_list h3{font-size:18px; color:#434343; line-height:36px; margin-top:25px;}#service .service_list p{font-size:14px; color:#6D6D6D; line-height:22px;}#case{background:#f8f8f8;}#case .container{min-height:460px; overflow:hidden;}#case .area_title{margin-top:55px;}#case .area_title h2{color:#66C5B4;}#case .case_list{margin-top:28px;}#case .case_list li{float:left; width:340px; margin:0 10px;}#case .case_btn{width:176px; height:37px; background:#66C584; margin:0 auto;border-radius:15px; line-height:37px; text-align:center;font-size:14px;margin-top:36px;}#case .case_btn a{display:block; width:100%; height:100%; color:white;}#news{min-height:450px; overflow:hidden;}#news .area_title{margin-top:65px;}#news dl{margin-top:48px;}#news dt{width:234px;}#news dd{width:846px;}#news .news_list{width:100%;}#news .news_list li{width:50%; float:left; margin-bottom:48px;}#news .news_date{width:71px; height:70px; border-right:1px solid #DCDCDC;text-align:center;}#news .news_date i{color:#66C5B4; font-size:39px; display:block; font-weight:bold;}#news .news_date span{color:#999999;font-size:20px; line-height:36px;}#news .news_text{width:310px; margin-left:20px;}#news .news_text h3{font-size:14px;}#news .news_text h3 a{color:#3F3F3F;}#news .news_text p{color:#A4A4A4; font-size:12px; line-height:21px; margin-top:17px;}</style>
</head>
<body><div id="head" class="container"><div class="head_logo l"><a href="#"><img src="./images/logo.png" alt="博文尚美" title="博文尚美"></a></div><ul class="head_menu r"><li><a href="#">HOME</a></li><li><a href="#">ABOUT</a></li><li><a href="#">PROTFOLIO</a></li><li><a href="#">SERVICE</a></li><li><a href="#">NEWS</a></li><li><a href="#">CONTACT</a></li></ul></div><div id="banner" class="container-fluid"><ul class="banner_list"><li class="active" style="background-image:url(./images/banner.png)"><a href="#"></a></li><li style="background-image:url(./images/banner.png)"><a href="#"></a></li><li style="background-image:url(./images/banner.png)"><a href="#"></a></li><li style="background-image:url(./images/banner.png)"><a href="#"></a></li></ul><ol class="banner_btn"><li class="active"></li><li></li><li></li><li></li></ol></div><div id="service" class="container"><div class="area_title"><h2>服务范围</h2><p>OUR SERVICES</p></div><ul class="service_list"><li><div style="background-image:url(./images/web1.png)"></div>
<!--                1.WEB DESIGN--><h3>1.web desin</h3><p>企业品牌网站设计/手机网站制作<br>动画网站创意设计</p></li><li><div style="background-image:url(./images/graphic1.png)"></div>
<!--                2.GRAPHIC DESIGN--><h3>2.graphic design</h3><p>标志LOGO设计/产品宣传册设计<br>企业广告/海报设计</p></li><li><div style="background-image:url(./images/e-bussiness1.png)"></div>
<!--                3.E-BUSINESS PLAN--><h3>3.e-business plan</h3><p>淘宝/天猫装修设置及运营推广<br>企业微博、微信营销</p></li><li><div style="background-image:url(./images/mail1.png)"></div>
<!--                4.MAILBOXAGENTS--><h3>4.mailboxagents</h3><p>腾信/网易企业邮箱品牌代理<br>个性化邮箱定制开发</p></li></ul></div><div id="case" class="container_fluid"><div class="container"><div class="area_title"><h2>{ 客户案例 }</h2><p>With the best professional technology, to design the best innovative web site</p></div><ul class="case_list clear"><li><a href="#"><img src="./images/20141121095528549.png" alt=""></a></li><li><a href="#"><img src="./images/20141121095216750.png" alt=""></a></li><li><a href="#"><img src="./images/20141121105856226.png" alt=""></a></li></ul><div class="case_btn"><a href="#">VIEW　MORE</a></div></div></div><div id="news" class="container"><div class="area_title"><h2>最新资讯</h2><p>THE LATEST NEWS</p></div><dl><dt class="l"><img src="./images/xs1.png" alt=""></dt><dd class="l"><ul class="news_list"><li><div class="news_date l"><i>09</i><span>Jan</span></div><div class="news_text l"><h3><a href="#">网站排名进入前三的技巧说明</a></h3><p>很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎首页,更不用说进首页前三了。那么网站优..</p></div></li><li><div class="news_date l"><i>08</i><span>Jan</span></div><div class="news_text l"><h3><a href="#">flash网站制作的优缺点</a></h3><p>虽然HTML5程序语言出现,大有逐渐代替flash网站的趋势但是过于生硬的HTML5动画效果,始终...</p></div></li><li><div class="news_date l"><i>07</i><span>Jan</span></div><div class="news_text l"><h3><a href="#">做个网站多少钱</a></h3><p>"做个网站多少钱?"很多客户打电话过来直接第一句九抛出来的问题.就好比买辆车多少钱,你是要...</p></div></li><li><div class="news_date l"><i>06</i><span>Jan</span></div><div class="news_text l"><h3><a href="#">哪些网站优化手法属于网站过度优化</a></h3><p>大部分人都想让自己的网站,一夜之间出现在搜索引擎首页独占鳌头,但是事实告诉我们罗马不是...</p></div></li></ul></dd></dl></div><div id="foot" class="container-fluid"><div class="container"><p class="l">Copyright 2006 - 2014 Bowenshangmei Culture All Rights Reserved</p><div class="r"><a href="#">Home</a> |<a href="#">About</a> |<a href="#">Portfolio</a> |<a href="#">Contact</a></div></div></div>
</body>
</html>

CSS源码

*{margin:0; padding:0;}
ul,ol{list-style:none;}
img{display:block;}
a{text-decoration:none; color:#646464;}
h1,h2,h3{font-size:16px;}
body{font-family:Arial;}.l{float:left;}
.r{float:right;}
.clear:after{content:""; display:block; clear:both;}
/*版心*/
.container{width:1080px; margin:0 auto; position:relative;}
/*通栏*/
.container-fluid{width:100%;}#head{height:81px;}
#head .head_logo{width:162px; height:44px; margin-top:19px;}
#head .head_menu{font-size:14px; line-height:81px;}
#head .head_menu li{float:left; margin-left:58px;}.area_title{margin-top:60px; text-align:center;}
.area_title h2{height:20px; line-height:20px; font-size:20px; color:#363636;background:url(../images/title_bg.png) no-repeat center 7px; font-weight:normal;''
}
.area_title p{color:#9F9F9F; font-size:14px; line-height:34px;}#foot{background:#66c5b4;}
#foot .container{height:54px; line-height:54px; font-size:12px; color:white;}
#foot div a{color:white; margin:0 10px;}

运行结果

PC端企业类型整页制作相关推荐

千锋教育Web前端——PC端企业类型整页制作
千锋教育Web前端--PC端企业类型整页制作文章目录千锋教育Web前端--PC端企业类型整页制作一.PC端的布局二.源码 1.CSS源码 2.HTML源码三.运行结果一.PC端的布局通栏 ...
PC端品优购网页制作（common.css）
制作网页前的基础学习品优购项目规划 1.1网站制作流程客户沟通制定方案签订合同预付定金不能退初稿审核网页美工会制作原型图和PSD效果图前台页面设计后台工程开发测试验收上线培训后期 ...
判断当前入口是PC端企业微信还是PC端浏览器。或者是APP端企业微信
function isQyweixin(){//判断当前入口是PC端还是APP端let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone| ...
PC端动态视频背景引导页（非自适应）
简介: 新人学习,看了几天html css视频写了这个引导页,代码还不规范,目前还在学习中,希望各位大佬勿喷网盘下载地址: http://kekewangLuo.net/3Y9J4ZPjy380 图 ...
PC端品优购网页制作（common.css）2
正式制作网页网站首页一般都是使用index命名,比如index.html或index.php 我们开始制作首页的头部和底部的时候,根据模块化开发,样式要写到common.css里面常用模块类名命名 ...
PC端品优购项目——首页制作
目录 1. 品优购项目规划 1.1 网站制作流程 1.2 品优购项目整体介绍 1.3 品优购项目的学习目的 1.4 开发工具以及技术栈 1.5 总结 1.6 品优购项目搭建工作 1.6.1 创建文件夹 ...
html手机pc不同页面,PC端和手机端如何同时生成静态页
静态页是和图片类似的静态资源,访问静态资源不会经过程序处理,不会根据浏览器返回不同页面.要同时支持PC端和手机端浏览器,且要生成静态页时,最好使用bootstrap之类的技术,实现自适应页面设计. 如 ...
14.------------------------------------------------------------------------------【PC端品优购项目】
文章目录 [PC端品优购项目]前端小抄(14) 电商-主页电商-分类列表页电商-注册页一.品优购项目规划 1.1 网站制作流程 1.2 品优购项目整体介绍 1.3 品优购项目的学习目的 1.4 ...
钢材php源码,PHP响应式宽屏大气的重工业钢铁钢材机械企业网站整站源码(自适应手机移动端) dedecms内核...
[温馨提示]源码包解压密码:www.youhutong.com 资源描述 PHP响应式宽屏大气的重工业钢铁钢材机械企业网站整站源码(自适应手机移动端) dedecms内核源码介绍: 采用织梦最新内核 ...

PC端企业类型整页制作

PC端的布局

通栏

版心

源码

HTML源码

CSS源码

运行结果

PC端企业类型整页制作相关推荐

最新文章

热门文章