css布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body { margin: 0; } .one { width: 100%; height: 60px; background-color: rgba(0, 0, 0, 0.5); } .left a { color: rgba(255, 255, 255, 0.7); text-decoration: none; line-height: 60px; margin: 20px; } .left a:hover { color: rgba(255, 255, 255, 1); } .centent { width: 100%; height: 100vh; background-color:rgb(255, 255, 255); } .three img { width: 270px; height: 129px; } .three { text-align: center; margin-bottom: 60px; } .inp { text-align: center; } .four { width: 550px; height: 44px; border: 2px solid rgb(149, 149, 181); outline: 0; border-radius: 10px 0 0 10px; text-indent: 20px; border-right: 0; padding: 0; vertical-align: bottom; } .four:hover { border-color: blue; } .fix { width: 108px; height: 48px; font-size: 17px; border: 2px solid rgb(78, 110, 242); border-left: 0; line-height: 48px; text-align: center; padding: 0; background-color: rgb(78, 110, 242); color: #fff; border-radius: 0 10px 10px 0; } .fix:hover{ border: 2px solid rgb(34, 73, 230); background-color: rgb(34, 73, 230); } </style> </head> <body> <div class="centent"> <div class="one"> <div class="left"> <a href="##">新闻</a> <a href="##">hao123</a> <a href="##">地图</a> <a href="##">贴吧</a> <a href="##">视频</a> <a href="##">图片</a> <a href="##">网盘</a> <a href="##">更多</a> </div> </div> <div class="three"> <a href="https://www.baidu.com/s?wd=%E7%99%BE%E5%BA%A6%E7%83%AD%E6%90%9C&sa=ire_dl_gh_logo_texing&rsv_dl=igh_logo_pc" title="百度一下你就知道"><img src="./img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="百度"></a> </div> <div class="inp"> <form action="https://www.baidu.com/s" method="get"> <input type="text" name="wd" class="four"><input type="submit" value="百度一下" class="fix"> </form> </div> </div> </body> </html>
css控制弧度
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .fix{ width: 800px; height: 120px; background-color: rgb(136, 184, 255); margin: 0 auto; display:table-cell; vertical-align: middle; box-sizing: border-box; padding-left: 25px; } .one{ width: 750px; height: 80px; background-color: white; border-radius: 30px; } .one span{ line-height: 80px; margin:0 30px; display:inline-block; } span:nth-child(1){ height: 60px; width: 150px; background-color: rgb(155, 205, 48); border-radius: 30px; line-height: 60px; text-align: center; } </style> </head> <body> <div class="fix"> <div class="one"> <span>网址首页</span> <span>关于我们</span> <span>公司简介</span> <span>成功案例</span> <span>联系我们</span> </div> </div> </body> </html>
css的小米布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .centen{ width: 992px; height: 315px; background-color:rgb(245, 245, 245) ; margin: 0 auto; display: flex; } .centen div{ margin-left: 10px; margin-top: 6px; } .one{ background-color: #fff; width: 234px; height: 300px; text-align: center; } .two{ background-color: #fff; width: 234px; height: 300px; text-align: center; } .three{ background-color: #fff; width: 234px; height: 300px; text-align: center; } .four{ background-color: #fff; width: 234px; height: 300px; text-align: center; } .test,.cc{ font-size: 12px; color: #b0b0b0; } .title{ color: #ff6700; } .cc{ text-decoration: line-through; } span{ color: #333; } .centen div a{ text-decoration: none; } </style> </head> <body> <div class="centen"> <div class="one"> <a href="https://www.mi.com/shop/buy/detail?product_id=19184"><img src="./img/one.webp" alt=""> <span>Redmi Note 13 Pro</span> <p class="test">小金刚品质</p> <p class="title">1399元起 <span class="cc"> 1499元</span></p> </a> </div> <div class="two"> <a href="https://www.mi.com/shop/buy/detail?product_id=19185"> <img src="./img/two.webp" alt=""> <span> Redmi Note 13 Pro+ </span> <p class="test"> 天玑 7200-Ultra 处理器</p> <p class="title">1899元起 <span class="cc"> 1999元</span></p> </a> </div> <div class="three"> <a href="https://www.mi.com/shop/buy/detail?product_id=19182"> <img src="./img/three.webp" alt=""> <span> Redmi Note 13 5G </span> <p class="test"> 1 亿像素 更快更清晰</p> <p class="title">1099元起 <span class="cc"> 1199元</span></p> </a> </div> <div class="four"> <a href="https://www.mi.com/shop/buy/detail?product_id=19019"> <img src="./img/four.webp" alt=""> <span> Xiaomi MIX Fold 3</span> <p class="test">轻薄折叠屏丨徕卡光学丨全焦段四摄</p> <p class="title">8999元起 </p> </a> </div> </div> </body> </html>
本文来自博客园,作者:刘先生的爱心博客,转载请注明原文链接:https://www.cnblogs.com/liu521125/p/17755582.html
一点一滴记录着学习html5 css3 和js 的时光