CSS实战 - 奇Y技巧之div展示

最新推荐文章于 2023-01-07 00:02:52 发布

我先来一碗

最新推荐文章于 2023-01-07 00:02:52 发布

阅读量179

点赞数

分类专栏：前端日常

本文链接：https://blog.csdn.net/jack_bob/article/details/120990175

版权

CSS 按钮样式响应式设计 SVG图标前端开发

关键词由CSDN通过智能技术生成

前端日常专栏收录该内容

65 篇文章 11 订阅

订阅专栏

效果：
在这里插入图片描述


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS实战 -按钮</title>
 
	<style type="text/css">
		html,body{
  /*box-sizing:border-box;*/
  margin:0;
  height:100%;
  /*background:#000000;*/
}
.acl{
	background-color: #ffffff;
}
.btn-row{

	height: 40px;
    /*padding-bottom: 6px;*/
    background-color: #7fffd4;
    display: flex;
    /*-webkit-box-align: center;*/
    -ms-flex-align: center;
    align-items: center;
    padding: 10px 20px;
    color: #646464;
}
.Button {
    display: inline-block;
    padding: 0 16px;
    font-size: 14px;
    line-height: 32px;
    text-align: center;
    cursor: pointer;
    background: none;
    border: 1px solid;
    border-radius: 3px;
    color: #06f;
}

</style>
</head>
<body>
  <div style="margin-top: 100px;margin-left: 100px;background: #a09a47;width: 400px;height: 300px;">
    <div class="acl" style="">

    	<!-- 一行 -->
      <div class="btn-row">
      	<span>
      		<button type="button" class="Button  VoteButton--up">
      			<span style="display: inline-flex; align-items: center;">
      				<svg class="Zi Zi--TriangleUp VoteButton-TriangleUp" fill="currentColor" viewBox="0 0 24 24" width="10" height="10">     <path d="M2 18.242c0-.326.088-.532.237-.896l7.98-13.203C10.572 3.57 11.086 3 12 3c.915 0 1.429.571 1.784 1.143l7.98 13.203c.15.364.236.57.236.896 0 1.386-.875 1.9-1.955 1.9H3.955c-1.08 0-1.955-.517-1.955-1.9z" fill-rule="evenodd"></path>
      				</svg>
      			</span>
      			赞同
      		</button>
      		<button type="button" class="Button VoteButton--up">
      			<span style="display: inline-flex; align-items: center;">
      				<svg class="Zi Zi--TriangleUp VoteButton-TriangleUp" fill="currentColor" viewBox="0 0 24 24" width="10" height="10">     <path d="M2 18.242c0-.326.088-.532.237-.896l7.98-13.203C10.572 3.57 11.086 3 12 3c.915 0 1.429.571 1.784 1.143l7.98 13.203c.15.364.236.57.236.896 0 1.386-.875 1.9-1.955 1.9H3.955c-1.08 0-1.955-.517-1.955-1.9z" fill-rule="evenodd"></path>
      				</svg>
      			</span>
      			反对
      		</button>
      	</span>
      	<button type="button" class="Button Button--plain" style="margin-left: 5px;">
      		添加评论
      	</button>
      	<span class="" style="margin-left: 16px;color: #8590a6;">10-21</span>
      </div>
      <!-- end -->


    </div>
  </div>
</body>

我先来一碗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS实战 - 奇Y技巧之div展示

效果：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS实战 -按钮</title> <style type="text/css"> html,body{ /*box-sizing:border-box;*/ margin:0; height:100%; /*background:#000000
复制链接

扫一扫