文章标题

最新推荐文章于 2024-04-22 16:59:44 发布

原创最新推荐文章于 2024-04-22 16:59:44 发布 · 218 阅读

0 ·

CC 4.0 BY-SA版权

学习笔记及心得专栏收录该内容

20 篇文章

订阅专栏

本文分享了一个模仿百度首页的设计案例，使用HTML和CSS完成页面布局及样式设定，包括天气显示、搜索框等元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

学习心得
已经学了快2个星期了，的却学到了很多东西，了解了不少知识，老师讲的也十分仔细，所以学期来比较简单。但是我的难点就是记忆，现在记住的我要花很多时间去复习才行。

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>模仿百度首页</title>
 <link href="../css/baidu.css" rel="stylesheet" type="text/css">
 </head>
 <body>
 <div class="main">
      <span class="c">
            南通 :
      </span>
      <div class="img">
          <img src="https://ss1.bdstatic.com/kvoZeXSm1A5BphGlnYG/icon/weather/aladdin/png_18/a1.png"> </img>
      </div>
      <span class="c1 c">
        20°C
      </span>
      <span class="c c2">
        优
      </span>
      <span class="c">
        50
      </span>
      <span class="c c3">
        |
      </span>
      <span class="c c4">
        换肤
      </span>
      <span class="c c4">
        消息
      </span>
      <span class="c c5">
        新闻
      </span>
      <span class="c cc " style="width:44.8px;">
        hao123
      </span>
      <span class="c cc">
        地图
      </span>
      <span class="c cc">
        视频
      </span>
      <span class="c cc">
        贴吧
      </span>
      <span class="c cc">
        学术
      </span>
      <span class="c c6 ">
        shindigskuang
      </span>
      <span class="c c6">
        设置
      </span>
      <div class="more"><span class="more-to">更多产品</span>
      </div>

      <div class="d">
      </div>
  </div>
  <div class="boundary">
  </div>
  <div class="logo">
      <img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png"width="270" height="129"></img>
  </div>
  <div class="border">
      <form>
      <input type="text" class="lmport">
      </form>
      </div>
  <div class="icon">
        <form action="html_form_action.php" method="get">
            <input type="submit"  value="百度一下"  class="btn">
        </form>
  </div>
 </body>
</html>

“`
.img{
display:inline-block;
margin-top:5px;
position:fixed;
left:45px;
top:2px;
}
.c{
font-family:sans-serif;
font-size:13px;
color:#ze555;
}
.c1{
margin-left:25px;
}
.c2{
margin-left:5px;
margin-right:3px;
font-weight:700;
color:red;
}
.c3{
margin-left:5px;
margin-right:5px;
}
.c4{
margin-left:5px;
margin-right:5px;
}
.c5{
margin-left:520px;
margin-right:8px;
font-weight:700;
}
.cc{
display:inline-block;
margin-left:8px;
margin-right:8px;
font-weight:700;
width:26px;
height:25px;

}
.c6{
margin-left:8px;
margin-right:8px;
}
.boundary {
margin-top:1px;
height:1.5px;
background-color:rgba(200,200,200,0.5);
}
.logo{
width:270px;
height:129px;
margin:40px auto 10px;
}
.lmport{
display:block;
width:580px;
height:30px;
padding:0px 0px;
margin:0px auto 10px;
border-color:#ffffff;
border-style:solid;
border-width:1px;
font-size:17px;
}

.border{
width:580px;
height:30px;
padding:4px 8px;
margin:0px auto 10px;
border-color:rgba(200,200,200,1);
border-style:solid;
border-width:1px;
}
.icon{
width:108px;
height:40px;
background-color:#1E90FF;
position:fixed;
left:832px;
top:217px;
}
.btn{
color:#ffffff;
display:block;
margin-top:9px;
margin-left:17px;
background-color:#1E90FF;
border-width:0;
font-family:sans-serif;
font-size:16px;
}
btn:hover{
background-color:red;

}
.more{
width:70px;
height:26px;
background-color:#1E90FF;
float:right;
margin-right:5px;
}
.more-to{
color:#ffffff;
font-size:13px;
float:right;
margin-right:8px;
margin-top:2px;
}
“` 这里写图片描述