请老师检查，谢谢。
<!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>
/* 清除默认 */
*{margin: 0;padding: 0;}
ul,li{ list-style: none;}
a{ text-decoration: none;}
/* 容器 */
.container{width: 100%; height: auto;}
/* 头部 */
.header{ width: 100%; height: 100px; background: black;
position: fixed;
left: 0;
top: 0;}
/* logo */
.logo{ float: left;}
.logo a,.logo img{display: block;}
/* 导航栏 */
.nav{ float: right;}
.nav li{ float: left; margin: 0 30px; font-size: 18px; line-height: 100px;}
.nav li a{ color: #fff;}
/* 主体 */
.main{ width: 100%; height: 800px; background: #add8e6; margin: 100px 0;color: black}
.main a{ color: black;}
/* 左边 */
.left{ width: 25%; height: 700px;float: left;padding: 100px 0 0 10%;
line-height: 30px;}
.left span{ background-color: pink;}
/* 中间 */
.middle{ width: 25%; height: 700px;float: left; padding: 100px 0 0 10%;
line-height: 30px;}
/* 右边 */
.right{ width: calc(~"25% - 5px"); height: 700px;float: left; padding: 100px 0 0 5%;
border-left: 5px orange solid;}
.right input{ width: 250px; height: 40px;}
.right .input_3{ background: red; border: none; color: #fff;}
/* 尾部 */
.footer{
width: 100%; height: 100px; background: black;
position: fixed;
bottom: 0;
left: 0;
text-align: center;}
.footer ul{
display: inline-block; }
.footer li{
float:left;
line-height: 100px;
color: #fff;
margin: 0 60px;}
.footer a{ color: #fff;}
</style>
</head>
<body>
<!-- 容器 -->
<div class="container">
<!-- 头部 -->
<div class="header">
<!--logo -->
<div class="logo">
<a href="#"><img src="http://img1.sycdn.imooc.com\/climg/58c0d2d900016ce303000100.png" alt="很抱歉"></a>
</div>
<!-- 导航栏 -->
<div class="nav">
<ul>
<li><a href="#">课程</a></li>
<li><a href="#">职业路径</a></li>
<li><a href="#">实战</a></li>
<li><a href="#">猿问</a></li>
<li><a href="#">手记</a></li>
</ul>
</div>
</div>
<!-- 主体 -->
<div class="main">
<!-- 左边 -->
<div class="left">
<h2>课程推荐</h2>
<a href="#"><span>职业路径</span> HTML5与CSS3实现动态网页版</a><br/>
<a href="#"><span>职业路径</span> 零基础入门Android语法与界面</a><br/>
<a href="#"><span>职业路径</span> iOS基础语法与常用控件</a><br/>
<a href="#"><span>职业路径</span> PHP入门开发</a><br/>
<a href="#"><span>职业路径</span> JAVA入门开发</a><br/>
</div>
<!-- 中间 -->
<div class="middle">
<h2>相关课程</h2>
<a href="#">HTML CSS JavaScript</a><br/>
<a href="#" >HTML5 CSS3 JQuery</a><br/>
<a href="#">移动端基础 移动端APP开发</a><br/>
</div>
<!-- 右边 -->
<div class="right">
<h2>登录</h2>
<br />
<form action=".." method="POST" name="right">
<input type="text" name="ZH"placeholder="请输入登录邮箱/手机号">
<br />
<br />
<input type="password" name="MM"placeholder="6-16位密码，区分大小写，不能用空格">
<br />
<br />
<input type="submit" name="DL" value="登录" class="input_3">
</form>
</div>
</div>
<!-- 尾部 -->
<div class="footer">
<ul>
<li><a href="#">网站首页</a></li>
<li><a href="#">企业合作</a></li>
<li><a href="#">人才招聘</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">常见问题</a></li>
<li><a href="#">友情链接</a></li>
</ul>
</div>
</div>
</body>
</html>PS:请问老师在宽度为百分数控制后怎么添加px控制的边框呢？（我用的方法是百度查询的，之前试了几次没成功）
8
收起
正在回答
2回答
同学你好，右侧的宽度没有生效：
建议修改如下：
如果宽度是百分数的话，建议边框也使用百分数。
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星