布局"/>
web3 CSS布局
1.css表格样式
/*表格的单元格边框合并（折叠）*/border-collapse: collapse;/*设置是否让单元格随内容自动调整宽度*/table-layout: fixed;/*轮廓线*//*轮廓线类似边框，*//*轮廓线不占实际尺寸*//*显示在边框的外围*/outline: 50px solid red;/*有内容溢出时如何显示*/overflow: hidden;/*当鼠标移至到元素内，背景颜色就会变化*/tbody tr:hover{background-color: pink!important;}/*3行为一组，每组的第一个换色*/tbody tr:nth-child(3n+1){background-color: #bbbbbb;
2.背景图片
/*背景颜色*/background-color: yellow;margin: 0px auto;/*背景图的颜色高于背景颜色*/background-image: url("../lianxi3/css/images/zhaosi.png");/*背景平铺*/background-repeat: no-repeat;/*背景定位*/background-position: 0 0;/*背景图片的关联*/background-attachment: fixed;
3.背景关联
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>背景关联的效果</title><style>p{text-align: center;font-size: 100px;line-height: 2em;margin: 200px 0;}div{height: 1000px;/*背景关联*/background-attachment: fixed;}</style>
</head>
<body>
<p>这是一个美女<br>她非常的妖娆
</p>
<div style='background-image: url("../images/b2.jpg")'></div><p>这是一个猛男<br>他的名字叫 郭达·斯坦森
</p>
<div style='background-image: url("../images/a1.jpg")'></div><p>这还是一个猛男<br>他的名字叫 史泰龙
</p>
<div style='background-image: url("../images/a2.jpg")'></div><p>这还是一个猛男<br>他的名字叫 阿诺
</p>
<div style='background-image: url("../images/a3.jpg")'></div>
</body>
</html>
4.表格样式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>css表格样式</title><style>table{width: 100%;border: 1px solid black;/*表格的单元格边框合并（折叠）*/border-collapse: collapse;/*设置是否让单元格随内容自动调整宽度*/table-layout: fixed;/*轮廓线*//*轮廓线类似边框，*//*轮廓线不占实际尺寸*//*显示在边框的外围*/outline: 50px solid red;}td,th{/*有内容溢出时如何显示*/overflow: hidden;}tr{border: 1px solid black;}tbody tr:hover{background-color: pink!important;}tbody tr:nth-child(3n+1){background-color: #bbbbbb;}</style>
</head>
<body>
<!--所有的不含有语义，只是为了改变样式的标签或标签的属性都不建议使用-->
<!--例如：<big></big><small width></small>-->
<!--<big>asdasd</big>--><h1>表格的标题</h1>
<table>
<!-- <caption>表格的标题</caption>--><thead><tr><th style='width: 50px'>表头1</th><th>表头2</th><th>表头3</th><th>表头4</th><th>表头5</th></tr></thead><tbody><tr><td>itemsssssssssss</td><td>item</td><td>item</td><td>item</td><td>item</td></tr><tr><td>item</td><td>item</td><td>item</td><td>item</td><td>item</td></tr><tr><td>item</td><td>item</td><td>item</td><td>item</td><td>item</td></tr><tr><td>item</td><td>item</td><td>item</td><td>item</td><td>item</td></tr><tr><td>item</td><td>item</td><td>item</td><td>item</td><td>item</td></tr></tbody><tfoot><tr><th>统计</th><th>统计</th><th>统计</th><th>统计</th><th>统计</th></tr></tfoot>
</table></body>
</html>
运行截图
5.常规布局
清除浮动有几种方式？
1、主动清除（使用clear属性）
2、被动清除
1、父元素已经主动的设置了尺寸。
2、父元素设置了overflow为hidden。
3、父元素本身就浮动。
清除浮动
.clearfix:after{content:"clear";display: block;clear: both;height: 0px;/*超出范围：隐藏；可见性：隐藏（把元素的改为透明，实际上它还是存在之前的位置上）*/overflow: hidden;visibility: hidden;}
布局方法
1.先划分行，给每一行起名字
2.按照从外到内，从全局到局部的顺序分析每一行
3.每做一级，都要设置样式，并观察好位置和样式是否正确
6.定位
固定定位
相对于浏览器可视区域
脱离文档流
绝对定位
相对于自身所有祖先元素中，具有定位状态的（固定、相对、绝对）
距离自身最近滴
如果没有符合条件的，那么就相对于html定位。
相对定位
相对于自身没有定位前的区域
不脱离文档流
7.实例
多级下拉菜单
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>下拉菜单</title><style>/*标签样式重置的过程*/ul{margin: 0;padding: 0;list-style: none;}/*设置div的整体效果*/#nav{width: 600px;margin: 100px auto;border: 1px solid black;}/*设置body下的大盒子*/.clearfix:after{content:"clear";display: block;clear: both;height: 0px;/*超出范围：隐藏；可见性：隐藏（把元素的改为透明，实际上它还是存在之前的位置上）*/overflow: hidden;visibility: hidden;}#nav li{float: left;/*父元素也得是浮动*/position: relative;}#nav a{float: left;width: 150px;height: 50px;text-decoration: none;text-align: center;line-height: 50px;color: #333;background-color: pink;}#nav a:hover{background-color: black;color: white;}/*设置一级标签的效果*/#nav li ul{/*display: none;*/position: absolute;left: 0;top: 50px;/*隐藏下拉列表*/display: none;}/*设置一级标签的鼠标样式*/#nav li:hover > ul{/*过渡效果*/transition: all 3s;/*当鼠标移动到主菜单位置上，才显示下拉列表*/display: block;}/*设置二级标签的效果*/#nav li li ul{left: 150px;top: 0px;}/*设置二级标题的鼠标样式*/#nav li li:hover > ul{/*过渡效果*/transition: all 1s;/*当鼠标移动到主菜单位置上，才显示下拉列表*/display: block;}</style>
</head>
<body>
<div id="nav" class="clearfix"><ul><li><a href="javascript:;">首页</a><ul><li><a href="javascript:;">item1</a><ul><li><a href="javascript:;">item2</a></li><li><a href="javascript:;">item2</a></li><li><a href="javascript:;">item2</a></li><li><a href="javascript:;">item2</a></li></ul></li><li><a href="javascript:;">item1</a><ul><li><a href="javascript:;">item2</a></li><li><a href="javascript:;">item2</a></li><li><a href="javascript:;">item2</a></li><li><a href="javascript:;">item2</a></li></ul></li><li><a href="javascript:;">item1</a><ul><li><a href="javascript:;">item2</a></li><li><a href="javascript:;">item2</a></li><li><a href="javascript:;">item2</a></li><li><a href="javascript:;">item2</a></li></ul></li><li><a href="javascript:;">item1</a><ul><li><a href="javascript:;">item2</a></li><li><a href="javascript:;">item2</a></li><li><a href="javascript:;">item2</a></li><li><a href="javascript:;">item2</a></li></ul></li></ul></li><li><a href="javascript:;">新闻</a><ul><li><a href="javascript:;">item</a></li><li><a href="javascript:;">item</a></li><li><a href="javascript:;">item</a></li><li><a href="javascript:;">item</a></li></ul></li><li><a href="javascript:;">产品</a><ul><li><a href="javascript:;">item</a></li><li><a href="javascript:;">item</a></li><li><a href="javascript:;">item</a></li><li><a href="javascript:;">item</a></li></ul></li><li><a href="javascript:;">配送</a><ul><li><a href="javascript:;">item</a></li><li><a href="javascript:;">item</a></li><li><a href="javascript:;">item</a></li><li><a href="javascript:;">item</a></li></ul></li></ul></div>
</body>
</html>
效果
更多推荐
web3 CSS布局
发布评论