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. 什么是dtd文件，为什么需要dtd

    DTD为英文Document Type Definition,中文意思为"文档类定义".DTD肩负着两重任务:一方面它帮助你编写合法的代码,另一方面它让浏览器正确地显示器代码.也许 ...

  2. SVN上传代码时代码失败

    Description : You are not authorized to access the files in the repository.Suggestion : You might be ...

  3. ng-repeat 与ng-switch的简单应用

    效果如下图所示: 使用表格显示用户信息,当点击某条用户信息时,在其下方展开一行进行展示. index.html <!DOCTYPE html> <html ng-app=" ...

  4. Qt Creator快捷键大全，附快捷键配置方法

    一.快捷键配置方法:   进入“工具->选项->环境->键盘”即可配置快捷键.   二.常用默认快捷键:   编号 快捷键 功能 1 Esc 切换到代码编辑状态 2 F1 查看帮助( ...

  5. GetSystemTime API可以得到毫秒级时间

    用Now返回的日期格式中年只有2位,即2000年显示为00, 这似乎不太令人满意. 此外Now和Time都只能获得精确到秒的时间,为了得到更精确的毫秒级时间,可以使用API函数GetSystemTim ...

  6. 《Programming WPF》翻译 第5章 2.内嵌样式

    原文:<Programming WPF>翻译 第5章 2.内嵌样式 每一个“可样式化”的WPF元素都有一个Style属性,可以在内部设置这个属性--使用XAML属性-元素的语法(在第一章讨 ...

  7. linux centos6.4 php连接sql server2008

    1.安装SQL Server驱动freetds yum search freetds yum install freetds php-mssql 或者下载编译安装   2.修改/etc/freetds ...

  8. Linux下core文件产生的一些注意问题

    前面转载了一篇文章关于core文件的产生和调试使用的设置,但在使用有一些需要注意的问题,如 在什么情况 才会正确地产生core文件. 列出一些常见问题: 一,如何使用core文件 1. 使用core文 ...

  9. mybatis源代码分析：mybatis延迟加载机制改进

    在上一篇博客<mybatis源代码分析:深入了解mybatis延迟加载机制>讲诉了mybatis延迟加载的具体机制及实现原理. 可以看出,如果查询结果对象中有一个属性是需要延迟加载的,那整 ...

  10. Inorder Successor in BST 解答

    Question Given a binary search tree and a node in it, find the in-order successor of that node in th ...