css,html,js实用锦囊

本是古典何须时尚 2022-04-24 11:22 133阅读 0赞

一、好看的按钮

<!DOCTYPE html>
    <html>
     <head>
      <meta charset="utf-8">
      <title>HTML CSS Exercise CSS3 button</title>
       <style type="text/css">
         button {  
            width: 200px;  
            padding:8px;  
            background-color: #428bca;  
            border-color: #357ebd;  
            color: #fff;  
            -moz-border-radius: 10px;  
            -webkit-border-radius: 10px;  
            border-radius: 10px; /* future proofing */  
            -khtml-border-radius: 10px; /* for old Konqueror browsers */  
            text-align: center;  
            vertical-align: middle;  
            border: 1px solid transparent;  
            font-weight: 900;  
            font-size:125%  
          }  
       </style>
      </head>
     <body>
      <button>
        Subscribe Now
       </button>
     </body>
    </html>

二、html button按钮模拟超链接的三种方法

**方法一：form表单方法**

实现代码：

<form method="get" action="http://www.manongjc.com">
        <button type="submit">Continue</button>
    </form>

**方法二：window.location.href 方法**

代码如下：

<button onclick="window.location.href='http://www.manongjc.com'">Continue</button>

来源：

[http://www.cnblogs.com/yojiaku/p/5736447.html][http_www.cnblogs.com_yojiaku_p_5736447.html]

[http://www.manongjc.com/article/2209.html][http_www.manongjc.com_article_2209.html]

**方法三：在button之外添加超链接**

<a href="http://www.manongjc.com" target="_blank">
    <button>My Button</button>
    </a>

[http_www.cnblogs.com_yojiaku_p_5736447.html]: http://www.cnblogs.com/yojiaku/p/5736447.html
[http_www.manongjc.com_article_2209.html]: http://www.manongjc.com/article/2209.html

发表评论取消回复

表情：

评论列表（有 0 条评论，133人围观）

还没有评论，来说两句吧...

相关阅读

相关 2023年程序员锦囊--应届毕业生如何入行

一、市场行情分析薪酬报告数据分析《2022中国企业招聘薪酬报告》 22年第4季度全行业薪酬数据：全国平均薪资10558 22年第3季度全行业薪酬数据：全国平均薪

客官°小女子只卖身不卖艺/ 2024年03月27日 13:49/ 0 赞/ 36 阅读

相关 ArrayList类案例（面试锦囊）

存储字符串并遍历 package com.demo02; import java.util.ArrayList; /

布满荆棘的人生/ 2024年03月27日 11:11/ 0 赞/ 36 阅读

相关设计好接口的36个锦囊

前言大家好，我是捡田螺的小男孩。作为后端开发，不管是什么语言，`Java`、`Go`还是`C++`，其背后的后端思想都是类似的。后面打算出一个后端思想的技术专栏，主要包

柔情只为你懂/ 2023年09月23日 19:45/ 0 赞/ 19 阅读

相关 JAVA面试锦囊（九）

● 说一下使用索引的一些技巧？ (1) 对于创建的多列索引（复合索引），不是使用的第一部分就不会使用索引。 (2) 对于使用like的查询，查询如果是’%xx’不会使用到索

浅浅的花香味﹌/ 2023年02月21日 11:44/ 0 赞/ 22 阅读

相关 MySQL常见错误锦囊

这里没有主键。更新将只使用与旧的完全匹配 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6L

短命女/ 2022年12月28日 14:05/ 0 赞/ 109 阅读

相关 Flutter代码锦囊---淘口令复制弹窗

对于淘系电商APP或其他类似的APP而言，获取剪贴板上的淘口令，再解析出具体的商品详情，是整个APP的核心业务操作，就像下面图片展示的这样。 ![ebbf2bc4642241

阳光穿透心脏的1/2处/ 2022年12月22日 04:43/ 0 赞/ 88 阅读

相关 Flutter代码锦囊---魔改进度条

Flutter框架提供了Material Design风格的线性进度条（`LinearProgressIndicator`）组件，就是下面的样子，方方正正的，一点也不圆润。

冷不防/ 2022年12月22日 04:42/ 0 赞/ 127 阅读

相关【面试锦囊】位运算介绍与经典例题总结

> 原创公众号：[bigsai][] > 原创不易，如果有收获请不要吝啬你的赞赞！ > 文章已收录在 [全网都在关注的数据结构与算法学习仓库][Link 1] 欢迎st

水深无声/ 2022年11月19日 07:49/ 0 赞/ 135 阅读

相关 css,html,js实用锦囊

一、好看的按钮 <!DOCTYPE html> <html> <head> <meta charset="utf-8">

本是古典何须时尚/ 2022年04月24日 11:22/ 0 赞/ 134 阅读

相关 Java面试锦囊

更多精彩技术分享请浏览本人博客：[https://blog.csdn.net/wohiusdashi][https_blog.csdn.net_wohiusdashi]

小鱼儿/ 2022年03月18日 15:31/ 0 赞/ 203 阅读