为了账号安全,请及时绑定邮箱和手机立即绑定

HTML/CSS基础课程学习手记

标签:
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/>
暂时总结就只有这么多,希望在以后的学习中能更加温故知新,更上一层楼,而目前的目标就是建立一个自己的主页,加油!

点击查看更多内容
1人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消