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>
效果
3016
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
