实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
/* 基本设置
*去掉标签的padding和margin宽高
*
*/
body,
p,
h1,
h2,
h3,
h4,
div,
a,
li,
ul,
input,
img {
margin: 0;
padding: 0;
}
/* 设置左浮动类 */
.left {
float: left;
}
/* 设置右浮动类 */
.right {
float: right;
}
/* 设置body背景 */
body {
background-color: #f9f9f9;
}
/* 头部区块设置
*设置宽度，居中对齐，背景颜色（渐变色），
*/
.header {
width: 80%;
height: 60px;
margin: 0 auto;
background: linear-gradient(#000, #999);
}
/* 头部LOGO */
.header .logo {
height: 60px;
}
.header .logo img {
height: 60px;
}
/* 导航列表设置 */
.header .nav .item {
list-style: none;
float: left;
min-width: 100px;
height: 60px;
}
/* 导航链接设置 */
.header .nav .item a {
line-height: 60px;
text-decoration: none;
color: beige;
display: block;
text-align: center;
}
.header .nav .item a:hover {
background-color: brown;
font-size: 1.1rem;
}
/* 搜索区域设置 */
.header .searchbox {
/* height: 60px; */
/* line-height: 60px; */
margin: 10px 20px;
/* box-sizing: border-box; */
}
/* 设置搜索区输入框 */
.header .searchbox .search {
/* height: 40px; */
width: 260px;
padding: 10px;
/* line-height: 40px; */
/* padding: 10px; */
}
/* 设置搜索区按钮 */
.header .searchbox button {
padding: 6px;
font-size: 16px;
}
/* banner设置 */
.banner {
width: 80%;
margin: 10px auto;
height: 300px;
}
.banner img {
height: 300px;
width: 100%;
}
/* 主体设置*/
.container {
width: 80%;
margin: 5px auto;
background-color: #f8f8f8;
/* margin-top: 5px; */
overflow: hidden;
/* box-sizing: border-box; */
/* border: 1px solid green; */
}
/* 设置中间栏目的宽高 */
.container .main {
width: 100%;
min-height: 800px;
margin-top: 10px;
padding-left: 205px;
padding-right: 205px;
/* 该处必须设置boxsizing的值为border-box；
*若不设置，该宽度为父元素的宽度加上padding和border宽度
*/
box-sizing: border-box;
/* border: 1px solid red; */
}
/* 中间主体栏目设置 */
.container .main .content {
width: 50%;
min-height: 300px;
/* background-color: aqua; */
/* margin: 10px; */
padding: 10px;
/* border: 1px solid red; */
box-sizing: border-box;
}
/* 图片位置设置 三列布局 */
.container .main .content .show {
width: 33.3%;
min-height: 100px;
overflow: hidden;
}
.show a {
text-decoration: none;
display: block;
width: 100%;
padding: 5px;
overflow: hidden;
}
/*中间栏 显示图片宽度设置 */
.show a img {
width: 90%;
/* margin: 5px auto; */
display: block;
}
.filmtitle {
/* padding: 3px; */
/* margin: 5px; */
}
.play {
margin-right: 15px;
}
.grade,
.heat {
width: 50%;
/* margin: 5px; */
}
/* 设置左侧栏目显示位置和宽高 */
.container .leftcolumn {
width: 200px;
min-height: 800px;
/* box-sizing: border-box; */
margin-left: -100%;
background-color: #f3f3f3;
/* border: 1px solid black; */
}
/* 左侧边栏内容设置 */
.leftcolumn h3 {
padding-top: 10px;
}
.leftcolumn .leftnav {
overflow: hidden;
}
.leftcolumn .leftnav .leftitem {
width: 100px;
list-style: none;
float: left;
padding: 5px;
box-sizing: border-box;
height: 40px;
}
.leftcolumn .leftnav .leftitem a {
text-decoration: none;
display: block;
line-height: 30px;
}
.leftcolumn .leftnav .leftitem a:hover {
background-color: brown;
font-size: 1.1rem;
}
/* 设置右侧栏目显示位置和宽高 */
.container .rightcolumn {
width: 200px;
min-height: 800px;
margin-left: -200px;
background-color: #f3f3f3;
/* border: 1px solid royalblue; */
}
.rightitem {
list-style: none;
width: 100%;
padding: 10px;
box-sizing: border-box;
}
.rightitem img {
width: 100%;
}
.rightitem a {
display: block;
text-align: center;
}
/* 页脚设置宽高和页脚内元素的设置 */
.footer {
width: 80%;
height: 60px;
margin: 0 auto;
background: linear-gradient(#fff, #666);
margin-top: 5px;
}
.footer p {
text-align: center;
line-height: 60px;
}
.footer p a {
text-decoration: none;
color: beige;
}
</style>
<title>第一个网页（圣杯布局）</title>
</head>
<body>
<!-- 页面头部开始 -->
<div class="header">
<!-- logo -->
<div class="logo left">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1567753452611&di=3cb5a4ff5984fcfcbd08cf7081721d9b&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fforum%2Fw%3D580%2Fsign%3D1f78d29e7bec54e741ec1a1689399bfd%2F1c9a0cf431adcbef484e21a6acaf2edda2cc9fd4.jpg"
alt="">
</div>
<!-- 导航 -->
<ul class="nav left">
<li class="item"><a href="">首页</a></li>
<li class="item"><a href="">电影</a></li>
<li class="item"><a href="">电视剧</a></li>
<li class="item"><a href="">网络电影</a></li>
<li class="item"><a href="">脱口秀</a></li>
</ul>
<!-- 搜索 -->
<div class="searchbox left">
<input type="text" name="search" class="search" placeholder="请输入影片名称">
<button>搜索</button>
</div>
</div>
<!-- 页面头部结束 -->
<div class="banner">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1567966708448&di=4ec426c62a5c2367b5016f67fae9a264&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F3522d49a0c889fef7859745baf89a8d8880c5c54f6e0-vu5doF_fw658" alt="">
</div>
<!-- 页面主体区块开始 -->
<div class="container">
<!-- 中间页面主体 -->
<div class="main left">
<div class="content left">
<h3>经典港片</h3>
<hr>
<div class="show left">
<a href="">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=615139234,1768465263&fm=26&gp=0.jpg" alt="">
<h4 class="left filmtitle">无间道</h4>
<button class="right play">播放</button>
<span class="left grade">评分:9.0</span>
<span class="left heat">热度:*****</span>
</a>
</div>
<div class="show left">
<a href="">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=615139234,1768465263&fm=26&gp=0.jpg" alt="">
<h4 class="left filmtitle">无间道</h4>
<button class="right play">播放</button>
<span class="left grade">评分:9.0</span>
<span class="left heat">热度:*****</span>
</a>
</div>
<div class="show left">
<a href="">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=615139234,1768465263&fm=26&gp=0.jpg" alt="">
<h4 class="left filmtitle">无间道</h4>
<button class="right play">播放</button>
<span class="left grade">评分:9.0</span>
<span class="left heat">热度:*****</span>
</a>
</div>
<div class="show left">
<a href="">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=615139234,1768465263&fm=26&gp=0.jpg" alt="">
<h4 class="left filmtitle">无间道</h4>
<button class="right play">播放</button>
<span class="left grade">评分:9.0</span>
<span class="left heat">热度:*****</span>
</a>
</div>
<div class="show left">
<a href="">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=615139234,1768465263&fm=26&gp=0.jpg" alt="">
<h4 class="left filmtitle">无间道</h4>
<button class="right play">播放</button>
<span class="left grade">评分:9.0</span>
<span class="left heat">热度:*****</span>
</a>
</div>
<div class="show left">
<a href="">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=615139234,1768465263&fm=26&gp=0.jpg" alt="">
<h4 class="left filmtitle">无间道</h4>
<button class="right play">播放</button>
<span class="left grade">评分:9.0</span>
<span class="left heat">热度:*****</span>
</a>
</div>
</div>
<div class="content left">
<h3>经典港片</h3>
<hr>
<div class="show left">
<a href="">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=615139234,1768465263&fm=26&gp=0.jpg" alt="">
<h4 class="left filmtitle">无间道</h4>
<button class="right play">播放</button>
<span class="left grade">评分:9.0</span>
<span class="left heat">热度:*****</span>
</a>
</div>
<div class="show left">
<a href="">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=615139234,1768465263&fm=26&gp=0.jpg" alt="">
<h4 class="left filmtitle">无间道</h4>
<button class="right play">播放</button>
<span class="left grade">评分:9.0</span>
<span class="left heat">热度:*****</span>
</a>
</div>
<div class="show left">
<a href="">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=615139234,1768465263&fm=26&gp=0.jpg" alt="">
<h4 class="left filmtitle">无间道</h4>
<button class="right play">播放</button>
<span class="left grade">评分:9.0</span>
<span class="left heat">热度:*****</span>
</a>
</div>
<div class="show left">
<a href="">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=615139234,1768465263&fm=26&gp=0.jpg" alt="">
<h4 class="left filmtitle">无间道</h4>
<button class="right play">播放</button>
<span class="left grade">评分:9.0</span>
<span class="left heat">热度:*****</span>
</a>
</div>
<div class="show left">
<a href="">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=615139234,1768465263&fm=26&gp=0.jpg" alt="">
<h4 class="left filmtitle">无间道</h4>
<button class="right play">播放</button>
<span class="left grade">评分:9.0</span>
<span class="left heat">热度:*****</span>
</a>
</div>
<div class="show left">
<a href="">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=615139234,1768465263&fm=26&gp=0.jpg" alt="">
<h4 class="left filmtitle">无间道</h4>
<button class="right play">播放</button>
<span class="left grade">评分:9.0</span>
<span class="left heat">热度:*****</span>
</a>
</div>
</div>
<div class="content left">
<h3>经典港片</h3>
<hr>
<div class="show left">
<a href="">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=615139234,1768465263&fm=26&gp=0.jpg" alt="">
<h4 class="left filmtitle">无间道</h4>
<button class="right play">播放</button>
<span class="left grade">评分:9.0</span>
<span class="left heat">热度:*****</span>
</a>
</div>
<div class="show left">
<a href="">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=615139234,1768465263&fm=26&gp=0.jpg" alt="">
<h4 class="left filmtitle">无间道</h4>
<button class="right play">播放</button>
<span class="left grade">评分:9.0</span>
<span class="left heat">热度:*****</span>
</a>
</div>
<div class="show left">
<a href="">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=615139234,1768465263&fm=26&gp=0.jpg" alt="">
<h4 class="left filmtitle">无间道</h4>
<button class="right play">播放</button>
<span class="left grade">评分:9.0</span>
<span class="left heat">热度:*****</span>
</a>
</div>
<div class="show left">
<a href="">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=615139234,1768465263&fm=26&gp=0.jpg" alt="">
<h4 class="left filmtitle">无间道</h4>
<button class="right play">播放</button>
<span class="left grade">评分:9.0</span>
<span class="left heat">热度:*****</span>
</a>
</div>
<div class="show left">
<a href="">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=615139234,1768465263&fm=26&gp=0.jpg" alt="">
<h4 class="left filmtitle">无间道</h4>
<button class="right play">播放</button>
<span class="left grade">评分:9.0</span>
<span class="left heat">热度:*****</span>
</a>
</div>
<div class="show left">
<a href="">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=615139234,1768465263&fm=26&gp=0.jpg" alt="">
<h4 class="left filmtitle">无间道</h4>
<button class="right play">播放</button>
<span class="left grade">评分:9.0</span>
<span class="left heat">热度:*****</span>
</a>
</div>
</div>
<div class="content left">
<h3>经典港片</h3>
<hr>
<div class="show left">
<a href="">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=615139234,1768465263&fm=26&gp=0.jpg" alt="">
<h4 class="left filmtitle">无间道</h4>
<button class="right play">播放</button>
<span class="left grade">评分:9.0</span>
<span class="left heat">热度:*****</span>
</a>
</div>
<div class="show left">
<a href="">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=615139234,1768465263&fm=26&gp=0.jpg" alt="">
<h4 class="left filmtitle">无间道</h4>
<button class="right play">播放</button>
<span class="left grade">评分:9.0</span>
<span class="left heat">热度:*****</span>
</a>
</div>
<div class="show left">
<a href="">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=615139234,1768465263&fm=26&gp=0.jpg" alt="">
<h4 class="left filmtitle">无间道</h4>
<button class="right play">播放</button>
<span class="left grade">评分:9.0</span>
<span class="left heat">热度:*****</span>
</a>
</div>
<div class="show left">
<a href="">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=615139234,1768465263&fm=26&gp=0.jpg" alt="">
<h4 class="left filmtitle">无间道</h4>
<button class="right play">播放</button>
<span class="left grade">评分:9.0</span>
<span class="left heat">热度:*****</span>
</a>
</div>
<div class="show left">
<a href="">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=615139234,1768465263&fm=26&gp=0.jpg" alt="">
<h4 class="left filmtitle">无间道</h4>
<button class="right play">播放</button>
<span class="left grade">评分:9.0</span>
<span class="left heat">热度:*****</span>
</a>
</div>
<div class="show left">
<a href="">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=615139234,1768465263&fm=26&gp=0.jpg" alt="">
<h4 class="left filmtitle">无间道</h4>
<button class="right play">播放</button>
<span class="left grade">评分:9.0</span>
<span class="left heat">热度:*****</span>
</a>
</div>
</div>
</div>
<!-- 左侧导航栏目 -->
<div class="leftcolumn left">
<h3>电影电视剧</h3>
<hr>
<ul class="leftnav">
<li class="leftitem"><a href="">国产电影</a></li>
<li class="leftitem"><a href="">国外电影</a></li>
<li class="leftitem"><a href="">电视剧</a></li>
<li class="leftitem"><a href="">资讯</a></li>
<li class="leftitem"><a href="">网络电影</a></li>
<li class="leftitem"><a href="">片花</a></li>
<li class="leftitem"><a href="">脱口秀</a></li>
<li class="leftitem"><a href="">动漫</a></li>
<li class="leftitem"><a href="">***大片</a></li>
<li class="leftitem"><a href="">***电影</a></li>
</ul>
<h3>娱乐时尚</h3>
<hr>
<ul class="leftnav">
<li class="leftitem"><a href="">娱乐</a></li>
<li class="leftitem"><a href="">搞笑</a></li>
<li class="leftitem"><a href="">体育</a></li>
<li class="leftitem"><a href="">旅游</a></li>
<li class="leftitem"><a href="">时尚</a></li>
<li class="leftitem"><a href="">游戏</a></li>
<li class="leftitem"><a href="">音乐</a></li>
<li class="leftitem"><a href="">汽车</a></li>
<li class="leftitem"><a href="">健康</a></li>
<li class="leftitem"><a href="">科技</a></li>
</ul>
</div>
<!-- 右侧栏目 -->
<div class="rightcolumn left">
<h3>热播电影</h3>
<hr>
<ul class="rightcontent">
<li class="rightitem">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1567961456751&di=dc0efd6c7716876e9aa7072d3abf8cd3&imgtype=0&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2Ffa86e431f17f9c3f399faf23f8d97e03272036f4.png" alt="">
<a href="">烈火英雄</a>
</li>
</ul>
<ul class="rightcontent">
<li class="rightitem">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1567961456751&di=dc0efd6c7716876e9aa7072d3abf8cd3&imgtype=0&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2Ffa86e431f17f9c3f399faf23f8d97e03272036f4.png" alt="">
<a href="">烈火英雄</a>
</li>
</ul>
<ul class="rightcontent">
<li class="rightitem">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1567961456751&di=dc0efd6c7716876e9aa7072d3abf8cd3&imgtype=0&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2Ffa86e431f17f9c3f399faf23f8d97e03272036f4.png" alt="">
<a href="">烈火英雄</a>
</li>
</ul>
<h3>热播电影</h3>
<hr>
<ul class="rightcontent">
<li class="rightitem">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1567961456751&di=dc0efd6c7716876e9aa7072d3abf8cd3&imgtype=0&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2Ffa86e431f17f9c3f399faf23f8d97e03272036f4.png" alt="">
<a href="">烈火英雄</a>
</li>
</ul>
<ul class="rightcontent">
<li class="rightitem">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1567961456751&di=dc0efd6c7716876e9aa7072d3abf8cd3&imgtype=0&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2Ffa86e431f17f9c3f399faf23f8d97e03272036f4.png" alt="">
<a href="">烈火英雄</a>
</li>
</ul>
</div>
</div>
<!-- 页面主体区块结束 -->
<!-- 页面头部区块 -->
<div class="footer">
<p>
<a href="">©长沙海彤电子商务***</a> |
<a href="">湘IPC备1234567</a> |
<a href="">地址：长沙市雨花区</a>
</p>
</div>
<!-- 页面头部区块结束 -->
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
总结
一、圣杯布局法基本机构：内容主体区：直接分中左右结构，middle栏目不需要在外包盒子，只需增加box-sizing的属性值为border-box;
二、优缺点：圣杯布局中间结构为自适应结构，适用各种分辨率的设备浏览，但左右侧宽度固定，无法真正完成自适应，且中间栏目自适应的内容区，需查询媒体分辨率，设置显示数量，否则在不能分辨率的情况下，内容显示各种变形；
三、代码简洁及复用问题：HTML代码嵌套必须合理，去除多余的盒子；CSS同一类同一处问题可以先写基本设置，如高宽背景等，再写特殊的属性；同一属性值多次复用，可以单独做一个类，直接添加类名即可。
四、元素属性的新解：设置背景的渐变色：background：linear-gradient(颜色1，颜色2）线型渐变；
