我的知识记录分享

我的知识记录分享

右侧悬浮下载代码样式

2021-1-6 糖果小宝 html

效果图
点击查看原图
代码实现：仅悬浮功能，无其它效果
<!DOCTYPE html>
<html class="no-js LANG-cn" lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="format-detection" content="telephone=no">

<title>jQuery右侧悬浮</title>

<link rel="stylesheet" href="css/home.css">

</head>
<body>
<div>213131</div>
<div class="global_toolbar">
	<div class="toolbar_btn center" style="top: 50%; margin-top: -150px;">
		<a href="#" id="needtohelp_0_GetPricing" class="bar_forum bar_project_consulting" style="text-decoration:none;">
			<samp style="text-align: center;padding-top:15px;border-radius:5px">
				<i >
					<img src="img/icon/down.png" alt="">
				</i>
				<p>编</p>
				<p>辑</p>
				<p>表</p>
				<p>格</p>
				<p>请</p>
				<p>下</p>
				<p>载</p>
				<p>软</p>
				<p>件</p>
			</samp>
		</a>
		</div>
	
</div>




</body>
</html>

css样式代码


p{
	   margin: 2px auto;
	   font-size:14px;
}
.global_toolbar.default {
    position: absolute
}



.global_toolbar {
    position: fixed;
    z-index: 1001;
    top: 0;
    right: 0;
    width: 0;
    height: 100%;
    -webkit-transition: all .4s cubic-bezier(.2,.83,.42,.91);
    transition: all .4s cubic-bezier(.2,.83,.42,.91);
    border-left: 1px solid #d0d0d0;
    background: #fff
}


.toolbar_btn {
    position: absolute;
    top: 100%;
    left: -50px;
    width: 50px
}

.toolbar_btn a,.toolbar_btn a samp {
    position: relative;
    display: block;
    height: 234px;
    -webkit-transition: all .4s cubic-bezier(.2,.83,.42,.91);
    transition: all .4s cubic-bezier(.2,.83,.42,.91);
    border-bottom: 1px solid #37393d
}

.toolbar_btn a samp {
    z-index: 2;
    width: 50px;
    color: #fff;
    background-color: #000
}



.toolbar_btn.default a samp,.toolbar_btn.default em {
    border-bottom: 1px solid #37393d;
    background: #000
}

.toolbar_content {
    z-index: 3;
    width: 100%
}

.css_column,.toolbar_content {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%
}

« vue-cli3修改index.html浏览器名字和图标——htmlWebpackPlugin.options.title | 2021第一天上班！»

发表评论：