2020.12.22马先霞

学员日志 672 4年前 0 云创动力

1、知识点

二、列表

有序列表

1、type="1" 数字风格表示列表顺序

2、type="a" 小写字母风格表示列表顺序

3、type="i" 罗马数字风格表示列表顺序

无序列表

1、type="disc" 实心圆表示列表顺序

2、type="square" 矩形表示列表顺序

3、type="circle" 空心圆表示列表顺序

4、

无序列表和有序列表内部的列表项目都使用 li 元素来表示

例如

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>块元素</title>
        <title>列表</title>
        
        
    </head>
    <body>
        <h2>商品信息</h2>
        <h4>商品类别</h4>
        <hr/>
        
        <ul>
            <li>数码</li>
            <ul type="circle">
                <li>笔记本</li>
                <li>手机</li>
                <li>家电</li>
            </ul>
            <li>美容</li>
            <li>服装</li>
        </ul>
        
        
        
        
        <hr />
        <dl>
                     <dt>联想电脑</dt>
                     <dd>产品型号：联想IdeaPad Y450A-TFU(NBA纪念版)</dd>
                     <dd>价格：4999元</dd>
                     <dd>所在地：北京</dd>
        <hr/>
                    
        <dl/>           
                     <h1>购物流程</h1>
        
        <ol>
                     <ol type="1">
                        <li>确认购买信息</li>
                        <li>付款到贵美</li>
                        <li>确认收货</li>
                        <li>付款到商家</li>
                        <li>双方评价</li>
        </ol>
                     
                     
    </body>
</html>

二、表格

表格由标签来定义，每个表格均有若干行（由标签定义)，每行被分割为若干个单元格（由标签来定义）。

例如

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>表格</title>
    </head>
    <body>
        <table width="500px"border="1">
            <tr>
                
                    <td colspan="4"><h2>商品类目</h2></td>
            </tr>
            <tr>
                <td rowspan="3">虚拟</td>
                <td>移动</td>
                <td>联通</td>
                <td>小灵通</td>
            </tr>
            <!--第三行-->
            <tr>
                <td>充值卡</td>
                <td>彩票</td>
                <td>双色球</td>
            <!--第四行-->
            </tr>
            <tr>
                <td>梦幻</td>
                <td>QQ</td>
                <td>游戏币</td>
            </tr>
            <!--第五行-->
            <tr>
                <td rowspan="3">护肤</td>
                <td>美容护肤</td>
                <td>美体</td>
                <td>精油</td>
            </tr>
            <!--第六行-->
            <tr>
                <td>彩妆</td>
                <td>香水</td>
                <td>美发</td>
            </tr>
            <!--第七行-->
            <tr>
                <td>个人护理</td>
                <td>保健</td>
                <td>按摩器械</td>
            </tr>
        
        </table>
        
    </body>
</html>

三、echarts

1、echarts 使用：引入 echarts.js 文件、设置 echarts 容器、自定 echarts 配置、设置 echarts 配置

2、echarts 配置
// 指定图表的配置项和数据
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
}]
};
3、设置 option
myChart.setOption(option);

例如

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>echarts</title>
        <!-- css 样式 -->
        <style>
            /* css选择器中的 id选择器 */
            #echarts{
                width: 800px;
                height: 800px;
            }
            
        </style>
        <!-- 1.引入echarts的js -->
        <script src="js/echarts.min.js"></script>
        <!-- 引入 echarts 主题-->
        <script src="js/macarons.js"></script>
    </head>
    <body>
        
        <!-- 2.容器 -->
        <div id="echarts"></div>
        
        <!-- 自定义的 js -->
        <script>
            /*
                echarts 使用：
                   1. 引入 echarts.js 文件
                   2. 设置 echarts 容器
                   3. 自定 echarts 配置
                   4. 设置 echarts  配置
            
            */
            
            // 获取到 echarts 容器
            var div = document.querySelector("#echarts");
            // 初始化 echarts
            var myChart = echarts.init(div,'macarons');
            
            // 3. echarts 配置
            // 指定图表的配置项和数据
        option = {
            title: {
                text: '某站点用户访问来源',
                subtext: '纯属虚构',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: [
                        {value: 335, name: '直接访问'},
                        {value: 310, name: '邮件营销'},
                        {value: 234, name: '联盟广告'},
                        {value: 135, name: '视频广告'},
                        {value: 1548, name: '搜索引擎'}
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
            // 4. 设置 option
            myChart.setOption(option);
        </script>
    </body>
</html>

二、心得体会

在今天的学习中我知道了代码也可以写出我们平时所用的表格、按钮等功能的实现，也了解到了代码可以写出3D等视效的图，是在通过echarts的基础上来实现我们想要的效果。也知道了简单网页的实现我们也可以操作出来。在今天的学习中也知道了网页上自动播放的由来。今天的听课也是很感兴趣没有像以前的专业课那样无味更多的是有趣和想要深入了解。

2020.12.22马先霞

1、知识点

二、心得体会

热门资源

评论

取消回复

1、知识点

二、心得体会

热门资源

相关推荐

评论

取消回复