百度网站首页PC端 - 前端

首页
PHP培训
新
视频教程

视频课程直播课程精品课
学习路径

入门教程独孤九贱玉女心经天龙八部趣味闯关
资源下载

源码市场工具下载在线工具手册下载电子课件 js特效网站源码网站素材类库下载
技术文章

前端开发后端开发数据库 php框架每日编程
社区

问答博客文章专题
微信公众号

扫码关注官方订阅号
编程词典 APP下载源码市场

php开发
前端

HTML| CSS| JavaScript| Vue.js

后端

PHP| ThinkPHP| Laravel| MySQL| Redis
最新推荐

php8，我来也

84669人学习

细说PHP(2021版)第一季

65727人学习

TP6.0 搭建个人博客实战（玉女心经版）

82984人学习

2018前端入门_HTML5

467778人学习
大前端
原生基础

HTML| CSS| HTML5| CSS3| JavaScript

框架开发

jQuery| Vue.js| React| AngularJS| Node.js| BootStrap| AJAX| Foundation
最新推荐

JavaScript极速入门_玉女心经系列

498837人学习

独孤九贱(1)_HTML5视频教程

471966人学习

CSS视频教程-玉女心经版

256484人学习

30分钟学会网站布局

152542人学习
后端开发
编程语言

PHP| Python| Go| Java| C| C++| C#| VBSscript| Scala| Lua| Perl| Ruby| JSP| XML| ASP

框架/工具

ThinkPHP| Laravel| Servlet| Django| ASP.NET
最新推荐

Thinkphp6.0正式版视频教程

224170人学习

php8，我来也

84669人学习

PHP实战天龙八部之微信支付视频教程

139536人学习

CI框架30分钟极速入门

81804人学习
数据库
基础入门

MySQL| SQL Server

进阶学习

MongoDB| Oracle| Redis| Memcached
最新推荐

MySQL权威开发指南（教程）

85022人学习

Redis基础视频课程

11944人学习

尚观Oracle入门到精通视频教程

20001人学习

PDO操作极速入门,今天你用了吗？

60816人学习
移动端
原生开发

Android| iOS

多端开发

Swift| Flutter| uni-app| 小程序| 其他
最新推荐

你的第一行UNI-APP代码

5487人学习

Uniapp简爱读书项目开发--第一季

15007人学习

公益直播：Uniapp微信小程序1:1仿饿了么首页

2150人学习

Flutter从零到APP上架

6980人学习
运维开发
环境使用

Linux| Docker

工具使用

PhpStudy| Git| 其他工具
最新推荐

phpStudy V8 视频教程

194925人学习

兄弟连新版Linux视频教程

359900人学习

Git教程(60分钟全程无废话版)

1142人学习

vscode其实很简单

19058人学习
UI设计
UI设计

Axure| PS
最新推荐

AXURE 9视频教程(适合产品经理交互产品设计 UI)

3206人学习

零基础精通 PS 视频教程

180550人学习

16天带你入门UI视频教程

48569人学习

PS技法与切片技术视频教程

17603人学习
计算机基础
类库分类

HTTP| TCP/IP| 编程基础
最新推荐

阿里云环境搭建以及项目上线视频教程

40936人学习

计算机网络概述—程序员必须掌握的基础知识

1049人学习

程序员入门必备教程—HTTP协议详解

750人学习

Websocket视频教程

32909人学习

首页 > 博客列表 > 百度网站首页PC端

博主信息

博文 31

粉丝 2

访问量 26858

专题推荐

更多>

wifi已连接但有感叹号
计算机中属于输出设备介绍
windows11有必要升级吗
cmd怎么进入d盘

— 作者：霏梦

pc端网站首页

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./css/font-icon.css" type="text/css" />
    <title>百度一下，你就知道</title>
    <style>
      /* 初始化 */
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      a {
        text-align: center;
        text-decoration: none;
      }
      li,
      dd {
        list-style: none;
      }
      html,body {
        display: flex;
        flex-flow: column nowrap;
        min-width: 1250px;
        height: 100%;
      }
      .head {
        display: flex;
        min-width: 1250px;
        height: 60px;
        padding: 10px;
        /* border: 1px solid red; */
        align-items: center;
        justify-content: space-between;
        font-family: Arial, "Microsoft YaHei", sans-serif;
        /* background-color: mediumslateblue; */
      }
      .head-left {
        display: flex;
        align-items: center;
        /* margin: ; */
        padding: 10px 1px;
        height:60px;
      }
      .head-left > a {
        font-size: 13px;
        font-family: Arial, "Microsoft YaHei", sans-serif;
        padding: 5px 15px;
        height: 23px;
        text-align: center;
        /* border: 1px solid red; */
      }
      .head-left > a:hover {
        color: blue;
      }
      .head-left > a:visited {
        color: #222222;
      }
      .head-right {
        display: flex;
        align-items: center;
        margin-right: 30px;
      }
      .head-right > a {
        font-size: 13px;
        /* font-family: Arial, "Microsoft YaHei", sans-serif; */
        padding: 3px 10px;
      }
      .head-right > a:first-of-type {
        color: #f63051;
      }
      .head-right > a:first-of-type:hover {
        color: #f63051;
      }
      .head-right > a:first-of-type:visited {
        color: #f63051;
      }
      .head-right > span {
        font-size: 13px;
        padding: 0 20px;
        color: #222222;
      }
      .head-right > span:hover {
        color: blue;
      }
      .head-right > span:visited {
        color: #222222;
      }
      .head-right > a:last-of-type {
        border-radius: 6px;
        background-color: #4e71f2;
        color: #ffffff;
        cursor: pointer;
        height: 25px;
      }
      .logo {
        display: flex;
        align-content: center;
        margin: 0 auto;
      }
      .logo > a >img {
        height: 127px;
        width: 270px;
        /* align-items: center; */
      }
      .search {
        display: flex;
        justify-content: center;
        line-height: 45px;
      }
      .search > input:first-of-type {
        width: 546px;
        height: 44px;
        font-size: 16px;
        border: 2px solid #c4c7ce;
        border-radius: 10px 0 0 10px;
        box-shadow: none;
        background: #fff;
        color: #222;
      }
      .search > input:last-of-type {
        background-color: #4e6ef2;
        width: 108px;
        border-radius: 0 10px 10px 0;
        font-size: 17px;
        color: #fff;
        height: 44px;
        line-height: 45px;
        box-shadow: none;
        font-weight: 400;
        border: none;
        outline: none;
      }
      .hot-change {
        display: flex;
        width: 654px;
        justify-content: space-between;
        margin: 20px auto;
        /* background-color: #4e71f2; */
      }
      .hot-change > a:first-of-type {
        color: #222;
        font-size: 14px;
        font-family: Arial, "Microsoft YaHei", sans-serif;
      }
      .hot-change > a:last-of-type {
        color: #9195a3;
        font-size: 13px;
      }
      .hotlist {
        display: flex;
        width: 654px;
        /* height: 320px; */
        height: 100%;
        /* padding: 5px 0px; */
        margin: 5px auto;
        flex-flow: row nowrap;
        /* align-content: space-between; */
      }
      .hotlist > .row {
        display: flex;
        flex-grow: 1;
        /* height: 100px; */
        /* justify-content: space-between; */
      }
      .hotlist > .row > ul > li > a {
        /* padding: 10px 0 10px 0; */
        /* height: 40px; */
        /* margin:30px 0 30px 0; */
        color: #222;
      }
      .row>ul>li>a:hover{
        color: blue;
      }
      .row > ul > li > span:first-of-type {
        /* padding-top: 10px 10px 10px 10px; */
        /* margin:10px 10px 10px 10px; */
        /* color: aqua; */
      }
      .qrcode{
        display: flex;
        justify-content: flex-end;
        height: 30px;
      }
      .qrcode > a >span{
        margin-right: 20px;
        /* height: 30px; */
        width: 30px;
        color: darkgray;
        font-size: 20px;
      }
      .footer {
        display: flex;
        text-align: center;
        justify-content: space-between;
        align-items: center;
        height: 40px;
        margin: 0 10px;
        background-color: #fafafa;
        font-family: Arial, "Microsoft YaHei", sans-serif;
      }
      .footer-left > a {
        color: #9195a3;
        font-size: 12px;
        padding: 10px 10px;
      }
      .footer-right > span {
        font-size: 12px;
        color: #9195a3;
        margin: 0 10px;
      }
      .footer-right > a {
        font-size: 12px;
        color: #9195a3;
      }
    </style>
  </head>
  <body>
    <div class="head">
      <div class="head-left">
        <a href="" target="_blank">新闻</a>
        <a href="" target="_blank">hao123</a>
        <a href="" target="_blank">地图</a>
        <a href="" target="_blank">视频</a>
        <a href="" target="_blank">贴吧</a>
        <a href="" target="_blank">学术</a>
        <a href="" target="_blank">更多</a>
      </div>
      <div class="head-right">
        <a href="">抗击疫情</a>
        <span>设置</span>
        <a href="" style="text-align: center;">登录</a>
      </div>
    </div>
    <div class="logo">
      <a href=""
        ><img
          src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"
          alt=""
      /></a>
    </div>
    <div class="search">
      <input type="text" name="" maxlength="255" autocomplete="off" />
      <input type="submit" name="" class="s_btn" value="百度一下" />
    </div>
    <div class="hot-change">
      <a href="" class="hot-title">百度热榜</a>
      <a href="" class="change"
        ><span class="iconfont"></span>
        <span>换一换</span>
      </a>
    </div>
    <div class="hotlist">
      <div class="row">
        <ul>
          <li>
            <span class="iconfont" style="color:darksalmon;"></span>
            <a href=""></a>北京现有39个中风险地区</a>
            <span class="iconfont" style="color: coral; padding: 30px;"></span>
          </li>
          <li>
            <span class="iconfont" style="color: lightblue;"></span>
            <a href="">英国民众无视疫情涌向南部海边</a>
          </li>
          <li>
            <span class="iconfont" style="color: mediumslateblue;"></span>
            <a href="">北京老郑州烩面馆又有两员工确诊</a>
          </li>
        </ul>
      </div>
      <div class="row">
        <ul>
          <li>
            <span class="iconfont"></span>
            <a href="">易烊千玺谈回锅肉</a>
          </li>
          <li>
            <span class="iconfont"></span>
            <a href="">北京7社区解除应急封闭管理</a>
          </li>
          <li>
            <span class="iconfont"></span>
            <a href="">乘风破浪的姐姐淘汰名单</a>
          </li>
        </ul>
      </div>
    </div>
    <div class="qrcode">
     <a href="">
      <span class="iconfont"></span>
     </a>
    </div>
    <div class="footer">
      <div class="footer-left">
        <a href="">设为首页</a>
        <a href="">关于百度</a>
        <a href="">About Baidu</a>
        <a href="">百度营销</a>
        <a href="">使用百度前必读</a>
        <a href="">意见反馈</a>
        <a href="">帮助中心</a>
      </div>
      <div class="footer-right">
        <span>©2020 Baidu (京)-经营性-2017-0020</span>
        <a href="">京公网安备11000002000001号</a>
        <span>京ICP证030173号</span>
      </div>
    </div>
  </body>
</html>