HTML——左右侧边栏布局

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>上中下布局</title>
		<style type="text/css">
			body{
				background: #42413C ;
				margin: 0;/*消除body中的留白*/
				padding: 0;
				text-align: center;
			}

			.container{
				width: 778px;
				background: #FFF;
				margin: 0 auto;/*侧边的自动值与宽度结合使用,可以将布局居中对齐*/
				text-align: left;
			}

			.header{
				padding: 10px 0;
				background: #ADB96E;
			}

			.content{
				padding: 10px 0;
			}

			.footer{
				padding: 0px;
				background: #CCC49F;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="header">
				<h1>网页头部</h1>
			</div>
			<div class="content">
				<h1>网页正文</h1>
				<h1>网页正文</h1>
				<h1>网页正文</h1>
				<h1>网页正文</h1>
				<h1>网页正文</h1>
			</div>
			<div class="footer">
				<h1>脚注</h1>
			</div>
		</div>
	</body>
</html>
时间: 2024-09-29 21:40:20

HTML——左右侧边栏布局的相关文章

HTML——左侧边栏布局

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <meta http-equiv="Content-Type"

Drawer实现侧边栏布局

在 Scaffold 组件里面传入 drawer 参数可以定义左侧边栏,传入 endDrawer 可以定义右侧边栏.侧边栏默认是隐藏的,我们可以通过手指滑动显示侧边栏,也可以通过点击按钮显示侧边栏. 我们还是在前面TabBar项目的基础上实现侧边栏. 为了能在底部TabBar的三个页面都实现侧边栏效果,这里将侧边栏加在Tabs.dart页面中. 只需要在 BottomNavigationBar下面继续添加drawer属性就可以了. import 'package:flutter/material

侧边栏的设置 导入第三方插件

* 侧边栏 */ public class SlidingActivity extends AppCompatActivity { private View view; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_sliding); SlidingMenu slidingMenu

5.侧边栏逻辑

UI框架结构图 相互传递数据的时候用这张图看,思路会比较清晰 1. 侧边栏布局 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height=&q

android学习笔记:DrawerLayout实现侧边栏

DrawerLayout需要的布局文件 首先要以 android.support.v4.widget.DrawerLayout 作为标签. 另外需要将设置的侧边栏布局的 android:layout_gravity="start" start设置为左边布局,end设置为右边布局. 在activity中的代码: private DrawerLayout mDrawerLayout; private ActionBarDrawerToggle mActionBarDrawerToggle;

Android实现侧边栏SlidingPaneLayout

//主布局 1 <?xml version="1.0" encoding="utf-8"?> 2 <android.support.v4.widget.SlidingPaneLayout xmlns:android="http://schemas.android.com/apk/res/android" 3 android:id="@+id/spl" 4 xmlns:tools="http://sc

Android中include标签的使用及注意事项

前言 ??include标签可以实现在一个layout中引用另一个layout的布局,这通常适合于界面布局复杂.不同界面有共用布局的APP中,比如一个APP的顶部布局.侧边栏布局.底部Tab栏布局.ListView和GridView每一项的布局等,将这些同一个APP中有多个界面用到的布局抽取出来再通过include标签引用,既可以降低layout的复杂度,又可以做到布局重用(布局有改动时只需要修改一个地方就可以了). 使用方法 ??include标签的使用很简单,只需要在布局文件中需要引用其它布

开源控件slidingmenu的使用

在github.com网站搜索slidingmenu后https://github.com/jfeinstein10/SlidingMenu 下载demo,导入library到你的项目中,添加到你项目的依赖中使用: package com.loaderman.slidingmenudemo; import android.app.Activity; import android.os.Bundle; import com.jeremyfeinstein.slidingmenu.lib.Slidi

Android应用开发-小巫CSDN博客客户端UI篇

Android应用开发-小巫CSDN博客客户端UI篇 上一篇是给童鞋们介绍整个项目的概况,从这篇博文开始,后续也会详细介绍整个客户端的开发,但不会贴很多代码,我会贴核心代码然后提供实现思路,想看里面更详细的代码的可以到我的资源页下载源码进行查看,之前上传到github的少了些jar包,所以我在csdn下载频道也上传了一份,地址:http://download.csdn.net/detail/wwj_748/7912513. 整个客户端的开始,自然是需要搭建一个承载我们数据的框架,我这里所说的是U