• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html/xhtml > 模仿“百度”页面的html代码

模仿“百度”页面的html代码

作者:Liangsm_ 字体:[增加 减小] 来源:互联网 时间:2017-11-26

本文主要包含html等相关知识,Liangsm_希望在学习及工作中可以帮助到您
<!DOCTYPE html>
<html lang="en">

<head class="ui semantic">
    <meta charset="UTF-8">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
    <!-- //<meta http-equiv="X-UA-Compatible" content="ie=edge"> -->
    <title>baidu</title>
    <link href="http://ox6yf62u0.bkt.clouddn.com/semantic-ui/2.2.13/semantic.min.css" rel="stylesheet">
    <script src="http://ox6yf62u0.bkt.clouddn.com/jquery-2.1.4.min.js"></script>
    <script src="http://ox6yf62u0.bkt.clouddn.com/semantic-ui/2.2.13/semantic.min.js"></script>
    <style>
    .topheader>a {
        padding-right: 15px;
        color: black;
        background-color: #fff;
        /* text-decoration:underline; */
        font-weight: bold;
    }

    a {
        text-decoration: underline;
        color: rgba(109, 99, 99, 0.76);
        font-size: 5px;
    }


    .bri {
        display: inline-block;

        right: 10px;
        width: 60px;
        height: 23px;

        color: #fff;
        background: #38f;
        line-height: 24px;
        font-size: 13px;
        text-align: center;
        overflow: hidden;
        /*border-bottom: 1px solid #38f;*/
        margin-left: 19px;
        margin-right: 2px;
    }
    </style>
</head>

<body>
    <!-- top link start -->
    <div class="ui right aligned  topheader fluid container" style="padding: 30px">
        <a href="#">新闻</a>
        <a href="#">hao123</a>
        <a href="#">地图</a>
        <a href="#">视频</a>
        <a href="#">贴吧</a>
        <a href="#">学术</a>
        <a href="#">登录</a>
        <a href="#">设置</a>
        <div href="#" class="bri" style1="background-color: rgba(7, 28, 219, 0.952);text-decoration: none;color:white;padding-right: 0;display:inline-block;width:70px;height:15px;">更多产品</div>
    </div>
    <!-- top link end -->
    <div class="ui centered aligned grid container ">
        <div class="row">
            <div class="column" style="width: 270px;height: 129px;">
                <img class="ui  image" src="https://www.baidu.com/img/bd_logo1.png" alt="">
            </div>
        </div>
        <div class="row">
            <form class="column" style="width:640px;" method="GET" action="https://www.baidu.com/s" name="search">
                <div class="ui fluid  input action">
                    <input type="text" name="wd" placeholder="搜索...">
                    <button class="medium ui blue button" onclick="document.forms['search'].submit();">百度一下</button>
                </div>
            </form>
        </div>
    </div>
    <div class="ui one column center aligned stackable grid ">
        <div class="column" style="padding-top: 140px;font-weight: bold;color:rgba(71, 66, 66, 0.822)">
            <img src="https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/home/img/qrcode/zbios_efde696.png" alt="">
            </br>手机百度
        </div>
        <div class="column" style="color:rgba(109, 99, 99, 0.76);font-size:5px">
            <a href="#">把百度设为首页</a>
            <a href="#">关于百度</a>
            <a href="#">about baidu</a>
            <a href="#">百度推广</a>
            </br>
            ©2017 Baidu
            <a href="#" style="text-decoration-line:underline">使用百度前必读</a>
            <a href="#" style="text-decoration-line: underline">意见反馈</a>> 京ICP证030173号
            <i class="marker icon"></i> 京公网安备11000002000001号
        </div>
    </div>
</body>

</html>

您可能想查找下面的文章:

相关文章

  • 2017-08-05HTML表格布局实例讲解
  • 2017-08-05HTML 网页页面切换的各种变换效果
  • 2017-08-05Xhtml 特殊字符收集
  • 2017-08-05html中使用margin:0 auto整个页面不居中的解决方法
  • 2017-08-05使一个input文本框随其中内容而变化长度的方法
  • 2017-08-05iframe框架在IE浏览器下将白色背景设为透明色
  • 2017-08-05深度剖析HTML的语意和与其相关的前端框架
  • 2017-08-05HTML&CSS&JS兼容树(IE,Firefox,chrome)
  • 2017-08-05前端开发每天必学之HTML入门介绍
  • 2017-08-05TinyEditor 简洁且易用的html所见即所得编辑器

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • html中的div、td 、p 等容器内强制换行和不换行的实现
    • 细数html中的列表标签
    • html网页插入图片、加入地图索引示例讲解
    • htnl基础知识之网页页面的初步了解
    • ie6 失真问题
    • a标签伪类的作用及书写顺序是什么
    • input输入框中的光标大小显示不一致的解决方法
    • 如何在textarea文本输入区内实现换行
    • 使用a链接时如何阻止超链接跳转
    • 详解HTML中table表格的frame和rules属性

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有