一学代码深似海,代码世界趣无穷!
<body> <div class="yetou-hezi"> <nav class="yetou-daohang"> <a href=""><i class="fa fa-apple">i>a> <a href="">Maca> <a href="">ipada> <a href="">iphonea> <a href="">Watcha> <a href="">Musica> <a href="">技术支持a> <a href=""><i class="fa fa-search">i>a> <a href=""><i class="fa fa-shopping-bag">i>a> nav> div> body>
每个“盒子”写完以后,对其进行属性的赋予(如上图中红色的字),再将父级的边距去掉,a标签的字体颜色设为白色:
body{margin: 0px;} a{text-decoration: none;color: white;}
接下来对 yetou-hezi 和 yetou-daohang 进行设置:设置这两个对象是通过【类标签】的设置,格式为:“. + 名字{}”,如下:
.yetou-hezi{background-color: black;padding: 10px 0px;} .yetou-daohang{display: flex;justify-content: space-between;max-width: 1180px;margin-left: auto;/* 左边距自动 */ margin-right: auto;/* 右边距自动 */}
yetou-hezi设置它的背景色和内边距,如1;yetou-daohang 设置弹性盒子、水平居中对齐、1180px最大宽度和左外边框自动,如2;最为关键的是3.4 ,这两步一个是实现悬停效果 ,一个是实现颜色过度时间。悬停代码hover{}, 变色过度颜色是transtion。
.yetou-daohang a:hover{color: red;background-color: bisque;font-size: 20px;} /* 只针对导航里的a 标签内容字产生鼠标经过变色的效果 背景颜色 字体大小*/ .yetou-daohang a{transition: 2s;} /* 只针对导航里的a 标签内容字产生鼠标经过变色的效果2s 过度变化 */
当然,这里面都是针对类标签中a标签 的设置,写个红色字体颜色,20px小的字体和过渡时间2s 就实现了悬停效果!不过这里要明白:.yetou-dnohang{} 和a{} 的相关知识,不然你是看不懂的
![f4200e00a44aa1705f0d5d5eb3ed2507.png](https://i-blog.csdnimg.cn/blog_migrate/aaf7d6bdbab50121ceddfc65a5b8635d.png)
<html> <head> <meta charset="utf-8"> <title>苹果官网导航title> <link href="css/font-awesome.css" rel="stylesheet"> <style> body{margin: 0px;} a{text-decoration: none;color: white;} .yetou-hezi{background-color: black;padding: 10px 0px;} .yetou-daohang{display: flex;justify-content: space-between;max-width: 1180px;margin-left: auto;/* 左边距自动 */ margin-right: auto;/* 右边距自动 */} .yetou-daohang a:hover{color: red;background-color: bisque;font-size: 20px;} /* 只针对导航里的a 标签内容字产生鼠标经过变色的效果 背景颜色 字体大小*/ .yetou-daohang a{transition: 2s;} /* 只针对导航里的a 标签内容字产生鼠标经过变色的效果2s 过度变化 */style> head> <body> <div class="yetou-hezi"> <nav class="yetou-daohang"> <a href=""><i class="fa fa-apple">i>a> <a href="">Maca> <a href="">ipada> <a href="">iphonea> <a href="">Watcha> <a href="">Musica> <a href="">技术支持a> <a href=""><i class="fa fa-search">i>a> <a href=""><i class="fa fa-shopping-bag">i>a> nav> div> body>html>
最后的最后附上HTML 和 css属性的代码学习基本名称: