【HTML+CSS】01.品优购首页制作——快捷导航shortcut制作

1.常用模块类名命名

2.快捷导航shortcut制作

（1）快捷导航整体上

在common.css中：

/* 左浮动 */
.fl{float: left;
}
/* 右浮动 */
.fr{float:right;
}

在index.html中：

 <!-- 快捷导航模块 --><section class="shortcut"><div class="w"><div class="fl">123</div><div class="fr">456</div></div></section>

（2）左侧制作

    在ul中放两个li。

在common.css中

.shortcut{/* 宽度为100% */height: 31px;line-height:31px;/*行高会被左右盒子继承 */background-color: #f1f1f1;
}
.shortcut ul li{float: left;/*让li浮动*/
}.style_red{color: rgb(184, 12, 12);
}

在index.html中

 <div class="fl"><ul><li>品优购欢迎你！&nbsp;</li><li><a href="#">请登录&nbsp;</a><a href="#" class="style_red">免费注册</a></li></ul></div>

（3）右侧制作

   a.在ul中放了13个li；b.分隔线也是li，大小1px,颜色填充；c.下拉箭头用了after伪元素（[after伪元素可在此学习](https://www.runoob.com/css/css-pseudo-elements.html)）。

tips：ul>li*13能直接输出13个li

在common.css中

/* 声明字体图标 这里一定要注意路径的变化 */
@font-face {font-family: 'icomoon';src:  url('../fonts/icomoon.eot?tomleg');src:  url('../fonts/icomoon.eot?tomleg#iefix') format('embedded-opentype'),url('../fonts/icomoon.ttf?tomleg') format('truetype'),url('../fonts/icomoon.woff?tomleg') format('woff'),url('../fonts/icomoon.svg?tomleg#icomoon') format('svg');font-weight: normal;font-style: normal;font-display: block;}
/* 选择所有偶数的li */
.shortcut .fr ul li:nth-child(even){width:1px;height: 12px;background-color: #666666;margin:9px 15px 0;/*上左 */}
/*下拉箭头*/
.arrow-icon::after{content:'\e91e';/* 下拉箭头；\转义字符；after伪元素*/font-family: 'icomoon';/*字体 */margin-left: 6px;
}

在index.html中

<div class="fr"><ul><li>我的订单</li><li></li><li class="arrow-icon">我的品优购</li><li></li><li>品优购会员</li><li></li><li>企业采购</li><li></li><li class="arrow-icon">关注品优购</li><li></li><li class="arrow-icon">客户服务</li><li></li><li class="arrow-icon">网站导航</li></ul></div>

源码：
common.css

/* 声明字体图标 这里一定要注意路径的变化 */
@font-face {font-family: 'icomoon';src:  url('../fonts/icomoon.eot?tomleg');src:  url('../fonts/icomoon.eot?tomleg#iefix') format('embedded-opentype'),url('../fonts/icomoon.ttf?tomleg') format('truetype'),url('../fonts/icomoon.woff?tomleg') format('woff'),url('../fonts/icomoon.svg?tomleg#icomoon') format('svg');font-weight: normal;font-style: normal;font-display: block;}
/*版心*/
.w{width:1200px;margin: 0 auto;
}
/* 左浮动 */
.fl{float: left;
}
/* 右浮动 */
.fr{float:right;
}
/* 快捷导航模块 */
.shortcut{/* 宽度为100% */height: 31px;line-height:31px;/*行高会被左右盒子继承 */background-color: #f1f1f1;
}
.shortcut ul li{float: left;
}.style_red{color: rgb(184, 12, 12);
}
/* 选择所有偶数的li */
.shortcut .fr ul li:nth-child(even){width:1px;height: 12px;background-color: #666666;margin:9px 15px 0;/*上左 */}
.arrow-icon::after{content:'\e91e';/* 下拉箭头；\转义字符；after伪元素*/font-family: 'icomoon';/*字体 */margin-left: 6px;
}

index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>品优购--购物商城</title><meta name="description" content="品优购销售家电、数码" /><meta name="keywords" content="MP3，CD，DVD" /><link rel="shortcut icon" href="favicon.ico"><link rel="stylesheet" href="css/base.css"><link rel="stylesheet" href="css/common.css">
</head>
<body><!-- 快捷导航模块 --><section class="shortcut"><div class="w"><div class="fl"><ul><li>品优购欢迎你！&nbsp;</li><li><a href="#">请登录&nbsp;</a><a href="#" class="style_red">免费注册</a></li></ul></div><div class="fr"><ul><li>我的订单</li><li></li><li class="arrow-icon">我的品优购</li><li></li><li>品优购会员</li><li></li><li>企业采购</li><li></li><li class="arrow-icon">关注品优购</li><li></li><li class="arrow-icon">客户服务</li><li></li><li class="arrow-icon">网站导航</li></ul></div></div></section>
</body>
</html>

【HTML+CSS】01.品优购首页制作——快捷导航shortcut制作相关推荐

HTML和CSS实现品优购首页
HTML和CSS实现品优购首页效果图如下: 1.HTML部分源代码如下: <!DOCTYPE html> <html lang="zh-CN"><h ...
CSS 8 品优购项目
目录 1.品优购项目规划 1.1网站制作流程 1.2品优购项目整体介绍 1.3品优购项目的学习目的 1.4开发工具以及技术栈小总结 1.5品优购项目搭建工作. 1.5.1创建文件夹 1.5.2创建 ...
HTML5 和 CSS3 的新特性--品优购首页制作
网站的首页一般都是使用 index 命名,比如 index.html 或者 index.php . 我们开始制作首页的头部和底部的时候,根据模块化开发,样式要写到common.css里面. 以下是我们 ...
前端初尝试---品优购首页（只用HTML和CSS）
品优购首页(只用HTML和CSS) 预览主页HTML码 base.css common.css index.css 预览主页HTML码 <!DOCTYPE html> <html ...
三、品优购首页制作_快捷导航区域
代码下载地址:https://gitee.com/bitaotao/quality-shopping-static-page.git 一.品优购首页制作网站的首页一般都是使用index命名,比如in ...
品优购首页——网页轮播图
效果图首页文件 index.html <!DOCTYPE html> <html lang="en"> <head><meta char ...
HTML+CSS实现品优购登录界面
HTML+CSS实现品优购登录界面效果图如下: 1.HTML部分源代码如下: <!DOCTYPE html> <html lang="en"><hea ...
八、品优购首页制作_主体区域（下）
一.楼层区floor制作注意这个floor,不要给高度,内容有多少,算多少. 第一楼是家用电器模块:里面包含两个盒子 1号盒子box_hd,给一个高度,有个下边框,里面分为左右2个盒子. 2号盒子b ...
web前端品优购首页+源代码(2)
目录 main 首页主体模块制作 recom 今日推荐模块 ulike 猜你喜欢模块 main 模块不再时公共模块,新建一个index.css文件在该文件中编写css代码分类部分在nav 导航模 ...

【HTML+CSS】01.品优购首页制作——快捷导航shortcut制作

【HTML+CSS】01.品优购首页制作——快捷导航shortcut制作相关推荐

最新文章

热门文章