百度首页top设置

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> 
                <a class="bold" href="#" >hao 123</a> 
                <a class="bold" href="#" >地图</a> 
                <a class="bold" href="#" >视频</a> 
                <a class="bold" href="#">贴吧</a> 
                <a href="#">登录</a>
                <a href="#">设置</a>
                <input class="list" type="submit" value="更多产品" name="submit" /> 
                </span>

</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设置

相关文章