CSS 基础
取值单位
外观样式
布局样式
动画样式
工具与规范
实例练习
$$demo <nav class="navigator"> <img class="logo" src="https://3yya.com/logo-mini.png" alt="logo" /> <h3 class="name">三眼鸭的编程教室</h3> <span class="route"> <a href="https://3yya.com/" target="_blank">首页</a> </span> <span class="route"> <a href="https://3yya.com/" target="_blank">教程</a> <div class="container"> <ul> <li> <a href="https://3yya.com/course/2" target="_blank" >Python</a > </li> <li> <a href="https://3yya.com/course/3" target="_blank" >设计模式</a > </li> <li> <a href="https://3yya.com/course/9" target="_blank">爬虫</a> </li> </ul> </div> </span> <span class="route"> <a href="https://3yya.com/courseware" target="_blank">课件</a> <div class="container"> <ul> <li> <a href="https://3yya.com/courseware/chapter/30" target="_blank" >前端课</a > </li> <li> <a href="https://3yya.com/courseware/chapter/32" target="_blank" >HTML</a > </li> <li> <a href="https://3yya.com/courseware/chapter/43" target="_blank" >CSS</a > </li> </ul> </div> </span> </nav> <style> :root { box-sizing: border-box; /* 设置根元素的 box-sizing: border-box */ } *, *:before, :after { box-sizing: border-box; / box-sizing 继承自父元素 */ }
body {
/* 默认的 body 元素有外边距 */
/* 将它设置为 0 */
margin: 0;
height: 200px;
}
.navigator {
/* 元素水平居中 */
text-align: center;
height: 60px;
box-shadow: 0 0 4px #999;
background-color: white;
/* 设置元素的行高与元素高度一致 */
/* 此时内部行内子元素可以通过 vertical-align: middle 垂直居中 */
line-height: 60px;
}
.navigator > * {
/* 所有子代居中对齐 */
vertical-align: middle;
}
.navigator .logo {
height: 40px;
}
.navigator .name {
display: inline;
margin-right: 60px;
}
.navigator a {
/* 让颜色继承自父辈 */
color: inherit;
/* 让装饰线继承自父辈 */
text-decoration: inherit;
}
.navigator .route {
position: relative;
text-align: initial;
line-height: initial;
}
.navigator .route > a {
padding: 10px 25px;
border-radius: 4px;
}
.navigator .route:hover > a {
background-color: #eee;
}
/* 鼠标在 .route 元素上的时候 */
/* 设置里面 .container 元素的 display: block; */
.navigator .route:hover .container {
display: block;
}
.navigator .route .container {
padding-top: 25px;
position: absolute;
display: none;
left: 0;
top: 100%;
}
.navigator ul {
width: 140px;
list-style: none;
margin: 0;
padding: 0;
font-size: 14px;
border-radius: 4px;
box-shadow: 0 0 4px #999;
background-color: white;
}
.navigator ul a {
display: block;
padding: 10px;
}
.navigator ul a:hover {
background-color: #eee;
}
</style>
$$
$$answer
<nav class="navigator">
<img class="logo" src="https://3yya.com/logo-mini.png" alt="logo" />
<h3 class="name">三眼鸭的编程教室</h3>
<span class="route">
<a href="https://3yya.com/" target="_blank">首页</a>
</span>
<span class="route">
<a href="https://3yya.com/" target="_blank">教程</a>
<div class="container">
<ul>
<li>
<a href="https://3yya.com/course/2" target="_blank"
>Python</a
>
</li>
<li>
<a href="https://3yya.com/course/3" target="_blank"
>设计模式</a
>
</li>
<li>
<a href="https://3yya.com/course/9" target="_blank">爬虫</a>
</li>
</ul>
</div>
</span>
<span class="route">
<a href="https://3yya.com/courseware" target="_blank">课件</a>
<div class="container">
<ul>
<li>
<a
href="https://3yya.com/courseware/chapter/30"
target="_blank"
>前端课</a
>
</li>
<li>
<a
href="https://3yya.com/courseware/chapter/32"
target="_blank"
>HTML</a
>
</li>
<li>
<a
href="https://3yya.com/courseware/chapter/43"
target="_blank"
>CSS</a
>
</li>
</ul>
</div>
</span>
</nav>
<style>
:root {
box-sizing: border-box; /* 设置根元素的 box-sizing: border-box */
}
*,
*:before,
*:after {
box-sizing: border-box; /* box-sizing 继承自父元素 */
}
body {
/* 默认的 body 元素有外边距 */
/* 将它设置为 0 */
margin: 0;
}
.navigator {
/* 元素水平居中 */
text-align: center;
height: 60px;
box-shadow: 0 0 4px #999;
background-color: white;
/* 设置元素的行高与元素高度一致 */
/* 此时内部行内子元素可以通过 vertical-align: middle 垂直居中 */
line-height: 60px;
}
.navigator > * {
/* 所有子代居中对齐 */
vertical-align: middle;
}
.navigator .logo {
height: 40px;
}
.navigator .name {
display: inline;
margin-right: 60px;
}
.navigator a {
/* 让颜色继承自父辈 */
color: inherit;
/* 让装饰线继承自父辈 */
text-decoration: inherit;
}
.navigator .route {
position: relative;
text-align: initial;
line-height: initial;
}
.navigator .route > a {
padding: 10px 25px;
border-radius: 4px;
}
.navigator .route:hover > a {
background-color: #eee;
}
/* 鼠标在 .route 元素上的时候 */
/* 设置里面 .container 元素的 display: block; */
.navigator .route:hover .container {
display: block;
}
.navigator .route .container {
padding-top: 25px;
position: absolute;
display: none;
left: 0;
top: 100%;
}
.navigator ul {
width: 140px;
list-style: none;
margin: 0;
padding: 0;
font-size: 14px;
border-radius: 4px;
box-shadow: 0 0 4px #999;
background-color: white;
}
.navigator ul a {
display: block;
padding: 10px;
}
.navigator ul a:hover {
background-color: #eee;
}
</style>
$$