<!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>