visual studio
word
网站制作的步骤：（1）创建一个完整网站目录结构 Meishimeike（文件夹）：管理当前网站中所有的文件。 Index.html/default.html(文件)：当前网站的入口文件。 Css（文件夹）：管理当前网站中所有Css样式的文件。 Js （文件夹）：管理当前网站中所有js 的文件。 Image（文件夹）：管理当前网站中所有的图片。（2）准备一张PSD（用于转换为Html页面的设计图）（3）确定一种开发方式： A) 从上到下的开发方式（比较适合新手） B）先确定结构再在结构中填充内容（比较适合老司机）（4）CSS初始化：（清除浏览器中标签的一些默认样式，也是一个网站在不同的打开网站一样）A）去掉标签的默认margin和padding。.div等等 {margin=0；padding=0；}B）去掉图片的边框 Img(border=none;)C）去掉ol 和 ul 的前面的小点。 Ul ,ol { list- style：none；}D）去掉input默认的标签padding-top padding-bottom border Input{ padding-top=0； padding-bottom=0；border=none；} E）去掉a 标签的下划线 a { text-decoration= none；}F）给body设置一个统一的字体样式和背景颜色 Body{ font：normal normal 12px “宋体”；color=#4c4c4c（这个颜色黑灰）;Background-color：（是自己网站设置的背景颜色，防止用户设置的颜色和自己网站的颜色相冲突，这样的话就很丑。）} 第一个是font-style（字体样式（斜体等）） 第二个是font-weight（字体加粗） 第三个是font-size 字体大小（经常用到的） 第四个是font-family （微软雅黑、宋体等） G）浮动 左浮动： .z { float：left；} 右浮动： .y{float：right；} 清楚浮动： .clearfix：after{content：“”； height：0；line-height：0；display：block；visibility：hidden；clear：both；} // 伪类清除 . clearfix{zoom：1；} （让IE6浏览器可以兼容）（5）开始网站代码的书写v 完成网站所有统一的头部和尾部，统一放在下面的文件中去temple.html和temple.css中。 目录 第二章（html语法）1.1乱码问题当输入页面的文字成为乱码的时候，可以在
之间加 其中charset是定义网页字符集属性的。出现的乱码是因为字符集搞错了。属性值是“UTF-8”。“UTF-8”一个字符代表3个字节。其中属性值有很多种。点击开发工具——格式——编码字符集就有很多。 1.2清楚浮动 clear:both; 只要是定义的与原来的不一样就用清除浮动。比如自己做的第一个项目1.3字体的高度line-height: 21px;/*字体的高度*/1.4 超链接 超链接的颜色需要单独定义一下，而且下划线去掉。 .top a { /*超链接的颜色没有变化，需要单独定义一下*/ color:#d8d8d8; text-decoration:none;/* 超链接下划线去掉 */ } 注意！！！ 目前有一个问题，当超链接定义鼠标移上去就显示的颜色，再定义去掉下划线就不管用了。？？？ 1.5鼠标移上去变颜色 .top a:hover { /*鼠标移动上去颜色变化用“hover”*/ color:yellow; }1.6图片重复 background:url(images/s_z.gif) no-repeat ; /* no-repeat 为图片不重复*/ 如果后面的repeat-x就是图片向X轴重复。 有实例瞅瞅。1.7 将图片转化为可以按的按钮 在图片上面加button。.s_y button { width:66px; height:36px; background:none; border:0px; cursor:pointer; /*这个属性是鼠标移上去有小手的非常重要的属性*/1.8指针变小手 cursor:pointer;/*这个属性是鼠标移上去有小手的非常重要的属性*/1.9三个图片之间的空隙解决