HTML+css简单实现手机邮箱导航网页

前言

基本完成了手机邮箱导航的样式，是很经典的一个试验。

一、邮箱网页代码


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>手机邮箱导航</title><link href="css/font-awesome.min.css" rel="stylesheet"><link rel='stylesheet' href='css/email.css'>
</head>
<body><div class="l-main"><div class="menu"><header class="menu_header"><h1 class="menu_header-title">我的邮箱</h1></header><nav class="menu_body"><ul class="nav"><li class="nav_item"><a href=“#" class="nav_item-link is-active"><i class="fa fa-envelope nav_item-icon"></i><span class="nav_item-text">收件箱</span><span class="badge badge-warning">32</span> </a></li><li class="nav_item"><a href="#" class="nav_item-link"><i class="fa fa-flag nav_item-icon"></i><span class="nav_item-text">红旗邮件</span> <span class="badge">7</span></a></li><li class="nav_item"><a href="#" class="nav_item-link"><i class="fa fa-space-shuttle nav_item-icon"></i><span class="nav_item-text">已发送</span> <span class="badge">0/17</span></a></li><li class="nav_item"><a href="#" class="nav_item-link"><i class="fa fa-archive nav_item-icon"></i><span class="nav_item-text">草稿箱</span> <span class="badge">2</span></a></li><li class="nav_item"><a href="#" class="nav_item-link"><i class="fa fa-trash nav_item-icon"></i><span class="nav_item-text">已删除</span> <span class="badge">5</span></a></li><li class="nav_item"><a href="#" class="nav_item-link"><span class="nav_item-text">所有邮件</span> </a></li></ul></nav></div></div>
</body>
</html>

二、email.css代码

代码如下：


html,body,div,span,h1,a,ul,li,nav {margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;/*元素的基线同父元素的基线对齐*/
}
body
{line-height:1em;line-height:1em;background: #F4F4F4;font-family: Arial, sans-serif;font-size: 14px;font-weight: lighter;
}
.l-main
{width: 530px;margin: 0 auto;
}
.menu
{width: 250px;margin: 40px;background: #fff;/*盒子阴影：水平方向0 垂直方向向下1px 模糊程度4px 黑色透明度30%*/box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);border-radius: 5px;/*边框圆角5px*/float: left;
}
.menu_header
{background: #4B4F55;border-bottom: 1px solid #353A40;/*设置元素下边框为1px颜色#353A40的实线*/border-radius: 5px 5px 0 0;/*边框圆角：左上角5px 右上角5px 右下角0 左下角0*/
}
.menu_header-title
{color: #fff;padding: 15px;/*文本阴影：垂直方向0 水平方向向右1px 透明度40%的黑色阴影*/text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); }
.menu_body
{border-radius: 0 0 5px 5px;/*边框圆角：左上角、右上角为0，右下角、左下角5px*/
}
.nav
{list-style: none;
}
.nav_item
{position: relative;
}
.nav_item-link
{padding: 10px 15px;/*内边距：上下10px 左右1px*/text-decoration: none;/*文本样式：无*/color: #8B8E93;display: block;/*把行元素强制转换为块元素*/border-bottom: 1px solid #F0F0F0;
}
.nav_item-link:hover
{background: #f0f0f0;/*鼠标悬浮在该元素的时候，背景颜色变为#f0f0f0*/
}
/*设置当鼠标点击该元素时背景颜色和文字颜色、下边框颜色，盒子内阴影：水平方向向右1px颜
色为#7A828D*/
.nav_item-link.is-active
{background: #6E757F;color: #fff;border-bottom-color: #4B4F55;box-shadow: 0 1px 0 #7A828D inset;
}
.nav_item-link.is-active:after
{content: '';display: block;/*绝对定位，父元素要加position: relative;记住“子绝父相”原则*/position: absolute;top: 50%;/*距父元素上边50%*/right: -6px;/*距父元素左边-6px*/margin-top: -6px;/*顶部外边距为-6px*/border-top: 6px solid transparent;/*上边框：6px的透明的实线*/border-bottom: 6px solid transparent;border-left: 6px solid #6E757F;
}
.nav_item-link.is-active
{color: #fff;/*当鼠标点击该元素时，文字颜色为白色*/
}
.nav_item:last-child .nav_item-link
{border-bottom: none;/*底边框：无*/
}
.nav_item-icon
{width: 20px;text-align: center;/*文本水平居中*/font-size: 18px;margin-right: 10px;
}
.badge
{font-size: 12px;padding: 2px 8px;border: 1px solid #D1D1D1;border-radius: 10px;position: absolute;top: 10px;right: 15px;
}
.badge-warning
{background: #ED373F;border-color: #ED373F;
}
.fa-flag{color: red;
}
.fa-space-shuttle{color: #508049;
}
.fa-archive{color: orange;
}
.fa-envelope{color: #35b3ff;
}最后一个是外部链接：font-awesome.min.css
可以去网上下载。

显示最终结果：

总结

这个手机邮箱网页导航比较基础把，涉及到一些盒子模型的样式知识和css的选择器知识，但是我觉得对于我这个初学者来说，还是有点难度的。还有就是，样式没有显示出来就是文件路径不符合，一定要把他们放到一个文件里边。深受这个的折磨。。。。

HTML+css简单实现手机邮箱导航网页相关推荐

H5项目2-3手机邮箱导航
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8" ...
HTML+CSS简单实现京东顶部导航栏
效果图 html代码 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
HTML+CSS简单实现拼多多部分网页
太菜了,写了一下午. <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
html模仿商城静态页面,HTML+CSS简单实现凡客商城静态网页
[实例简介] 用HTML+CSS模仿凡客商城做的静态页面,包括首页.列表页.详情页.登录.注册.购物车.支付页等 [实例截图] [核心代码] 凡客商城 └── 凡客商城 ├── css │ ├── ...
html+css 简单的静态网页小米官网
html+css简单静态小米官网把之前做的改进了一下,其他的都是一样的布局效果图: 新增了一些字体文件不多说上代码 HTML代码: ```html <!DOCTYPE html> & ...
css+js简单实现126邮箱注册页面
经常受点刺激也是好事.提醒自己别忘了持之以恒. 开头先祝大家平安夜快乐. 下面是简单实现126邮箱注册,也是一个作业.主要实现了:邮箱检测,密码强度检测,重复密码检测等. <!DOCTYPE h ...
手机web——自适应网页设计（html/css控制） - 51CTO.COM
手机web--自适应网页设计(html/css控制) - 51CTO.COM 一. 允许网页宽度自动调整: "自适应网页设计"到底是怎么做到的? 其实并不难. 首先,在网页代码的头 ...
CSS - 禁止手机移动端网页缩放（meta）
前言您一定不希望手机网页被缩放,本文将提供给您简易的解决方案. 解决方案注意:该方法并不能 "完全" 控制(浏览器有自己的缩放)其缩放,如果想要完全控制则需要使用 JS 加码了 ...
HTML5期末大作业：红酒主题——简单的品牌红酒销售网页设计(4页) HTML+CSS+JavaScript 期末大作业HTML代码
HTML5期末大作业:红酒主题--简单的品牌红酒销售网页设计(4页) HTML+CSS+JavaScript 期末作业HTML代码学生网页课程设计期末大作业下载 web网页设计制作成品常见网页设计 ...

HTML+css简单实现手机邮箱导航网页

前言

一、邮箱网页代码

二、email.css代码

总结

HTML+css简单实现手机邮箱导航网页相关推荐

最新文章

热门文章