CSS课堂案例8-小米布局

浮动布局练习

利用浮动初步实现页面布局的效果

如图所示，可知可将改布局分成三部分，外面的大盒子作为标准流父级，约束浮动元素，内部分成左右两个浮动标签，中间无空隙

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>小米布局案例</title><style>* {padding: 0;margin: 0;}.box {width: 1200px;height: 460px;background-color: #1ff;/*居中*/margin: 0 auto;}/*左边的浮动盒子*/.left {float: left;width: 230px;height: 460px;background: purple;}/*右边的浮动盒子*/.right {float: left;width: 970px;height: 460px;background-color: blue;}</style>
</head>
<body><div class="box"><div class="left">左侧</div><div class="right">右侧</div></div>
</body>
</html>

实现效果

CSS课堂案例8-小米布局相关推荐

CSS课堂案例11-淘宝焦点图布局
淘宝焦点图布局结构步骤代码 <!DOCTYPE html> <html lang="zh-CN"> <head><meta char ...
CSS课堂案例3-小米导航栏
简洁版小米侧边栏要求实现的效果,左侧红框部分思路分成两步: 把链接a转换为块级元素,这样链接就可以单独占一行,并且可以设置高度和宽度鼠标经过a链接时,设置背景颜色代码 <!DOCTYPE ...
CSS中浮动布局float（小米布局案例、导航栏案例、overflow）
1. CSS 布局的三种机制网页布局的核心--就是用 CSS 来摆放盒子. CSS 提供了 3 种机制来设置盒子的摆放位置,分别是普通流(标准流).浮动和定位, 其中: 普通流(标准流) 块级元素会 ...
案例-简介小米侧边栏（HTML、CSS）
案例-简介小米侧边栏(HTML.CSS) <!DOCTYPE html> <html lang="en"><head><meta char ...
课堂案例之用CSS画红绿红三个盒子
课堂案例之用CSS画红绿红三个盒子 1 html+css代码 2 界面实现 1 html+css代码 <!DOCTYPE html> <html lang="en" ...
Css Secret 案例Demo全套
Css Secret 案例全套 github地址案例地址去年买了一本CSS揭秘的css专题书,该书揭示了 47 个鲜为人知的 CSS 技巧,主要内容包括背景与边框.形状. 视觉效果.字体排印.用户 ...
html中的li标签不换行,css li 不换行（布局，内容）
参考这里 ------ 不换行的策略: 不换行原理: ul 和 li 默认都是 display:block; 的标签, 可以通过2种方式实现 li 的不换行显示: * 将 li 设为 display ...
课堂案例之奔跑的小熊熊
课堂案例之奔跑的小熊熊 1 图片素材 2 html+css代码 3 界面实现 1 图片素材 2 html+css代码 <!DOCTYPE html> <html lang=" ...
课堂案例之两面翻转的盒子
课堂案例之两面翻转的盒子 1 实现步骤 2 界面实现 1 实现步骤搭建HTML结构 box父盒子里面包含前后两个子盒子. box是翻转的盒子,front是前面盒子,back是后面盒子. <di ...

CSS课堂案例8-小米布局

浮动布局练习

实现效果

CSS课堂案例8-小米布局相关推荐

最新文章

热门文章