時(shí)間：2024-01-13 23:54:01 | 來源：網(wǎng)站運(yùn)營
時(shí)間：2024-01-13 23:54:01 來源：網(wǎng)站運(yùn)營
html里怎么做這種框框里還有框框?：這種在前端開發(fā)中屬于頁面布局部分的知識點(diǎn)，需要學(xué)習(xí)web前端的基礎(chǔ)部分的知識點(diǎn)，也就是html+css部分的知識。特別是css部分的盒模型一定要重點(diǎn)掌握。這這種效果主要就是使用盒模型的布局思維，就是各個(gè)盒子之間的關(guān)系。掌握了html+css部分的知識點(diǎn)，做起來相當(dāng)?shù)暮唵巍?br>
在線咨詢
<body> <div class="box"> <div class="header_wel"> <ul> <li>歡迎</li> <li>XXX</li> <li>登錄</li> <li>注冊</li> <li>我的購物車</li> </ul> </div> <div class="header_input"> <div class="logo">LOGO</div> <div class="input"> <label for="in">搜索關(guān)鍵字</label> <input type="text" placeholder="請輸入關(guān)鍵字" id="in"> <button>搜索</button> </div> </div> <div class="header_nav"> <ul> <li><a href="#">首頁</a> </li> <li><a href="#">數(shù)碼</a></li> <li><a href="#">女裝</a></li> <li><a href="#">男裝</a></li> </ul> </div> <div class="bd"> <div class="shop_name"> <div></div> <h3>XXX(商品名)</h3> <p>單價(jià)：100.00 折扣價(jià)：68.00</p> <button>加入購物車</button> </div> <div class="shop_name"> <div></div> <h3>XXX(商品名)</h3> <p>單價(jià)：100.00 折扣價(jià)：68.00</p> <button>加入購物車</button> </div> <div class="shop_name"> <div></div> <h3>XXX(商品名)</h3> <p>單價(jià)：100.00 折扣價(jià)：68.00</p> <button>加入購物車</button> </div> <div class="shop_name"> <div></div> <h3>XXX(商品名)</h3> <p>單價(jià)：100.00 折扣價(jià)：68.00</p> <button>加入購物車</button> </div> </div> </div></body>2、css代碼 <style> * { margin: 0px; padding: 0px; } li { list-style: none; } .box { width: 900px; height: 600px; border: solid 2px black; margin: 5px auto; } .header_wel, .header_input, .header_nav { width: 100%; height: 50px; border-bottom: 2px solid black; } .header_wel ul { margin-left: 100px; padding-top: 15px; height: 30px; } .header_wel ul li { float: left; height: 20px; font-weight: 900; margin-left: 5px; font-size: 20px; line-height: 20px; } .header_wel ul li:nth-child(3) { padding-left: 5px; border-left: solid 2px black; } .header_wel ul li:last-child { margin-left: 30px; } .header_input .logo { float: left; width: 50px; height: 48px; border: solid 2px black; box-sizing: border-box; margin: 1px 50px 0px; line-height: 48px; font-weight: 900; } .header_input .input { float: left; height: 50px; margin-left: 100px; } .header_input .input label { font-weight: 900; } .header_input .input input { width: 200px; height: 30px; margin-top: 8px; border-radius: 5px; outline: none; border: solid 2px black; } .header_input .input button { height: 30px; width: 80px; border-radius: 10px; border: none; border: solid 2px black; background-color: white; font-weight: 900; } .header_nav ul { margin-left: 110px; } .header_nav ul li { float: left; height: 50px; line-height: 50px; margin-left: 20px; } .header_nav ul li a { text-decoration: none; font-size: 16px; font-weight: 700; color: black; } .bd .shop_name { float: left; width: 200px; height: 300px; border: solid 2px black; box-sizing: border-box; margin-top: 40px; margin-left: 20px; } .shop_name div { width: 150px; height: 180px; border: solid 2px black; margin-top: 10px; margin-left: 23px; box-sizing: border-box; } .shop_name h3 { text-align: center; margin: 5px 0; } .shop_name p { text-align: center; font-size: 12px; margin: 5px 0; } .shop_name button { width: 100px; height: 30px; border-radius: 10px; border: none; border: solid 2px black; background-color: white; text-align: center; margin: 5px 50px; } </style>3、效果展示關(guān)鍵詞：
客戶&案例
營銷資訊
關(guān)于我們
微信公眾號
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
