2 顶部关闭按钮

效果图:

image.png
素材:

top.jpg

下载字体:(https://icomoon.io/app/#/select/library)

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*/

2 顶部关闭按钮

推荐阅读更多精彩内容