PS基本操作以及CSS盒子综合案例

池煦林

于 2024-02-04 20:22:04 发布

阅读量343

点赞数 7

文章标签： css 前端

本文链接：https://blog.csdn.net/2301_80121213/article/details/136031902

版权

本文介绍了网页美工如何使用Photoshop进行图片处理和切图，包括基本操作如打开文件、使用标尺和调整视图，以及CSS布局中的盒子模型、类名选择和margin/padding的区别。同时给出了HTML和CSS代码示例，展示了如何去除列表项目符号并创建简洁的快报模块。

摘要由CSDN通过智能技术生成

因为网页美工大部分效果图都是利用 PS（Photoshop）来做的，所以大部分切图工作都是在 PS 里面完成。

部分操作：

文件→打开 ：可以打开我们要测量的图片
Ctrl+R：可以打开标尺，或者 视图→标尺
右击标尺，把里面的单位改为像素
Ctrl+ 加号(+)可以放大视图， Ctrl+ 减号(-)可以缩小视图
按住空格键，鼠标可以变成小手，拖动 PS 视图
用选区拖动可以测量大小
Ctrl+ D 可以取消选区，或者在旁边空白处点击一下也可以取消选区

综合案例

案例1-产品模块
总结：

布局为啥用不同盒子？
标签都是有语义的，合理的地方用合理的标签。比如产品标题就用h，大量文字段落就用p
为啥用那么多类名?
类名就是给每个盒子起了一个名字，可以更好的找到这个盒子，选取盒子更容易，后期维护也方便。
到底用 margin还是 padding?
大部分情况两个可以混用，两者各有优缺点，但是根据实际情况，总是有更简单的方法实现。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            background-color: #f5f5f5;
        }
        a {
            color: #333;
            text-decoration: none;
        }
        .box {
            width: 298px;
            height: 415px;
            background-color: #fff;
            /* 块级盒子水平居中 */
            margin: 100px auto;
        }
        .box img {
            /* 图片宽度和父亲一样 */
            width: 100%;
        }
        .review {
            height: 70px;
            font-size: 14px;
            /* 没有width，使用padding不会撑开盒子 */
            padding: 0 28px;
            margin-top: 30px;
        }
        .appraise {
            font-size: 12px;
            color: #b0b0b0;
            margin-top: 20px;
            padding: 0 28px;
        }
        .info {
            font-size: 14px;
            margin-top: 15px;
            padding: 0 28px;
        }
        .info h4 {
            display: inline-block;
            font-weight: 400;
        }
        .info span {
            color: #ff6700;
        }
        .info em {
            font-style: normal;
            color: #ebe4e0;
            margin: 0 6px 0 15px;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="images/img.jpg" alt="">
        <p class="review">快递牛，整体不错蓝牙可以说秒连，红米给力</p>
        <div class="appraise">来自于117384230的评价</div>
        <div class="info">
            <h4><a href="#">Redmi AirDots真无线蓝牙耳机...</a></h4><em>|</em> <span>99.9元</span>
        </div>
    </div>
</body>
</html>

案例2-快报模块

去掉 li 前面的项目符号（小圆点）

语法：

list-style ：none；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        li {
            list-style: none;
        }
        .box {
            width: 248px;
            height: 163px;
            border: 1px solid #ccc;
            margin: 100px auto;
        }
        .box h3 {
            height: 32px;
            border-bottom: 1px dotted #ccc;
            font-size: 14px;
            font-weight: 400;
            line-height: 32px;
            padding-left: 15px;
        }
        .box ul li a {
            font-size: 12px;
            color: #666666;
            text-decoration: none;
        }
        .box ul li a:hover {
            text-decoration: underline;
        }
        .box ul li {
            height: 23px;
            line-height: 23px;
            padding-left: 21px;
        }
        .box ul {
            margin-top: 7px;
        }
    </style>
</head>
<body>
    <div class="box">
        <h3>品优购快报</h3>
        <ul>
            <li><a href="#">【特惠】爆款耳机5折秒！</a></li>
            <li><a href="#">【特惠】母亲节，健康好礼低至5折</a></li>
            <li><a href="#">【特惠】爆款耳机5折秒！</a></li>
            <li><a href="#">【特惠】9.9元洗100张照片</a></li>
            <li><a href="#">【特惠】长虹智能空调立省1000</a></li>
        </ul>
    </div>
</body>
</html>

池煦林

关注

7
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
PS基本操作以及CSS盒子综合案例

布局为啥用不同盒子？标签都是有语义的，合理的地方用合理的标签。比如产品标题就用h，大量文字段落就用p为啥用那么多类名?类名就是给每个盒子起了一个名字，可以更好的找到这个盒子，选取盒子更容易，后期维护也方便。到底用 margin还是 padding?大部分情况两个可以混用，两者各有优缺点，但是根据实际情况，总是有更简单的方法实现。
复制链接

扫一扫