初学党关于html作业之制作模仿谷歌页面

什么时候可以有一只脚踏入数据结构

已于 2023-11-27 21:59:58 修改

阅读量531

点赞数 7

文章标签： html 前端 javascript

于 2023-11-27 21:52:18 首次发布

本文链接：https://blog.csdn.net/weixin_55397866/article/details/134631242

版权

logo部分

我选择了直接插logo图片，这个比较简单方便，图片上网找一张就行。

使用<br>换行，让图片和搜索框之间有一定间隔。

搜索框部分

html：建立一个div父级元素searchbar，来装饰搜索框，里面嵌套1个用input标签建立的文本框search，设定值为“在Google上搜索，或者输入一个网址”这段文字，然后使用JS条件语句中的if语句，以及html中的onfocus 属性与 onblur 属性，实现文字的隐藏和恢复。onfocus 属性的作用是当输入字段获得焦点时触发函数，在这里是让灰色文字在点击时隐藏；onblur 属性的作用在元素失去焦点时触发，在这里是在取消点击状态时，文字恢复。

运行结果

代码

html部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="h.css">
    <title>Google</title>
</head>
<body>
    <div class="google">
        <img src="../images/logo.png" alt="">
        <br><br>
 </div>
    <div class="searchbar">
        <img src="../images/搜索.png" class="mg" alt="">
            <input type="text" name="search" id="" value="在Google上搜索，或者输入一个网址" 
            onfocus="if(value=='在Google上搜索，或者输入一个网址') value='' "
            onblur="if(!value)value='在Google上搜索，或者输入一个网址'">
            <img src="../images/话筒.png" class="mcp" alt="">
    </div>
    <div class="tubiao">
            <a href="https://www.baidu.com/"><img src="../images/baidu.png" width="70px" alt=""></a>
            <a href="https://music.163.com/"><img src="../images/wy.png" width="70px" alt=""></a>
            <a href="https://www.bilibili.com/"><img src="../images/bzhan.png" width="70px"alt=""></a>
</div>

</body>
</html>

css部分


*{
    margin: 0;
    padding: 0;
}/*一次性重置所有HTML网页元素的浏览器样式*/
.google{
    text-align: center;
    margin-top: 11%;
}
.searchbar{ 
  border-width: 1px;
  border-style: solid;
  border-color: rgb(192, 187, 187);
    border-radius: 2em;/*左右边框为半圆型*/
   margin: 0 auto;/*让整个搜索框居中对齐*/
   width: 555px; 
   height: 40px;
  
}
input{ 
    color: rgb(205, 199, 199);
    font-size: 16px;
    border: none;/*取消文本框内外边距*/
    outline: none;/*取消边框和外边框*/
  height: 38px;
  width: 440px;
}

.mcp{
    height: 35px;
    
}
.mg{
    height: 25px;
    margin-left: 15px;
}
.search,.mcp,.mg{
    vertical-align: middle;
}/*让两个图标与搜索框的中线对齐*/
.tubiao{
    text-align: center;
    margin-top: 2%;
 margin-right:4%;
}/*调整所有图标的相对位置*/
}
a{ 
    margin-left: 70px;/*控制图标与图标的间隔*/
    text-align: center;
}

个人实力有限，简单分享一下自己的作业，不喜勿喷，参考学习资料来自B站、CSDN。

什么时候可以有一只脚踏入数据结构

关注

7
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
初学党关于html作业之制作模仿谷歌页面

html：建立一个div父级元素searchbar，来装饰搜索框，里面嵌套1个用input标签建立的文本框search，设定值为“在Google上搜索，或者输入一个网址”这段文字，然后使用JS条件语句中的if语句，以及html中的onfocus 属性与 onblur 属性，实现文字的隐藏和恢复。onfocus 属性的作用是当输入字段获得焦点时触发函数，在这里是让灰色文字在点击时隐藏；onblur 属性的作用在元素失去焦点时触发，在这里是在取消点击状态时，文字恢复。
复制链接

扫一扫