html+web+form+id,Web基础之HTML + CSS

终于把韩顺平老师的《轻松搞定网页设计html+css+JavaScript》看完了，之前做毕设项目的时候就被前台的东西弄的头疼，学完这个系列感觉稍有所成。顺便推荐一下，韩顺平老师确实不错，他讲的Linux、Java、SSH都相当值得一看。学完东西要总结总结，下面结合平时做的demo做些笔记。

用MyEclipse进行开发，可以用alt + / 进行提示；

多查w3school.htm帮助文档，比如某个标签有什么属性、方法等；

基本html元素：

table：

1
2	3	4
	5	6
7	8	9
	10	11

form：

名字：

密码：

西瓜

菠萝

男

女

   // hidden 输入框可以用来传值，不影响页面布局

--请选择--

Beijing

Shanghai

framset:

Demo 1: 结合ul 和 li排列图像：

• 卡卡西

box2.css:

.container{

width:800px;

height:800px;

border:1px solid red;

margin:0px auto;

}

.faceul{

width:760px;

height:480px;

border:1px solid green;

list-style-type: none;

margin: 0px 0px;

}

.faceul li{

float:left;

margin-right: 10px;

margin-top: 10px;

}

.faceul img{

width:80px;

height:82px;

}

.faceul a{

font-size: 12pt;

margin: 5px 10px;

text-decoration: none;

color:green;

font-style: italic;

}

a:hover{

color:red;

}

Demo 2：id选择器和类选择器同时修饰时，id选择器为主，span默认显示是inline(不换行)，div默认显示block(全部占据所在行)，但是可以改变display属性来更改。

梁山英雄排行榜

宋江

卢员外

吴用

豹子头

大刀关胜

Hello,eveyone1

Hello,eveyone2

Hello,eveyone3

Hello,eveyone4

这是span block

这是div inline

homework.css:

.style1{

font-size:24px;

color:yellow;

}

.style2{

color:black;

font-size:15px;

background-color:gray;

}

#head{

color:red;

font-style:italic;

}

#middle{

font-style:italic;

text-decoration:underline;

}

a:link{

color:red;

font-size:24px;

}

a:hover{

text-decoration:underline;

color:green;

font-size:40px;

}

.s1{

background-color:pink;

display:block;

}

.s2{

background-color:gray;

display:inline;

}

Demo 3：仿优酷页面布局：

优酷牛人

更多牛人

• Michael
• 小演框
• 道听途说

明星空间

更多空间

• 爱心月
• 城堡
• 卢正雨

优酷公益

更多公益

• 扶贫基金会
• 李彬彬
• 生态中国