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优势: 内容 ...
随机推荐
- 商品的CRUD操作
(1)新增商品:新增文档,建立索引 PUT /index/type/id{ "json数据"} PUT /ecommerce/product/1{ "name" ...
- Python爬虫2------爬虫屏蔽手段之代理服务器实战
1.代理服务器: 一个处于客户端与互联网中间的服务器,如果使用代理服务器,当我们浏览信息的时候,先向代理服务器发出请求,然后由代理服务器向互联网获取信息,再返回给我们. 2.代码: import ...
- Vue JsonView 树形格式化代码插件
组件代码(临时粘出来) <template> <div class="bgView"> <div :class="['json-view' ...
- [USACO17JAN] Promotion Counting晋升者计数 (树状数组+dfs)
题目大意:给你一棵树,求以某节点为根的子树中,权值大于该节点权值的节点数 本题考查dfs的性质 离散+树状数组求逆序对 先离散 我们发现,求逆序对时,某节点的兄弟节点会干扰答案 所以,我们在递推时统计 ...
- 在magento的eav模型中如何在更新记录时只在value表的原值上更新
1,一般情况下,当我们在调用getModel在load某条实体接着更新对应实体上的值是,都不会覆盖原来的实体value表上的值,而是保留原来的,并在value表上重新创建一条值记录,比如初始表如下: ...
- 例题2.8 总是整数 LA4119
1.题目描写叙述:点击打开链接 2.解题思路:本题利用差分序列的性质解决.将1,2,..,k+1都带入表达式计算,假设对全部的i.都有D整除P(i),那么该序列全部值都为整数,否则不都为整数. 由于假 ...
- layer iframe加载单个图片或者加载页面
加载单个图片 layer.open({ type: , title: false, closeBtn: , area: '150px', skin: 'layui-layer-nobg', //没有背 ...
- 结束QQ即时通信垄断,开辟即时通信互联互通instantnet时代
结束QQ即时通信垄断,开辟即时通信互联互通instantnet时代 蓬勃发展的即时通信产业 即时通信(IM)是指可以即时发送和接收互联网消息等的业务. 即时通信.就是瞬间把信息发送给对方,假设不是即时 ...
- 朴素的UNIX之-调度器细节
0.多进程调度的本质 我们都知道UNIX上有一个著名的nice调用.何谓nice,当然是"好"了.常规的想法是nice值越大越好,实际上,nice值越好,自己的优先级越低.那么为何 ...
- SpringBoot项目部署
项目背景 个人博客:http://www.huangyichun.cn/blog/8 采用SpringBoot开发的个人博客,部署到腾讯云服务器上,服务器系统为ubuntu16.04, ...