1.介绍
层叠样式表，对页面元素修饰。
2.引入Css
语法一：用style标签，先找元素（用div选择器），再做修饰----------调试代码时使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--语法一：用style标签，先找元素，用div选择器，再做修饰-->
<style>
div{
color: red; <!--将我的文本颜色变为红色-->
}
</style>
</head>
<body>
<div>我的文本</div>
</body>
</html>
语法二：建立css为后缀的文件，编写相关语法，再用link标签引入该文件---------上线前使用
先建
div{
color: red;
}
再引
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--rel属性引入样式表，href属性引入css文件路径-->
<link rel="stylesheet" href="css/mystyle.css">
</head>
<body>
<div>我的文本</div>
</body>
</html>
注：当前页面需要引入css文件时，也会有网络请求发出去。
语法三：在元素上使用通用属性--------不建议大量使用（页面一般较长）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--通用属性：所有元素上都可以用的属性。常见的：id，style（样式）-->
<div style="color: red;">我的文本</div>
</body>
</html>
若三种一起使用，加载顺序：html解析是从上到下，后加载的覆盖先加载的。（不建议一起使用）
style属性会覆盖其它引入方式。
3.Css语法结构
Css语法结构：
选择器{
样式1：值；
样式2：值；
……
}
Css语法主要分两部分
l 选择器
l 样式属性
3.1Css常用的选择器
选择器---------找特征用的。没特征就用元素的层次结构或者属性加特征。
3.1.1基本选择器
1.元素（标签）选择器，修饰哪个标签的内容就用哪个标签，再大括号。弊端：选取的范围大，通过标签名选择，所有的标签都会被选中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
color: blue;
}
p{
color:red;
}
</style>
</head>
<body>
<div>测试文本</div>
<p>测试文本</p>
<div>测试文本二</div>
</body>
</html>
2.class选择器，修饰有class属性（属性值随便给)的文本。选取比较精准
class也是通用属性。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.mycls{
color: red;
}
.mycls2{
color:green;
}
</style>
</head>
<body>
<h1>咏鹅--骆宾王</h1>
<p class="mycls">鹅鹅鹅</p>
<p class="mycls2">曲项向天歌</p>
<p class="mycls">白毛浮绿水</p>
<p class="mycls2">红掌拨清波</p>
</body>
</html>
3.id选择器,类似class选择器，通过元素id值选取元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#mytitle{
color:brown;
}
</style>
</head>
<body>
<h1 id="mytitle">咏鹅--骆宾王</h1>
<p >鹅鹅鹅</p>
<p >曲项向天歌</p>
<p >白毛浮绿水</p>
<p >红掌拨清波</p>
</body>
</html>
id和class都是通用属性，id一般给加属性时用的。故，在样式上，class用的更多。且class属性允许多值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.mycls{
color:red;
}
.cls2{
background-color:lightcoral; <!--加背景颜色-->
}
.cls3{
border:1px solid black; <!--加边框，设置边框粗细和颜色-->
}
</style>
</head>
<body>
<h1 >咏鹅--骆宾王</h1>
<p class="mycls cls2 cls3">鹅鹅鹅</p>
<p >曲项向天歌</p>
<p class="mycls cls3">白毛浮绿水</p>
<p >红掌拨清波</p>
</body>
</html>
注：选择器优先级（有时也叫权值），对同样的内容进行修饰，id（权值100，该权值适用于ie浏览器）>class（权值10）>标签选择器（权值1）（与加载顺序无关）
注：css里不建议使用id选择器。
3.1.2.辅助性选择器
1.并集选择器，可选择多个元素，也可选择元素和其它选择器
语法：选择器，选择器，选择器，同时选取多种元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.mycls,h1{
color:red;
}
p,h1{
color:red;
}
</style>
</head>
<body>
<h1 >咏鹅--骆宾王</h1>
<p class="mycls cls2 cls3">鹅鹅鹅</p>
<p >曲项向天歌</p>
<p class="mycls cls3">白毛浮绿水</p>
<p >红掌拨清波</p>
</body>
</html>
2.交集选择器，通过多个条件来确定到一个元素
语法：选择器选择器（之间没任何标点符号和空格），通过多条件选取元素。（一般先写标签名，再加其它样式）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p.mycls{
color:green;
}
</style>
</head>
<body>
<h1 class="mycls>咏鹅--骆宾王</h1>
<p class="mycls cls2 cls3">鹅鹅鹅</p>
<p >曲项向天歌</p>
<p class="mycls cls3">白毛浮绿水</p>
<p >红掌拨清波</p>
</body>
</html>
3.后代选择器，通过元素的嵌套关系 ，层次结构查找并修饰元素。
先找父元素，找子元素加一个空格。空格就是后代选择器。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div p{
color:red;
}
.mytest p{
color:red;
}
</style>
</head>
<body>
<h1 >咏鹅--骆宾王</h1>
<p >鹅鹅鹅</p>
<p >曲项向天歌</p>
<!--div是两个p的父元素,可用标签组合，也可用样式组合-->
<div class="mytest">
<p >白毛浮绿水</p>
<p >红掌拨清波</p>
</div>
</body>
</html>
弊端：也是范围太大
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.mytest p{
color:red;
}
</style>
</head>
<body>
<!--只要是包含在属性值mytest里的p都会被选中-->
<h1 >咏鹅--骆宾王</h1>
<div class="mytest">
<p >鹅鹅鹅</p>
<p >曲项向天歌</p>
<div>
<p >白毛浮绿水</p>
<p >红掌拨清波</p>
</div>
</div>
</body>
</html>
4.子代选择器
符号是>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.mytest>p{
color:red;
}
.mytest>div>p{
color:green;
}
</style>
</head>
<body>
<!--子代选择器更精准一些，可修饰子代元素，也可修饰孙元素-->
<h1 >咏鹅--骆宾王</h1>
<div class="mytest">
<p >鹅鹅鹅</p>
<p >曲项向天歌</p>
<div>
<p >白毛浮绿水</p>
<p >红掌拨清波</p>
</div>
</div>
</body>
</html>
3.1.3属性选择器
通过元素的属性选取元素。一般和交集选择器搭配使用，确定选举元素的范围。
语法：[属性=属性值] （可不加属性值，不推荐）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
input[type="button"]{ <!--和交集选择器搭配使用-->
color:red;
}
</style>
</head>
<body>
<input type="button" value="按钮" />
<input type="text" value="文本框" />
<input type="button" value="按钮" />
</body>
</html>
3.1.4通用（全局）选择器
语法：*代表所有元素 弊端：可轻易被其它选择器覆盖
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
color:red;
}
</style>
</head>
<body>
<h1 >咏鹅--骆宾王</h1>
<p >鹅鹅鹅</p>
<p >曲项向天歌</p>
<p >白毛浮绿水</p>
<p >红掌拨清波</p>
</body>
</html>
3.2Css常用样式属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/*
color 文字颜色 颜色值的部分，除了英文字母。还可用#0000FF形式（三色编码，每两位代表红绿蓝的一种，
FF是一个十六进制数字等于十进制中的255，也就是把一种颜色分成256层从0到255深浅不同，
你知道红绿蓝的不同可以成组合很多颜色，纯红用FF0000,纯绿用00FF00,你那个是纯蓝，000000是黑色，FFFFFF是白色。）
程序员计算器，dec十进制，hex十六进制，oct八进制，bin二进制。
一般用到两个工具，抓色工具，web安全色（让人看起来视觉效果比较柔和的颜色）。程序员颜色尽量选浅色系。
#5BD和#55BBDD完全一样（两个值数值相同可只写一个）。
font-size调字体大小，xx-large超大号。用数值更精确50px，会被自动转换为3.125rem。（px像素 rem相对默认字体的大小
，3.125rem即相对原始字号的3.125倍） 像素，在屏幕的分辨率里，1920x1080，表示横向最多有1920个像素，纵向最多有1080
个像素。也叫1080p，再往上还有2k，4k。可将像素往小了调，相当于放大，用多个像素点显示一个东西，但不能往大调，一个像素
点再拆成三个，四个是做不到的。分辨率的上限由显示设备决定。 一个300x100像素的图片，若分辨率小了，图片更大。
一般手机的分辨率不会写的太清楚，因为手机分辨率太乱，电脑上常用的是16:9，笔记本上是16:10.
现在给字体大小调成50个像素，意思是横向50个点，纵向50个点显示文字。
font-family字体类型，windos系统可安装字体，只是在本机的安装，其它电脑不装，无法显示。在网页里主要用的黑体。
text-align,文字对齐方式(默认左对齐).left,center,right.左中右
vertical-align:middle,图片和文字排在一行(默认底部对齐)。middle居中对齐，top顶部对齐，bottom底部对齐。
div块状效果,可设置块状的大小，可加边框，可让块内文字居中。 让其左右居中text-align:center;
让行高和块高相同（即让其上下居中，实际调的文字上下间距）。 border边框，值是复合值，允许填多个值，中间用空格
隔开。通常设置边框粗细（1px），线条（实线solid 虚线dashed），边框颜色（black）。也可不用复合使用，一个个分开写，
border-1px这样分开写。 边框圆角border-radius:10px;可让边框变得更柔和,也可用%，border-radius:10%;比例最多到
50%，此时为圆圈
text-decoration,文字修饰,underline下划线，line-through删除线，最常用的是none（给A标签用的，超链接一般带下划线，
可让下划线消失。）
background-color:背景色
background背景图片,背景图片和背景颜色有冲突，一般用了背景图片，背景颜色看不着了。
背景图片如果很小，会默认横纵，纵轴自己循环。background-repeat可设置重复方式,repeat-x只重复x轴，repeat-y只重复y轴
no-repeat不重复
list-style可修改无序列表的样式，默认黑点。正方形点square，也可用图片做样式。
*/
p{
color:#0000FF;
text-align:center;
}
.mycls{
/* font-size:xx-large; */
font-size:50px;
font-family:"楷体";
}
.myimg{
/* vertical-align:middle; */
vertical-align:top;
/* vertical-align：bottom; */
}
.mydiv{
width:200px;
height:200px;
border:1px solid black;
border-radius:50%;
text-align:center;
line-height:200px;
/* text-decoration:underline; */
background-color:#FFB6C1;
background:url(img/jdk1.7.jpeg) ;
background-repeat:repeat-y;
}
.mydiv>a{
text-decoration:none;
}
ul{
list-style:square;
}
</style>
</head>
<body>
<h1>悯农--李绅</h1>
<p>锄禾日当午</p>
<p>汗滴禾下土</p>
<p class="mycls">谁知盘中餐</p>
<p>粒粒皆辛苦</p>
<div class="mydiv">
<a href="xxx">超链接</a>我的文本</div>
<!-- 测试文字<img class="myimg" src="img/jdk1.7.jpeg"> -->
<ul>
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
</ul>
</body>
</html>
课堂案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.mytable{
border:1px solid black;
}
.tabletitle>th{
border:1px solid gray;
background-color:lightcoral;
}
tbody td{
border:1px solid gray;
width:200px;
height:60px;
text-align:center;
}
</style>
</head>
<body>
<table class="mytable">
<caption>用户信息表</caption>
<thead>
<tr class="tabletitle">
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>小白1</td>
<td>女</td>
<td>15</td>
</tr>
<tr>
<td>小白2</td>
<td>女</td>
<td>15 </td>
</tr>
<tr>
<td>小白3</td>
<td>女</td>
<td>15 </td>
</tr>
</table>
</body>
</html>
3.3 display属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/*
display显示方式，常用的值：inline行内 block块 inline-block行内块（还是从左到右排列，但可设置宽高）
none看不见（元素还是存在的）,效果等同于opacity:0;（透明度为0）（透明度的取值在0到1之间）
显示颜色一般用rgb，对于rgba就是把透明度也加进去
*/
/* div,span{
border:1px solid black;
width:100px;
height:100px;
}
/* 设置宽高对行内元素无效*/
div{
border:1px solid black;
width:100px;
height:100px;
display:inline; /*将块元素改成行内元素*/
opacity:0.2;
}
span{
border:1px solid black;
width:100px;
height:100px;
display:none;
}
</style>
</head>
<body>
<div>mydiv</div>
<div>mydiv</div>
<div>mydiv</div>
<span>myspan</span>
<span>myspan</span>
<span>myspan</span>
</body>
</html>
3.4盒子模型相关属性
若将每个元素想象成盒子，整个页面布局就是盒子套盒子。
最上层的元素是html，再套body，再套自己的内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/*
盒子模型相关的属性： 1.content 内容，一般通过宽高设置
2.border 边框 1px solid black;
3.padding,内部填充，边框与内容之间的距离
4. margin外边距,用法同padding,两个值时多了auto属性值
以上四个元素都占单独的大小。有一个值发生改变，整体布局就会改变。
*/
.main{
width:400px;
height:400px;
border:1px solid black;
margin:0px auto;
}
.innerdiv{
width:100px;
height:100px;
border:10px solid black;
/* padding:10px; 边框与框内内容上下左右的距离*/
/* padding-left:50px; 边框与左边内容的距离*/
/* padding:10px 20px; 边框与上下10px，与左右20px */
/* padding:10px 20px 30px; 上，左右，下 */
padding:10px 20px 30px 40px; /*上，右，下，左（按表走的方向）*/
}
.mydiv{
/* margin:10px; */
/* margin-top:20px; 上边距 */
/* margin-left:20px; 左边距*/
/* margin:10px 20px 30px 40px; 上右下左 */
margin:10px 20px; /*上下和左右*/
margin:10px auto; /*auto可以让元素在父元素里左右居中*/
}
</style>
</head>
<body>
<div class="main">
<div class="innerdiv">div1</div>
<div class="innerdiv mydiv">div2</div>
<div class="innerdiv">div3</div>
</div>
</body>
</html>
块嵌套：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/*overflow,溢出。大块里套小块，小块太多会超过外边界,超过的部分让其不显示，用hidden。 超过部分用滚动轴显示，
用scroll
另一种情况：父元素里面的每一个块会把其所在行占满，故虽然块右边是空白，但不会再放内容。（块元素是从上到下排列的）
若让块元素水平排列,用float，属性值有left，right
float也可让某个元素分成左右各一个
注：漂浮时要让所有的块都漂浮起来，若加入不漂浮的块，边界就会按不漂浮的块重新来算，且与不漂浮的块一起排列时效果也不好
若大块里套小块，小块里再套小块，就一层一层去排列，解决完一层再解决一层。
*/
.main{
width:400px;
height:400px;
border:1px solid black;
margin:0px auto;
overflow:scroll;
}
.innerdiv{
width:100px;
height:100px;
border:1px solid black;
float:left;
}
.toRight{
float:right;
}
</style>
</head>
<body>
<div class="main">
<div class="innerdiv">div1</div>
<div class="innerdiv">div2</div>
<div class="innerdiv">div3</div>
<div class="innerdiv">div4</div>
<div class="innerdiv">div5</div>
</div>
<div>
xxx系统 <span class="toRight">欢迎你xxx
</div>
</body>
</html>
课堂案例1：
（打地鼠，上面大块里套了5x5个小块，要求大块居中。下面块有三行内容，要求居中）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.mainPanel{ /*设置大块样式*/
width:500px;
height:500px;
border:1px solid black;
margin:0px auto; /* 大块左右居中*/
}
.mainPanel>.innerdiv{ /* 设置小块样式，先给个差不多的值，然后用开发者工具调（不是真的调好，预览）。
将调好的值赋给下面的属性。美工也是这样做的，并非笔算 */
width:78px;
height:78px;
border:1px solid black;
float:left; /* 让小块水平排列 */
margin:10px; /* 块间间隔 */
}
.countPanel{ /* 设置下面块的样式 ，先给个值，再用开发者工具调，再赋值*/
width:280px;
height:175px;
border:1px solid black;
margin:30px auto; /* 上下间距30px，左右居中 */
}
.countPanel>p{ /* 设置块中文字样式 */
text-align:center; /* 按钮是行元素，text-align实际就是调行元素 */
}
</style>
</head>
<body>
<div class="mainPanel"> <!-- 创建大块元素并嵌套25个小块 -->
<div class="innerdiv"></div>
<div class="innerdiv"></div>
<div class="innerdiv"></div>
<div class="innerdiv"></div>
<div class="innerdiv"></div>
<div class="innerdiv"></div>
<div class="innerdiv"></div>
<div class="innerdiv"></div>
<div class="innerdiv"></div>
<div class="innerdiv"></div>
<div class="innerdiv"></div>
<div class="innerdiv"></div>
<div class="innerdiv"></div>
<div class="innerdiv"></div>
<div class="innerdiv"></div>
<div class="innerdiv"></div>
<div class="innerdiv"></div>
<div class="innerdiv"></div>
<div class="innerdiv"></div>
<div class="innerdiv"></div>
<div class="innerdiv"></div>
<div class="innerdiv"></div>
<div class="innerdiv"></div>
<div class="innerdiv"></div>
<div class="innerdiv"></div>
</div>
<div class="countPanel">
<p>计时：0秒</p> <!-- 用段落，不用换行 -->
<p>计分：0分</p>
<p><input type="button" value="开始"><input type="button" value="结束"></p>
</div>
</body>
</html>
课堂案例2：
frameset或者frame形式已被淘汰，用div+css布局替代（建一堆块，然后排成想要的布局）。
上左右布局：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/*.main{ 要布局的区域，在这上面划分上左右三块区域，一般先上下，再左右
width:800px;
height:600px;
background-color:lightseagreen;
}
.top{
width:800px; 上面部分的宽度要和布局区域一致
height:200px;
background-color:#F08080;
}
.bottom{
width:800px;
height:400px;
background-color:#F08080;
}
.left{ 下面部分的左面部分
width:200px;
height:400px;
background-color:#ADD8E6;
float:left; 要让左右两部分在下面部分水平排列，就都得加浮动属性
}
.right{
width:600px;
height:400px;
background-color:lightcoral;
float:right;
}
用像素还需要计算，比较麻烦，故可用百分比。 */
/* 下面是整个页面填满的布局 */
html,body{ /* 可当成习惯的写法 */
height:100%;
width:100%; /* 宽度可不指定，默认100% */
margin:0px; /* body自带样式，margin：8px;需覆盖掉 */
padding:0px; /* 为了严谨加的，实际和width一样，没什么用 */
}
.main{ /* 将整个页面布满 */
width:100%;
height:100%; /* css中高度想用100%，要求父元素高度指定，否则默认为0，解决
方式，从html开始 指定高度，body指定高度，到div里再继承100%*/
background-color:lightseagreen;
}
.top{
width:100%;
height:25%;
background-color:lightblue;
}
.bottom{
width:100%;
height:75%;
background-color:lightcyan;
}
.left{
width:20%;
height:100%;
background-color:black;
float:left;
}
.right{
width:80%;
height:100%;
background-color:lightpink;
float:right;
}
</style>
</head>
<body>
<div class="main">
<div class="top"></div>
<div class="bottom">
<div class="left"></div>
<div class="right"></div>
</div>
</div>
</body>
</html>
3.5伪类选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/*伪类选择器，用于选取元素的状态，比较常见的两个状态：hover鼠标悬停，active鼠标点击（点击但没松开）
只要是页面里能看到的元素都有状态，都可以修改
*/
a:hover{ /* 悬浮状态 */
color:lightcoral; /* 修改文字颜色 */
font-size:x-large; /* 修改文字大小 */
}
a:active{ /* 点击效果 */
color:purple;
}
.mydiv{
width:100px;
height:100px;
border:1px solid black;
background-color:lightgreen;
}
.mydiv:hover{
background-color:lightblue;
cursor:pointer; /* 鼠标变成手也是样式效果 */
}
.mydiv:active{
background-color:olive;
}
</style>
</head>
<body>
<a href="xxx">超链接</a> <!-- 超链接元素实际是一个特殊元素，效果：鼠标放上去会变成手，点击不放开会变色。css里的两个
定义效果，鼠标放上去叫悬浮状态，点击下去叫活动状态。这两个状态也可以选择并修改。 -->
<div class="mydiv"></div> <!--对于div鼠标点击没什么效果，也可以添加效果 -->
</body>
</html>
3.6特殊的样式属性--position，定位属性
可改变之前的排布规则（块元素默认从上到下排列，加浮动后默认从左到右排列。行内元素从左到右排列。）。
之前的排布规则称为static：默认文档流。页面布局使用特性把块移动到想要去的位置。一般使用外边距，填充等达到想要的效果。
若改变元素的position属性，会让默认文档流发生改变，即使修饰的元素不再遵从于默认文档流规则。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/*position属性默认static。其它属性值：1.relative相对定位,以原来所在位置为原点，进行偏移。使用了属性值后，
通常还要使用另外两个属性，top(向下偏移)和left（向右偏移）来进行偏移。偏移量也可使用负值（故没有right和bottom）。
元素未脱离文档流（其它元素不动，且位置改变的元素也是以原来位置为参照）。
2.absolute绝对定位，元素脱离文档流（其它元素视位置改变的元素不存在，按照默认文档流排列。位置改变的元素以整个窗口的
页面位置为基准进行偏移。实际上，不在同一个图层了）
3.固定定位，元素脱离文档流，也是以窗口位置进行偏移，并固定在此处（拉滚动条也不动，不随页面移动而移动）
加了定位属性的块悬浮于其他块之上.实际上，样式表有分图层，z-index可改变图层顺序。默认图层为0，加了定位属性后，改变
位置的元素所在图层变为1，故可覆盖原先元素。可给z-index一个-1的值，使改变位置的元素在原来元素的下面。
注：z-index只能用在有定位属性的元素上。
*/
.div1{
width:100px;
height:100px;
border:1px solid black;
background-color:lightblue;
}
/* .div2{
width:100px;
height:100px;
border:1px solid black;
background-color:lightcoral;
position:relative;
top:50px;
left:-50px;
} */
/* .div2{
width:100px;
height:100px;
border:1px solid black;
background-color:lightcoral;
position:absolute;
top:50px;
left:50px;
} */
.div2{
width:100px;
height:100px;
border:1px solid black;
background-color:lightcoral;
position:fixed;
top:50px;
left:50px;
z-index:-1;
}
.div3{
width:100px;
height:100px;
border:1px solid black;
background-color:lightgreen;
}
</style>
</head>
<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
</body>
</html>
4.作业之导航条
行业内一般用标签ul和li去做。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* ul和li都是块元素，想水平排列，可用：1.悬浮 */
/* .mynav>li{
float:left;
border:1px solid black;
margin-left:20px; 加外边距
width:80px;
height:50px;
text-align:center;
line-height:50px;
}
.mynav{
list-style:none; 去无序列表标题
}
.mynav>li>a{
text-decoration:none; 去a标签下划线
color:lightcoral;
}
.mynav>li:hover{
background-color:lightgreen;
} */
/* 水平排列方法二：将块元素变成行元素，用display */
.mynav>li{
display:inline-block; /* 改成行内块 */
border:1px solid black;
margin-left:20px;
width:80px;
height:50px;
}
</style>
</head>
<body>
<ul class="mynav">
<li><a href="xxx"> 首页 </a></li>
<li><a href="xxx"> 关于惠达 </a></li>
<li><a href="xxx"> 卫浴产品 </a></li>
<li><a href="xxx"> 工程案例 </a></li>
</ul>
</body>
</html>
思维导图如下：
197
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
