Web前端笔记（4）
前端完整页面设计：
1. PC端布局：
通栏：自适应浏览器的宽度
版心 ：固定一个宽度，并让容器居中
页面中需要用到的图片：(由于本人未能找到原版的图片资源，所以只是利用截屏到的图片，进行简单截图后使用，清晰度不够，单用于学习前端学习已足够)
图片资源链接：https://pan.baidu.com/s/1ZhaQ8oc2pGuH5uZvXsxjlQ
提取码：vj93
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>博文尚美</title>
<link rel="stylesheet" href="../CSS/common.css">
<style>
#banner{
position: relative;
}
#banner .banner-list{
width: 100%;
height: 394px;
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 a{
display: block;
width: 100%;
height: 100%;
}
#banner .banner-list li.active{
opacity: 1;
z-index: 10;
}
#banner .banner-btn{
width: 100%;
position: absolute; /*需要定位*/
bottom: 19px;
/*left: 200px;*/
z-index: 20;
text-align: center;
}
#banner .banner-btn li{
display: inline-block; /*转换为block，定义大小*/
width: 12px;
height: 12px;
border: 2px solid black;
border-radius: 50%;
box-sizing: border-box;
cursor: pointer;
}
#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: 81px;
height: 81px;
margin: 0 auto;
}
#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;
}
/*设置背景图片*/
#service .service-list li:nth-of-type(1) div{
background-image: url("../picture/bowen/3.png");
}
#service .service-list li:nth-of-type(2) div{
background-image: url("../picture/bowen/4.png");
}
#service .service-list li:nth-of-type(3) div{
background-image: url("../picture/bowen/5.png");
}
#service .service-list li:nth-of-type(4) div{
background-image: url("../picture/bowen/6.png");
}
#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: #66c5b4;
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: 100px;
color: white;
}
#news{
min-height: 450px;
overflow: hidden; /*防止margin传递，进行溢出隐藏*/
}
#news .news-list{
width: 100%;
}
#news .news-list li{
width: 50%;
margin-bottom: 48px;
float: left;
}
#news .area-title {
margin-top: 68px;
}
#news dl{
margin-top: 48px;
}
#news dt{
float: left;
width: 234px;
/*height: 196px;*/
}
#news dd{
float: left;
width: 846px;
}
#news .news-date{
float: left;
width: 70px;
height: 70px;
border-right: solid 1px #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{
float: left;
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 clear">
<div class="head-logo l">
<a href="#">
<img alt="博文尚美" title="博文尚美" src="../picture/bowen/1.png">
</a>
</div>
<ul class="head-menu r">
<li>
<a href="#">HOME</a>
</li>
<li>
<a href="#">ABOUT</a>
</li>
<li>
<a href="#">PORTFOLIO</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(../picture/bowen/2.png)">
<a href="#"></a>
</li>
<li style="background-image: url(../picture/bowen/2.png)">
<a href="#"></a>
</li>
<li style="background-image: url(../picture/bowen/2.png)">
<a href="#"></a>
</li>
<li style="background-image: url(../picture/bowen/2.png)">
<a href="#"></a>
</li>
</ul>
<ol class="banner-btn">
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
<div id="service" class="container">
<div class="area-title">
<h2>服务范围</h2>
<p>OUR SERVICE</p>
</div>
<ul class="service-list">
<li>
<div>
</div>
<h3>1.WEB DESIGN</h3>
<p>企业品牌网站设计/手机网站制作</p>
<p>动画网站创意设计</p>
</li>
<li>
<div>
</div>
<h3>2.GRAPHIC DESIGN</h3>
<p>标志LOGO设计/产品宣传册设计</p>
<p>企业广告/海报设计</p>
</li>
<li>
<div>
</div>
<h3>3.E-BUSINESS PLAN</h3>
<p>淘宝天猫装修设计及运营推广</p>
<p>企业微博，微信营销</p>
</li>
<li>
<div>
</div>
<h3>4.MAILBOX AGENT</h3>
<p>腾讯/网易企业邮箱品牌代理</p>
<p>个性化邮箱定制开发</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</p>
</div>
<ul class="case-list clear">
<li>
<a href="#">
<img alt="" src="../picture/bowen/7.png">
</a>
</li>
<li>
<a href="#">
<img alt="" src="../picture/bowen/8.png">
</a>
</li>
<li>
<a href="#">
<img alt="" src="../picture/bowen/9.png">
</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>
<img src="../picture/bowen/10.png" alt="" style="width: 234px;height: 196px">
</dt>
<dd>
<ul class="news-list">
<li>
<div class="news-date">
<i>09</i>
<span>Jan</span>
</div>
<div class="news-text">
<h3><a href="#">网站排名进入前三的技巧排名</a></h3>
<p>
很多客户都会纳闷自己的网站优化为什么到不了搜索引擎的首页，
更不用说进入前三了，那么网站优化的技巧
</p>
</div>
</li>
<li>
<div class="news-date">
<i>09</i>
<span>Jan</span>
</div>
<div class="news-text">
<h3><a href="#">网站排名进入前三的技巧排名</a></h3>
<p>
很多客户都会纳闷自己的网站优化为什么到不了搜索引擎的首页，
更不用说进入前三了，那么网站优化的技巧
</p>
</div>
</li>
<li>
<div class="news-date">
<i>09</i>
<span>Jan</span>
</div>
<div class="news-text">
<h3><a href="#">网站排名进入前三的技巧排名</a></h3>
<p>
很多客户都会纳闷自己的网站优化为什么到不了搜索引擎的首页，
更不用说进入前三了，那么网站优化的技巧
</p>
</div>
</li>
<li>
<div class="news-date">
<i>09</i>
<span>Jan</span>
</div>
<div class="news-text">
<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样式 common.css
*{
margin: 0;
padding: 0;
}
ul, ol{
list-style: none;
}
img{
display: block;
}
a{
text-decoration: none;
color: #464646;
}
h1, h2, h3, h4, h5, h6{
font-size: 16px;
}
body{
font-family: Arial, "Microsoft YaHei UI";
}
.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;
}
.area-title h2{
font-size: 20px;
height: 20px;
line-height: 20px;
color: #363636;
text-align: center;
}
.area-title p{
color: #9f9f9f;
font-size: 14px;
line-height: 34px;
text-align: center;
}
#foot{
background: #66c5b4;
}
#foot .container{
height: 54px;
font-size: 12px;
color: white;
}
#foot p{
line-height: 54px;
}
#foot a{
line-height: 54px;
color: white;
margin: 0 18px;
}
#foot div{
}
页面的效果：
顺便附上谷歌浏览器截全屏的方法:
参考博客：https://blog.csdn.net/llwy1428/article/details/92834705
