仿作一个百度页面

最新推荐文章于 2022-08-26 17:22:49 发布

你的男孩rr

最新推荐文章于 2022-08-26 17:22:49 发布

阅读量220

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/m0_70220004/article/details/124915005

版权

本文记录了一次前端作业，即仿作百度主页的过程。通过分析页面结构，使用HTML和CSS创建四个主要部分，并利用工具Dimensions测量尺寸。尽管完成了基本布局，但在搜索框的弧度和元素贴合上遇到问题，期待进阶解决方案。

摘要由CSDN通过智能技术生成

今天的作业是粗略的仿作一下百度的页面

首先，粗浅的看一下该页面的结构，可以用四个盒子来装，做这四个盒子需要测量出页面中的一些尺寸，这里安利一个for Mac的app———Dimensions,测出这些数据后用css修改盒子的大小便做出了结构，随后修改样式，也是用css，非常简单。mindmap大体是：

效果图如下，作为初学者感觉做的还是比较满意的，不过有两个问题：1.搜索框无法像原版那样做出弧度。2.按钮和搜索框贴合的不是很好，显得很难看。希望有大神可以指教一下。代码：

<!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>Document</title>
    <style>
        div.x {
                width: 1199px;