学习途径：

• 1.培训
• 2.菜鸟教程
• 3.CSDN

学习内容：

html,CSS：

• html为超文本标记语言，并非编程语言
• 以标签的形式声明内容，标签必须闭合，成对出现
• vs code自动补全真好使
• CSS用来排版，在语句内用style=""，在文件中声明id或class用#+id/.+class后在头标签处声明，外部文件没用过
• 可以在body处声明背景

标签：

• <code class="prettyprint" ><title>document</title>\
  在网页标签页中显示名为document的标题，没啥用
• <code class="prettyprint" ><h1></h1>;<p></p>\
  标题，段落，标题有六个等级，默认竖直方向排布
• <code class="prettyprint" ><a></a>\
  超链接，用href指定新页面的路径，在一对标签中可以插入图片或文字，使其可以指向新页面
• <code class="prettyprint" ><img></img>\
  图片，用src指定文件路径，alt属性在图片加载不出来时显示内容，一般要写但太多了，长宽一定要设置，要不然排版脑溢血
• <code class="prettyprint" ><ul><li></li></ul>\
  ul声明无序列表，li声明条目

布局：

div标签，可以用CSS声明样式，用于设置容器的宽和高；\
float标签，用于设置容器的排布方向\
若要换行，应当用clear清除float\

导航栏：

本质是个无序列表，通过超链接跳转到不同页面

        ul {//设置无序列表样式
        list-style-type: none;//去除无序列表前面的小点
        margin: 0;
        padding: 0;
        width: 200px;
        background-color: #f1f1f1;
        }

        li a {
        display: block;//将整个快变为可点击对象
        color: #000;
        padding: 8px 16px;
        text-decoration: none;
        }

        li a.active {//将当前页面的标签设置为active类，变为绿色
        background-color: #4CAF50;
        color: white;
        }

        li a:hover:not(.active) {//将其他的页面设置为灰色
        background-color: #555;
        color: white;
        }
</style>

yysy抄完改了下能看的懂，但是自己写估计写不出来

JavaScript

在头标签中用``````定义func，可在body标签中使用\

鼠标事件

    <script>
        function bigImg(x){
            x.style.height="360px";
            x.style.width="270px";
        }

        function normalImg(x){
            x.style.height="280px";
            x.style.width="210px";
        }
    </script>

这两个函数应该是内部库的，我试着改名之后发现达不到想要的效果\
在img标签中通过\
onmouseover="bigImg(this)" 将鼠标移至图片上触发\
onmouseout="normalImg(this)"将鼠标移开触发

总结

布局和样式比较难搞，不过样式和移动线性布局差不多，有现成的模板可以参考\
这次前端鸽了，下次鸽移动

问题

怎么实现根据另一容器的位置进行某一容器的布局，就比如实现在图片下方添加段落，根据图片位置改变而改变

蒋晓宇