html5+css3手码百度页面

于 2022-08-13 16:01:38 发布
阅读量460 收藏 1
点赞数
文章标签： html5 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_63357370/article/details/126320752
版权

html5 源码

<!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>百度一下，你就知道</title>

    <link rel="stylesheet" href="./baidu.css">

</head>

<body>

    <div class="dingbu-box">

        <div class="left">

            <span>新闻</span>

            <span>hao123</span>

            <span>地图</span>

            <span>贴吧</span>

            <span>视频</span>

            <span>图片</span>

            <span>网盘</span>

            <span>更多</span>

        </div>

        <div class="denglu">登录</div>

        <div class="shezhi">设置</div>

    </div>

    <div class="zhuti">

        <div class="banner"><img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt=""></div>

        <div class="shurukuang"></div>

        <div class="bdyx">百度一下</div>

    </div>

    <div class="resou">

        <div class="resou1">百度热搜</div>

        <div class="huan">☯ 换一换</div>

    </div>

    <div class="neirong">

        <ul class="leftul">

            <li class="neirongleft">

                <i class="i1">1</i>

                <span>特朗普拉奥巴马下水：他也藏了！</span>

            </li>

            <li class="neirongleft">

                <i class="i1">2</i>

                <span>高温下电费让人崩溃 有人一月花五千</span>

            </li>

            <li class="neirongleft">

                <i class="i2">3</i>

                <span>外贸数据超预期彰显中国经济韧性</span>

            </li>

        </ul>

        <ul class="rightul">

            <li class="neirongright">

                <i class="i2">4</i>

                <span>特朗普或将面临最高30年刑期</span>

            </li>

            <li class="neirongright">

                <i class="i3">5</i>

                <span>黑山发生枪击事件致11死6伤 </span>

            </li>

            <li class="neirongright">

                <i class="i3">6</i>

                <span>解码十年 解锁出一串发展密码</span>

            </li>

        </ul>

    </div>

    <div class="dibu">

        <p class="Ih">关于百度</p>

        <p class="Ih">About Baidu</p>

        <p class="Ih">使用百度前必读</p>

        <p class="Ih">帮助中心</p>

        <p class="Ih">企业推广</p>

        <p class="Ih">京公网安备11000002000001号</p>

        <p class="Ih">京ICP证030173号</p>

        <p class="Ih">信息网络传播视听节目许可证 0110516</p>

        <p class="Ih">药品医疗器械网络信息服务备案（京）网药械信息备字（2021）第00159号</p>

        <p class="Ih">医疗器械网络交易服务第三方平台备案凭证（京）网械平台备字（2020）第00002号</p>

        <p class="Ih">©2022 Baidu </p>

    </div>

</body>

</html>

css3源码

*{

    margin: 0;

    padding: 0;

    background: #fff;

}

ul li {

    list-style: none;

}

i{

    font-style:normal

}

.dingbu-box{

    width: 100%;

    height: 60px;

    /* border: 1px solid red; */

}

.dingbu-box .left{

    float: left;

    width: 480px;

    height: 60px;

    line-height: 60px;

    margin-left: 24px;

}

.dingbu-box .left span{

    padding-right: 24px;

    color: #222;

    font-size: 12px;

}

.denglu{

    width: 48px;

    height: 24px;

    background-color: #4e6ef2;

    color: #fff;

    margin-right: 24px;

    text-align: center;

    float: right;

    border-radius: 6px;

    font-size: 12px;

    margin-top: 19px;

    line-height: 24px;

}

.shezhi{

    width: 26px;

    height: 23px;

    font-size: 12px;

    color: #222;

    float: right;

    margin-right: 32px;

    margin-top: 22px;

}

.zhuti{

    width: 650px;

    height: 240px;

    /* border: 1px solid red; */

    margin: 0 auto;

    position: relative;

}

.zhuti .banner {

    width: 270px;

    height: 129px;

    margin: 0 auto;

}

.zhuti .banner img{

    width: 270px;

    height: 129px;

}

.shurukuang{

    width: 550px;

    height: 44px;

    border: 2px solid #4e6ef2;

    border-radius: 10px;

    margin-top: 24px;

}

.bdyx{

    z-index: 5;

    width: 108px;

    height: 48px;

    background-color: #4e6ef2;

    border-radius: 0 10px 10px 0;

    position: absolute;

    right: 0;

    top: 153px ;

    color: #fff;

    text-align: center;

    line-height: 44px;

    font-size: 17px;

    font-weight: 400;

}

.resou{

    width: 650px;

    height: 24px;

    margin: 0 auto;

    /* border: 1px solid red;    */

    line-height: 24px;

}

.resou1{

    float: left;

    color: #222;

    font-size: 18px;

    /* font-weight: bold; */

}

.huan{

    float: right;

    color: #626675;

    font-size: 14px;

}

.neirong{

    width: 650px;

    height: 110px;

    /* border: 1px solid red;    */

    margin: 10px auto;

    font-size: 16px;

    position: relative;

}

.neirong .neirongleft{

    width: 306px;

    height: 36px;

    color: #222;

    line-height: 36px;

}

.neirong .neirongleft .i1{

    width: 22px;

    height: 22px;

    color: #fe2d46;

    margin-right: 10px;

}

.neirong .neirongleft .i2{

    width: 22px;

    height: 22px;

    color: #faa90e;

    margin-right: 10px;

}


 

.neirong .rightul{

    position: absolute;

    right: 0;

    top: 0;

}

.neirong .neirongright{

    width: 306px;

    height: 36px;

    color: #222;

    line-height: 36px;

}

.neirong .neirongright .i2{

    padding-left: 30px;

    width: 22px;

    height: 22px;

    color: #faa90e;

    margin-right: 10px;

}

.neirong .neirongright .i3{

    padding-left: 30px;

    width: 22px;

    height: 22px;

    color: #9195a3;

    margin-right: 10px;

}

.dibu{

    width: 100%;

    height: 39px;

    position: fixed;

    bottom: 0;

    left: 0;

    /* border: 1px solid red; */

    text-align: center;

}

.dibu .Ih{

    display: inline-block;

    margin-right: 14px;

    color: #bbb;

    font-size: 12px;

    line-height: 39px;

}

D.ss167
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
利用HTML5仿制百度首页
Watermelon_devil的博客
06-21 730
制作百度首页，要用到div进行分块，需要对快的位置进行控制，一般有对div进行规范大小width，height分别对应宽度高度margin：有对div进行定位有margin-top,margin-left,margin-right,margin-buttomfloat-left:吧div元素进行从左到右排列，了解这些事后就能仿制一个百度首页了 成品如下...
html5+css3
weixin_55743273的博客
10-27 223
文章目录前言一、HTML51.新增语义化标签2.表单标签3.多媒体标签1.音频标签2.视频标签二、CSS31.属性选择器2.结构伪类选择器3.伪元素选择器 前言 HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式。 CSS演进的一个主要变化就是W3C决定将CSS3分成一系列模块。 一、HTML5 1.新增语义化标签 头部标签：header 导航标签：nav 内容标签：article 块级标签：section 侧边栏标签：aside 尾部标签
【第一篇】认识CSS
Ethan's Blog
07-09 355
介绍了CSS是什么，如何在Html中使用CSS，层叠样式的作用原理
day14
lmj275871的博客
07-11 231
python入门14
用HTML+CSS实现一下百度顶部的搜索框
Quentin0823的博客
02-28 9638
用HTML+CSS实现一下百度顶部的搜索框 原页面是这样的 我在这里采取的是原页面的写法，用的精灵图实现，后面用的两个input框，在加一个iconfont图标加定位简单实现了一下。 这个是做出来的样子。 加了一个点击时让出现一个蓝色边框，也是原网页的做法。 不多说，直接上代码。（第一次写博客，多多包涵【抱拳】） 这是html代码部分 <body> <div class="top-img"></div> <div class="top-sear
HTML+CSS，百度首页仿写——高度还原，不信进去看图。
weixin_48336066的博客
07-05 652
仿百度首页， 直接干货， 图片自己扣。
css 与 html5
corn6的博客
11-28 107
折叠隐藏文字 快捷键：span*6，然后敲一个tap键，会生成6个span标签 写业务style之前，需要先清除style的内置样式 也就是在style里面写上* {margin: 0;padding: 0;} 注意body的height:100vh;不要写100% 弹性盒子能使子元素垂直居中的条件：弹性盒子本身具备高度 使用>直接控制子元素，而不会影响到孙元素 body { background-color:#003a8c; width: 100%
HTML5 + CSS3 chm中文参考手册.rar
12-08
HTML5和CSS3是现代网页开发的两大核心技术，它们共同为网页提供了丰富的表现形式和强大的交互功能。HTML5是超文本标记语言HTML的最新版本，它在原有的基础上引入了大量新元素，增强了网页的语义性和可访问性，同时...
HTML5+CSS3+JS入门教程 + 源代码 pdf
03-28
总之，这个"HTML5+CSS3+JS入门教程"结合源代码，是一个全面学习网页开发的好资源，适合想要入门前端开发的初学者。通过系统学习，你可以掌握构建现代网页所需的核心技术，并有能力开发出富有吸引力且功能丰富的网站...
HTML5+CSS3从入门到精通 源码和示例
09-25
本书“HTML5+CSS3从入门到精通”由Terry Felke-Morris撰写，旨在帮助初学者和有经验的开发者深入理解和掌握这两种技术。 HTML5作为第五代超文本标记语言，其主要改进包括： 1. 新增语义化标签：如、、、等，提高了...
百度内部html5框架核心设计与源代码
04-20
百度内部html5框架核心设计与源代码
百度搜素页的HTML实现
07-01
使用html简单实现了百度页面，能够查看代码，图片，能够打开实现。
百度首页仿制
06-12
html+css css中那个鼠标移动到a标签上改样式，不需要用到js。真是又学到了
百度首页html代码
11-06
利用纯html语言编写的百度首页，是本上实现了百度界面模块
HTML仿百度首页未登录静态界面代码
10-24
有关于仿百度首页未登录静态界面代码，首页功能都做到了，只是可能代码会有些冗长，敬请谅解！如果有遇到问题，可以互相探讨！
HTML5+CSS3旅游资源网源代码
06-12
HTML5和CSS3是现代网页开发的两大核心技术，它们为创建功能丰富、视觉效果吸引人的网站提供了强大支持。本资源包包含了一个可运行的旅游资源网的源代码，它充分利用了HTML5的新特性以及CSS3的高级样式设计，是学习这...
百度新闻页面布局html+css
02-28
综上所述，创建“百度新闻页面布局html+css”涉及到了HTML基础标签的运用，页面布局策略，以及CSS样式的设定。通过实践，你可以更好地理解这些概念，并能构建出符合现代网页设计标准的新闻列表页面。
模仿百度首页页面（附带源码）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.
html5百度注册页面代码,HTML5注册页面示例代码
weixin_32952295的博客
06-03 1861
register.htmlfunction play(){document.getElementById("menu_item").style.display = "";}function noplay(){document.getElementById("menu_item").style.display = "none";}function passwd(){var pass = docume...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值