设计简单前端网页遇到的世界难题
这几天急着要做一个简单的前端网页，要求有一条导航栏、侧边也有导航栏、中间是iframe框架(点击连接在这里展现)，然后大概做成了但是！有几个问题困扰了我三四天，上网查也找不到：
1、我的导航栏无论用display：inline-block、还是float:left、还是position,都无法调整个导航栏在nav这条盒子里左边的边距，margin-left毫无作用；
2、我的主页iframe框架无法在主页保持首页内容画面，我的主页iframe框架那是一片空白，每次刷新也是空白，只有点击了“首页”这个超链接才能显示；
3、我的导航栏一旦页面放大就要跑到不知道什么地方去
下面是我的代码：
主页的html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>XXX的HTML自学网页</title>
<link rel="stylesheet" href="./整体布局的样式.css" type="text/css">
<link rel="stylesheet" href="./导航栏.css" type="text/css">
</head>
<body>
<div id="main">
<div class="head">
XXX的HTML自学网页
<div class="myself">
<img src="../../自学/22215120636-我的梦想个人网页/我自己.jpg" alt="">
<div class="text">XXX 2221274
20636</div>
</div>
</div>
<div class="nav">
<div class="nav_daohangcaidan"></div>
<ul>
<li class="daohangcaidan1"><a href="./首页.html" target="lianjie">首页</a></li>
<li class="daohangcaidan"><a href="./HTML子页.html" target="lianjie">HTML</a></li>
<li class="daohangcaidan"><a href="./CSS子页.html" target="lianjie">CSS</a></li>
<li class="daohangcaidan"><a href="./JavaScript子页.html" target="lianjie">JavaScript</a></li>
<li class="daohangcaidan"><a href="./WebSQL数据库子页.html" target="lianjie">WebSQL</a></li>
<li class="daohangcaidan6"><a href="./JSON子页.html" target="lianjie">JSON</a></li>
</ul>
</div>
<div id="content">
<div class="left">
知识点
<ul>
<li><a href="#">HTML教程</a></li>
<li><a href="#">HTML编辑器</a></li>
<li><a href="#">HTML 教程</a></li>
<li><a href="#">HTML 简介</a></li>
<li><a href="#">HTML 编辑器</a></li>
<li><a href="#">HTML 基础</a></li>
<li><a href="#">HTML 元素</a></li>
<li><a href="#">HTML 属性</a></li>
<li><a href="#">HTML 标题</a></li>
<li><a href="#">HTML 段落</a></li>
<li><a href="#">HTML5 教程</a></li>
<li><a href="#">HTML5 浏览器支持</a></li>
<li><a href="#">HTML5 新元素</a></li>
<li><a href="#">HTML5 Canvas</a></li>
<li><a href="#">HTML5 SVG</a></li>
<li><a href="#">JSON 教程</a></li>
<li><a href="#">k401</a></li>
<li><a href="#">k402</a></li>
<li><a href="#">k403</a></li>
<li><a href="#">k404</a></li>
<li><a href="#">k405</a></li>
<li><a href="#">k406</a></li>
<li><a href="#">k407</a></li>
<li><a href="#">k408</a></li>
<li><a href="#">k409</a></li>
</ul>
</div>
<div class="middle">
<iframe src="" frameborder="0" name="lianjie"></iframe>
</div>
<div class="right">
<textarea rows="29" cols="21" style="font-size: 21px;">
学习笔记
可以在右方写下你对本章学习的心得体会以及笔记!
</textarea>
</div>
</div>
<div class="footer">我累了，未完工半成品，老师将就着看吧，尽力了</div>
</div>
</body>
</html>
主页整体布局css代码：
/* 第一步设置整体body没有内外边界，不会出现留白现象 */
*{
padding: 0;
margin: 0;
}
/* 第二步，设置整个main大盒子，不然下面那些小盒子就找不到父盒子参照物 */
#main{
/* 整个网页占整个屏幕所有面积 */
width: 100%;
height: 100%;
margin: 0 auto;
text-align: center;
font-size: 20px;
}
/* 第三步设置“中小盒子” */
.head{
height: 150px;
line-height: 140px;
color: aliceblue;
font-size: 60px;
font-family: monospace;
background-image: url(./head背景.gif);
position: relative;
}
.myself{
width: 150px;
height: 190px;
position: absolute;
top: 0;
right: 0;
}
.myself img{
width: 100%;
height: 150px;
}
.myself .text{
background-color: antiquewhite;
color: black;
position: absolute;
bottom: 0;
width: 100%;
height: 40px;
font-size: 15px;
font-weight: 900;
line-height: 40px;
}
.nav{
width: 100%;
height: 40px;
background-color: rgb(63, 61, 61);
box-shadow: 0 1px 2px #666;
height: 40px;
background: #333;
/* 给它个阴影 */
box-shadow: 0 1px 2px #666;
}
#content{
clear: both;
height: 707px;
}
#content a{
color:aliceblue;
text-decoration: none;
}
#content iframe{
width: 100%;
height: 100%;
overflow: scroll;
}
.left,.middle,.right{
float: left;
}
/* 勿忘一件事，宽高必须设置！！！ */
.left{
/* 同时切记，在一个父盒子里设置几个小盒子宽度用百分比，不然不同像素屏幕大小不同会留白 */
width: 13%;
/* 高和父盒子一样，但是还是要记得设置 */
height: 707px;
background:rgba(0,0,0,0.5);
overflow: scroll;
}
.left a{
font-family: '宋体';
}
.middle{
/* 同时切记，在一个父盒子里设置几个小盒子宽度用百分比，不然不同像素屏幕大小不同会留白 */
width: 70%;
/* 高和父盒子一样，但是还是要记得设置 */
height: 707px;
background-image: url(./网页背景图.gif);
background-repeat: no-repeat;
background-size: 100% 800px;
}
.right{
/* 同时切记，在一个父盒子里设置几个小盒子宽度用百分比，不然不同像素屏幕大小不同会留白 */
width: 17%;
/* 高和父盒子一样，但是还是要记得设置 */
height: 700px;
}
.footer{
clear: both;
line-height: 80px;
font-size: 30px;
color: aliceblue;
height: 80px;
background-image: url(./head背景.gif);
}
导航栏css代码：
/* .nav .nav_daohangcaidan{ */
/* 让老子抓狂了一晚上的超级他妈的傻逼问题 */
/* li在代码里换行时也意味着是空格间隙，要么所有li写成一行，要么让ul的“字体大小”为零 */
/* font-size: 0; */
/* 记住了！！！！！ */
/* padding: 0;
margin-left: 50px;
left: 0;
width: 76.5%;
height: 100%;
border: 2px solid rgb(224, 28, 28);
position: relative; */
/* } */
.nav ul{
/* 让老子抓狂了一晚上的超级他妈的傻逼问题 */
/* li在代码里换行时也意味着是空格间隙，要么所有li写成一行，要么让ul的“字体大小”为零 */
font-size: 0;
/* 记住了！！！！！ */
/* padding: 0;
width: 76.5%;
height: 100%; */
}
.nav li{
border-left: 1px solid black;
width: 127px;
height: 40px;
text-align: center;
list-style: none;
font-size: 20px;
background-image: url(../../自学/盒子模块/导航模型/灰色导航栏条.png);
background-repeat: no-repeat;
background-size: 100% 40px;
display:inline-block;
}
.nav li .daohangcaidan1{
margin-left: 10px;
}
.nav li .daohangcaidan6{
border-right: 1px solid black;
}
.nav a{
font-family:'Times New Roman', Times, serif;
font-weight: 800px;
line-height: 40px;
color: aliceblue;
/* 一定要把超链接的宽度设为占满一整个li，
这样鼠标移到li超链接才会整块有变化，不然就只有超链接那几个字的区域范围有变化 */
width: 100%;
height: 100%;
text-decoration: none;
/* a超链接是行内元素，不能调宽高，只能通过display：inline-block之后才可以调 */
display: inline-block;
}
.nav li a:hover{
color: rgb(9, 236, 244);
background-image: url(../../自学/盒子模块/导航模型/单符号黑.jpg);
background-repeat: no-repeat;
background-size: 100% 40px;
}
首页子页面代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>首页</title>
<style>
body{
color: aliceblue;
}
</style>
</head>
<body>
<p style="text-align: center; font-weight: 800; font-size: 19px;">
领先的 Web 技术教程 - 全部免费
<br>
在 XXX的Web网站，你可以找到你所需要的所有的网站建设教程。
<br>
从基础的 HTML 到 CSS，乃至进阶的 XML、SQL、JS、PHP 和 ASP.NET。
<br>
从左侧的菜单选择你需要的教程！
</p>
<hr>
<h2>完整的网站技术参考手册</h2>
<p>
我们的参考手册涵盖了网站技术的方方面面。<br>
其中包括W3C标准技术：HTML、CSS、XML 。以及其他技术，诸如 JavaScript、PHP、SQL 等。
</p>
<hr>
<h2>在线实例测试工具</h2>
<p>
在 XXXWeb上，我们提供上千个实例。<br>
通过使用我们的在线编辑器，你可以编辑这些例子，并对代码进行实验。
</p>
<hr>
<h2>快捷易懂的学习方式</h2>
<p>
一寸光阴一寸金，因此，我们为您提供快捷易懂的学习内容。<br>
在这里，您可以通过一种易懂的便利的模式获得您需要的任何知识。
</p>
<hr>
<h2>从何入手？</h2>
<p>
什么是一个 Web 建设者需要学习的知识呢？<br>
XXX将为您回答这个问题，在您成为专业 Web 开发者的路上助一臂之力。<br>
如果您是初学者，请您阅读《网站构建初级教程》。<br>
如果您是开发者，请您阅读《网站构建高级教程》。<br>
</p>
</body>
</html>
受不了了，我专业是后端，前端自学真的很痛苦，完全一头雾水
- 给 .nav 加 margin-left
- 那你应该给 iframe 一个默认的 src地址吧。 默认就是首页的地址
3. 正常现象 缩放页面 如果你不是使用相对单位布局的都会出现错乱 你这个 放大后 head 会把nav 往下顶
- 你可以参考下这个问题的回答, 看看是否对你有帮助, 链接: https://ask.csdn.net/questions/7804853