A Pen by 柠檬&虚伪

Thumbnail
This awesome code was written by Lemon_hypocrisy, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Lemon_hypocrisy ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  柠檬&虚伪</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="main">
<h1>WEB前端第一天学习</h1>
<img src="http://ife.baidu.com/2016/static/img/logo_c9785ff2.png">
<p>内容展示部分,练习一些基本的标签</p>
<button id="btn">click me</button></div>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/Lemon_hypocrisy/a-pen-by-andx67e0andx6aacandampandx865aandx4f2a-yjPBWW */
*{margin:0;padding:0;}
.main{padding:20px;width:80%;margin:0 auto;text-align:center;}
h1{font-size:24px;text-align:center;line-height:40px;}
img{margin:10px 0;}
p{font-size:18px;line-height:24px;color:green;margin:10px 0;}
button{border:1px solid green;padding:5px 10px;background:green;color:#fff;}
button:hover{background:#fff;color:green;border:1px solid green;}

/*Downloaded from https://www.codeseek.co/Lemon_hypocrisy/a-pen-by-andx67e0andx6aacandampandx865aandx4f2a-yjPBWW */
var btn=document.getElementById("btn");
btn.onclick=function(){
  alert("练习WEB前端标签!");
}

Comments