WEB前端第一天

In this example below you will see how to do a WEB前端第一天 with some HTML / CSS and Javascript

基本练习html的标签:h1、 img、 p、 button、

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

<head>
  <meta charset="UTF-8">
  <title>WEB前端第一天</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/webandx524dandx7aefandx7b2candx4e00andx5929-ZoaEaQ */
*{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/webandx524dandx7aefandx7b2candx4e00andx5929-ZoaEaQ */
var btn=document.getElementById("btn");
btn.onclick=function(){
  alert("练习WEB前端标签!");
}

Comments