HTML常用标签笔记（一）

Posted on by

对于我来说，CSS和html都是弱项，基本不会写，只会借用。今天收藏几段实用的代码，当然都是比较基础的代码。

1.img标签控制图片大小输出

2.input标签中type=button属性的使用：包括点击跳转网页，字体颜色变化。（亚马逊跳转aff链接能用到）

3.通过CSS实现链接按钮，跳转网页。（亚马逊跳转aff链接能用到，下载站按钮）

4.input标签控制鼠标悬停，改变颜色。

Html代码如下：


<html>

<link href="style.css" rel="stylesheet"  type="text/css">

<img src="https://www.baidu.com/img/dong_ca53b94625c757745bcb2c16461eb105.gif" 
width="75" height="50">

<input type="button" style="border-radius: 0.5rem; background-color: #eb4923; 
color:#ffffff; padding: 0.36rem 0.79rem; width: auto; font-family: "Helvetica Neue",
Helvetica,Arial,sans-serif; cursor: pointer;" 
onclick="window.open('http://www.baidu.com');" value="Check Price" />

<div class="demo"><a href="http://www.baidu.com" target="_blank" 
rel="nofollow">Test BaiDu</a></div>

<div class="download"><a href="http://www.baidu.com">Download BaiDu</a></div>

<input type="button" class="input_out" onmousemove="this.className='input_move'" 
onmouseout="this.className='input_out'" value="提交" />

</html>

style.css中代码如下：


.demo a:link, .demo a:visited, .download a:link, .download a:visited{

    margin-bottom:20px;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5));
	border-radius:5px;
	border:1px solid #337bc4;
	display:inline-block;
	color:#ffffff;
	font-family:Arial;
	font-size:20px;
	font-weight:bold;
	padding:15px 44px;
	text-decoration:none !important;
}

.input_out{width:60px;height:30px;border:1px solid #CCC;  
background-color:#FFF;}

.input_move{width:60px;height:30px;border:1px solid #CCC; 
background-color:#79bbff;}