留言板制作
1.在電腦桌面打開DW軟件
2.點擊DW然后創建一個新的布局
3.敲出這些代碼即可
4.在打開html就可以看到效果了
<!DOCTYPE html>
<html lang="en">
<head>
??? <meta charset="UTF-8">
??? <meta http-equiv="X-UA-Compatible" content="IE=edge">
??? <meta name="viewport" content="width=device-width, initial-scale=1.0">
??? <title>留言板</title>
??? <style>
??????? *{
??????????? padding: 0px;
??????????? margin: 0px;
??????? }
??????? .wrap{
??????????? width: 700px;
??????????? height: 500px;
????? ??????background: url(bg2.png);
??????????? margin: 50px auto;
??????????? text-align: center;? /*文字或內容水平居中*/
??????????? overflow: auto;
??????? }
??????? #text{
??????????? width: 300px;
??????????? height: 100px;
??????????? margin-top: 50px;
????????? ??border: 2px solid #666;
??????????? border-radius: 5px;
??????????? resize: none;?
??????????? /* 指定一個元素是否由用戶調整大小*/
??????????? padding: 3%;
??????????? box-sizing: border-box;
??????????? /* 規定容器元素的最終尺寸計算方式 計算padding 和 border??? margin不受影響 */
??????? }
??????? #btn{
??????????? display: block;
??????????? width: 80px;
??????????? height: 30px;
??????????? background-color: skyblue;
??????????? border-radius: 15px;
??????????? color: #fff;
??????????? margin-top: 5px;
??????????? margin-left: 420px;
??????? }
??????? #list{
??????????? width: 300px;
??????????? margin: 15px 0 0 200px;
??????? }
??????? #list li{
??????????? list-style: none;
??????????? width: 300px;
??????????? padding:5px 15px;
??????????? background-color: rgba(3, 141, 141,.5);
??????????? border-radius: 5px;
??????????? color:#fff;
??????????? font-size: 12px;
??????????? text-align: left;
??????????? margin-bottom: 10px;
??????????? box-sizing: border-box;
?? ?????????word-wrap:break-word;? /* 自動換行 */
??????? }
??????? #list li:nth-of-type(even){
??????????? background-color:rgba(226, 62, 33,.5);
??????? }
??? </style>
</head>
<body>
??? <div class="wrap">
??????? <textarea id="text"></textarea>
??????? <button id="btn">留言</button>
??????? <ul id="list">
??????? </ul>
??? </div>
??? <script>
??????? var text = document.getElementById("text");
??????? var btn = document.getElementById("btn");
??????? var list = document.getElementById("list");
??????? btn.onclick = function(){
??????????? var txt = text.value;
??????????? var num = list.getElementsByTagName("li").length+1;?? //獲取到li 的長度并賦值給num；
??????????? if(txt == ""){
??????????????? alert("留言不能為空！")
??? ????????????return;
??????????? }
??????????? list.innerHTML = '<li>'+ num +'樓：' + txt + '</li>' + list.innerHTML;
??????? }
??? </script>
???
</body>
</html>
總結
- 上一篇： 通过CAN总线控制VESC驱动直流无刷电
- 下一篇： 定语从句和同位语重句的区别