Article Directory
- 【Koala Sea Shopping Website】 【Top Navigation】
- The first step is to analyze the layout
- The second step is to create a basic text directory and files
- The third step, according to the analysis of the navigation bar in the first step, complete the required tags in the html code
- The fourth step, according to the style seen in the first step, write CSS style
The effect of the navigation bar is as shown in the picture >>>
The changes that occurred in the small triangle were originally to be rotated animations. In order to be more creative, I made the animation effect of falling, which is slightly different from the official website
【Koala Sea Shopping Website】 【Top Navigation】
The first step is to analyze the layout
After analyzing the layout, we started to solve it line by line
The second step is to create a basic text directory and files
The basic structure of the code index.html file which is such that (H5 This structure is standard in vscode editor which input html: press Enter automatically after completion 5 )
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
The third step, according to the analysis of the navigation bar in the first step, complete the required tags in the html code
Layout of these labels is based on an analysis of individual web pages to come, in order to reduce the content of the article is too long to read cause fatigue, I will analyze the process of comments in the code inside >>>
index.html file code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 这里是引入我们将要编辑的css样式表 -->
<link rel="stylesheet" href="index.css">
<title>考拉海购网</title>
</head>
<body>
<!-- 顶部导航栏 -->
<div id="topNav">
<!-- nav标签用来定义导航链接的部分 -->
<nav>
<!-- 根据刚才第一步的分析可以知道这是一个水平导航栏，我们可以采用ul > li 的格式来建立一个导航栏列表 -->
<!-- 这里定义一个类名为Nav方便之后用CSS以类名Nav所在的标签为父级标签对导航栏进行样式操作 -->
<ul class="Nav">
<li>考拉欢迎你！</li>
<li><a>登录</a></li>
<li><a>免费注册</a></li>
<li><a>手机考拉</a></li>
<li><a>每日签到</a></li>
<li><a>我的订单</a></li>
<li><a>个人中心<i></i></a>
<!-- 这里面有个类名为personalCenter的div标签，取名为该类名的原因是，该类名中文翻译为个人中心 -->
<!-- 这个div标签是嵌套在li里面的，之后用于表示二级下拉菜单栏 -->
<div class="personalCenter">
<a href="">我的优惠券</a>
<a href="">我的红包</a>
<a href="">我的考拉豆</a>
<a href="">帐号管理</a>
<a href="">我的实名认证</a>
<a href="">我的发票抬头</a>
<a href="">我收藏的商品</a>
<a href="">我关注的品牌</a>
<a href="">售后管理</a>
</div>
</li>
<li><a>客户服务<i></i></a>
<!-- 这里面有个类名为customerService的div标签，取名为该类名的原因是，该类名中文翻译为客服服务 -->
<!-- 这个div标签是嵌套在li里面的，之后用于表示二级下拉菜单栏 -->
<div class="customerService">
<a href="">联系客服</a>
<a href="">帮助中心</a>
<a href="">知识产权保护</a>
<a href="">规则中心</a>
</div>
</li>
<li><a>充值中心<i></i></a>
<!-- 这里面有个类名为payCenter的div标签，取名为该类名的原因是，该类名中文翻译为支付中心 -->
<!-- 这个div标签是嵌套在li里面的，之后用于表示二级下拉菜单栏 -->
<div class="payCenter">
<a href="">话费充值</a>
<a href="">游戏充值</a>
<a href="">AppStore充值卡</a>
</div>
</li>
<li><a>消费者权益<i></i></a>
<!-- 这里面有个类名为consumesInterests的div标签，取名为该类名的原因是，该类名中文翻译为消费者权益 -->
<!-- 这个div标签是嵌套在li里面的，之后用于表示二级下拉菜单栏 -->
<div class="consumesInterests">
<a href="">消费者告知书</a>
</div>
</li>
<li><a>更多<i></i></a>
<!-- 这里面有个类名为more的div标签，取名为该类名的原因是，该类名中文翻译为更多 -->
<!-- 这个div标签是嵌套在li里面的，之后用于表示二级下拉菜单栏 -->
<div class="more">
<a href="">收藏本站</a>
<a href="">新浪微博</a>
<a href="">微信公众号</a>
<a href="">招商合作</a>
</div>
</li>
<li><a>视频内容</a></li>
</ul>
</nav>
</div>
</body>
</html>
This is what it looks like after writing it. It is
still far from the expected goal we want to see. We are now starting to beautify and start the CSS part
The fourth step, according to the style seen in the first step, write CSS style
The origin and style -related analysis and interpretation I have made comments in the code inside , pay attention to see to read the code can understand comments
index.css file code
body {
/* 将body默认的padding和margin清零，有助于页面无白边，实现全屏阅读 */
padding: 0;
margin: 0;
/* 这是字体大小及字体风格 */
font: 12px/1.5 Helvetica Neue,Helvetica,Arial,Hiragino Sans GB,\5FAE\8F6F\96C5\9ED1,tahoma,simsun,\5b8b\4f53;
font-weight: 500;
}
a {
/* 这是一个设置超链接的下划线为空的办法，text-decoration让文本修饰为none，就可以将下划线去掉 */
text-decoration: none;
}
/* ---------------顶部导航栏部分---------------------*/
/* 设置外层包裹标签，方便实现导航条居中 */
#topNav {
display: block;
margin: 0 auto;
}
/* 设置导航栏父级的效果 */
ul.Nav {
/* 设置导航栏类名为Nav的ul列表的定位为相对定位 */
position: relative;
/* 根据官方网页参考可得，大致的导航栏高度为31px */
height: 31px;
/* 设置为100%，让导航栏的ul列表适应屏幕宽度 */
width: 100%;
/* 距离顶部为0像素，使导航栏相对浏览器可视页面置顶，紧贴浏览器可视页面顶部 */
margin-top: 0px;
/* 前端的规范中，ul默认相对左边有40像素的距离，margin-left属性设置为-40像素表示相对于左边向左方向移动40像素的距离，因为这里场景特殊，我们因地制宜，设置为-20px */
margin-left: -20px;
/* 根据官网的导航栏背景颜色可知，背景颜色为黑色 */
background-color: black;
/* 设置字体颜色为灰度，16进制表示为999999，这里缩写为999 */
color: #999;
}
/* 对导航栏子级进行设置 */
ul.Nav li {
/* 将li标签的显示设置为行级块模式，这样会让li标签从垂直排列变为水平排列 */
display: inline-block;
position: relative;
/* 行高设置为和父级一样的行高，用于撑开li的高度 */
line-height: 31px;
/* 根据官网的导航栏效果可知，li内的字体相对于border边框有一定的距离，所以我们设置内填充，上下因为有行高了，这里就设置左右内填充12像素 */
padding: 0 12px 0;
cursor: pointer;
}
/* 当鼠标移动到导航栏的li标签上时会发生字体变白色的效果 */
ul.Nav li:hover {
color: #fff;
}
/* 这里采用nth-child()选择器来设置每个选项之间的间距 */
/* 主要设置第一个选项和第四个选项 ，这样一左一右的设置可以使第一到第4选项分离成左侧的导航栏*/
ul.Nav li:nth-child(1) {
margin-left: 200px;
}
ul.Nav li:nth-child(4) {
margin-right: 140px;
}
/* 这个地方是将i标签用css画成三角形，做倒三角字符 */
ul.Nav li i {
position: relative;
top: 10px;
margin-left: 4px;
width: 0;
height: 0;
border: 4px solid #999;
border-left-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
/* 加入动画过渡属性 */
transition: all 0.2s ease;
}
/* 当鼠标经过导航栏的li标签选项时，i标签发生的变化，原本是要做旋转的动画，为了更具有创意，我做的这个是下坠的动画效果 */
ul.Nav li:hover i {
top: 16px;
}
/* 对个人中心，客服服务，支付中心，消费者权益，更多 这5个二级下拉菜单进行设置 */
.personalCenter,
.customerService,
.payCenter,
.consumesInterests,
.more {
display: none;
position: absolute;
margin-left: -12px;
width: 100px;
background-color: rgb(253, 253, 253);
box-shadow: 1px 1px 15px rgb(228, 228, 228);
padding: 0 10px 0 10px;
}
.customerService {
width: 90px;
}
.payCenter {
width: 64px;
}
.consumesInterests {
width: 76px;
}
.more {
width: 74px;
left: -18px;
padding: 0 8px 0 8px;
}
/* 对个人中心，客服服务，支付中心，更多 这4个二级下拉菜单的菜单选项进行设置，这里我们用a标签作为单个菜单选项的包裹标签 */
.personalCenter a,
.customerService a,
.payCenter a,
.more a {
display: block;
width: 100%;
color: inherit;
}
/* 给二级下拉菜单里面的指定选项设置下划线 */
.more a:nth-child(1) {
border-bottom: 1px solid rgb(204, 204, 204);
}
.personalCenter a:nth-child(3) {
border-bottom: 1px solid rgb(204, 204, 204);
}
.personalCenter a:nth-child(6) {
border-bottom: 1px solid rgb(204, 204, 204);
}
.personalCenter a:nth-child(8) {
border-bottom: 1px solid rgb(204, 204, 204);
}
/* 类名.Nav中的第7到第11的li元素是拥有下拉二级菜单栏，鼠标经过li标签的时候，背景变为白色,字体颜色变黑色*/
ul.Nav li:nth-child(7):hover,
ul.Nav li:nth-child(8):hover,
ul.Nav li:nth-child(9):hover,
ul.Nav li:nth-child(10):hover,
ul.Nav li:nth-child(11):hover {
color: rgb(0, 0, 0);
background-color: rgb(253, 253, 253);
}
/* 类名.Nav中的第7到第11的li元素是拥有下拉二级菜单栏，鼠标经过a标签的时候，字体颜色变红色 */
ul.Nav li:nth-child(7) a:hover,
ul.Nav li:nth-child(8) a:hover,
ul.Nav li:nth-child(9) a:hover,
ul.Nav li:nth-child(10) a:hover,
ul.Nav li:nth-child(11) a:hover {
color: rgb(240, 15, 15);
}
/* 类名.Nav中的第7到第11的li元素是拥有下拉二级菜单栏，鼠标经过时显示相应的二级下拉菜单栏 */
ul.Nav li:nth-child(7):hover .personalCenter,
ul.Nav li:nth-child(8):hover .customerService,
ul.Nav li:nth-child(9):hover .payCenter,
ul.Nav li:nth-child(10):hover .consumesInterests,
ul.Nav li:nth-child(11):hover .more {
display: block;
color: rgb(0, 0, 0);
}
The reference of deployment situation is shown in the figure:
effect demonstration:
warm reminder: it is recommended to put the code of index.html and index.css in the vscode editor for comparison, you can clearly understand the entire design idea
