学习前端第二周

一、本周通过对百度前端技术学院网页的制作，进一步巩固了对HTML与CSS，但其中还有很多不足。

1.网页导航栏用的<table>标签，经过对原网页的了解，理解了用<ul>标签可以使导航栏更美观，且容易使用<div>标签进行装饰。

2.网页做完之后没有检查，因为制作周期有点长，前后对HTML与CSS的理解不同，代码的风格是前面简单，后面稍微有点样子，造成代码给人感觉不完善，且完成后给人的感觉是前面一部分居中，后面一部分居中，之后一定会在工作完成后对全部代码进行整理。

3.因为对触发事件理解不够，网页图片触发出现BUG，下周要查阅资料进行完善。

<!DOCTYPE html>
<html>
<head>
<script>
function bigImg(x)
{
x.style.height="180px";
x.style.width="180px";
}
function normalImg(x)
{
x.style.height="128px";
x.style.width="128px";
}
</script>
</head>
<body>
<img onmousemove="bigImg(this)" onmouseout="normalImg(this)" border="0" src="/i/eg_smile.gif" alt="Smiley" >
<p>函数 bigImg() 在鼠标指针移动到图像上时触发。此函数放大图像。</p>
<p>函数 normalImg() 在鼠标指针移出图像时触发。此函数把图像的高度和宽度重置为正常尺寸。</p>
</body>
</html>

此次网页完成用到的触发事件。

4.banner部分图片没有从原网页下载，使整个界面看起来很简陋。用F12激活开发者模式，可以学习原网页代码。SOURCES中有原网页用到的图片等资源。

二、疑难积累

1.position几个属性作用：

position的常见四个属性值：relative,absolute,fixed,stactic。通常与left,top,right组合使用。

2.浮动相关知识
    float属性的取值：left：元素向左浮动。 right：元素向右浮动。 none：默认值。元素不浮动，并会显示在其在文本中出现的位置。
浮动的特性：
    浮动元素会从普通文档流中脱离，但浮动元素影响的不仅是自己，它会影响周围的元素对齐进行环绕。
    不管一个元素是行内元素还是块级元素，如果被设置了浮动，那浮动元素会生成一个块级框，可以设置它的width和height，因此float常常用于制作横向配列的菜单，可以设置大小并且横向排列。
浮动元素的展示在不同情况下会有不同的规则：
    浮动元素在浮动的时候，其margin不会超过包含块的padding。PS：如果想要元素超出，可以设置margin属性
    如果两个元素一个向左浮动，一个向右浮动，左浮动元素的marginRight不会和右浮动元素的marginLeft相邻。
    如果有多个浮动元素，浮动元素会按顺序排下来而不会发生重叠的现象。
    如果有多个浮动元素，后面的元素高度不会超过前面的元素，并且不会超过包含块。
    如果有非浮动元素和浮动元素同时存在，并且非浮动元素在前，则浮动元素不会高于非浮动元素。

浮动元素会尽可能地向顶端对齐、向左或向右对齐。

3.CSS 引入的方式有哪些? link 和import 的区别是?
    有四种：内联(元素上的style属性)、内嵌(style标签)、外链(link)、导入(import)
    link和import的区别：
    link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；import属于CSS范畴，只能加载CSS。
    link引用CSS时，在页面载入时同时加载；import需要页面网页完全载入以后加载。
    link是XHTML标签，无兼容问题；import是在CSS2.1提出的，低版本的浏览器不支持。

link支持使用Javascript控制DOM去改变样式；而import不支持。

4.JS

myFunction(变量1,变量2)

改变HTML内容：document.getElementById("ID标签").innerHTML="啦啦啦";

改变HTML图像：function changeImage()
{
element=document.getElementById('myimage')
if (element.src.match("bulbon"))
{
element.src="/i/eg_bulboff.gif";

}

else
{
element.src="/i/eg_bulbon.gif";
}
}
</script>

改变HTML样式：<p id="demo">JavaScript 能改变 HTML 元素的样式。</p>
<script>
function myFunction()
{
x=document.getElementById("demo") // 找到元素
x.style.color="#ff0000"; // 改变样式
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>

猜你喜欢