时间：2024-01-13 23:54:01 | 来源：网站运营
时间：2024-01-13 23:54:01 来源：网站运营
html里怎么做这种框框里还有框框?：这种在前端开发中属于页面布局部分的知识点，需要学习web前端的基础部分的知识点，也就是html+css部分的知识。特别是css部分的盒模型一定要重点掌握。这这种效果主要就是使用盒模型的布局思维，就是各个盒子之间的关系。掌握了html+css部分的知识点，做起来相当的简单。
在线咨询
<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">搜索关键字</label> <input type="text" placeholder="请输入关键字" id="in"> <button>搜索</button> </div> </div> <div class="header_nav"> <ul> <li><a href="#">首页</a> </li> <li><a href="#">数码</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>单价：100.00 折扣价：68.00</p> <button>加入购物车</button> </div> <div class="shop_name"> <div></div> <h3>XXX(商品名)</h3> <p>单价：100.00 折扣价：68.00</p> <button>加入购物车</button> </div> <div class="shop_name"> <div></div> <h3>XXX(商品名)</h3> <p>单价：100.00 折扣价：68.00</p> <button>加入购物车</button> </div> <div class="shop_name"> <div></div> <h3>XXX(商品名)</h3> <p>单价：100.00 折扣价：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、效果展示关键词：
