1. <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>百度一下,你就知道</title>
    <link rel="icon" href="baidu.png">
    <link href="baidu1.css" rel="stylesheet">
    </head>
    <body id="body1">
    <!--标题部分-->
    <div class="center-box" >
    <div class="show-weather">
    <span class="show-city">
    <em class="city-name">扬州 :
    </em>
    </span>
    <span class="show-weather-icon" >
    <em class="temp">16℃
    </em>
    </span>
    <span class="weather-now">重度
    </span>
    <span class="weather-now1">286
    </span>
    <span class="title">|
    </span>
    <span class="title1">换肤
    </span>
    <span class="title2">消息
    </span>
    </div>
    </div>
    <div class="title-right">
    <a class="muav">新闻</a>
    <a class="muav">hao123</a>
    <a class="muav">地图</a>
    <a class="muav">视频</a>
    <a class="muav">贴吧</a>
    <a class="muav">学术</a>
    <a class="muav">pandaboy1123</a>
    <a class="muav">设置</a>
    <a class="more">更多产品</a>
    </div>
    <!--标题部分-->
    <!--搜索引擎部分-->
    <div class="background" > </div>
    <div id="lg">
    <img class="logo" src="superlogo.png">
    </div>
    <span id="warp">
    <input class="text" value="百度一下">
    </span>
  2.  
  3. </body>
    </html>
  4.  
  5. #####################################################################################################
  1. #body1{
    margin: 0px;
    }
    .center-box{
    position: relative;
    width: 1380px;
    height: 32px;
    text-align: center;
    /*color: black;*/
    background-color: rgb(153,153,153);
    display: block;
    cursor: default;
    font-size: 12px;
    font-style: normal;
    margin: 0px;
  2.  
  3. }
    .show-weather{
    width: 250px;
    height: 34px;
    margin: 0px;
    position: absolute;
    left: 40px;
    }
    .city-name{
    font-family: "Microsoft YaHei UI";
    font-size: 12px;
    color: white;
    line-height: 35px;
    font-style: normal;
    position: relative;
    left: -55px;
    }
    .show-weather-icon{
    display: inline-block;
    background-image: url("night.png");
    line-height: 35px;
    font-style: normal;
    position: relative;
    width: 18px;
    height: 18px;
    color: white;
    margin: 0px;
    left: -50px;
    bottom: -8px;
    font-size: 12px;
    /*left: -40px;*/
    }
    .temp{
    display: inline-block;
    position: relative;
    height: 20px;
    line-height: 20px;
    margin: 0px;
    left: 26px;
    top: -8px;
    font-family: "Microsoft YaHei UI";
    font-style: normal;
    }
    .weather-now{
    display: inline-block;
    position: relative;
    height: 20px;
    /*line-height: 20px;*/
    margin: 0px;
    font-family: "Microsoft YaHei UI";
    color: rgb(255,126,0);
    left: -12px;
    font-weight: bold;
  4.  
  5. }
    .weather-now1{
    display: inline-block;
    position: relative;
    height: 20px;
    /*line-height: 20px;*/
    margin: 0px;
    font-family: "Microsoft YaHei UI";
    color: white;
    left: -12px;
    }
    .title{
    color: white;
    position: relative;
    left: -10px;
    }
    .title1{
    color: white;
    text-decoration: underline;
    display: inline-block;
    width: 30px;
    }
    .title2{
    color: white;
    text-decoration: underline;
    display: inline-block;
    width: 30px;
    }
    .title-right{
    /*color: rgb(153,153,153);*/
    color: black;
    display: block;
    position: absolute;
    width: 590px;
    height: 32px;
    z-index: 500;
    font-size: 13px;
    right: 0px;
    top: 0px;
    }
    .muav{
    display: inline-block;
    color: white;
    cursor: auto;
    font-family: "Microsoft YaHei UI";
    font-size: 13px;
    font-style: normal;
    font-variant: normal;
    font-weight: bold;
    height: 32px;
    line-height: 32px;
    margin-left: 19px;
    outline-color: white;
    outline-style: none;
    outline-width: 0px;
    position: relative;
    text-align: right;
    text-decoration: underline;
    text-shadow: none;
  6.  
  7. }
    .more{
    background-attachment: scroll;
    background-clip: border-box;
    background-color: rgb(57,139,251);
    background-image: none;
    background-origin: padding-box;
    background-size: auto;
    border-bottom-color: rgb(57,139,251);
    border-bottom-style: solid;
    border-bottom-width: 1px;
    color: white;
    cursor: auto;
    display: inline-block;
    font-family: "Microsoft YaHei UI";
    font-size: 13px;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    height: 31px;
    line-height: 32px;
    /*margin-left: 19px;*/
    margin-top: 0px;
    outline-color: white;
    outline-width: 0px;
    overflow-x: hidden;
    overflow-y: hidden;
    position: relative;
    text-align: center;
    text-decoration: none;
    text-shadow: none;
    vertical-align: top;
    width: 76px;
    zoom: 1;
    float: right;
    }
  8.  
  9. #lg{
    color: black;
    cursor: default;
    display: block;
    font-family: "Microsoft YaHei UI";
    font-size: 12px;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    height: 181.297px;
    width: 641px;
    line-height: normal;
    min-height: 181px;
    z-index: 0;
    position: relative;
    text-align: center;
  10.  
  11. }
    .logo{
    border-bottom-color: black;
    border-bottom-style: none;
    border-bottom-width: 0;
    border-image-outset: 0;
    border-image-repeat:stretch;
    border-image-slice: 100%;
    border-image-source: none;
    border-image-width: 1;
    border-left-color: black;
    border-left-style: none;
    border-left-width: 0px;
    border-right-color: black;
    border-right-style: none;
    border-right-width: 0px;
    border-top-color: black;
    border-top-style: none;
    border-top-width: 0px;
    top: 80px;
    color: black;
    cursor: default;
    font-family: "Microsoft YaHei UI";
    font-size: 12px;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    height: 129px;
    left: 320.5px;
    line-height: normal;
    margin-left: 200px;
    margin-top: -684px;
    position: absolute;
    text-align: center;
    width: 270px;
    }
  12.  
  13. .text{
    background-color: white;
    background-image: none;
    border-bottom-color: black;
    border-bottom-style: none;
    border-bottom-width: 0;
    border-image-outset: 0;
    border-image-repeat: stretch;
    border-image-slice: 100%;
    border-image-source: none;
    border-image-width: 1;
    border-left-color: black;
    border-left-style: none;
    border-left-width: 0;
    border-right-color: black;
    border-right-style: none;
    border-right-width: 0;
    border-top-color: black;
    border-top-style: none;
    border-top-width: 0;
    box-shadow: rgba(0,0,0,0.2);
    color: black;
    cursor: auto;
    display: inline-block;
    font-family: "Microsoft YaHei UI";
    font-size: 16px;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    height: 20px;
    letter-spacing: normal;
    line-height: 20px;
    margin: 0px;
    outline-color: black;
    width: 480px;
    padding-bottom: 10px;
    padding-left: 7px;
    padding-right: 50px;
    padding-top: 10px;
    margin-left: 200px;
    z-index: 0;
    text-align: center;
  14.  
  15. }
    /*.background{*/
    /**/
    /*background-image: url("https://ss3.bdstatic.com/iPoZeXSm1A5BphGlnYG/skin/726.jpg?2");*/
    /*background-position: 50% 0px;*/
    /*background-repeat: no-repeat;*/
    /*background-size: cover;*/
    /*color: black;*/
    /*cursor: default;*/
    /*display: block;*/
    /*font-family: "Microsoft YaHei UI";*/
    /*font-size: 12px;*/
    /*font-style: normal;*/
    /*font-variant: normal;*/
    /*font-weight: normal;*/
    /*height: 626px;*/
    /*left: 0px;*/
    /*position: relative;*/
    /*z-index: -1;*/
    /*}*/
    #warp{
    color: black;
    cursor: default;
    display: block;
    font-family: "Microsoft YaHei UI";
    font-size: 16px;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    height: 40px;
    width: 547px;
    line-height: normal;
    min-height: 0;
    z-index: 0;
    position: relative;
    text-align: center;
  16.  
  17. }

baidu练习/html/css的更多相关文章

  1. CSS 属性选择器(八)

    一.属性选择器 属性选择使用中括号进行标识,中括号内包含属性名,属性值或者属性表达式 如h1[title],h1[title="Logon"], 二.属性选择器分类 2.1.匹配属 ...

  2. 2、第2节课html教程客户端控件/css第一课/20150917

    1.<form> 标签 提交 <form action="http://www.baidu.com" method="post'> </fo ...

  3. 24, CSS 构造超链接

    1. 超链接边框 2. 派生超链接 3. 属性选择器超链接 4. 动态超链接 5. 图像翻转超链接 6. CSS 工具提示 1.给链接加上边框 A:link { Color: #f00; Text-d ...

  4. CsQuery获取IDomObject元素的完整CSS选择器

    一.方法说明 通过IDomObject元素,获取完整的CSS选择器,过滤HTML和BODY元素,自动将class.id添加到选择器上,优先添加class,无class再添加id.如: <html ...

  5. Css的前世今生

    Css的基础知识扫盲 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. HTML的用法没有什么技巧,就是死记硬背,当然你不需要都记下来,能记住20个常用的标签基本上就OK了,其他不常用 ...

  6. 2015-09-17html课程总结2+了解css

    7.多媒体 ①滚动字幕 <marquee>滚动的内容...</marquee> ②属性:align-----对齐方式(top middle  bottom) scroll--- ...

  7. 一张图一个表——CSS选择器总结

    CSS选择器总结: (这些表是一张图片^_^) 看底部 完整思维导图图片和表格的下载地址:https://download.csdn.net/download/denlnyyr/10597820 (我 ...

  8. selenium3 + python - css定位

    一.css:属性定位 1.css可以通过元素的id.class.标签这三个常规属性直接定位到 2.如下是百度输入框的的html代码: <input id="kw" class ...

  9. 第十一章 前端开发-css

    第十一章 前端开发-css 1.1.0 css介绍 css是指层叠样式表(Cascading Style Sheets),样式定义如何显示html元素,样式通常又会存在于样式表中. css优势: 内容 ...

随机推荐

  1. Camera三维动画

    一.概述 在Android中说到3D开发,我们首先想到的是OpenGL,但用起来比较复杂繁琐,不适合做应用级别的3D变换.Android为我们提供了一个简化版的3D开发入口:Camera(这里的Cam ...

  2. 沃通SSL证书、代码签名证书应用于机器人安全防护

    近两年,扫地机器人.智能音箱等消费级机器人产品逐渐走入大众生活的中.随着人工智能技术的迅猛发展,预计2023年全球消费级机器人市场规模将达到150亿美元.然而,产业的迅猛发展却伴随着安全防护的缺失,安 ...

  3. Hadoop 技术笔记

    Flume与Kafka Flume 是一个分布式,可靠的,可用的服务,有效的收集,聚合和移动海量的日志数据.它有一个简单而灵活的架构,基于流数据流.具有很好的冗余和容错性,以及可靠性和多故障转移和恢复 ...

  4. 封装基于jq弹窗插件

    相信码友们对于$.fn.extexd();$.extend()以及$.fn.custom和$.custom都有一定的了解:我阐述一下我自己对于$.fn.custom和$.custom的理解.有理解错误 ...

  5. 用户登录记住用户名导致表单自动填充bug解决方法

    最近做项目出现了一个极其讨厌的bug:在用户登录网站时,浏览器会自动提示是否记住密码,当选择记住密码时,正常浏览网页,会发现有那么几个input输入框会自动填充用户名,非常讨厌, 于是就觉得挺简单的一 ...

  6. BA--步进电机工作原理

    步进电机是将电脉冲信号转变为角位移或线位移的开环控制元步进电机件.在非超载的情况下,电机的转速.停止的位置只取决于脉冲信号的频率和脉冲数,而不受负载变化的影响,当步进驱动器接收到一个脉冲信号,它就驱动 ...

  7. Web安全扫描工具

    使用 Ibm security appscan  进行WEB安全扫描. 1.SQL注入: 2.发现内部IP泄露模式: 3.已解密的登录请求: 4.HTML注释敏感信息泄露:

  8. Android设计模式(三)--装饰模式

    1.定义: Attach additional responsibilities to an object dynamically keeping the same interface.  Decoa ...

  9. POJ 1836 Alignment(DP max(最长上升子序列 + 最长下降子序列))

    Alignment Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 14486   Accepted: 4695 Descri ...

  10. SharePoint 创建网站地图树视图及格式枚举截图

    SharePoint 创建网站地图树视图及格式枚举截图         SharePoint首页隐藏掉左側导航以后,假设要以树视图呈现站点地图也非常easy.         仅仅须要复制v4.mas ...