html：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>百度一下</title>
<link rel="stylesheet" href="baidu.css" />
<style type="text/css" title=""></style>
</head>
<body>

        <div class="top">
            <div class="title">
            <span>
                <a class="bold" href="#">新闻</a>&nbsp;
                <a class="bold" href="#" >hao 123</a>&nbsp;
                <a class="bold" href="#" >地图</a>&nbsp;
                <a  class="bold" href="#" >视频</a>&nbsp;
                <a class="bold" href="#">贴吧</a>&nbsp;
                <a href="#">登录</a>
                <a href="#">设置</a>
                <input class="list" type="submit" value="更多产品" name="submit" />&nbsp;
                </span>

</div>

</div>

css:

@charset "utf-8";
/* CSS Document */

.top{
    width:100%;
    height:64px;}
.top>.title{
    height:64px;
    float:right;}
.top>.title>span{
    line-height:64px;
    float:right;}
.top>.title>span>a{
    font-size:13px;
    font-family:"宋体";
    text-decoration:underline;
    color:#333}
.top>.title>span>.bold{
    font-weight:bold;}
.list{
    border:0;
    height:25px;
    width:60px;
    background:#36F;
    color:#fff;}

1  <link rel="stylesheet" href="baidu.css" />

CSS样式一共3中使用方法
——内联式样式表
行样式<div style="color:#000;"></div>
只能操作1个标签，细节灵活
——嵌入式样式表
<head>
<style>
div{color:#000;}
</style>
</head>
——引用式样式表
<head>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>

2  <span>

在CSS定义中属于一个行内元素,在行内定义一个区域，也就是一行内可以被 <span> 划分成好几个区域，从而实现某种特定效果。

<span> 本身没有任何属性。 <div> 在CSS定义中属于一个块级元素 <div> 可以包含段落、标题、表格甚至其它部分。

这使DIV便于建立不同集成的类，如章节、摘要或备注。在页面效果上，使用 <div> 会自动换行，使用 <span> 就会保持同行。

3  <td><input type="submit" value="提交" name="submit" class="btn" >

这是一个表单的提交按钮啊！
type="submit" 类型是“提交”
value="提交" 按钮上显示的值是“提交”
name="submit" 被引用时候的名字是“submit”
class="btn" 不看代码上下文不好说，是引用的类，没有包，大概是默认路径下的类，都没装在包里

4当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？

一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。

    浏览器缺省设置
    外部样式表
    内部样式表（位于 <head> 标签内部）
    内联样式（在 HTML 元素内部）

因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：<head> 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）

5 css 中  字体： color  颜色， font-size  大小，font-family 类型 ,font-weight:bold 加粗，float:right  右对齐，float:left  左对齐，float：center 居中， folat none 取消对齐方式。

font-style: italic  斜体，font-style 字体风格，font-style:normal 正常

百度首页top设置的更多相关文章

  1. html布局小练习（百度首页）

    绝对定位百度首页练习 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...

  2. html+css 百度首页练习

    这几天看完了<css权威指南>,写了个百度页面,不带js的纯静态,主要目的就是掌握页面布局,字体颜色之类的没有深究. 写完了觉得很简单,毕竟一开始觉得只要模仿的像就行,但是缩小了浏览器窗口 ...

  3. 模仿百度首页“元宵节汤圆”动图，并实现360°不停旋转（CSS3的animation动画效果）

    模仿百度首页“元宵节汤圆”动图,并实现360°不停旋转(CSS3的animation动画效果) 效果图: 切图地址: https://ss1.bdstatic.com/5eN1bjq8AAUYm2zg ...

  4. 【教程】手把手教你如何利用工具(IE9的F12)去分析模拟登陆网站(百度首页)的内部逻辑过程

    [前提] 想要实现使用某种语言,比如Python,C#等,去实现模拟登陆网站的话,首先要做的事情就是使用某种工具,去分析本身使用浏览器去登陆网页的时候,其内部的执行过程,内部逻辑. 此登陆的逻辑过程, ...

  5. Selenium2学习-009-WebUI自动化实战实例-007-Selenium 8种元素定位实战实例源代码（百度首页搜索录入框及登录链接）

    此 文主要讲述用 Java 编写 Selenium 自动化测试脚本编写过程中,通过 ID.name.xpath.cssSelector.linkText.className.partialLinkTe ...

  6. 云计算之路-阿里云上：访问阿里云CDN上的图片，自动跳转到百度首页

    昨天有用户向我们反馈一篇博文(一条语句导致CPU持续100%)中的部分图片不能显示,我们的图片访问用的是阿里云CDN,原以为是某个CDN节点不稳定的问题,但在排查时发现这些图片不能显示竟然是因为请求时 ...

  7. 模仿百度首页“元宵节汤圆”动图（js的定时任务：setInterval）

    模仿百度首页“元宵节汤圆”动图:(js的定时任务:setInterval) 原理:需要一张切图,通过不断定位使得图片就像一帧一帧的图片在播放从而形成了动画 效果图: 切图地址: https://ss1 ...

  8. 使用 JavaScript 的 HTML 页面混合、JavaScript 文件引用和 HTML 代码嵌入 3 种方式在 HTML 页面上打印出“点击我进入到百度首页”的超链接

    查看本章节 查看作业目录 需求说明: 使用 JavaScript 的 HTML 页面混合.JavaScript 文件引用和 HTML 代码嵌入 3 种方式在 HTML 页面上打印出"点击我进 ...

  9. 一款基于jQuery的仿百度首页滑动选项卡

    今天给大家分享一款基于jQuery的仿百度首页滑动选项卡.这款选项卡适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览   ...

随机推荐

  1. 【破解】破解ACDSEE15的方法

    1.先从官方下载一个ACDSEE15简体中文版 2.下载注册机(点我下载) 3.修改注册表 修改注册表ACDSee 32位:HKEY_LOCAL_MACHINE\SOFTWARE\ACD System ...

  2. Gson解析复杂JSON对象

    例如以下格式JSON: 建立对应的Java对象,注意内部类要定义成静态的 public class HResult { public String total; public String recor ...

  3. hdu 1111 Secret Code

    http://acm.hdu.edu.cn/showproblem.php?pid=1111 复数除法: #include <cstdio> #include <cstring> ...

  4. 一道有关球赛队员分配的C++程序题目

    题目描述: 两个球队进行比赛,各出三人.甲队为a,b,c三人,乙队为x,y,z三人.已经抽签决定比赛名单. 有人向队员打听比赛安排的名单.a说他不和x比,c说他不和x,z比,请编程找出三队赛手的名单. ...

  5. vs2008如何创建DLL和使用DLL

    一 动态库的编译 文件->新建->项目 选择下一步:然后在应用程序类型里选择DLL 在test项目的头文件里加上test.h;并添加下列代码 在test.cpp里增加如下代码 然后F7编译 ...

  6. 游标的使用实例(Sqlserver版本)

    游标,如果是之前给我说这个概念,我的脑子有二个想法:1.你牛:2.我不会 不会不是理由,更不是借口,于是便要学习,本人属性喜欢看代码,不喜欢看书的人,所以嘛,文字对我没有吸引力:闲话少说啊,给大家提供 ...

  7. 【转】多核CPU运行模式

    多核CPU运行模式主要有以下三种: •非对称多处理(Asymmetric multiprocessing,AMP)——每个CPU内核运行一个独立的操作系统或同一操作系统的独立实例(instantiat ...

  8. hdu 5656 CA Loves GCD（dp）

    题目的意思就是: n个数,求n个数所有子集的最大公约数之和. 第一种方法: 枚举子集,求每一种子集的gcd之和,n=1000,复杂度O(2^n). 谁去用? 所以只能优化! 题目中有很重要的一句话! ...

  9. Java并发框架——AQS堵塞队列管理（一）——自旋锁

    我们知道一个线程在尝试获取锁失败后将被堵塞并增加等待队列中,它是一个如何的队列?又是如何管理此队列?这节聊聊CHL Node FIFO队列.  在谈到CHL Node FIFO队列之前,我们先分析这样 ...

  10. Oracle 10g轻量级客户端安装[转]

    http://www.oracle.com/technetwork/cn/topics/winsoft-095945-zhs.html oracle技术官方网 http://www.oracle.co ...