导航条

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
	<title></title>
	<style type="text/css">
        nav {
            /*背景颜色*/
            background-color: black;
            /*字体颜色*/
            color: white;
        }

        .nav {
            /*列表样式标记 取消字体下面的横线和text-decoration：none一样*/
            list-style-type: none;
            /*文本居中对齐*/
            text-align: center;
        }

        .nav li {
            /*盒模型形态内联*/
            display: inline;
            /*字体左右间距20像素*/
            margin: 0 20px;
        }
    </style>

</head>
<body>

<nav>
    <ul class="nav">
        <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>
</nav>

</body>
</html>

效果

笑脸

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /** 笑脸 **/
        .face {
            width: 200px;
            height: 200px;
            background-color: black;
            /*圆角百分之50*/
            border-radius: 50%;
            /*上内边距顶点到红杠顶点的50像素*/
            padding-top: 50px;
            /*可以忽略边框厚度对原始尺寸的影响。*/
            box-sizing: border-box;
            /*对其方式居中*/
            text-align: center;
        }
        /*    头巾*/
        .hair {
            height: 30px;
            background-color: red;
            /*上左圆角*/
            border-top-left-radius: 50%;
            /*上右圆角*/
            border-top-right-radius: 50%;
        }
        /*眼睛*/
        .eye div {
            /*俩眼睛间距20像素*/
            margin: 0 20px;
            /*盒模型内联宽高各30像素*/
            display: inline-block;
            width: 30px;
            height: 30px;
            background-color: white;
            /*圆角百分之50*/
            border-radius: 50%;
        }

        .mouth {
            /*居中 上下间距50像素 上面有居中了 可以不写 outo*/
            margin: 50px auto;
            width: 100px;
            height: 20px;
            background-color: white;
            border-radius: 5px;
        }
    </style>
</head>
<body>
<section class="face">
    <div class="hair"></div>
    <div class="eye">
        <div></div>
        <div></div>
    </div>
    <div class="mouth"></div>
</section>
</body>
</html>

效果

棱形

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        section div {
            /*内联*/
            display: inline-block;
            width: 0;
            height: 0;
            margin: 1px;
        }

        .a {
            /*左 下 颜色默认*/
            border-left: 50px solid transparent;
            border-bottom: 50px solid red;
        }

        .b {
            /*右 下 颜色默认*/
            border-right: 50px solid transparent;
            border-bottom: 50px solid red;
        }

        .c {
            /*左 上 颜色默认*/
            border-left: 50px solid transparent;
            border-top: 50px solid red;
        }

        .d {
            /*右 上 颜色默认*/
            border-right: 50px solid transparent;
            border-top: 50px solid red;
        }
    </style>

</head>
<body>

<section class="top">
    <div class="a"></div>
    <div class="b"></div>
</section>
<section class="bottom">
    <div class="c"></div>
    <div class="d"></div>
</section>

</body>
</html>

效果

表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table {
            /*单元格 过长处理 fixed 自适应*/
            table-layout: fixed;
            width: 800px;
        }

        table, td, th {
            border: 1px solid red;
            /*表格边框居中*/
            margin: 0 auto;
            /*单元格边框合并*/
            border-collapse: collapse;
            /*文本居中*/
            text-align: center;
        }
    </style>
</head>
<body>

<table>
    <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
        <th>备注</th>
    </tr>
    <tr>
        <td>001</td>
        <td>赵四</td>
        <td>男</td>
        <td>58</td>
        <td>亚洲舞王</td>
    </tr>
    <tr>
        <td>002</td>
        <td>大脚</td>
        <td>女</td>
        <td>18</td>
        <td>大脚超市</td>
    </tr>
    <tr>
        <td>003</td>
        <td>广坤</td>
        <td>男</td>
        <td>58</td>
        <td>广坤山货</td>
    </tr>
    <tr>
        <td>004</td>
        <td>谢飞机</td>
        <td>男</td>
        <td>5</td>
        <td>这是谢广坤的孙子，是个非常神奇的小孩</td>
    </tr>
    <tr>
        <td>005</td>
        <td>谢兰</td>
        <td>女</td>
        <td>38</td>
        <td>这是谢广坤的女儿</td>
    </tr>
</table>

</body>
</html>

效果

CSS练习题

导航条

笑脸

棱形

表格