小白学前端

第一次学着大家用博客的方法,记下自己的学习历程,由于纯新手向,实在逻辑还很混乱,希望自己能一直坚持下去!

在学javascript DOM编程艺术,到最后一个大综合项目:
梳理一下:

一共5个页面,index,live,contact,photos,about,页面布局为三个div分块header,navigation,content,文件结构为images,styles,scripts加上5个页面

其中的javascript负责了以下功能:

1.The home page has a slideshow.
2.Content is selectively hidden and displayed on the “about” page.
3.Photos are presented in a JavaScript image gallery.
4.The table of tour dates has been styled with JavaScript to make it more readable.
5.The contact form can’t be submitted without filling in the required fields

------今天主要学css:仿写index页面的时候发现基础差的自己真的要崩溃....

于是q&a有:

q1:怎么移三个div到页面的指定位置?

ans:有两个解决方法,1:每一div定义的margin设置相同左移值(这是自己的第一个页面用的方法)  2:在对阅书中的源码时发现的第二种body{margin: 1em 10%;}其中em表示元素的font-size属性的计算值,如果用于font-size属性本身,相对于父元素的font-size,若用于其他属性,相对于本身元素的font-size,嗯,明显第二种要好得多嘛...

q2:怎么把列表变成横状的显示?

ans:以下是直接把css里面的注释复制给来了,也算是一个问题引发的血案了...

 /*
1.单是加上 li:display inline; 可以正常的显示
2.再加上 li a:display block; 会又变成竖排
3.再在 li a加上float left; 直接列表项与content连到一起了
4.最后新添一个ul:overflow hidden; 列表项恢复为正常且与模版差不多一致
*/

/*
2.因为li a的特殊性比li的特殊性大,元素属性被覆盖了
3.之前之所以浮动导致页面的重叠是因为浮动会让元素脱离文档流
而把a元素变成块级元素又加浮动导致导航模块变成空元素
4.overflow定义溢出元素内容区的内容会如何处理,当值为hidden或auto时有一个有用的副作用
会自动清除包含的任何浮动元素
*/

/*由上的疑问:那么为什么要弄这么麻烦了,不直接li:display inline;就可以实现了吗?*/
/*
因为可以实现横状,但实现不了块状,测试了li:display inline-block;没有反应
可能因为li本身是list-ltem,即是半内联元素,block对li修饰是多余的,
对于li元素是不是块元素可参考链接:http://www.jb51.net/web/35449.html
后想到用宽度:li:width 20px;发现a元素基本都重叠了,加大为80px变正常
但反应过来了,只有把a变为block才能实现点击链接为整个block,故还是只有用作者的方法吧
不过有一种加空div元素,再用clear属性
于是测试了一下,结果刚刚在ul元素后加了<br class="clear"/>都没写css就可以了...
(在其中搜了一个问题:ul元素里面是不能放li之外的元素的,因为浏览器可能会识别出错)
*/

/*不过有一点感悟:
前几天看这个,仿写各种出毛病(路还很长很长啊..)而且很挫败,还弄不懂为什么
结果晚上无意打开之前借的css mastery,一下好多问题都豁然开朗了

譬如之前网页是用了一张背景图放top left再水平重复实现背景的,可是图是有高度的,自己来写时发现背景只能实现上面一截啊
后来又再看源码,也没有相关设置啊,折腾了大半时间,想起先取图片的颜色再给body补上这个色不就看不出来吗!终于开窍..
结果在晚上看书的时候,明明书里面就写了这个小方法的嘛....
其实要是自己对css里面颜色敏感一点就能发现,源码里面就是这样做的
而且更说明了要多多看经典书啊,看完head first html再接着看css mastery是很好的
*/

其实这是6号写的,然后回过头的时候发现自己就连昨天仿写的网页,再试着写都碰壁...简直是挫败啊(也怪自己不明就里的就去粘贴复制)

6号下午逛知乎都玩到了3点半,7号下午又一边在网上闲逛,玩游戏...谴责一下自己,记入史册!

最后贴一张第一张自己设计的网页,哈

原文地址:https://www.cnblogs.com/giggling/p/6819182.html