慕课网电商网站开发实例（1）_慕客案例-优快云博客

博主学习前端后，选择慕课网实战项目开启电商网站开发。介绍拿到PSD后的开发流程，包括通用开头、分区编辑、CSS样式编写和兼容性检查。还给出公共CSS文件内容，以及一些样式补充技巧，如去掉a下划线、省略号显示等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

学了一段前端，想找个项目练一下手，看到慕课网上有一个评分很高的实战项目，于是开始了电商网站开发之旅。

先下载了psd图片：https://www.imooc.com/video/1453

在资料下载里面就可以下载啦！

拿到PSD后的开发流程：

1，通用开头：：大致浏览PSD熟悉网站结构与内容；

建立存根文件夹；使用编辑工具建立原始文件；

编辑html，reset.css，index.css的基础部分；

2，PSD分区编辑：：合理分区head,body,foot；

分区编辑，先搭建html结构与内容；

3，CSS样式编写：：先大小，后颜色

先位置，后图片

…………

4，兼容性检查：：exm1:for IE6的input text边框和光标问题

解决办法，通过计算更改尺寸设计或者使用css hack（line-height:35px\9;）

并且写了一个公共的css文件，包括：

body,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6,p,input,select,textarea,form{margin: 0; padding: 0;}

body{font:14px/1.5 "宋体";}

img{border:none;}

ul,ol{list-style:none;}

input,select,textarea{outline:none;border:none;background:none;}

textarea{resize:none;}

a{text-decoration:none;}

/*清浮动*/

.clearfix:after{content:"";*display:block;*clear:both;}

.clearfix{zoom:1;}

补充：

本例只用上面选择 ::selection {background-color:#669900; color:#ffffff; text-shadow:none;}

::-moz-selection {background-color:#669900; color:#ffffff;text-shadow:none;}
去掉a的下划线 a {blr:expression(this.onFocus=this.blur())}
/*if IE*/ a {outline:none;}/*if 火狐等现代浏览器浏览器*/
省略号 white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
英文自动换行 word-break: break-all;
强制不换行 white-space:nowrap; contenteditable="true"
-------------------------------------------------
clearfix完整版 .clearfix:before,.clearfix:after { content:""; display:table;} .clearfix:after{clear:both;} .clearfix{*zoom:1;} -------------------- expression(this.onFocus=this.blur())