CSS实现设计稿Photoshop案例

案例"/>

CSS实现设计稿Photoshop案例

设计稿案例

1.常见的图片格式

a. jpg图像：对色彩的信息保留较好，产品类的图片常用jpg格式

b. gif图像：实际经常用于一些图片小动画效果

c. png图像：切成背景透明的图片

d. 可以之间从上面复制文字，获得照片，还可以测量大小和距离

2.PS切图

2.1 图层切图

打开psd设计稿

• 选中需要的图层：图层菜单 -> 合并图层(ctrl+e)
• 右击 -> 快速导出为png

2.2 切片切图

• 利用切片工具手动划出
• 导出选中的图片

文件菜单 -> 导出 -> 储存为Web设备所用格式 -> 选择我们要的图片样式 (保存为JPEG模式 ，选择的切片)

2.3 PS插件切图

Cutterman是一款运行在Photoshop中的插件，能够自动将你需要的图层进行输出，以代替传统的手工"导出web所用格式"以及使用切片工具进行挨个切图的繁琐流程

2.4.案例准备工作

1.创建study目录文件夹(用于存放这个页面的相关内容)

2.用vscode打开这个目录文件夹

3.study目录内新建images文件夹，用于保存图片

4.新建首页文件index.html(以后我们的网站首页规定为index.html)

5.新建style.css样式文件，(外链样式表)

6.将样式引入到HTML页面文件中

7.样式表写入清除内外边距的样式，来检测样式表时候引入成功

margin: 0 auto;
padding: 0; 

2.5 CSS属性书写顺序

• 布局定位属性: display / position / float / clear / visibility /overflow

• 自身属性: width / height /margin / padding / border / background

• 文本属性: color / font / text-decoration / text-align / vertical-align / white-space / break-word

• 其他属性(CSS3): content / cursor / border-radius / box-shadow / text-shadow / background: linear-gradient

.jdc {display: block;position: relative;float: left;width: 100px;height: 100ox;margin: 0 10px;padding: 20px 0;font-family: Arial,'Helvetica Neue', Heletica, sans-serif;color: #333;background: rgba(0,0,0,5);border-radius: 10px;
}

3. 制作在线案例

3.1 确认定版型

这个页面的版心是1200px，每个版心都要水平居中对齐，可以定义版心为公共类

.w {width: 1200px;margin: auto;
}

3.2 页面的头部制作

.header {height: 42px;background-color: black;/*注意此地方会层叠w里面的margin*/margin: 30px auto;
}

导航栏nav注意点：实际开发中，我们不会直接用链接a而是li包含**链接(li+a)**的做法

• li+a 语义跟清晰，一看就是有条理的列表内容
• 如果直接用a，搜索引擎容易辨别为有堆砌关键字嫌疑(降权)，从而影响网站排名
• 给li加浮动，因为li是块级元素，需要一行显示
• 这个nav导航栏可以不给宽度，将来可以继续添加其余文字
• 因为导航栏里面文字不一样多，所以最好给链接a左右padding撑开盒子，而不是指定宽度

<div class="nav"><ul><li><a href="#">首页</a></li><li><a href="#">首页</a></li><li><a href="#">首页</a></li></ul>
</div>

//去除小li前的·，用list-style: none;
.nav {float: left;margin-left: 60px;
}
.nav ul li {float: left;margin: 0 15px;
}
.nav ul li a {display: block;  //转为行内块元素height: 42px;padding: 0 10px;line-height: 42px; //垂直居中font-size: 18px;color：black;text-decoration: none;
}
.nav ul li a:hover {border-bottom: 1px solid blue; //鼠标经过后显示下边框color: blue;
}

search搜索框

一个search大盒子里面包含2个表单。

一个是input文本框，第二个是button按钮。

<div class="search"><input type="text" value="输入关键词"><button></button>
</div>

.search {float: left;width: 412px;height: 42px;background-color: skyblue;margin-left: 50px;
}
.search input {float: left;width: 345px;height: 40px;border: 1px solid skyblue;border-right: 0;color: black;font-size: 14px;padding-left: 15px; //会撑开，需要改width的值
}
.search button {float: left;  //两个行内块元素直接会有空隙width: 50px;height: 42px;background: url(images/button.png);border: 0;  //把按钮的默认边框手动去掉
}

3.3 banner制作

<div class="banner"><div class="w">   //版心<div class="subnav">  //侧导航栏<ul><li><a href="#">前端开发<span> > </span></a></li><li><a href="#">前端开发<span> > </span></a></li><li><a href="#">前端开发<span> > </span></a></li><li><a href="#">前端开发<span> > </span></a></li></ul></div><div class="course">  //制作右侧课程表<h2>我的课程表</h2><div class="bd"><ul><li><h4>xxxxxxx</h4><p>xxxx</p></li><li><h4>xxxxxxx</h4><p>xxxx</p></li><li><h4>xxxxxxx</h4><p>xxxx</p></li></ul><a href="#" class="more"></a></div></div></div>
</div>

.banner {height: 421px;background-color: blue;
}
.banner .w {height: 421px;background: url(image/banner2.png) no-repeat top center;
}
.subnav {float: left;width: 190px;height: 421px;background: rgba(0,0,0,0.3)  //透明
}
.subnav ul li {height: 45px;line-height: 45px;padding: 0 20px;
}
.subnav ul li a {font-size: 14px;color: white;
}
.subnav ul li a:hover {color: skyblue;
}
.subnav ul li a span {float: right;
}
.course {float: rightwidth: 30px;height: 300px;background-color: black;//浮动的盒子不会有外边距合并的问题margin-top: 50px;
}
.course h2 {height: 48px;background-color: skyblue;text-align: center;line-height: 48px;font-size: 18px;color: white;
}
.bd {padding: 0 20px;
}
.bd ul li {padding: 15px 0;border-bottom: 1px solid black;
}
.bd ul li h4 {font-size: 16px;color: black;
}
.bd ul li p {font-size: 12px;color: black;
}
.bd .more {display: block;height: 38px;border: 1px solid blue;margin-top: 5px;text-align: center;  //水平居中line-height: 38px;  //垂直居中color: white;font-size: 16px;font-weight: 700;
}