简单实现百度页面

最新推荐文章于 2022-06-30 17:02:23 发布
一个前端程序员
最新推荐文章于 2022-06-30 17:02:23 发布
阅读量846
点赞数
本文链接：https://blog.youkuaiyun.com/Whileyi/article/details/99616691
版权
百度页面的实现

    <style>
        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            /*小于最小宽度*/
            min-width: 1000px;
        }

        img {
            vertical-align: bottom;
        }

        header {
            padding: 20px 10px;
            overflow: auto;
        }

        header nav {
            /*浮动*/
            float: right;
            font-size: 14px;
        }

        nav .nav-item {
            color: #333;
            margin-right: 15px;

        }

        nav .nav-item:hover {
            color: #00c;
        }

        nav .more {
            color: white;
            background-color: #38f;
            padding: 8px;
        }

        form {
            width: 640px;
            /*定宽居中，适用于块标签剧中*/
            margin: 50px auto 0;
        }

        form .logo {
            /*1.默认行内标签的格式，高度不能被撑开
             2.切换成块标签，方便居中
           */
            display: block;
            width: 250px;
            margin: 0 auto 20px;
        }

        form .logo img {
            width: 250px;
        }

        .from-group input,
        .from-group label {
            display: block;

        }

        .from-group label {
            width: 540px;
            height: 35px;
            float: left;
            position: relative;
        }

        .from-group label .text {
            height: 35px;
            width: 100%;
            border: 1px solid #ddd;
            border-right: none;
            padding: 0 40px 0 8px;
        }

        /*:focus 获取焦点，一般用于表单标签，选中输入内容时*/
        .from-group label .text:focus {
            border-color: #38f;
            /*去除轮廓线，专用于谷歌*/
            outline: none;
        }

        .from-group label .camera {
            position: absolute;
            right: 10px;
            top: 10px;
            width: 18px;
            height: 19px;
            background-image: url('img/camera.png');
            background-repeat: no-repeat;
        }

        .from-group label .camera:hover {
            background-position: center -20px;
        }

        .from-group .submit {
            width: 100px;
            height: 35px;
            margin-left: 540px;
            color: white;
            background-color: #38f;
            border: none;
            cursor: pointer;
        }

        .from-group .submit:hover {
            box-shadow: 0 0 50px rgba(0, 0, 0, 0.2) inset;
        }

        .app {
            width: 300px;
            margin: 100px auto 0;
            /*针对图片和文字左右居中，在对应的父标签中添加此样式*/
            text-align: center;
        }

        .app .ewm {
            border: 1px solid #ddd;
            padding: 8px;
        }

        .app .ewm-info {
            /*增加字间距*/
            letter-spacing: 5px;
            margin: 5px 0;
        }

        .app .app-slogan {
            font-size: 14px;
            color: #666;
        }

        footer {
            width: 1000px;
            margin: 20px auto 0;
            text-align: center;
            color: #666;
            font-size: 14px;
        }

        footer a {
            /*继承色，使用父标签的颜色*/
            color: inherit;
        }

        .bd-actions,
        .copyright-safe {
            padding: 5px 0;
        }

        .bd-actions a,
        .copyright-safe .gutter {
            margin: 0 10px;
        }

        .copyright-safe .icon {
            width: 20px;
            height: 20px;
        }
    </style>
</head>

<body>
    <!--头部标签-->
    <header>
        <!--导航标签 navigation-->
        <!--在使用选择器时，尽可能少用标签选择器-->
        <nav>
            <a href="#" class="nav-item"><b>新闻</b></a>
            <a href="#" class="nav-item"><b>hao123</b></a>
            <a href="#" class="nav-item"><b>地图</b></a>
            <a href="#" class="nav-item"><b>视频</b></a>
            <a href="#" class="nav-item"><b>贴吧</b></a>
            <a href="#" class="nav-item"><b>学术</b></a>
            <a href="#" class="nav-item"><b>登录</b></a>
            <a href="#" class="nav-item"><b>设置</b></a>
            <span class="more">更多产品</span>
        </nav>
    </header>
    <!--表单区域-->
    <form>
        <!--title 属性：任何一个可见标签都可以使用，鼠标悬停
            稍等待一会儿就会显示，一般用于提示信息-->
        <a href="#" class="logo" title="国际emoji日">
            <img src="img/emo.gif" alt="emoji">
        </a>
        <div class="from-group">
            <!--文本输入框-->
            <label>
                <input type="text" class="text">
                <div class="camera"></div>
            </label>
            <!--提交按钮-->
            <input type="submit" value="百度一下" class="submit">
        </div>
    </form>
    <!--app推广-->
    <div class="app">
        <img src="img/erweima.png" alt="百度app" class="ewm">
        <div class="ewm-info">下载百度app</div>
        <!--转义字符-->
        <div class="app-slogan">有事搜一搜&#x3000;没事看一看</div>
    </div>
    <!--页脚区域-->
    <footer>
        <div class="bd-actions">
            <a href="#">把百度设为主页</a>
            <a href="#">关于百度</a>
            <a href="#">About&nbsp;Baidu</a>
            <a href="#">百度推广</a>
        </div>
        <div class="copyright-safe">
            <span class="gutter">©2019 Baidu
                <a href="#">使用百度前必读</a>
                <a href="#">意见反馈</a>
                京ICP证030173号
            </span>
            <a href="#" class="gutter">
                京公网安备11000002000001号
                <img src="img/sign.png" class="icon" alt="">
            </a>
        </div>
    </footer>
</body>
在这里插入图片描述