右侧始终没法固定
<!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">
<title>圣杯布局</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
min-width: 300px;
}
.header,.foot{
width: 100%;
height: 80px;
background: black;
line-height: 80px;
text-align: center;
float: left;
position: relative;
padding: 5px 0px;
}
.header img{
position: absolute;
left: 0;
top:-5px
}
.header ul{
list-style: none;
position: absolute;
right: 0;
color: white
}
.header ul li{
float: left;
margin-left: -210px;
cursor: pointer;
}
.main{
padding: 0 20% 0 25%;
}
.middle,.left,.right{
position: relative;
min-height: 300px
}
.middle{
width: 100%;
height:700px;
background-color: pink;
float: left;
position: relative;
}
.m-item{
width:600px;
height: 400px;
position: absolute;
top:50%;
left: 50%;
margin-top:-200px;
margin-left: -300px
}
.left{
width: 46%;
height: 700px;
background-color: rgb(246, 207, 185);
float: left;
margin-left: -70%;
left: -76%;
position: relative;
}
.word{
widows: 200px;
height: 500px;
position: absolute;
top:50%;
left: 50%;
margin-top:-200px;
margin-left: -150px
}
.word ul{
list-style: none;
}
.word ul li{
margin-top: 10px
}
.word ul li span{
background-color: pink
}
.right{
width: 36.3%;
height: 700px;
background-color: rgb(100, 190, 238);
float: left;
margin-left: -40%;
right: -40%;
position: relative;
}
.login{
width: 150px;
height: 500px;
position: absolute;
top:50%;
left: 50%;
margin-top: -210px;
margin-left: -152px
}
.login form input{
width:100%;
height: 45px;
margin: 10px auto;
}
.foot ul{
list-style: none;
position: absolute;
left: 25%;
color:white
}
.foot ul li{
float: left;
}
</style>
</head>
<body>
<!-- 头部 -->
<div class="header">
<img src="http://img1.sycdn.imooc.com/climg//590037f600016ce303000100.png" alt="">
<ul>
<li>课程</li>
<li>职业路径</li>
<li>实战</li>
<li>猿问</li>
<li>手记</li>
</ul>
</div>
<!-- 主体 -->
<div class="main">
<div class="middle">
<div class="m-item"><img src="http://img1.sycdn.imooc.com/climg//590037e00001fab706000400.jpg" alt=""></div>
</div>
<div class="left">
<div class="word">
<h2>课程推荐</h2>
<ul>
<li><span>职业路径</span> HTML5与CSS3实现动态网页</li>
<li><span>职业路径</span> 零基础入门Android语法与界面</li>
<li><span>职业路径</span> iOS基础语法与常用控件</li>
<li><span>职业路径</span> PHP入门开发</li>
<li><span>职业路径</span> JAVA入门开发</li>
</ul>
</div>
</div>
<div class="right">
<div class="login">
<h1>登录</h1>
<form>
<input type="text" name="username" value="" placeholder="请输入登录邮箱/手机" >
<input type="password" name="password" placeholder="6-16位密码，区分大小写，不能为空格">
<input type="submit" value="登录" style="background-color: red;color: white">
</form>
</div>
</div>
</div>
<!-- 尾部 -->
<div class="foot">
<ul>
<li>网站首页</li>
<li>企业合作</li>
<li>人才招聘</li>
<li>联系我们</li>
<li>常见问题</li>
<li>友情链接</li>
</ul>
</div>
</body>
</html>0
收起
正在回答 回答被采纳积分+1
1回答
相似问题
登录后可查看更多问答，登录/注册
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36712 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星