精华内容
下载资源
问答
  • div 用于对网页模块化划分div 标签可以把文档分割为独立的...变成模块,然后在做编辑和布局也就是把网页划成多个格子,方便我们在每个格子里操作这里是需要用CSS的,如果不懂的话,只要理解下面的代码就可以了<完整代...

    058d3fb48f8cd3d4f4206a18b0a75f8a.png

    div 用于对网页模块化划分

    div 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。

    <div> 是一个块级元素。这意味着它的内容自动地开始一个新行

    大致上可以这样理解

    将一个网页进行这样划分,变成模块,然后在做编辑和布局

    也就是把网页划成多个格子,方便我们在每个格子里操作

    5d6a00dff39fae88b77bf1ca815d156b.png

    这里是需要用CSS的,如果不懂的话,只要理解下面的代码就可以了

    <

    完整代码

    <!DOCTYPE html>
    

    效果截图

    803b37ffdad1dffd25c19000ebbfe12b.png
    展开全文
  • 学了html一些最常用的标签后,我们需要自己动手实战,首先,我们主要运用表格相关的标记实现网页布局,先来看一张效果图: 大概思路是整个网页被分成三大块,头部,中部(左部和右部),底部。中部又被分成左部和...

    学了html一些最常用的标签后,我们需要自己动手实战,首先,我们主要运用表格相关的标记实现网页布局,先来看一张效果图:
    这里写图片描述
    大概思路是整个网页被分成三大块,头部,中部(左部和右部),底部。中部又被分成左部和右部,所以我们需要嵌套使用标签,结合前几篇的标签基础知识就能看懂下面的源代码了。

    <html>
        <head>
            <title>网页布局实战</title>
            <meta charset="utf-8">
        </head>
        <body topmargin="0">
            <table border="1" width="880" align="center" cellspacing="0" cellpadding="0">
                <tr height="50" bgcolor="red" align="center">
                    <td><font color="white" size="6" ><b>网页的头部</b></font></td>
                </tr>
                <tr>
                    <td>
                        <table bgcolor="yellow"  width="30%" height="500" align="left">
                            <tr align="center">
                                <td><font color="white" size="6" ><b>网页的左部</b></font></td>
                            </tr>
                        </table>
                        <table bgcolor="green" width="70%" height="500" align="right">
                            <tr align="center">
                                <td><font color="white" size="6" ><b>网页的右部</b></font></td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr height="50" bgcolor="red" align="center">
                    <td><font color="white" size="6" ><b>网页的底部</b></font></td>
                </tr>
            </table>
        </body>
    </html>




    接下来是用HTML框架实现,先来看下基础知识部分:
    这里写图片描述
    这里写图片描述
    首先,还是先要看效果图:
    这里写图片描述
    跟上面的网页布局好像差不多的吧,分三块中部再嵌套,不过这次是使用frameset标签为主体实现的,中部的左半部分还运用了超链接。上面效果的实现并不是用一个html文件实现的,这里我用的实现的是新建一个文件夹,建立wangye.html为主体,再新建四个html文件为分区,还放了两张图片。这里写图片描述
    结合源代码看:


    wangye.html

    <html>
        <head>
            <title>HTML框架</title>
            <meta charset="utf-8">
        </head>
        <frameset rows="90,*,90" frameborder="5" border="5" noresize="noresize">
            <frame name="top" src="top.html"/>
                <frameset cols="20%,80%">
                    <frame name="left" src="left.html"/>
                    <frame name="right " src="right.html"/>
                </frameset>
            <frame name="bottom" src="bottom.html"/>
        </frameset>
    </html>



    top.html

    <html>
        <head>
            <title>HTML框架</title>
            <meta charset="utf-8">
        </head>
        <body>
            <center><h1>走入吉他世界</h1></center>
        </body>
    </html>



    bottom.html

    <html>
        <head>
            <title>HTML框架</title>
            <meta charset="utf-8">
        </head>
        <body>
            <center><p><font color="red">回忆的夏天博客出版</font></p></center>
        </body>
    </html>



    left.html

    <html>
        <head>
            <title>HTML框架</title>
            <meta charset="utf-8">
        </head>
        <body>
            <ul>
                <li><a href="http://www.baidu.com" target="_blank">首页</a></li><br/>
                <li><a href="http://news.baidu.com" target="_blank">新闻</a></li><br/>
                <li><a href="http://news.ifeng.com" target="_blank">资讯</a></li><br/>
                <li><a href="http://image.baidu.com" target="_blank">图片</a></li><br/>
                <li><a href="http://www.baidu.com" target="_blank">联系我们</a></li><br/>
            </ul>
        </body>
    </html>



    right.html

    <html>
        <head>
            <title>HTML框架</title>
            <meta charset="utf-8">
        </head>
        <body>
            <table>
                <tr>
                    <td>
                        <img src="guitar.jpg"  width="120"  height="90"/>
                    </td>
                    <td>
                        <p>吉他(英语:Guitar),又译为结他或六弦琴。属于弹拨乐器,通常有六条弦,形状与提琴相似。
                        吉他在流行音乐、摇滚音乐、蓝调、民歌、佛朗明哥中,常被视为主要乐器。而在古典音乐的领域里,
                        吉他常以独奏或二重奏的型式演出;当然,在室内乐和管弦乐中,吉他亦扮演着相当程度的陪衬角色。
                        作为乐器家族中弦乐器的一员,吉他是一种通过拨动上面一根根的琴弦发出声音的有弦的演奏乐器。
                        弹奏时用一只手拨动琴弦,另一只手的手指抵在指板上,后者是覆盖在琴颈上的金属小条。弹奏出来
                        的声音会通过吉他的共鸣箱得到增强。
                        </p>
                    </td>
                </tr>
                    <tr>
                    <td>
                        <img src="guitar1.jpg"  width="120"  height="90"/>
                    </td>
                    <td>
                        <p>怎样克服吉他初学进阶过程中的难题   第一步:大横按的熟练掌握  第二步:扫弦的熟练掌握 第三
                        步:调的概念的掌握 第四步:揉弦的掌握   第五步:找音的能力培养   找音的能力就是指你听到一段音
                        乐,你马上能在吉他上弹出相应的简谱。这是扒带的关键。所以你练琴没事的时候,可以随便哼一些曲
                        子,然后在吉他上弹出来。不过前提是你能熟练掌握12个调的音阶分布图,以及各种音型的指法。这个
                        能力一定要培养。这对乐理及创作即兴都是有很大帮助的。平时当你没有吉他的时候,你也可以这样练
                        耳,听到一段音乐,然后哼出它的简谱。
                        </p>
                    </td>
                </tr>
                <tr>
                    <td>
                        <img src="guitar.jpg"  width="120"  height="90"/>
                    </td>
                    <td>
                        <p>吉他(英语:Guitar),又译为结他或六弦琴。属于弹拨乐器,通常有六条弦,形状与提琴相似。
                        吉他在流行音乐、摇滚音乐、蓝调、民歌、佛朗明哥中,常被视为主要乐器。而在古典音乐的领域里,
                        吉他常以独奏或二重奏的型式演出;当然,在室内乐和管弦乐中,吉他亦扮演着相当程度的陪衬角色。
                        作为乐器家族中弦乐器的一员,吉他是一种通过拨动上面一根根的琴弦发出声音的有弦的演奏乐器。
                        弹奏时用一只手拨动琴弦,另一只手的手指抵在指板上,后者是覆盖在琴颈上的金属小条。弹奏出来
                        的声音会通过吉他的共鸣箱得到增强。
                        </p>
                    </td>
                </tr>
                    <tr>
                    <td>
                        <img src="guitar1.jpg"  width="120"  height="90"/>
                    </td>
                    <td>
                        <p>怎样克服吉他初学进阶过程中的难题   第一步:大横按的熟练掌握  第二步:扫弦的熟练掌握 第三
                        步:调的概念的掌握 第四步:揉弦的掌握   第五步:找音的能力培养   找音的能力就是指你听到一段音
                        乐,你马上能在吉他上弹出相应的简谱。这是扒带的关键。所以你练琴没事的时候,可以随便哼一些曲
                        子,然后在吉他上弹出来。不过前提是你能熟练掌握12个调的音阶分布图,以及各种音型的指法。这个
                        能力一定要培养。这对乐理及创作即兴都是有很大帮助的。平时当你没有吉他的时候,你也可以这样练
                        耳,听到一段音乐,然后哼出它的简谱。
                        </p>
                    </td>
                </tr>
                <tr>
                    <td>
                        <img src="guitar.jpg"  width="120"  height="90"/>
                    </td>
                    <td>
                        <p>吉他(英语:Guitar),又译为结他或六弦琴。属于弹拨乐器,通常有六条弦,形状与提琴相似。
                        吉他在流行音乐、摇滚音乐、蓝调、民歌、佛朗明哥中,常被视为主要乐器。而在古典音乐的领域里,
                        吉他常以独奏或二重奏的型式演出;当然,在室内乐和管弦乐中,吉他亦扮演着相当程度的陪衬角色。
                        作为乐器家族中弦乐器的一员,吉他是一种通过拨动上面一根根的琴弦发出声音的有弦的演奏乐器。
                        弹奏时用一只手拨动琴弦,另一只手的手指抵在指板上,后者是覆盖在琴颈上的金属小条。弹奏出来
                        的声音会通过吉他的共鸣箱得到增强。
                        </p>
                    </td>
                </tr>
                    <tr>
                    <td>
                        <img src="guitar1.jpg"  width="120"  height="90"/>
                    </td>
                    <td>
                        <p>怎样克服吉他初学进阶过程中的难题   第一步:大横按的熟练掌握  第二步:扫弦的熟练掌握 第三
                        步:调的概念的掌握 第四步:揉弦的掌握   第五步:找音的能力培养   找音的能力就是指你听到一段音
                        乐,你马上能在吉他上弹出相应的简谱。这是扒带的关键。所以你练琴没事的时候,可以随便哼一些曲
                        子,然后在吉他上弹出来。不过前提是你能熟练掌握12个调的音阶分布图,以及各种音型的指法。这个
                        能力一定要培养。这对乐理及创作即兴都是有很大帮助的。平时当你没有吉他的时候,你也可以这样练
                        耳,听到一段音乐,然后哼出它的简谱。
                        </p>
                    </td>
                </tr>
                <tr>
                    <td>
                        <img src="guitar.jpg"  width="120"  height="90"/>
                    </td>
                    <td>
                        <p>吉他(英语:Guitar),又译为结他或六弦琴。属于弹拨乐器,通常有六条弦,形状与提琴相似。
                        吉他在流行音乐、摇滚音乐、蓝调、民歌、佛朗明哥中,常被视为主要乐器。而在古典音乐的领域里,
                        吉他常以独奏或二重奏的型式演出;当然,在室内乐和管弦乐中,吉他亦扮演着相当程度的陪衬角色。
                        作为乐器家族中弦乐器的一员,吉他是一种通过拨动上面一根根的琴弦发出声音的有弦的演奏乐器。
                        弹奏时用一只手拨动琴弦,另一只手的手指抵在指板上,后者是覆盖在琴颈上的金属小条。弹奏出来
                        的声音会通过吉他的共鸣箱得到增强。
                        </p>
                    </td>
                </tr>
                    <tr>
                    <td>
                        <img src="guitar1.jpg"  width="120"  height="90"/>
                    </td>
                    <td>
                        <p>怎样克服吉他初学进阶过程中的难题   第一步:大横按的熟练掌握  第二步:扫弦的熟练掌握 第三
                        步:调的概念的掌握 第四步:揉弦的掌握   第五步:找音的能力培养   找音的能力就是指你听到一段音
                        乐,你马上能在吉他上弹出相应的简谱。这是扒带的关键。所以你练琴没事的时候,可以随便哼一些曲
                        子,然后在吉他上弹出来。不过前提是你能熟练掌握12个调的音阶分布图,以及各种音型的指法。这个
                        能力一定要培养。这对乐理及创作即兴都是有很大帮助的。平时当你没有吉他的时候,你也可以这样练
                        耳,听到一段音乐,然后哼出它的简谱。
                        </p>
                    </td>
                </tr>
                <tr>
                    <td>
                        <img src="guitar.jpg"  width="120"  height="90"/>
                    </td>
                    <td>
                        <p>吉他(英语:Guitar),又译为结他或六弦琴。属于弹拨乐器,通常有六条弦,形状与提琴相似。
                        吉他在流行音乐、摇滚音乐、蓝调、民歌、佛朗明哥中,常被视为主要乐器。而在古典音乐的领域里,
                        吉他常以独奏或二重奏的型式演出;当然,在室内乐和管弦乐中,吉他亦扮演着相当程度的陪衬角色。
                        作为乐器家族中弦乐器的一员,吉他是一种通过拨动上面一根根的琴弦发出声音的有弦的演奏乐器。
                        弹奏时用一只手拨动琴弦,另一只手的手指抵在指板上,后者是覆盖在琴颈上的金属小条。弹奏出来
                        的声音会通过吉他的共鸣箱得到增强。
                        </p>
                    </td>
                </tr>
                    <tr>
                    <td>
                        <img src="guitar1.jpg"  width="120"  height="90"/>
                    </td>
                    <td>
                        <p>怎样克服吉他初学进阶过程中的难题   第一步:大横按的熟练掌握  第二步:扫弦的熟练掌握 第三
                        步:调的概念的掌握 第四步:揉弦的掌握   第五步:找音的能力培养   找音的能力就是指你听到一段音
                        乐,你马上能在吉他上弹出相应的简谱。这是扒带的关键。所以你练琴没事的时候,可以随便哼一些曲
                        子,然后在吉他上弹出来。不过前提是你能熟练掌握12个调的音阶分布图,以及各种音型的指法。这个
                        能力一定要培养。这对乐理及创作即兴都是有很大帮助的。平时当你没有吉他的时候,你也可以这样练
                        耳,听到一段音乐,然后哼出它的简谱。
                        </p>
                    </td>
                </tr>
            </table>
        </body>
    </html>

    记住要多实操,先去模仿别人的布局,从最简单的开始做,这样才会掌握。

    展开全文
  • 那么在做这样的项目时,首先要做的除了对单个网页框架进行设计以外,我们还应该注意代码的冗余问题,就是要使你设计的那个框架能够很好的兼容这几个网页的内容,达到写最少的代码实现同样的功能的效果。...

    刚刚完成了一个练习小项目,这个项目包含了几个网页,但这几个网页的框架基本上是相同的。那么在做这样的

    项目时,首先要做的除了对单个网页的框架进行设计以外,我们还应该注意代码的冗余问题,就是要使你设计的

    那个框架能够很好的兼容这几个网页的内容,达到写最少的代码实现同样的功能的效果。比如在这个项目中我们

    会发现,这些网页的布局框架都是上中下结构,而且顶部和底部是完全相同的,只有中间部分稍有不同。因此在

    最初设计框架的时候按上中下来分就好了,中间的具体做时再做确定。对于完全相同的那两部分我们直接把代码

    放到公共文件夹里面就好了,之后再引用即可。然后要注意的就是,框架的伸缩性问题,虽然说模样差不多,但

    长短宽高什么的可能会不一样,这时对于主体内容的宽高设置最好采用百分比,这样如果要改的话直接改包含在

    最外层的宽高即可,当然对于那些固定了大小的标识我们把宽高固定下来就好了。以下是项目截图



    展开全文
  • 用CSS与DIV进行网页布局框架

    千次阅读 2014-09-24 13:24:40
    CSS代码一般是写在一个.css文件里面,在HTML代码中引用
    网页左边导航栏
    网页主体内容
    网页右边导航栏
    展开全文
  • 网页框架

    2012-01-19 16:24:30
    这个是网页框架,也就是说在这一个页面上是由三个网页组成的,布局上中(中又分为左右两个页面)。最上面的页面宽度为100%高度占整个高度的30%,整个下面的占70%,下面的左边页面与右边页面比例为1:2.   网页框架...
  • 可展开、关闭的框架HTML实例源代码,早几年挺流行的一种网页版式布局效果,不过现在仍有门户网站在用,比如搜狐社区和新浪论坛等,将论坛左侧框架页关闭可有效节省网页显示空间,这个功能由用户选择性操作,本例子...
  • Dsure CSS/HTML5网页开发框架简介: Dsure基于纯CSS的HTML5网站响应式开发框架,可用于国内/外网站开发,完美适用于Designers Site Program 全站静态系统   来历: Dsure参考了国内/外优秀的框架库,经过仔细研究...
  • 简单的来说,就是给网页布局一个网页引入嵌套其他的网页例如我们的w3cSchool 就是一个网页中引入了3个不同的网页(这里是类似哈,不是说这里就是用iframe)示例代码<!DOCTYPE html> ...
  • 提高静态页面的重用性,因为并不是所有的浏览器都能很好的支持,而且对搜索引擎可能也不是很友好,所以一般网页使用并不多,但是对一些管理系统而言,框架还是很实用的,因为管理系统的布局比较简单。每一个页面的...
  • H+后台主题框架代码,一个强大的前端网页框架,可以直接套用成管理系统.H+是一个完全响应式,基于Bootstrap3.3.6最新版本开发的扁平化主题,她采用了主流的左右两栏式布局,使用了Html5+CSS3等现代技术,她提供了...
  • 用table布局和内联框架模式制作了一个简单的视频播放器,原本打算做购物app的网页,可是像唯品会,蘑菇街的网址不能打开,代码如下: &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &...
  • 这个页面主要用的bootstrap的栅格系统进行整体布局网页效果简约大方,最重要的是比较简单吧。下面展示源代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <...
  • 试用HTML布局

    2020-03-07 23:08:44
    上次的网页用的是HTML框架,这次用的是HTML布局。 还是假面骑士的网页,只是把主角decade换成了时王,话说时王这个时间王者天天被时停真的有点Low诶!在这里迫害一下时王吧。 看来平成最强是Drive啊! 不说这些了...
  • 导航条在网页中非常常见的,网页中的导航器或者导航条一般都是用无序列表制作的,今天我做了一个简单的导航条和一个简单的布局框架。 感兴趣的话可以在我这个代码上修改,也可以自己去试着写写,其实是很简单的。 ...
  • 用chrome来调试页面,发现手机上浏览布局全乱了,我在页面中用到了bootstrap框架,使用时要哪个就去套用class样式,贴上部分代码html代码:首页第二页第三页//图片轮播图 css代码:body {padding-bottom: 50px;...
  • 写的过程中发现公司OA系统(网站)上的按钮(图片、超链接)很难Find,分析了一下网页源码,发现公司OA系统全是用Frame布局的,为了能精准定位,我用递归遍历了一下OA系统的所有框,把每个框架里的Html代码都挖掘...
  • ASP.NET的网页代码模型及生命周期

    热门讨论 2009-07-28 14:22:11
    第4章 ASP.NET的网页代码模型及生命周期 从本章开始,就进入了ASP.NET应用程序开发的世界。在了解了C#的结构,以及面向对象的概念后,就可以从面向对象的思想开发ASP.NET应用程序。在ASP.NET中,能够使用面向对象的...
  • HTML框架的使用

    千次阅读 2013-09-29 13:17:38
    最早弄这个网页布局时候就是用这个框架进行窗口布局和切割,有了框架以后可以实现多个html文件显示 例如:           注:当框架大小不想被鼠标拖动而改变时,可以在frame标签中加入noresize属性,这个...
  • Jquery是继prototype之后又一个优秀的Javascrīpt框架,它是轻量级的js库(压缩后只有21k) ,它兼容CSS3,还兼容各种浏览器。jQuery使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供...
  • 先执行网页PS切图,然后使用html+css调用实现网站框架布局代码如下:实现的效果图展示
  • 效果:代码:&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;框架实现&lt;/title&...
  • 效果:代码&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;人民网框架实现&lt;/title...
  • day03—html之页面布局

    2016-02-27 11:56:17
    页面布局:实现网页的多种排版和布局 网页布局方式:  表格(table) ...表格布局:看代码 body{ margin:0px; } hr{ color:#E1E5EE; } .tableClass{ border:1px solid #E1E5EE; font-size:12px; } .
  • 静态网页 photo.html

    2015-03-27 09:50:10
    静态网页 a 页面元素 控制页面的布局显示 ...d 网页框架 javascript框架 JQuery Extjs nodejs 博客框架 wordpress blogger 参考 静态网页 photo.html a. 页面元素 1. 控制页面的布局
  • HTML_04_表单_框架

    2018-03-07 11:20:35
    HTML 布局网页布局对改善网站的外观非常重要。请慎重设计您的网页布局。在线实例使用 &lt;div&gt; 元素的网页布局如何使用 &lt;div&gt; 元素添加布局。代码如下:&lt;!DOCTPYE html&gt; &...
  • CSS 框架是一系列 CSS 文件的集合体,包含了基本的元素重置,页面排版、网格布局、表单样式、通用规则等代码块。下面给你推荐了27款优秀的CSS框架,你可以选用。  1.960gs  960 像素的页面宽度似乎成为了一...
  • 零基础学HTML CSS源代码

    热门讨论 2010-05-10 07:57:26
    我的第一张网页.html 演示我的第一张网页。 第2章(源代码\第2章) 示例描述:本章演示常用HTML标记和格式 注释.htm 注释的用法。 标题标记.htm 标题标记的用法...
  • Layout控件的演示  Dhtmlx有很多的组建来组织网页的建设, 这篇主要介绍dhtmlxLayout。 下面图片中 布局将各个组件(1.Menu 2.Toolbar 3.Grid 4.Form 表单)划分到不同的区域... 在index.html添加如下代码:   ...

空空如也

空空如也

1 2 3 4 5 ... 15
收藏数 296
精华内容 118
关键字:

html框架布局网页代码