-
效果图:
image.png -
素材:
top.jpg
- 下载字体:(https://icomoon.io/app/#/select/library)
image.png
-
过程:
image.png 注意点:
image.png
image.png
- 代码如下:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<!-- normalize 里面的css 初始化 针对浏览器 -->
<link rel="stylesheet" href="css/normalize.css">
<!-- base里面只写公共样式 是对京东网页 头部和底部样式-->
<link rel="stylesheet" href="css/base.css">
<!-- 京东首页的css 只写首页的 独有的-->
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="J_event">
<a href="#" class="w">
<i></i>
</a>
</div>
</body>
</html>
- base.css
/*版心*/
.w{
width: 1190px;
margin: auto;
}
.fr{
float: right;
}
.fl{
float: left;
}
/*声明 fonts导入(字体)注意[../fonts/]写法*/
@font-face {
font-family: 'icomoon';
src: url('../fonts/icomoon.eot?etxksv');
src: url('../fonts/icomoon.eot?etxksv#iefix') format('embedded-opentype'),
url('../fonts/icomoon.ttf?etxksv') format('truetype'),
url('../fonts/icomoon.woff?etxksv') format('woff'),
url('../fonts/icomoon.svg?etxksv#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
/*京东 顶部 star*/
.J_event{
height: 80px;
background-color: #000;
}
.J_event a{
display: block;
height: 80px;
background: url(../images/top.jpg) no-repeat;
position: relative; /*子绝父相 */
}
.J_event a i{ /*小×号*/
width: 20px;
height: 20px;
/*background-color: pink;*/
position: absolute; /*子绝父相 要以a*/
right: 0;
top: 5px;
font-family: "icomoon"; /*声明字体*/
font-style: normal; /*字体不倾斜*/
text-align: center; /*水平居中*/
line-height: 20px; /*垂直居中*/
color: #fff; /*小×号的颜色*/
background: rgba(0,0,0,0.4); /*半透明*/
}
/*京东 顶部 end*/
