baidu练习/html/css

<!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>

</body>
</html>

#####################################################################################################

#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;

    }
.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;

}
.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;

}
.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;
}

#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;

}
.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;
}

.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;

}
/*.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;

}

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

CSS 属性选择器(八)
一.属性选择器属性选择使用中括号进行标识,中括号内包含属性名,属性值或者属性表达式如h1[title],h1[title="Logon"], 二.属性选择器分类 2.1.匹配属 ...
2、第2节课html教程客户端控件/css第一课/20150917
1.<form> 标签提交 <form action="http://www.baidu.com" method="post'> </fo ...
24, CSS 构造超链接
1. 超链接边框 2. 派生超链接 3. 属性选择器超链接 4. 动态超链接 5. 图像翻转超链接 6. CSS 工具提示 1.给链接加上边框 A:link { Color: #f00; Text-d ...
CsQuery获取IDomObject元素的完整CSS选择器
一.方法说明通过IDomObject元素,获取完整的CSS选择器,过滤HTML和BODY元素,自动将class.id添加到选择器上,优先添加class,无class再添加id.如: <html ...
Css的前世今生
Css的基础知识扫盲作者:尹正杰版权声明:原创作品,谢绝转载!否则将追究法律责任. HTML的用法没有什么技巧,就是死记硬背,当然你不需要都记下来,能记住20个常用的标签基本上就OK了,其他不常用 ...
2015-09-17html课程总结2+了解css
7.多媒体 ①滚动字幕 <marquee>滚动的内容...</marquee> ②属性:align-----对齐方式(top middle bottom) scroll--- ...
一张图一个表——CSS选择器总结
CSS选择器总结: (这些表是一张图片^_^) 看底部完整思维导图图片和表格的下载地址:https://download.csdn.net/download/denlnyyr/10597820 (我 ...
selenium3 + python - css定位
一.css:属性定位 1.css可以通过元素的id.class.标签这三个常规属性直接定位到 2.如下是百度输入框的的html代码: <input id="kw" class ...
第十一章前端开发-css
第十一章前端开发-css 1.1.0 css介绍 css是指层叠样式表(Cascading Style Sheets),样式定义如何显示html元素,样式通常又会存在于样式表中. css优势: 内容 ...

随机推荐

【Git教程】Git教程及使用命令
Git是目前世界上最先进的分布式版本控制系统,可以自动记录和管理文件的改动,还可以团队写作编辑,也就是帮助我们对不同的版本进行控制.2008年,GitHub网站上线,为开源项目提供免费存储,迅速发 ...
Project Euler 23 Non-abundant sums（整数因子和）
题意: 完全数是指真因数之和等于自身的那些数.例如,28的真因数之和为1 + 2 + 4 + 7 + 14 = 28,因此28是一个完全数. 一个数n被称为亏数,如果它的真因数之和小于n:反之则被称为 ...
MAVEN的结构认识篇
1.maven的结构认识 src main com imooc calss test com imooc test resources pom.xml 以上是maven项目存在的必须结构!如下图 te ...
01.Python基础-4.字符串
1 字符串初识字符串编码字符串定义:多个字符(双引号或单引号中的数据)组成字符串下标类似列表list 格式化就是占位符最常用%s %d %f等等转义字符转义字符描述 \ (在行尾时) ...
小松之LINUX 驱动学习笔记（一）
本篇主要是讲解驱动开发的基础知识以及一些环境配置方面的问题. 下面是一个hello world的简单的模块代码,很简单./*********************** 模块的简单例子* author ...
php strtotime 同样的函数为何在不同的地方输出的结果不同?
方法1:调用函数 date_default_timezone_set('Asia/Shanghai'); // 如果是中国的话方法2:设置php.ini 中data.timezone [Date] ...
SSH框架整合截图总结(三)
联系人信息查询1 点击联系人信息查询超链接时候,到查询页面 (1)在查询页面中,选择客户,根据客户进行查询下拉表框显示所有客户可以根据所属的客户进行联系人查询 2 在查询页面中,输入值,提 ...
BA--暖通系统常见设计细节要点
(一)系统设计问题 1.水泵在系统的设计位置: 一般而言,冷冻水泵应设在冷水机组前端,从末端回来的冷冻水经过冷冻水泵打回冷水机组:冷却水泵设在冷却水进机组的水路上,从冷却塔出来的冷却水经冷却水泵打回机 ...
【转】sql 基本语法
简单语法:http://www.cnblogs.com/lyhabc/p/3691555.html 数据类型宽度:http://www.cnblogs.com/lyhabc/p/3696629.htm ...
spring mvc流程理解
1.controller处理的终究就是一个结果,默认是modelandview对象,controller里自己随便调用service或者dao,终究都还是在controller里有返回值. 2. 在 ...

baidu练习/html/css

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

随机推荐

热门专题