生活随笔
收集整理的這篇文章主要介紹了
开发初探-前端日记 — html、css的使用，模拟制作百度登陆界面
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
目的
根據百度登陸的網頁界面，自己嘗試寫一個類似的界面，用 html 和 css 代碼實現。
想要做出這個界面，首先根據該界面，我用草稿紙繪制了一張區域分布圖：
(請勿吐槽字丑和圖片簡陋！)
大概構思出整個頁面的區域分布后，利用 HTML 的 div、a 、p 、 input 等標簽對整個頁面進行了構圖，后面用貼上博主的代碼：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link rel="stylesheet" type="text/css" href="./css/百度作業.css"></head><body style="padding-top: 5% ;"><div id="div_totle"><div id="div_body"><div id="div_head"><div id="div_img"><img src="./imgs/百度標志.png" width="136px" height="45" style="margin-top: 5%;"></div><div id="div_text"><p style="font-family: '微軟雅黑';margin-top: 12%;font-weight: bold;"> ·
用戶名密碼登陸
</p></div></div><div id="div_input"><form action="https://tijiao.wangzhan.com" method="post"><p><input class="input-class" type="text" name="username" placeholder="手機/郵箱/用戶名"/></p><p><input class="input-class" type="password" name="username" placeholder="密碼" /></p><p><input type="checkbox" name="save_or_not" value="h1" style="font-size: 1.625rem;"/> 保存密碼
</p><p><input type="submit" name="tijiao" style="width: 100%;height: 35px;align-items: center;color: white;background-color: dodgerblue;border: 0;"value="登陸"/>
<p><a href="https://zhaohui.mima.com" style="color: dodgerblue;text-decoration: none;"> 忘記密碼？
</a></p></p></form></div></div><div id="div_end"><div style="width: 20%;float: left;margin-top: 6.5%;margin-left: 5%;"><a href="" style="text-decoration: none;"> 掃碼登陸
</a> </div><div style="width: 30%;float: left;margin-top: 5.5%;"><a href="" ><img src="./imgs/豎線.png" height="12px" style="margin: 8%;"></a><a href=""><img src="./imgs/qq.png" height="14px" style="margin: 8% auto;"></a><a href=""><img src="./imgs/新浪微博.png" height="17px" style="margin: 8% auto;"></a><a href=""><img src="./imgs/微信.png" height="17px" style="margin: 8% auto;"></a></div><div style="width: 20%;float: right;margin-top: 6.5%;margin-right: 4%;"><a href="" style="text-decoration: none;"> 立即注冊
</a></div></div></div></body>
</html>
并將設置頁面的 css 代碼貼在下方
html {background-color: #808080;
}#div_totle {background-color: white;width: 360px;height: 400px;margin: auto;margin-top: 5%;align-items: center;padding-top: 10px;
}#div_body {/* background-color: blue; */width: 340px;height: 330px;margin: auto;
}#div_head {width: 100%;height: 70px;margin: auto;
}#div_img {/* background-color: #808080; */width: 40%;height: 70px;margin: auto;float: left;
}#div_text {/* background-color: #87CEFA; */width: 60%;height: 70px;margin: auto;float: left;
}#div_end {background-color: rgba(0, 204, 255, 0.2);width: 100%;height: 70px;margin: auto;
}.input-class {border: 1px lightslategrey solid;color: #808080;border-radius: 5px;width: 98.5%;height: 30px;
}
這就是整個頁面的所有代碼內容了，然后得到效果圖：
就業不能說一點都不像叭，就差也差不多(這次不是處女座)
給大家推薦一個前端學習網站
HTML學習網站.
CSS 學習網站.
喜歡別忘了點個關注，后續更新更多學習開發的過程！
總結
以上是生活随笔為你收集整理的开发初探-前端日记 — html、css的使用，模拟制作百度登陆界面的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
