ydzf.net
当前位置:首页 >> 用Css编程多个盒子 >>

用Css编程多个盒子

很多种方式,主要有定位和浮动两种.基础的就用浮动,就是加个样式float:left; 另外就是定位了,定位有很多种,绝对定位、相对定位、固定定位这些,都可以实现.具体实现的效果还是要根据你自己的需求来.

整体是300px吧?<style> ul, li { margin: 0; padding: 0; list-style: none; } ul { position: relative; width: 300px; height: 100px; background: #aaa; } li { position: absolute; top: 5px; width: 95px; height: 90px; background: #ddd; }.left_li { left: 0; }.middle_li { left:

将mainbox修改成以下样式试试看.mainbox{width:510px; height:202px; overflow:hidden; margin:0 auto;}

用float和margin

看了你的题,突然想象出来的图形 感觉好奇葩你确定你没漏掉几个字?太基础了,不过还是打给你吧<style>*{margin:0;padding:0;}.outbox{background:blue;padding-left:19px;}.innerbox{background:red;}.small1{margin-bottom:17px;}.s1,.s2{width

<!doctype html><html><head><meta charset="utf-8"><title>div5px</title><style type="text/css"> div li{ float:left; width:33.3%; background:#063; height:30px; padding:0; margin:0; list-style:none; height:100px;}.bg{ background:#0C9; width:100%;

div:nth-child(3) {}/*方法1:选择属于其父元素的第3个子元素的每个 元素 */div:nth-of-type(3) {}/* 方法2:选择属于其父元素第3个 元素的每个 元素 */ 评论0 0 0

<div style="width:430px; margin:0 auto; overflow:hidden"> <div style="width:200px; height:100px; margin-right:30px; background-color:red; float:left;"></div> <div style="width:200px; height:100px; background-color:skyblue; float:left;"></div> </div>效果图:

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/test3.css" /> </head> <body> <div class="top"> <div class="menu">menu菜单</div> </div> <div class="search">search搜索</

你可以把左边的大盒子和右边的6个小盒子分别放入div中,让这两个div左浮动.

ddng.net | alloyfurniture.com | fpbl.net | zxqk.net | mwfd.net | 网站首页 | 网站地图
All rights reserved Powered by www.ydzf.net
copyright ©right 2010-2021。
内容来自网络,如有侵犯请联系客服。zhit325@qq.com