html怎么把页面分割

html怎么把页面分割,第1张

1. 如图

上面那两个div设置百分比宽度不要占满,

footer CSS.one{width:1240pxheight:340pxmargin:16px auto 16px}.one o{width:702pxheight:320pxbackground:#333float:leftborder-radius:5pxborder:10px solid #666}.one o .ss{width:702pxheight:155pxbackground:#333float:leftborder-radius:5px}.one o .three{width:702pxheight:155pxbackground:#333border-radius:5pxborder-top:10px solid #666float:left}aside{width:492pxheight:340pxbackground:#666float:rightborder-radius:5px}footer{width:1240pxheight:60pxbackground:#666border-radius:5pxmargin:0 auto 10pxtext-align: centerline-height:60pxcolor:whitefont-size:28px}。 2. HTML如何把网页分成多个部分

<html>

<frameset cols="25%,50%,25%">

<frame src=/example/html/frame_a>

<frame src=/example/html/frame_b>

<frame src=/example/html/frame_c>

</frameset>

</html>

上面的代码是将网页分成垂直的3部分,大小依次是25%,50%,25%

3. Html怎么把一个页面分成上中下三部分,中间和下面再分成左右两部分

<frameset rows="20%,60%,20%">

<frame src=top>

<frameset cols="20%,*">

<frame src=left>

<frame src=right>

</frameset>

<frameset cols="50%,*">

<frame src=left1>

<frame src=rigth1>

</frameset>

</frameset>

扩展资料:

注意事项

用frame的好处在于不用象DIV一样要对浮动和大小进行精确控制,以及要考虑宽屏的时候怎么办,而且在导航的时候非常简单。

比如说左边是导航栏,右边是显示内容的frame,如果用DIV,每点一下导航栏进行一次页面跳转,那每个页面里都要有左边的导航栏,这样代码的复用性不高,如果用frame,只要将导航放在左边frame,在点击链接时,只需要将链接的target指向右边的内容显示frame就OK了。

<frameset rows="80px,*,20px" border=0 frameborder="0" framespacing="0" marginwidth="0" marginheight="0">

<frame name=header src=header scrolling="no">

<frameset cols="200px,*" border=0 frameborder="0" framespacing="0">

<frame name=menu src=menu scrolling="auto">

<frame name=main src=home scrolling="auto">

</frameset>

<frame name=footer src=footer scrolling="no">

</frameset>

<noframes>

<body>

</body>

</noframes>

4. 如图

上面那两个div设置百分比宽度不要占满,

<section class="one">

<section class="two">

<section class="ss"></section>

<section class="three"></section>

</section>

<aside></aside>

</section>

<footer>footer</footer>

CSS

.one{

width:1240px

height:340px

margin:16px auto 16px

}

.one o{

width:702px

height:320px

background:#333

float:left

border-radius:5px

border:10px solid #666

}

.one o .ss{

width:702px

height:155px

background:#333

float:left

border-radius:5px

}

.one o .three{

width:702px

height:155px

background:#333

border-radius:5px

border-top:10px solid #666

float:left

}

aside{

width:492px

height:340px

background:#666

float:right

border-radius:5px

}

footer{

width:1240px

height:60px

background:#666

border-radius:5px

margin:0 auto 10px

text-align: center

line-height:60px

color:white

font-size:28px

}

JFrame frame = ...JSplitPane split = new JSplitPane()split.setOrientation(JSplitPane.HORIZONTAL_SPLIT)JLabel x = new JLabel("左")JTextField y = new JTextField("右")split.add(x)split.add(y)frame.getContentPane().add(split)

hr是水平分隔线,不能垂直的,如果你要一条垂直的平分线可以用div等块元素来模拟一条,比如:

<div style='width:50%float:leftheight:700px'>内容区域

<div style='width:1pxbackground:redfloat:rightheight:700px'><!--这个div模拟一条红色的垂直分割线--></div>

</div>

<div style='width:50%float:leftheight:700px'>内容区域</div>

还有一些其他类似的办法,通过div或者其容器来布局,分割区域


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/zaji/5950722.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-09
下一篇 2023-03-09

发表评论

登录后才能评论

评论列表(0条)

保存