PC端企业类型整页制作练习
博文尚美
注：
首先观察设计图利用ps、蓝湖确定版心，编写公共类
- common类
/* 版心 */
.container {
width: 1080px;
margin: 0 auto;
/* 相对定位 */
position: relative;
}
/* 通栏 */
.container_fluid {
width: 100%;
}
/* 公共模块 */
* {
margin: 0;
padding: 0;
}
/* 清除ul ol中li的点 */
li {
list-style: none;
}
img {
display: block;
}
/* 去掉a连接的下划线 ，更改默认颜色*/
a {
text-decoration: none;
color: #646464;
}
/* 设置标题字体大小 */
h1,
h2,
h3 {
font-size: 16px;
}
/* 设置文本字体样式 */
body {
font-family: ArialMT;
}
/* 定义浮动及清除浮动 */
.l {
float: left;
}
.r {
float: right;
}
/* 清除浮动 */
.clear::after {
content: "";
display: block;
clear: both;
}
完整代码如下：
- common.css
/* 版心 */
.container {
width: 1080px;
margin: 0 auto;
/* 相对定位 */
position: relative;
}
/* 通栏 */
.container_fluid {
width: 100%;
}
/* 公共模块 */
* {
margin: 0;
padding: 0;
}
/* 清除ul ol中li的点 */
li {
list-style: none;
}
img {
display: block;
}
/* 去掉a连接的下划线 ，更改默认颜色*/
a {
text-decoration: none;
color: #646464;
}
/* 设置标题字体大小 */
h1,
h2,
h3 {
font-size: 16px;
}
/* 设置文本字体样式 */
body {
font-family: ArialMT;
}
/* 定义浮动及清除浮动 */
.l {
float: left;
}
.r {
float: right;
}
/* 清除浮动 */
.clear::after {
content: "";
display: block;
clear: both;
}
/*-- header star-- */
#header {
height: 81px;
}
#header .header_logo {
margin-top: 19px;
}
#header .header_menu {
font-size: 14px;
line-height: 81px;
}
#header .header_menu li {
float: left;
margin-left: 50px;
}
/* -- header end-- */
/* --area star-- */
.area_title {
text-align: center;
margin-top: 60px;
}
.area_title h2 {
font-size: 20px;
color: #363636;
font-weight: normal;
font-family: Adobe Heiti Std R;
margin-bottom: 10px;
background: url("../images/title_bg.png") center 7px no-repeat;
}
.area_title p {
font: 14px ArialMT;
color: #9F9F9F;
margin-bottom: 34px;
}
/* -- area end */
/* -- footer -- */
#footer {
background-color: #66c5b4;
}
#footer .container {
font-size: 12px;
height: 54px;
line-height: 54px;
color: white;
}
#footer ul {
margin-left: 430px;
}
#footer ul li {
float: left;
margin: 0 15px;
}
#footer ul li a {
color: #ffffff;
}
- index
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>博文尚美首页title>
<link rel="stylesheet" href="./css/common.css">
<link rel="stylesheet" href="./css/index.css">
head>
<body>
<div id="header" class="container">
<div class="header_logo l">
<a href="#">
<img src="./images/logo.png" alt="博文尚美">
a>
div>
<ul class="header_menu r">
<li>
<a href="#">HOMEa>
li>
<li>
<a href="#">ABOUTa>
li>
<li>
<a href="#">PROTFOLIOa>
li>
<li>
<a href="#">SERVICEa>
li>
<li>
<a href="#">NEWSa>
li>
<li>
<a href="#">CONTACTa>
li>
ul>
div>
<div id="banner" class="container_fluid">
<ul class="banner_list">
<li class="active">
<a href="#">a>
li>
<li>
<a href="#">a>
li>
<li>
<a href="#">a>
li>
<li>
<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 SERVICESp>
div>
<ul class="service_list">
<li>
<div>div>
<h3>1.web designh3>
<p>
企业品牌网站设计/手机网站制作
<br>
动画网站创意设计
p>
li>
<li>
<div>div>
<h3>2.graphic designh3>
<p>
标志logo设计/产品宣传册设计
<br>
企业广告/海报设计
p>
li>
<li>
<div>div>
<h3>3.e-business planh3>
<p>
淘宝/天猫装修设计及运营推广
<br>
企业微博、微信营销
p>
li>
<li>
<div>div>
<h3>4.mailboxagentsh3>
<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 sitep>
div>
<ul class="case_list clear">
<li>
<a href="#"><img src="./images/20141121095216750.png" alt="">a>
li>
<li>
<a href="#"><img src="./images/20141121095528549.png" alt="">a>
li>
<li>
<a href="#"><img src="./images/20141121105856226.png" alt="">a>
li>
ul>
<div class="case_btn">
<a href="#">VIEW MOREa>
div>
div>
div>
<div id="news" class="container">
<div class="area_title">
<h2>最新资讯h2>
<p>TEH LATEST NEWSp>
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>09i>
<span>Janspan>
div>
<div class="news_text l">
<h3><a href="#">网站排名进入前三的技巧说明a>h3>
<p>很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎
首页，更不用说进首页前三了。那么网站优...p>
div>
li>
<li>
<div class="news_date l">
<i>09i>
<span>Janspan>
div>
<div class="news_text l">
<h3><a href="#">网站排名进入前三的技巧说明a>h3>
<p>很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎
首页，更不用说进首页前三了。那么网站优...p>
div>
li>
<li>
<div class="news_date l">
<i>09i>
<span>Janspan>
div>
<div class="news_text l">
<h3><a href="#">网站排名进入前三的技巧说明a>h3>
<p>很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎
首页，更不用说进首页前三了。那么网站优...p>
div>
li>
<li>
<div class="news_date l">
<i>09i>
<span>Janspan>
div>
<div class="news_text l">
<h3><a href="#">网站排名进入前三的技巧说明a>h3>
<p>很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎
首页，更不用说进首页前三了。那么网站优...p>
div>
li>
ul>
dd>
dl>
div>
<div id="footer" class="containter_fluid">
<div class="container">
<p class="l">Copyright 2006- 2014 Bowenshangmei Culture All Rights Reservedp>
<ul class="r">
<li> <a href="#">Homea> |li>
<li> <a href="#">Abouta> |li>
<li> <a href="#">Portfolioa> |li>
<li> <a href="#">Contacta> |li>
ul>
div>
div>
body>
html>
- index.css
/* banner star */
#banner {
/* 相对定位 */
position: relative;
}
#banner .banner_list {
position: relative;
width: 100%;
height: 469px;
}
#banner .banner_list li {
width: 100%;
height: 100%;
background: url("../images/banner.png") no-repeat center 0;
/* 绝对定位 */
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;
}
/* banner end */
/* service star */
#service {
overflow: hidden;
min-height: 407px;
}
#service .service_list {
text-align: center;
}
#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-child(1) div {
background-image: url("../images/web1.png");
}
#service .service_list li:nth-child(2) div {
background-image: url("../images/mail1.png");
}
#service .service_list li:nth-child(3) div {
background-image: url("../images/graphic1.png");
}
#service .service_list li:nth-child(4) div {
background-image: url("../images/e-bussiness1.png");
}
#service .service_list li h3 {
font-size: 18px;
color: #434343;
line-height: 36px;
margin-top: 25px;
}
#service .service_list li p {
font-size: 14px;
color: #6D6D6D;
line-height: 22px;
}
/* service end */
/* --case star-- */
#case {
background-color: #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: #66C5B4;
text-align: center;
line-height: 37px;
border-radius: 25px;
margin: 0 auto;
margin-top: 37px;
}
#case .case_btn a {
display: block;
width: 100%;
height: 100%;
color: white;
}
/* case end */
/* new star */
#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;
}
/* new end */
效果图：