html框架布局网页代码 学生个人网页制作html
大家好，关于html框架布局网页代码很多朋友都还不太明白，今天小编就来为大家分享关于学生个人网页制作html的知识，希望对各位有所帮助！
html框架如何实现左边为导航栏,右边为连接页面,代码写出来
<head>
<title>如何实现左边为导航栏点击后右边为连接页面</title>
<meta charset="gbk">
<script type="text/javascript">
function setTab(m,n){
var tli=document.getElementById("leftmenu"+m).getElementsByTagName("li");
var mli=document.getElementById("mcont"+m).getElementsByTagName("ul");
for(i=0;i<tli.length;i++){ tli[i].className=i==n?"hover":"";
mli[i].style.display=i==n?"block":"none";}}
</script>
<style type="text/css">
.aa{ width:120px; float:left;}
.aa li{ padding:5px; background:#ff0000; cursor:pointer;border:1px solid;}
.bb{ width:500px;height:200px; float:left; background:pink;}
.bb ul li{list-style:none;}
#leftmenu0{list-style:none;margin:0;}
</style>
</head>
<body>
<div class="aa">
<ul id="leftmenu0">
<li class="hover"οnclick="setTab(0,0)">nav1</li>
<liοnclick="setTab(0,1)">nav2</li>
<liοnclick="setTab(0,2)">nav3</li>
<liοnclick="setTab(0,3)">nav4</li>
<liοnclick="setTab(0,4)">nav5</li>
</ul>
</div>
<div id="mcont0" class="bb">
<ul class="block" style="display: block">
<span>content1</span>
<li>你的内容</li></ul>
<ul class="block" style="display: none">content2</ul>
<ul class="block" style="display: none">content3</ul>
<ul class="block" style="display: none">content4</ul>
<ul class="block" style="display: none">content5</ul>
</div>
</body>
</html>
扩展资料
ifame实现左侧导航栏右侧内容
1、在jsp文件的<head>中加入：
<style>
html,body{margin:0px;height:100%;}
</style>
才能使页面中的<div>设置height：100%起作用。100%是根据其父布局来确定的，所以必须确定父布局的高度。
而width：100%则可自动布满整个页面。
2、<divid="main"style="width:100%;height:100%;">
<divid="left"style="float:left;width:200px;height:100%;">
<arel="external nofollow" href="userlist.do"target="frame"><li>用户管理</li></a>
<arel="external nofollow" rel="external nofollow" href=""target="frame"><li>角色管理</li></a>
<arel="external nofollow" rel="external nofollow" href=""target="frame"><li>权限管理</li></a>
</div>
<divid="right"style="height:100%;width:auto;margin-left:200px;">
<iframeid="iframe"name="frame"scrolling="no"frameborder="0"height="100%"width="100%"></iframe>
</div>
</div>
float:left用于实现左右两个div并列。
更改iframe的src实现时，要注意是name属性，不是id属性。
怎么用html制作简单得网页代码
用html制作简单的网页的步骤：
1、整体形象设计：企业确定要搭建网站，那么首先就需要确定企业的整体形象，这个形象包括企业的logo设计，整个站点的色彩搭配，网页流程设计，版面设计，甚至包括哪些地方本使用动态效果，哪些地方搭配文字信息，又或者需要布局哪些模块等等，这个都需要纳入到整体形象设计当中。
2、页面风格设计：网站整体设计完成之后，需要落实到每个小的页面，每个页面风格设计可以不同，但大的方向却需要一致，这样才能保证整个站点是整洁有序的，千万不能是一个页面一个页面设计，这样让用户感觉到非常突兀，甚至会不适应。
3、代码设计：代码设计其实也就是功能设计，一个网站不可能只是展示，还需要有一些其他功能，最少有联系版块的功能，留言功能等等，如果是电子商务网站还需要一些支付功能等等。此外，代码设计也涵盖了整个网站的框架布局，这个需要站长结合SEO优化元素去设计。
网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。
html 怎么把网页分块,div
1、启动dreamweaver cs5，在弹出的对话框窗口中选择html，进入主界面编辑区域。
2、接着对网页的整个布局在草纸上绘制下来，做到心中有数，主要分成那几个模块。主要有脚注、菜单导航、主体、导航条四大部分。
3、接着点击设计进入设计状态，在代码区域书写整体框架的css，即
#ztkj｛width:80%;
boder:1px solid#000000;
height:800px;}
在body里添加<div id="ztkj"></div>即可在下面看到整体框架。
4、接着在书写导航条代码，即
#dht{padding:10px;
boder:1px solid#000000;
background-color:#a2a2ff;}
在第一个div中输入<div id="dht"></div>，查看效果变化。
5、书写主体内容的代码，即
#ztnr{
float:left;width:60%;
height:600px;boder:1px solid#000000;
text-align:center;
margin-light:10px;
margin-left:10px;}
在整体框架中输入<div id="ztnr">主体内容</div>，查看效果
6、书写菜单导航代码
#cddh{
float:right;
margin-right:10px;
width:35%;boder:1px#a2a2ff;
height:600px;}
接着在整体框架中输入代码<div id="cddh">菜单导航</div>
7、书写脚注的代码
#jz{
padding:10px;
boder:3px#a2a2ff;
text-algin:center;
clear:both;
margin-top:20px;}
在整体框架中输入代码<div id="jz">脚注</div>查看效果。
8、这样大体框架就制作出来了，按f12进行查看效果，效果不好需要进一步修改代码。把边框设置出来，把所有的boder进行修改为border:solid 5px#fcc;
9、由于整个框架不在中间位置，需要修改让其居中对齐，所以要在ztkj中添加一条语句margin:auto;
10、这样整个框架就出来，在实际的使用过程中要根据自己的需要进一步调整，执行文件-另存为命令，将网页保存就完成了。
文章到此结束，如果本次分享的html框架布局网页代码和学生个人网页制作html的问题解决了您的问题，那么我们由衷的感到高兴！