仿百度页面制作html+css+js动态页面

最新推荐文章于 2023-04-15 23:40:51 发布
最新推荐文章于 2023-04-15 23:40:51 发布
阅读量1k 收藏 8
点赞数 2
分类专栏： 前端小东西 文章标签： 百度 css html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lutrra/article/details/120343626
版权

仿百度页面制作html+css+js动态页面

<!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">
    <title>baidu</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    ul{
        margin: 0;
        padding: 0;
    }
    a{
        text-decoration: none;
        color: black;
    }
    a:hover{
        color: #2932E1;
    }
    li{
        list-style: none;
    }
    .clearfix::after{
       content: "";
       display: block;
       clear: both;
       width: 0;
       height: 0;
       line-height: 0;
       visibility: hidden;

   }
    .head{
        width: 100%;
        height: 80px;
        font-size: 15px;
    }
    .head_left{
        width: 50%;
        height: 80px;
        float: left;
    }
    .head_right{
        width: 50%;
        height: 80px;
        float: right;
    }
    .head_left ul{
        line-height: 80px;
    }
    .head_left ul li{
        margin-left: 20px;
        float: left;
    }
    .menu{
		display: inline-block;
		height: 45px;
	} 
    .menu ul{
		position: absolute;
		padding: 10px;
		margin: 0;
		width: 300px;
		text-align: center;
		background-color: white;
		margin-top: 50px;
		margin-left: -265px;
		display: none;
		box-shadow: 2px 2px 2px 2px gray;
		border-radius: 5px;
	}
	.menu:hover ul{
		display: block;
	}
	.menu ul li{
        float: left;
		width: 15%;
		height: 50px;
	}
	.menu ul li:last-child{
		width: 88%;	
	}
	
    .head_right ul li{
        margin-right: 20px;
        line-height: 80px;
        float: right;
    }
    .button_set{
        padding: 5px 10px;
        box-sizing: border-box;
        border-radius: 20%;
        background-color: #0000FF ;
        color: #fff;
    }
    .img_baidu{
       margin: 50px;
       text-align: center;
    }
    .decoration_img{
        width: 270px;
        height: 129px
    }
    .border_search{
        width: 654px;
        height: 35px;
        margin: auto;
        margin-top: 30px;
    }
    .border_input{
        width: 80%;
        height: 44px;
        float: left;
        padding: 20px;
        font-size: 20px;
        border: 2px solid grey;
        border-right: none;
        border-top-left-radius: 15px;
        border-bottom-left-radius: 15px;
        box-shadow: none;
        box-sizing: border-box;
        outline: none;
    }
    .border_input:focus-visible{
        border: 2px solid #2932E1;
        border-right: none;
    }
    .border_button{
        width: 20%;
        height: 44px;
        float: left;
        box-sizing: border-box;
        border:2px solid #2932E1;
        background-color: #2932E1 ;
        color: #fff;
        font-size: 15px;
        border-top-right-radius: 15px;
        border-bottom-right-radius: 15px;
    }
    .middle_context{
        width: 654px;
        height: 30px;
        margin: auto;
        margin-top: 30px;
    }
    .middle_hot_line{
        width: 100%;
        height: 20px;
    }
    .middle_hot_line_left{
        float: left;
    }
    .middle_hot_line_right{
        float: right;
    }
    .middle_hot_context_side{
        width: 654px;
        height: 100px;
        margin: 0 auto;
    }
    #middle_context_line li{
        width: 50%;
        display: inline-block;
    }
    #middle_context_line li:nth-child(-n+4){
        float: left;
        margin-top: 20px;
    }
    #middle_context_line li:nth-child(n+4){
        float: right;
        margin-top: 20px;
    }
    footer{
        width: 1200px;
        font-size: 14px;
        height: 30px;
        position: fixed;
        bottom: 10%;
        left: 0px;
        right: 0px;
        margin-left: auto;
        margin-right: auto;
    }
    footer ul li{
        float: left;
        color: gray;
        opacity: 0.5;
        margin-left: 10px;
    }
</style>
<body>
    <!-- 头部导航栏 -->
    <div class="head">
        <!--头部左边列表-->
        <div class="head_left">
            <ul>
                <li><a href="#">新闻</a></li>
                <li><a href="#">hao123</a></li>
                <li><a href="#">地图</a></li>
                <li><a href="#">直播</a></li>
                <li><a href="#">视频</a></li>
                <li><a href="#">贴吧</a></li>
                <li><a href="#">学术</a></li>
                <div class="menu">
                    <li><a href="#">更多</a></li>
                    <ul>
                        <li><a href="#">网盘</a></li>
                        <li><a href="#">知道</a></li>
                        <li><a href="#">百科</a></li>
                        <li><a href="#">图片</a></li>
                        <li><a href="#">营销</a></li>
                        <li><a href="#">文库</a></li>
                        <li><a href="#">经验</a></li>
                        <li><a href="#">音乐</a></li>
                        <li><a href="#">查看全部百度应用</a></li>
                    </ul>
                </div>
            </ul>
        </div>
        <div class="head_right">
            <ul>
                <li><a href="#" class="button_set">登录</a></li>
                <li><a href="#">设置</a></li>
             </ul>
        </div>
    </div>
    <!-- 图片 -->
    <div class="img_baidu">
        <img class="decoration_img" src="./baidu.png" alt="">
    </div>
    <!--输入框 -->
    <div class="border_search">
            <input type="text" class="border_input" >
            <input type="button" class="border_button" value="百度一下">
    </div>
    <!-- 中部 -->
    <div class="middle_context">
       <div class="middle_hot_line clearfix">
           <a href="#" class="middle_hot_line_left">百度热搜</a>
           <a id="change" class="middle_hot_line_right">换一换</a>
       </div>
    </div>
    <!-- 中部内容 -->
    <div class="middle_hot_context_side">
        <ul id="middle_context_line">
          <li><a>四川泸县6级地震已致3死88伤</a></li>
          <li><a>四川泸县6级地震已致3死88伤</a></li>
          <li><a>四川泸县6级地震已致3死88伤</a></li>
          <li><a>四川泸县6级地震已致3死88伤</a></li>
          <li><a>四川泸县6级地震已致3死88伤</a></li>
          <li><a>四川泸县6级地震已致3死88伤</a></li>
        </ul>
   </div>
    <!-- 底部链接 -->
    <footer class="footer clearfix">
            <ul>
                <li><a href="#">设为首页</a></li>
                <li><a href="#">关于百度</a></li>
                <li><a href="#">About Baidu</a></li>
                <li><a href="#">百度营销</a></li>
                <li><a href="#">使用百度前必读</a></li>
                <li><a href="#">意见反馈</a></li>
                <li><a href="#">帮助中心</a></li>
                <li><a href="#">京公网安备11000000200000001号</a></li>
                <li><a href="#">京ICP证010173号</a></li>
                <li><a href="#">@2021 baidu</a></li>
                <li><a href="#">京）-经营性-2017-0020</a>（</li>
            </ul>
    </footer>
    <script>
        var newList = [
				{id:1,title:"四川泸县6级地震已致3死88伤",ishot:true},
				{id:2,title:"四川泸县6级地震已致3死88伤",ishot:false},
				{id:3,title:"四川泸县6级地震已致3死88伤",ishot:false},
				{id:4,title:"四川泸县6级地震已致3死88伤",ishot:false},
				{id:5,title:"四川泸县6级地震已致3死88伤",ishot:false},
				{id:6,title:"四川泸县6级地震已致3死88伤",ishot:false},
				{id:7,title:"四川泸县6级地震已致3死88伤",ishot:false},
				{id:8,title:"四川泸县6级地震已致3死88伤",ishot:false},
				{id:9,title:"四川泸县6级地震已致3死88伤",ishot:false},
				{id:10,title:"四川泸县6级地震已致3死88伤",ishot:false},
			];
        var btnDom=document.getElementById("change");
        var where_middle_context=document.getElementById("middle_context_line");
        var cur_page=0;
        var page_size=6;
        var page_num=Math.ceil(newList.length/page_size);
        btnDom.addEventListener("click",function(){
            var str='';
            where_middle_context.innerHTML=str;
            cur_page++;
            console.log(cur_page);
            if(cur_page>=page_num){
                cur_page=0;
            }
            for(var i=0;i<page_size;i++){
                if(cur_page==0){
                    var item=i;
                }else{
                    var item=cur_page*page_size+i;
                }
                var newInfo=newList[item];
                var oLi = document.createElement('li');
                str='<a>'+newInfo.title+'</a>'
                oLi.innerHTML=str;
                where_middle_context.append(oLi);
            }
        });
    </script>
</body>
</html>

把百度页面替换到当前目录下

Lutrra
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
动态网页设计与制作(HTML5+CSS3+JavaScript)源代码和素材.zip
05-25
HTML5+CSS3+JavaScript动态网页设计与制作超全案例演示源代码及开发素材，案例都是分开的单独的html文件，方便查看及了解
HTML+CSS+JavaScript实现在线网盘
weixin_43396749的博客
11-24 982
HTML+CSS+JavaScript实现在线网盘
模仿百度首页页面（附带源码）html+css
yingshuangtu的博客
06-21 3万+
文章目录前言一、实现界面二、代码1.百度页面.html2.baidu.css三、图片总结 前言 实现页面:百度首页（点击跳转） 一、实现界面 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、代码 1.百度页面.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>百度</ti.
html＋css模仿百度首页静态网页
weixin_65450526的博客
03-26 1449
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } ul li{ list-style-type: none; } a{ text-d...
html+css 百度首页练习
u011927449的博客
08-19 448
这几天看完了《css权威指南》，写了个百度页面，不带js的纯静态，主要目的就是掌握页面布局，字体颜色之类的没有深究。 写完了觉得很简单，毕竟一开始觉得只要模仿的像就行，但是缩小了浏览器窗口以后问题就出来了。比如搜索框随浏览器的缩小移位什么的，然后就去看百度首页的源码，这才知道要做到固定位置，应该怎么布置盒模型的嵌套，怎么定位元素等等。仅仅把一个元素放到大概位置是不难的，但是页面元素多/不想让元素随浏览器缩放移位的话就要好好规划布局了。 以下代码中，“百度一下”的搜索框实现有错误，其余各个盒模型基本按照百度源
百度网盘web登录页-原生js实现
chanzhiliao的博客
08-09 2668
html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <!-- 搜索时显示的网站描述 --> <meta name="description" content=""
HTML+JS+CSS做的一些页面小游戏源码合集.zip
05-09
HTML+JS+CSS做的一些页面小游戏源码合集 HTML+JS+CSS做的一些页面小游戏源码合集 HTML+JS+CSS做的一些页面小游戏源码合集 HTML+JS+CSS做的一些页面小游戏源码合集 HTML+JS+CSS做的一些页面小游戏源码...
html+css+js百度首页制作+附源代码+实现简单【百度一下】功能
01-08
文章目录写在前面页面效果百度网盘提取码 写在前面 本博客只为有需要的朋友提供借鉴。 课堂作业要求完成的，实现了基本功能，光标移上去变成小手，js实现了百度一下功能。页面布局没问题，页面样式没问题。 导航栏...
html+css网站模板网页设计源码-html个人网页设计模板.zip
05-10
HTML和CSS是构建网页设计的基础，此资源"html+css网站模板网页设计源码-html个人网页设计模板.zip"提供了一套完整的个人网页设计模板，它包含了一系列使用HTML和CSS编写的源代码。这个模板适用于初学者和有经验的...
网页设计期末大作业+html+css
05-25
9个网页布局，学校让做的网站作业，虽然是比较基础的网页静态页面，不过我也希望你能做的规范一些，我们专业制作学生网页作业，div css js 等通过dreamwear的工具实现规范化，比如文件夹的规范，代码写作的规范，...
web期末大作业 基于HTML+CSS+JavaScript实现的仿京东商城首页登录页源码
12-10
web期末大作业 基于HTML+CSS+JavaScript实现的仿京东商城首页登录页源码 web期末大作业 基于HTML+CSS+JavaScript实现的仿京东商城首页登录页源码 web期末大作业 基于HTML+CSS+JavaScript实现的仿京东商城首页登录页...
html+css+js+jq简单实现原神官网动态效果
qq_63656102的博客
04-14 1675
所以,学一门语言要知道他能做出什么东西我们才可以有学下去的动力,因为我当时也是和好奇一些网站上的效果是怎么实现的,所以去实现了我当时不明白的问题，当然,这只是个起步而已，先说一下前端来做这些效果只是为了来练习语法和运用为以后的框架做基础的，只有基础牢固才能学的更好。相信大家一定学过很多种计算机的编程语言，但是有很多人可能很迷茫不知道学这么多语言能做出什么效果,其他语言我可能不是很明白能做出什么,但是在前端的话,我还是知道能做出什么样的效果出来的,比如这次的原神官网。之后就是引入css和js文件是不可少的。
【前端】利用HTML标签+css实现百度页面【HTML+CSS+JavaScript(JS)】
cc2855816075的博客
02-11 932
效果： 免费下载：https://download.csdn.net/download/cc2855816075/80141329 代码：（图片见上方链接↑） <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>百度</title> <style type="text/css"> #nvgn-bar{/*最上方导航栏*/
HTML+CSS3+JavaScript仿百度未登录静态页面：
qq_32154641的博客
10-24 2084
一、仿百度未登录静态页面： 在这个页面上比较有难点的就是右上角的“更多产品”和“设置”这两个选项，以下是我在“更多产品”中的HTML代码和CSS代码（注：“#”代表的是一些相关链接，由你们自己写。）： <a class="more">更多产品</a> <div class="more_item2"> <li>
HTML+CSS+JS网页设计
热门推荐
m0_73738929的博客
04-15 4万+
HTML页面主要由：登录、注册跳转页面，轮播图，家乡简介，热门景点，特色美食等组成。通过Div+CSS、鼠标滑过特效、获取当前时间，跳转页面、基本所需的知识点全覆盖。提示：以下是本篇文章正文内容，下面案例可供参考。
仿百度网盘html页面源码,仿百度云主界面
weixin_39862871的博客
06-07 2382
【实例简介】1.整个界面主容器是一个ViewPager,只是在左下角有一个切换的Button。2.ViewPager有两个界面，由Fragment实现，并且加入了ViewPager切换动画。3.ViewPager的两个Fragment都是Tab风格，点击底部Tab又会呈现不同的子Fragment。【实例截图】【核心代码】TabUI└── TabUI├── AndroidManifest.xml├─...
HTML5+CSS+JavaScript仿百度登录之后的静态首页
qq_32154641的博客
10-24 6493
这是仿百度登录后的静态页面，其中有些功能还不完善，但是我会尽量去完善他们，在这个页面里面有很多相对我来说比较难的地方，比如其中的“更多产品”，“设置”，“换肤功能”，“我的关注，推荐，导航”选项卡之间的切换等等功能，其他还有一些难点，我就不一一介绍了，下面我直接贴代码： 这是HTML+JavaScript+部分CSS代码：<!DOCTYPE html> <html> <head>
HTML+CSS+JS仿百度导航（包括下拉框等）
News777的博客
08-03 438
效果展示 代码 <!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"> <ti
用html+css模仿百度登录页
AKK188888881的博客
02-21 2071
用html+css模仿百度登录页
html+css+js制作页面
最新发布
06-02
要使用 HTML、CSS 和 JavaScript 制作页面，一般需要按照以下步骤进行： 1. 编写 HTML 文件，确定页面的结构和内容。 2. 编写 CSS 文件，设置页面的样式和布局。 3. 使用 JavaScript 文件实现页面的交互效果和动态功能。 具体来说，可以按照以下步骤进行： 1. 编写 HTML 文件：使用 HTML 标签和属性确定页面的结构和内容，比如设置标题、段落、链接、图片等。 2. 编写 CSS 文件：使用 CSS 选择器和属性设置页面的样式和布局，比如设置字体、颜色、背景、边框、盒子模型等。 3. 编写 JavaScript 文件：使用 JavaScript 语句实现页面的交互效果和动态功能，比如实现表单验证、响应用户事件、动态加载数据等。 4. 将 HTML、CSS 和 JavaScript 文件连接起来：在 HTML 文件中引入 CSS 和 JavaScript 文件，使其能够被浏览器解析并渲染页面。 5. 调试和优化：测试页面的效果和功能，根据需要进行调整和优化。 6. 发布页面：将页面文件上传到服务器上，使其能够在互联网上访问。 需要注意的是，制作页面需要掌握 HTML、CSS 和 JavaScript 的基础语法和用法，以及浏览器的兼容性问题，同时也需要对设计和用户体验有一定的理解和认识。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值