css編寫與框架
阿新 • • 發佈：2021-08-06
書寫三層結構的模態框
三層結構使用z-index完成，數字小的在下面，數字大的在上面。 1.最上面一層需要有一個form表單，獲取使用者名稱和密碼 2.第二層就是淺黑色 3.第三層放一張圖片 <!DOCTYPR html> <html> <head> <title>模態框</title> <style> .cover { position:fixed; top:0px; left:0px; right:0px; bottom:0px; background-color:rgba(127,127,127,0.75); z-index:999 } .modal { position:fixed; top:50%; left:50%; z-index:1000; background-color:white; height:200px; width:400px; margin-top:-100px; margin-left:-200px; } </style> </head> <body> <div class='content'> <img src='images\cat.jpg'/> </div> <div class='cover'></div> <div class='modal'> <form action=''> <p>username: <input name='username' type='text'/> </p> <p>password: <input name='password' type='password'/> </p> <input type='submit' value='註冊'/> <input type='button' value='取消' id='d1'/> </form> </div> </body> </html>
書寫簡易部落格園介面
搭建網頁不要急著寫，先利用div構造頁面的大致佈局
eg:回想常用佈局標籤div以及小米官網
在使用div做頁面佈局的時候，由於div個數較多為了能夠很好的區分
我們通常會給不同的div起不同的class屬性(屬性值最好能夠有一定的區分度)
1.先寫html程式碼
2.再寫css程式碼
前端框架
前端的框架有很多，功能也參差不齊 什麼是框架:別人提前幫你寫好了大部分功能的工具 前端框架 頁面搭建相關 Bootstrap elementui layui 功能應用相關 react Vue Bootstrap框架 能夠讓你cv快速搭建頁面 壓縮檔案 bootstrap.css # 未壓縮的 bootstrap.min.css # 壓縮之後的 頁面佈局 <div class='container'> # 左右兩邊是否有留白 <div class='row'> # 一行均分12份 <div class='col-md-6 c1'></div> # 控制佔幾份 響應式佈局 能夠根據瀏覽器視窗和機器型號的不同自動調節比例 使用bootstrap的情況下給標籤調樣式，一般都是修改標籤的calss值即可 bootstarp可以在https://www.bootcdn.cn/上使用，選擇v3版本，既可以線上使用，也可以下載。