百度一下学习笔记

最新推荐文章于 2025-12-05 07:37:55 发布

原创最新推荐文章于 2025-12-05 07:37:55 发布 · 270 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html

学习笔记专栏收录该内容

5 篇文章

订阅专栏

这篇博客分享了HTML中a标记的样式设置，通过`display: inline-block;`将其转换为行内块元素，允许调整大小和颜色。还探讨了`display: block;`将元素变为块元素，以及`position: relative;`和`absolute;`在定位盒子方面的应用，包括坐标调整。

知识点
a标记有自己的颜色设置成;`display: inline-block;行内块元素可以更改大小颜色
display: block;变成块元素
position: relative;
position: absolute;定位盒子可以更改位置坐标列如left button

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"> 
    <title>百度一下 你就知道的</title>
    <link rel="stylesheet" href="E:\wy\做三遍\sanbiancss.css">
</head>
<body>
    <!-- 导航栏开始 -->
    <div class="baidunavbuju">
       <nav class="navleft">
        <span>达州</span>
          
           <span>15°C</span>
           <span>81</span>
           <a href="javascript:void (0)">换肤</a>
           <a href="javascript:void (0)">消息</a>
           <a href="javascript:void (0)">显示卡片</a>

       </nav> 
       <nav class="navright">
           
        <a href="javascript:void (0)" class="red" style="color: red;">抗击肺炎</a>
        <a href="javascript:void (0)" class="jiacu">新闻</a>
        <a href="javascript:void (0)" class="jiacu" >hao123</a>
        <a href="javascript:void (0)" class="jiacu">地图</a>
        <a href="javascript:void (0)" class="jiacu">视频</a>
        <a href="javascript:void (0)" class="jiacu">贴吧</a>
        <a href="javascript:void (0)" class="jiacu">学术</a>
        <a href="javascript:void (0)">热情的qwe184</a>
        <a href="javascript:void (0)">设置</a>
       </nav>

       
       <div class="xialacaidan">
           <p>更多产品</p>
           <div class="caidancontent">
       
            <a href="javascript:void (0)" class="bdyx">百度营销</a>
        
       
        <a href="javascript:void (0)" class="yy" >音乐</a>
        <a href="javascript:void (0)" class="tp">图片</a>
        <a href="javascript:void (0)" class="zd">知道</a>
        <a href="javascript:void (0)" class="wk">文库</a>
        <a href="javascript:void (0)" class="fyb">风云榜</a>
    </div>
       </div>

    </div>
    <!-- 导航栏结束 -->
    <!-- 中间部分开始 lgo 搜索栏 -->
    <div class="logbox"></div>
    <!-- log开始 -->
        <div class="log"></div>
        <!-- log结束 -->
        <!-- 搜索栏 按钮 相机 -->
        <div class="searchbox">
            <input class="searchinput" type="text">
            <input class="searchbutton" type="button" value="百度一下">
        </div>
        <!-- 搜索栏文本框结束 -->
        <!-- 底部链接部分开始 -->
        <div class="ljbox">
            <p>
                <a >设为首页</a>
                <a >关于百度</a>
                <a >About baidu</a>
                <a >百度推广</a>
                <a >使用前必读</a>
                <a >意见反馈</a>
                <a >帮助中心</a>
                
            </p>
        </div>
        <!-- 铺垫代码结束 -->
    

</body>
</html>

*{
    margin: 0 auto;
    padding: 0;
    
}
.baidunavbuju{
    width: 100%;
    height: 24px;
    margin-top:19px ;
}
.navleft{
    height: 24px;
    float: left;
    padding: 0px 9px;
    font-size: 13px;
    line-height: 0px;
}
    

.navleft a{
    display: inline-block;
    color: black;
    padding: 0px 9px;
}
.navright{
    height: 24px;
    float: right;
    padding: 0px 9px;
    font-size: 13px;
    line-height: 0px;
}
.navright a{
    display: inline-block;
    color: black
    
    ;
    padding: 0px 9px;
}
.jiacu{
    font-weight: bold;
}
.red{
    font-weight: bold;
  
}
.xialacaidan{
   
    position: relative;
    display:inline-block;
    background-color:#398bfb ;
    color: white! important;
    padding: 1px;
    width: 70px;
    height: 24px;
    
    
}
.yy{
    background-image: url(https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/topnav/yingxiao_72-b585c1ec7d.png);
}

.caidancontent a{
    display: block;
    color: black
    ;
}
.caidancontent{

    display: none;
    position: absolute;
background-color: #ffffff;
min-width: 60px;
box-shadow: 0px 8px 16px 0px rgb(0,0, 0,0.2);
padding: 10px 10px;
z-index: 1;

font-size: 14px;

}

.xialacaidan:hover .caidancontent{
    display: block;
}
.logbox{
    width: 100%;
    height: 100px;
    margin-top: 50px;
}
.log{
    width: 270px;
    height: 129px;
    background-image: url(tme.png);
    background-size: 270px 129px;
}
.searchbox{
    width: 641px;
    height: 34px;
    margin-top: 20px;

}
.searchinput{
    width: 539px;
    height: 34px;
    border: 1px solid darkgray;
    float: left;
}
.searchbutton{
    width: 100px;
    height: 37px;
    font-size: 15px;
    background-color: #3385ff;
    color: white;
    border: 0px;
    float: left;
    
}
.ljbox{
    width: 100%;
    height: 50px;
    position:absolute;
    bottom: 0;
    left: -100px;
    
    
}
.ljbox p{
    width: 640px;
    height:50px;
    text-align: center;
    font-size: 13px;
    color: #999;
    margin-top: 30px;
   position: absolute;
  

    
   
}