HTML/CSS基础课程学习手记

<h1>总结</h1>
断断续续，终于将这们html/css基础学完了，虽然过程比较漫长，布局的时候也很费力，但最终受益匪浅，总结已经学习了解但不能算彻底掌握的有如下几点:
<h2>1.标签</h2>
块状、内联和嵌入等类别的标签基本用法及各自特点，比如块状独占一行，内联不能设置行高宽度高度等，以及各类标签的转换通过display实现等等。
<hr/>
<h2>2.简单功能的实现</h2>
<ul>
<li>a.用户登陆界面的设置——input标签的使用</li>
<li>b.交互中选择功能的实现——select、option、checkbox、radio标签的使用</li>
<li>c.表单的制作——table、tr、caption、th、td标签的使用</li>
<li>d.鼠标移入移出改变图片、文字属性的实现——</li>
</ul>

<script>
function mouseOver()
    {
    document.image1.class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="图片1.gif"
    }
function mouseOut()
    {
    document.image1.class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="图片2.gif"
    }
function bigImg(x)
    x.style.height="  ";
    x.style.width="    ";
}
/*等其他函数的使用*/
</script>

<hr/>
<h2>3.样式与布局</h2>
从margin、padding到float、position，不同的设置是完全不一样的,布局考研一个人的耐心。
<li>最基础的文字排版</li>
text-align、letter-spacing、word-spacing、text-indent、line-height等
<li>登陆界面始终在页面居中</li>

<style>
html, body{
height: 100%;margin: 0px;padding: 0px; min-width: 1200px;
}
.login_wrap{
width:960px;height:inherit;position:relative;margin:0 auto;
}
.login_box{
width:400px;height:400px;position:absolute;left:50%;top:40%;margin:-200px 0 0 -200px;
}
</style>

<li>通过margin、position实现层叠等</li>
<hr/>
暂时总结就只有这么多，希望在以后的学习中能更加温故知新，更上一层楼，而目前的目标就是建立一个自己的主页，加油！