静态页面-Google首页

最新推荐文章于 2024-09-07 13:57:30 发布

xiongyuqing

最新推荐文章于 2024-09-07 13:57:30 发布

阅读量1k

点赞数 2

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/qq_45364953/article/details/114950111

版权

前端专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何使用HTML和CSS实现网页的基本布局，包括使图片居中、将小话筒图标放入搜索框等技巧。通过示例代码展示了如何利用div、input、img等元素配合样式属性如text-align、vertical-align来达到所需的布局效果。

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

参考代码github

如何使得图片居中？
将img放入div代码块中，img被当作div的文本，使用text-align: center 居中
margin是外边框，使用时有上下左右参数。引申出margin-left等属性
垂直居中：vertical-align
如何将小话筒放入搜索框中？
将Input和Img放入同一个div块中进行布局，它们将会横着顺序排放

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Google</title>   <!--标签页名称-->
</head>
<style>
    body {
        font-family: Arial, Helvetica, sans-serif;  /*字体设置*/
        font-size: 13px;    /*字体大小*/
    }
    #search{
        border: none;   /*去掉边距*/
        width: 480px;   
        height: 40px;
        outline: none;  /*去掉边框*/
        margin-left: 10px;
        color: rgb(112,112,112);
    }
    #logo{
        text-align: center;
    }
    .searchbar{
        border: 1px solid #ccc;  /*线宽，实现，颜色*/
        border-radius: 16px;       /*圆角边框*/
        width: 550px;
        height: 42px;
        margin: 0 auto; /*上下边距为0，左右边距auto即平分剩余空间*/
        box-shadow: 0px 0px 5px rgb(212, 212, 212); 
        /*添加阴影。水平阴影的位置，垂直阴影的位置，模糊距离，阴影颜色*/
    }
    #search, .mcp{
        vertical-align: middle; /*垂直居中*/
    }
    header{
        text-align:right;   /*居中显示*/
    }
    p{
        font-weight: bold;
        line-height: 35px;
        margin: 0 10px 0 10px;  /*上下左右边距*/
        font-size: medium;      /*字体粗细*/

    }
</style>

<body>
    <header>
        <p>Gmail &nbsp Images</p>
    </header>
    <div id="logo"><img src="logo.png"/></div>      
    <div class="searchbar">
        <input type="text" id="search" value="search">
        <img height="30px" width="30px" src="micro.png" class="mcp"/>
    </div>
        
</body>
</html>

效果
在这里插入图片描述

github代码-html

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Google</title>
    <link rel="stylesheet" type="text/css" href="style.css" media="all">
    <link rel="shortcut icon" href="images/googlelogo2.png" type="image/x-icon">
</head>
<body>
    <header>
        <p>Gmail</p>
        <p>Images</p>
        <img src=images/menu.png class="menu">
        <img src=images/name.png class="name">
    </header>


    <main>
        <div id="logo">
        <img src=images/googlelogo1.png class="logo">
    </div>
    <div class="searchbar">
        <img src=images/search.png class="mg">
        <input type="text" id="search" value="Search Google or type a URL" 
        onfocus="if(value=='Search Google or type a URL')value=''" onblur="if(!value)value='Search Google or type a URL'" name="keyword" > 
        <img src=images/microphone.png class="mcp">
    </div>  
     <!-- 用if语句设置文本在点击时隐藏 -->

        <div id="othernav">
        <img src=images/youtube.png class="othernav">
        <img src=images/webstore.png class="othernav">
        <img src=images/plus.png class="othernav">
        </div>

    </main>

</body>

github代码-css

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}
/*用弹性盒布局实现块元素行内对齐*/
header {
     display: flex;
     align-items: center;           /*子元素居中*/
     justify-content: flex-end;       /*子元素靠右*/
    }

p {
    line-height: 35px;
    margin: 0 10px 0 10px;
}

img.menu {
    width: 20px;
    margin: 10px;
}
img.name {
    width: 35px;
    margin: 10px;
}
/*header end*/


#logo{
    text-align: center;
}

img.logo {
    width: 550px;    
}
#othernav {
    text-align: center;
}
img.othernav {
    margin: 60px 25px 0px 25px;
    width: 50px;
}


#search { 
    width: 450px;
    height: 40px;
    border:none;    /*取消默认的边框以设置自定义边框*/
    outline:none;   /*取消浏览器默认的蓝光边框以设置自定义的输入框*/
    font-size: 16px;        
    color: rgb(112, 112, 112);
}
.searchbar {        /*目的是设置自定义边框，比如圆角与阴影*/
    border: rgb(218, 218, 218) solid 1px;
    border-radius: 2em;
    width: 552px;
    height: 42px;
    box-shadow: 0px 0px 5px rgb(212, 212, 212);
    margin: 0 auto;
}

.mcp {
    height: 35px;
}

.mg {
    height: 25px;
    margin-left: 15px;
}
#search, .mcp, .mg {
    vertical-align: middle;
}