HTML+CSS模仿百度首页(gird+flex布局)

最新推荐文章于 2022-11-03 22:41:47 发布

名落喝lailai

最新推荐文章于 2022-11-03 22:41:47 发布

阅读量860

点赞数

分类专栏：前端文章标签： html flex html5 前端 css3

本文链接：https://blog.csdn.net/mingluosunyi/article/details/119873908

版权

文章目录

HTML+CSS模仿百度首页

HTML+CSS模仿百度首页

Grid布局分析

百度界面分为三块：头部导航栏、中部主体部分、页脚。
中间主体部分又可以分为左右的空白区和版心。
因此我选择用grid布局将页面划分成9个区域：
‘head head head’ 
‘left-blank main right-blank’
‘foot foot foot’

flex布局分析

flex适合一维的布局，用来完成导航栏、版心和页脚的布局非常合适。
导航栏可以分为左右两个大块，左边放<ul>,右边又可以分为天气、设置和用户三个区域。
版心主要是图片、输入框和提交按钮。图片和输入框&提交按钮是上下的布局，而输入框和按钮是水平布局，
复合flex布局能够胜任该布局。
注意到输入框右侧有个照相机的图标。该图标是用精灵图配合绝对定位实现的。
最后是页脚部分，还是使用flex布局实现即可。

代码

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百度首页</title>
    <link href="style.css" rel="stylesheet">
</head>
<body>
<div class="grid">
    <header>
        <nav>
            <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>
                <li><a href="#">更多</a></li>
            </ul>
        </nav>
        <div class="right-nav">
            <div class="weather center font-set">
                <span class="font-set center

最低0.47元/天解锁文章

名落喝lailai

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS模仿百度首页(gird+flex布局)

文章目录HTML+CSS模仿百度首页Grid布局分析flex布局分析代码HTML+CSS模仿百度首页Grid布局分析百度界面分为三块：头部导航栏、中部主体部分、页脚。中间主体部分又可以分为左右的空白区和版心。因此我选择用grid布局将页面划分成9个区域：‘head head head’ ‘left-blank main right-blank’‘foot foot foot’flex布局分析flex适合一维的布局，用来完成导航栏、版心和页脚的布局非常合适。导航栏可以分为左右两个大块，
复制链接

扫一扫

专栏目录