html/css 布局练习3

效果图：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>无标题文档</title>
 6 <style>
 7 .body{width:300px;height:300px; margin:100px; border:10px solid #CCC;}
 8 .left{width:150px; height:300px; background-color:#3C9; float:left;}
 9 .top{width:150px; height:100px; background-color:#FC6; float:left;}
10 .center{width:150px; height:100px;}
11 .centerleft{width:75px; height:100px; background-color:#F09; float:left;}
12 .centerright{width:75px; height:100px; background-color:#9FF; float:left;}
13 .bottom{width:150px; height:100px; background-color:#69F; float:left;
14 </style>
15 </head>
16
17 <body>
18 <div class="body">
19     <div class="left"></div>
20     <div class="top"></div>
21     <div class="centerleft"></div>
22     <div class="centerright"></div>
23     <div class="bottom"></div>
24
25
26 </div>
27 </body>

View Code

自己过了几天利用after伪类+zoom的另一种写法：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>无标题文档</title>
 6 <style>
 7 .clear{zoom:1;}
 8 .clear:after{content:""; display:block; clear:both;}
 9 .wrap{width:500px;margin:0 auto;border:10px solid #ccc;}
10 .left{width:200px;height:400px;background:#7a1;float:left;}
11 .right{width:300px; float:right;}
12 .right_top{height:80px; background-color:#F90;}
13
14 .right_center_left{width:150px;height:160px;background:#f69; float:left;}
15 .right_center_right{width:150px;height:160px;background-color:#FCC; float:left;}
16 .bottom{height:160px;background:#369;}
17 </style>
18 </head>
19
20 <body>
21 <div class="wrap clear">
22     <div class="left">
23     </div>
24     <div class="right">
25         <div class="right_top"></div>
26         <div class="right_center clear">
27             <div class="right_center_left"></div>
28             <div class="right_center_right"></div>
29         </div>
30         <div class="bottom"></div>
31     </div>
32 </div>
33 </body>
34 </html>

View Code

效果图：

转载于:https://www.cnblogs.com/baoweiluobo/p/5819313.html

html/css 布局练习3相关推荐

css布局中的居中问题
css布局中的居中问题作者:阿捷 2004-7-5 14:35:49 #sample{ HEIGHT:240px;WIDTH:400px; BACKGROUND: url(http://www.w3 ...
理解 CSS 布局和块级格式上下文
本文的目的是介绍一些概念来帮你增强 CSS 码力.如标题所示这篇文章主要是讲块级格式上下文BFCBlock Formatting Context.你可能没听过这个术语但只要你曾经使用过CSS 布局你 ...
CSS布局之-水平垂直居中
对一个元素水平垂直居中,在我们的工作中是会经常遇到的,也是CSS布局中很重要的一部分,本文就来讲讲CSS水平垂直居中的一些方法. 另外,文中的css都是用less书写的,如果看不懂less,可以把我给 ...
CSS 布局:40个教程、技巧、例子和最佳实践
前言: 布局是WEB开发一个重要的课题,进入XHTML/CSS后,使用TABLE布局的方式逐渐淡出,CSS布局以众多优点成为主流,本文将介绍40个基于CSS的web布局的资源和教程.文章的出处在htt ...
php两个按钮左右怎么做,css布局两个button在同父标签中左右两侧分布的方法
本文主要介绍了css布局两个button在同父标签中左右两侧分布的方法,分享给大家,具体如下: 效果图布局代码提交重置 style="float:right;width:50%&quo ...
前端笔记（6）css布局机制，浮动，清除浮动，图片格式，ps切片工具及插件
css样式表/层叠样式表(4) css布局的三种机制浮动浮动(float)的扩展清除浮动额外标签法(隔墙法) 父级添加overflow属性方法使用after伪元素清除浮动使用双伪元素清除浮 ...
html的高度自适应,CSS布局自适应高度解决方法
原作者:Alex Robinson 原文标题:Equal Height Columns 这是一个比较典型的三行二列布局,每列高度(事先并不能确定哪列的高度)的相同,是每个设计师追求的目标,按一般的做法 ...
典型的DIV＋CSS布局——左中右版式
[效果] [HTML] <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Defa ...
3.实战HTML+CSS布局（实例入门篇）
转自:https://www.cnblogs.com/hmyprograming/archive/2012/03/23/2414373.html 学习这篇入门教程我们假定你已经具有了一定的HTML基础 ...
bootstrap 垂直居中布局_给你一份详细的CSS布局指南，请查收
作者:catboy 文章来源:http://t.cn/A6wtKzip 在我们前端开发过程中,写css(包括sass, less, stylus这样的预处理器)进行设计稿的样式还原是一项重要的工作,而 ...

html/css 布局练习3

html/css 布局练习3相关推荐

最新文章

热门文章