css基础：表格样式、一级菜单、BFC浮动影响

分手后的思念是犯贱 2022-04-18 03:14 223阅读 0赞

<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>样式之表格</title>  
    <style>  
        body\{  
            margin:0;  
            padding: 0;  
        \}  
        table\{  
    /\*设置文字无法被选中\*/  
            user-select: none;

margin:100px auto;  
            /\*设置该属性实现表格中的边框合并\*/  
            border-collapse: collapse;  
        \}  
        table tr td\{  
            border:1px solid aquamarine;  
        \}  
        table tr\{  
            text-align: center;  
            height:40px;  
        \}  
        table tr:nth-child(2n)\{  
            background-color: aquamarine;  
        \}  
        table tr:not(:first-child):nth-child(2n+1)\{  
            background-color: red;  
        \}  
        table tr:not(:first-child) td:hover\{  
            background-color: burlywood;  
            color:chocolate;  
            /\*设置鼠标移动到此处的鼠标样式\*/  
            cursor: pointer;  
        \}  
        /\*擦掉左下角格子的右边框\*/  
        table>tfoot>tr>td:first-child\{  
            border-right: none;  
        \}  
        /\*擦掉右下角格子的左边框\*/  
        table>tfoot>tr>td:last-child\{  
            border-left: none;  
        \}  
    </style>  
</head>  
<body>  
<table>  
    <tr>  
        <td>序号</td>  
        <td>姓名</td>  
        <td>生日</td>  
        <td>QQ</td>  
        <td>电话号码</td>  
        <td>操作</td>  
    </tr>  
    <tr>  
        <td>1</td>  
        <td>李四</td>  
        <td>1992-06-25</td>  
        <td>123456789</td>  
        <td>13012345678</td>  
        <td>  
            <a href="\#">修改</a>  
        </td>  
    </tr>  
    <tr>  
        <td>2</td>  
        <td>李四</td>  
        <td>1992-06-25</td>  
        <td>123456789</td>  
        <td>13012345678</td>  
        <td>  
            <a href="\#">修改</a>  
        </td>  
    </tr>  
    <tr>  
        <td>3</td>  
        <td>李四</td>  
        <td>1992-06-25</td>  
        <td>123456789</td>  
        <td>13012345678</td>  
        <td>  
            <a href="\#">修改</a>  
        </td>  
    </tr>  
    <tr>  
        <td>4</td>  
        <td>李四</td>  
        <td>1992-06-25</td>  
        <td>123456789</td>  
        <td>13012345678</td>  
        <td>  
            <a href="\#">修改</a>  
        </td>  
    </tr>  
    <tr>  
        <td>5</td>  
        <td>李四</td>  
        <td>1992-06-25</td>  
        <td>123456789</td>  
        <td>13012345678</td>  
        <td>  
            <a href="\#">修改</a>  
        </td>  
    </tr>  
    <tfoot>  
    <tr>  
        <td colspan="3" style="text-align: left;padding-left: 10px;">  
            一共有 XXX 条记录， 当前第 XX 页，共计 XXX 页  
        </td>  
        <td colspan="3" align="right" style="padding-right: 10px;">  
            <a href="\#">首页</a>  
            <a href="\#">上一页</a>  
            <a href="\#">下一页</a>  
            <a href="\#">末页</a>  
            跳转到第 <input type="text" style="width: 30px;text-align: center;">页  
            <input type="button" value="跳转">  
        </td>  
    </tr>  
    </tfoot>  
</table>  
</body>  
</html>

<head>  
    <meta charset="UTF-8">  
    <title>一级菜单</title>  
    <style>  
        body\{  
            margin:0;  
            background-color: burlywood;  
            /\*设置背景图片\*/  
            background-image: url("images2/bottom.gif");  
            /\*背景图片默认会横向纵向铺开\*/  
            /\*设置背景图片不重复铺开\*/  
            background-repeat: no-repeat;  
        \}  
        ul\{

margin:0;  
            padding:0;  
            /\*设置列前面的序列样式类型为空\*/  
            list-style-type: none;  
            padding-left: 50px;  
        \}  
        ul>li\{  
            /\*设置li元素漂浮\*/  
            float: left;  
            width: 100px;  
            text-align: center;  
        \}  
        /\*设置鼠标移动到li标签后li标签背景颜色变化\*/  
        ul>li:hover\{  
            background-color: \#33eeff;  
        \}  
        ul>li>a\{  
            /\*取消超链接的下划线\*/  
            text-decoration: none;  
            color: \#000;  
            /\*指定对象为内联块元素\*/  
            display: inline-block;  
            width: 100%;  
            /\*将文字的行高设置为和当前元素的高度一致就可以实现文字垂直居中\*/  
            height: 60px;  
            line-height: 60px;  
            font-size: 150%;  
        \}  
        ul>li>a:hover\{  
            background-color: orange;  
            color: white;  
        \}  
    </style>  
</head>  
<body>  
<ul>  
    <li><a href="\#">首页</a></li>  
    <li><a href="\#">财经新闻</a></li>  
    <li><a href="\#">体育新闻</a></li>  
    <li><a href="\#">娱乐新闻</a></li>  
    <li><a href="\#">地方新闻</a></li>  
</ul>  
</body>  
</html>

<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>BFC之浮动影响</title>  
    <style>  
        div\{  
            border:1px solid red;

\}  
        .main\{  
            width:960px;  
            margin:0 auto;  
        \}  
        .top\{  
            height: 120px;  
            background-color: \#33eeff;  
        \}  
        .bottom\{  
            height: 200px;  
            background-color: \#daf7ff;  
        \}  
        .content>.contleft\{  
            /\*BFC : 因为浮动的元素脱离的标准的文档流显示模式，可在父元素中使用bfc规范将它们拉回正途 \*/  
            /\*内容部分——靠左边，进行了浮动处理\*/  
            /\*float浮动会将块元素变为行内元素\*/  
            float: left;  
            height:100px;  
            width:180px;  
            background-color: \#00bfe5;  
        \}  
        /\*内容部分——靠右边，进行了浮动处理\*/  
        .content .contright\{  
            float: right;  
            height: 300px;  
            width: 740px;  
            background-color: \#e4ffc6;  
        \}  
        .content\{  
            /\*使用bfc规范将其拉回正途\*/  
            overflow: hidden;  
        \}  
    </style>  
</head>  
<body>  
<div class="main">  
    <div class="top"></div>  
    <div class="content">  
        111111111111111111111111111111111  
        <div class="contleft"></div>  
        222222222222222222222222222222222  
        <div class="contright"></div>  
        1111111111111111111111111111111111  
    </div>  
    <div class="bottom"></div>  
</div>  
</body>  
</html>