圣杯布局的自适应有点难啊，middle小于图片宽度时布局就异常了，如果是段落p，文本会自适应

来源：3-3 编程练习

不要太烂

2019-12-15 11:35:21

<!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>Document</title>
<style>
html,
body {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
}
.header {
width: 100%;
height: 5.5%;
background-color: black;
margin: 0 auto;
}
.logo {
float: left;
}
.logo img {
display: block;
}
.nav {
float: right;
height: 100%;
margin-right: 100px;
}
.nav ul {
list-style: none;
padding: 0;
margin: 0;
}
.nav ul li {
color: white;
display: block;
line-height: 50px;
margin: 0 20px;
float: left;
}
.logo img {
width: 150px;
height: 100%;
}
.footer ul {
list-style: none;
padding: 0;
margin: 0 auto;
}
.footer ul li {
display: inline-block;
color: white;
line-height: 50px;
margin: 0 40px;
}
.footer {
height: 5.5%;
background: black;
text-align: center;
width: 100%;
}
a {
text-decoration: none;
color: white
}
.container {
height: 89vh;
padding: 0 400px;
}
div.middle{
width:100%;
float: left;
background-color: pink;
position: relative;
height: 89vh;
text-align: center;
}
div.left{
margin-left: -100%;
left: -400px;
width: 400px;
background: rgb(253, 236, 210);
height: 89vh;
}
div.right{
margin-left: -400px;
right: -400px;
width: 400px;
background: rgb(159, 208, 224);
height: 89vh;
}
div.left,
div.right{
width: 400px;
float: left;
position: relative;
min-width: 400px;
padding-top: 40px;
box-sizing: border-box;
padding-left: 40px;
}
div.left ul {
list-style: none;
margin: 0;
padding: 0;
}
.left ul li {
margin-bottom: 16px;
}
span {
background-color: pink;
}
input {
width: 200px;
height: 30px;
margin-bottom: 20px;
border: 1px solid rgb(167, 188, 195);
}
input[type="submit"] {
background: red;
color: white;
font-weight: bold;
}
.middle img{
margin-top: 40px;
}
</style>
</head>
<body>
<div class="header">
<div class="logo">
<a href="https://www.gradle.xyz/config.json"><img
src="http://climg.mukewang.com/58c0d2d900016ce303000100.png" alt=""></a>
</div>
<div class="nav">
<ul>
<li><a href="https://www.gradle.xyz/config.json">课程</a></li>
<li><a href="https://www.gradle.xyz/config.json">职业路径</a></li>
<li><a href="https://www.gradle.xyz/config.json">实战</a></li>
<li><a href="https://www.gradle.xyz/config.json">猿问</a> </li>
<li><a href="https://www.gradle.xyz/config.json">手记</a></li>
</ul>
</div>
</div>
<div class="container">
<div class="middle">
<img src="http://climg.mukewang.com/590037e00001fab706000400.jpg" alt="">
</div>
<div class="left">
<h3>课程推荐</h3>
<ul>
<li><span>职业路径</span>&nbsp;HTML5与CSS3实现动态网页</li>
<li><span>职业路径</span>&nbsp;零基础入门Android语法与界面</li>
<li><span>职业路径</span>&nbsp;iOS基础语法和常用控件</li>
<li><span>职业路径</span>&nbsp;PHP入门开发</li>
<li><span>职业路径</span>&nbsp;JAVA入门开发</li>
</ul>
</div>
<div class="right">
<h3>登录</h3>
<form action="https://httpbin.org/get">
<input type="text" name="username" placeholder="用户名">
<br>
<input type="password" name="password" placeholder="密码">
<br>
<input type="submit" value="登录">
</form>
</div>
</div>
<div class="footer">
<ul>
<li><a href="https://www.gradle.xyz/config.json">网站首页</a></li>
<li><a href="https://www.gradle.xyz/config.json">企业合作</a></li>
<li><a href="https://www.gradle.xyz/config.json">人才招聘</a></li>
<li><a href="https://www.gradle.xyz/config.json">联系我们</a></li>
<li><a href="https://www.gradle.xyz/config.json">常见问题</a></li>
<li><a href="https://www.gradle.xyz/config.json">友情链接</a></li>
</ul>
</div>
</body>
</html>

写回答

1回答