css+html简单的布局demo

于html介绍css作风。可以改变html块状布局,局更加美观。接下来看一个基础布局的小样例:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>margin布局</title>
</head>

<style type="text/css">

	#container{
		width: 1002px;
		background: gray;

	}

	#header{

		height: 120px;
		background: orange;

	}

	#main{
		background: green;
		height: 600px;

	}

	#lside{
		width: 700px;
		height: 600px;
		float: left;
		background: pink;

	}

	.four{
		width: 130px;
		height: 280px;
		float: left;
		margin: 10px;

		background: black;

	}

	#rside{
		width: 302px;
		height: 600px;
		background: purple;
		float: right;
	}

	#footer{

		height: 120px;
		background: blue;

	}

</style>

<body>
<div id="container">

	<div id="header"></div>
	<div id="main">
		<div id="lside">

			<div class="four"></div>
			<div class="four"></div>
			<div class="four"></div>
			<div class="four"></div>
		</div>

		<div id="rside"></div>
	</div>

	<div id="footer"></div>
</div>
</body>
</html>

效果例如以下:

在上面的布局中。我们主要使用margin属性来对div进行布局。在实际中。感觉margin属性主要适用于块与块之间的布局,当我们要对盒子中的内容进行布局的时候,我们能够使用盒子的还有一个属性:padding,这个属性能够布局盒子内部的距离:

比如。我们增加padding属性,并在四个div中增加一些文字内容:

效果图:

注意,这里在实际做的时候,由于增加了padding值,导致了div最后不能并排显示在父div中。这里还改动了div的宽度值,使第四个div不至于被挤到以下去。

感觉增加css样式后。近期做的小demo跟曾经仅仅用html做的demo比起来,不仅布局上更加灵活多变,并且样式设置也比較简单了。

版权声明:本文博主原创文章,博客,未经同意不得转载。

时间: 2024-10-02 10:40:04

css+html简单的布局demo的相关文章

HTML与CSS绘制简单DIV布局

HTML代码<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>极客学院</title> <link href="style.css" type="text/css" rel="stylesheet"> </head> <

DIV+CSS 样式简单布局Tab 切换

<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="../JS/JQuery/jquery-1.9.1.js" type="text/javascript"></script> <style type="

css练习 简单布局

<!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <link href="style/style.css" rel="stylesheet" type="text

与换行相关的css属性简单介绍

与换行相关的css属性简单介绍:在css布局中可能需要人为的进行操作是否换行,如何换行,本章节就就做一下简单介绍.一.word-break属性:此属性用来设定文本如何进行换行.语法结构: word-break:normal | break-all | keep-all 参数解析:1.normal:默认值,原则上规定在断字点换行,通俗的说就是在单词与语单词之间可以进行换行,但是如果单词特别的长,超出了行的长度,可以从单词内部断开进行换行.2.break-all:此属性值能够实现强制将单词从内部截断

css 多栏自适应布局

在页面重构中,我们经常会需要实现多栏布局,例如n栏固定宽度 + m栏自适应宽度的组合,绝对布局+padding+百分比宽度是容易想到的比较暴力的解决方法,但是作为未来的"工程师",我们应该需求一些优雅点的方法.先说说两栏布局,上例子: <div class='container' > <div class='div1' >1</div> <div class='div2' >2</div> </div> 如图,假如

jqm的多列布局demo,html5的多列布局demo,多列布局的详细讲解,html5开发实例详解

由于移动设备屏幕宽度较小,所以一般不建议使用多列布局.但有时你可能需要并排放置一些元素(如按钮之类的). jQuery Mobile通过约定的类名ui-grid来提供了一种基于css的多列布局方法.共提供了五种布局方式,分别是:ui-gird-solo:单列布局,ui-gird-a:双列布局,ui-gird-b:三列布局,ui-gird-c:四列布局,ui-gird-d:五列布局.布局网格总宽度100%,完全不可见(无边框无背景),没有任何内边距或外边距,不会对网格中的内容产生任何干扰. 今天我

Xamarin.Android再体验之简单的登录Demo

一.前言 在空闲之余,学学新东西 二.服务端的代码编写与部署 这里采取的方式是MVC+EF返回Json数据,(本来是想用Nancy来实现的,想想电脑太卡就不开多个虚拟机了,用用IIS部署也好) 主要是接受客户端的登陆请求,服务器端返回请求的结果 这里的内容比较简单不在啰嗦,直接上代码了: 1 using System.Linq; 2 using System.Web.Mvc; 3 namespace Catcher.AndroidDemo.EasyLogOn.Service.Controller

强大的CSS:实现平行四边形布局效果

如何实现下图所示的平行四边形布局效果? 一.skewX的局限 一提到平行四边形,条件反射般的就会想起CSS?transform中的skew()/skewX()/skewY()方法,可以让元素斜切,从而实现平行四边形效果 HTML如下: <div class="input-x"> <input class="input" placeholder="您的姓名"> </div> CSS如下,形状的关键就是下面红色高亮

CSS中常见的布局

一.css中常见的布局有哪些? (1)两列布局 (2)三列布局 (3)弹性布局 (4)圣杯布局 (5)双飞翼布局 二.具体实现  (1)两列布局 https://www.cnblogs.com/qing-5/p/11442906.html (2)三列布局 https://www.cnblogs.com/qing-5/p/11338819.html (3)圣杯布局和双飞翼布局 相同点: a.三列布局,中间宽度自适应,两边定宽: b.中间栏要在浏览器中优先展示渲染: c.允许任意列的高度最高: d.