当前位置： 首页 > article >正文

综合案例铁锅炖（CSS项目大杂烩）

article 2024/11/14 11:14:29

小工具：snipaste

全世界最好用的截图工具来了

Snipaste是一个强大简单的截图工具，方便的点就在于可以把截图贴回屏幕上

常用快捷方式有这些：

1.F1截图，同时测量大小，设置箭头，文字书写

2.F3在桌面置顶显示

3.点击图片，Alt取色（Shift切换取色模式）

4.按Esc取消图片显示

小米侧边栏

实现效果大概就是这样。核心就是转成块级元素

1.把链接a转换为块级元素，这样链接可以单独占一行，并且有宽度和高度

2.鼠标经过a给链接设置背景颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        a{
            display: block;
            width: 230px;
            height: 40px;
            background-color: rgb(124, 124, 124);
            font-size: 14px;
            color: aliceblue;
            text-decoration: none;
            text-indent: 2em;
        }
        a:hover{
            background-color: chocolate;
        }
    </style>
    <title>Document</title>
</head>
<body>
    <a href="#">爪机</a>
    <a href="#">平板垫脑</a>
    <a href="#">垫脑</a>
    <a href="#">su7</a>
    <a href="#">纸张垃圾桶</a>
</body>
</html>

实现出来是这个样子的，很简单，不多说了 

透明度设置：

前三个为rgb：

<!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>
        div{
            width: 300px;
            height: 300px;
            background: rgba(0,0,0,0.5);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

单纯对背景色半透明，对盒子中内容无影响

五彩导航

把导航做成五颜六色的会有什么好处吗

就像西柚导航一样

建议纸鹿学长把它该名成西电导航

或者什么都好

目标：

1.链接属于行内元素，但是此时需要宽度，高度，因此需要模式转换

2.里面的文字需要水平居中和垂直居中

2.链接里面要设置背景图

4.鼠标经过变化背景图片，要用到伪类选择器

<!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>
        .nav a{
            display: inline-block;
            width: 120px;
            height: 58px;
            text-align: center;
            background-color: cornflowerblue;
            line-height: 58px;
            color: aliceblue;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div class="nav">
        <a href="#">模电</a>
        <a href="#">概率论</a>
        <a href="#">信号与系统</a>
        <a href="#">大学物理</a>
    </div>
</body>
</html>

每一个都需要设置不同的背景

所以要有不同的类：

<!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>
        .nav a{
            display: inline-block;
            width: 120px;
            height: 58px;
            text-align: center;
            background-color: cornflowerblue;
            line-height: 58px;
            color: rgb(255, 255, 255);
            text-decoration: none;
        }
        .nav .bg1{
            background: url(./om.jpg);
        }
        .nav .bg1:hover{
            background: url(./pp.jpg);
        }
        .nav .bg2{
            background:url(./pp.jpg);
        }
        .nav .bg2:hover{
            background: url(R-C.jpg);
        }
    </style>
</head>
<body>
    <div class="nav">
        <a href="#" class="bg1">模电</a>
        <a href="#" class="bg2">概率论</a>
        <a href="#" class="bg3">信号与系统</a>
        <a href="#" class="bg4">大学物理</a>
    </div>
</body>
</html>

CSS三大特性

CSS有三个非常重要的特性：层叠性、继承性、优先级

层叠性就是相同选择器设置相同的样式，此时一个样式会覆盖另一个冲突的样式，层叠性主要解决样式冲突的问题

样式冲突：遵循的原则是就近，哪个样式离结构近，就执行哪个样式

样式不冲突就不会层叠

（长江后浪推前浪，前浪死在沙滩上）

世界是一个巨大的子承父业

有钱真好啊下辈子我也要当有钱人

CSS的继承就是子标签会继承父标签的某些样式（文本颜色和字号）

 

继承的样式：text-，font-，line-及color属性

行高的继承有点特别，行高可以跟单位也可以不跟

不跟单位就是倍数（当前元素文字大小的倍数）

<!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>
        body{
           font: 12px/1.5;
        }
        div{
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div>十日</div>
    <p>终焉</p>
</body>
</html>

优先级：选择器相同的话就看层叠性

选择器不同的话就看权重哩

！important是在样式后面加

权重是有4组数字组成，但是不会有进位

类选择器永远大于元素选择器，id选择器永远大于类选择器

等级判断从左到右，如果某一位的数值 相同，则判断下一位的数值

继承的权重是0

就像是高启强虽然很厉害，但是高晓晨依然变成精神小伙一样（不是哥们）

标签到底执行哪个样式，先看标签有没被直接选出来

a链接默认制定了样式（蓝色，带下划线）

复合选择器会有权重叠加

炉石设计赛（有点双厨狂喜）：

这个好看，但是这英雄强度有点低

我们前端也要学PS，那有人就要问了

那PS不是美术生学的吗？

问得好捏

还是那句话，我最开始以为网页的设计是需要会前端的美术生，或者有艺术细胞的计科爷

但是实际上UI和前端还是又区别的

设计稿，UI来画

网页实现，前端来干

也就是说他们用啥前端也得学啥

网页美工大部分的效果图都是用PS来完成的，所以以后我们的切图工作都在PS中完成

产品模块

先做最外面的盒子的设计：

<!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: aliceblue;
        }
        .box{
            width: 298px;
            height: 415px;
            background-color: #fff;
            margin: 100px auto;     /*块级元素居中 */
        } 
    </style>
</head>
<body>
    <div class="box">

    </div>
</body>
</html>

效果就是这样，浅蓝色中间有个白色的盒子

 然后就要添加样式图片了

要让这个图片不超过盒子的大小，所以把宽度设置成盒子的百分百就好了：

<!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: aliceblue;
        }
        .box{
            width: 298px;
            height: 415px;
            background-color: #fff;
            margin: 100px auto;     /*块级元素居中 */
        } 
        .box img{
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="./pp.jpg" alt="">
    </div>
</body>
</html>

然后就开始写主题文字，设定各种边距：

<!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: aliceblue;
        }
        .box{
            width: 298px;
            height: 415px;
            background-color: #fff;
            margin: 100px auto;     /*块级元素居中 */
        } 
        .box img{
            width: 100%;
        }
        .review{
            height: 70px;
            font-size: 14px;
            padding: 0 28px;
            /* 段落没有width属性，所以padding不会撑开盒子的宽度 */
            margin-top: 30px;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="./pp.jpg" alt="">
        <p class="review">乌拉呀哈咿呀哈，呜呀伊哈,乌拉乌拉呀哈，呀哈呀哈乌拉</p>
    </div>
</body>
</html>

然后就开始实现评价模块：

<!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: aliceblue;
        }
        .box{
            width: 298px;
            height: 415px;
            background-color: #fff;
            margin: 100px auto;     /*块级元素居中 */
        } 
        .box img{
            width: 100%;
        }
        .review{
            height: 70px;
            font-size: 14px;
            padding: 0 28px;
            /* 段落没有width属性，所以padding不会撑开盒子的宽度 */
            margin-top: 30px;
        }
        .appraise{
            font-size: 12px;
            color: #b0b0b0;
            margin-top: 20px;
            padding: 0 28px;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="./pp.jpg" alt="">
        <p class="review">乌拉呀哈咿呀哈，呜呀伊哈,乌拉乌拉呀哈，呀哈呀哈乌拉</p>
        <div class="appraise">来自114514条评价</div>
    </div>
</body>
</html>

来看商品详情的描述怎么实现：

<!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: aliceblue;
        }
        .box{
            width: 298px;
            height: 415px;
            background-color: #fff;
            margin: 100px auto;     /*块级元素居中 */
        } 
        .box img{
            width: 100%;
        }
        .review{
            height: 70px;
            font-size: 14px;
            padding: 0 28px;
            /* 段落没有width属性，所以padding不会撑开盒子的宽度 */
            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;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="./pp.jpg" alt="">
        <p class="review">乌拉呀哈咿呀哈，呜呀伊哈,乌拉乌拉呀哈，呀哈呀哈乌拉</p>
        <div class="appraise">来自114514条评价</div>
        <div class="info">
            <h4>软萌孙乌空...</h4> |
            <span>49.0元</span>
        </div>
    </div>
</body>
</html>

然后是对中间的灰色竖线的细化：

<!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: aliceblue;
        }
        .box{
            width: 298px;
            height: 415px;
            background-color: #fff;
            margin: 100px auto;     /*块级元素居中 */
        } 
        .box img{
            width: 100%;
        }
        .review{
            height: 70px;
            font-size: 14px;
            padding: 0 28px;
            /* 段落没有width属性，所以padding不会撑开盒子的宽度 */
            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="./pp.jpg" alt="">
        <p class="review">乌拉呀哈咿呀哈，呜呀伊哈,乌拉乌拉呀哈，呀哈呀哈乌拉</p>
        <div class="appraise">来自114514条评价</div>
        <div class="info">
            <h4>软萌孙乌空...</h4> 
            <em>|</em>
            <span>49.0元</span>
        </div>
    </div>
</body>
</html>

然后把软萌孙乌空换成商品的链接就好了：

<!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: aliceblue;
        }
        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;
            padding: 0 28px;
            /* 段落没有width属性，所以padding不会撑开盒子的宽度 */
            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="./pp.jpg" alt="">
        <p class="review">乌拉呀哈咿呀哈，呜呀伊哈,乌拉乌拉呀哈，呀哈呀哈乌拉</p>
        <div class="appraise">来自114514条评价</div>
        <div class="info">
            <h4><a href="#">软萌孙乌空...</a></h4> 
            <em>|</em>
            <span>49.0元</span>
        </div>
    </div>
</body>
</html>

哦。

快报模块

再写一个快报模块磨炼一下自己

还是有三个盒子捏：

还是先清除一下内外边距再说，然后将大致的边框设置一下：

<!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;
        }
        .box{
            width: 248px;
            height: 163px;
            border: 1px solid #ccc;
            margin: 100px auto;
        }
        .box h3{
            height: 32px;
            border-bottom:1px solid #ccc ;
            font-size: 14px;
            font-weight: 400;
            line-height: 32px;
            padding-left:15px;
        }
    </style>
</head>
<body>
    <div class="box">
        <h3>尸块大清仓</h3>

    </div>
</body>
</html>

下面的模块可以用无序列表实现，快捷键就是：

这是emmet缩写

 怎么去掉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;
        }
        .box{
            width: 248px;
            height: 163px;
            border: 1px solid #ccc;
            margin: 100px auto;
        }
        li{
            list-style: none;
        }
        .box h3{
            height: 32px;
            border-bottom:1px solid #ccc ;
            font-size: 14px;
            font-weight: 400;
            line-height: 32px;
            padding-left:15px;
        }
        .box ul li a{
           font-size: 12px; 
           color: #666;
           text-decoration: none;
        }
        .box ul li{
            height:23px;
            line-height:23px;
        }
    </style>
</head>
<body>
    <div class="box">
        <h3>尸块大清仓</h3>
        <ul>
            <li><a href="#">【特惠】荷叶饭尸块五折秒杀！</a></li>
            <li><a href="#">【特惠】励志轩尸块十元三斤！</a></li>
            <li><a href="#">【特惠】燃燃子尸块十元优惠券！</a></li>
            <li><a href="#">【特惠】瑶瑶尸块立省1000!</a></li>
            <li><a href="#">【特惠】蓝色米老鼠凡买以上商品免费送!</a></li>
        </ul>
    </div>
</body>
</html>

然后再调整一下上面的和左边的边距：

<!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;
        }
        .box{
            width: 248px;
            height: 163px;
            border: 1px solid #ccc;
            margin: 100px auto;
        }
        li{
            list-style: none;
        }
        .box h3{
            height: 32px;
            border-bottom:1px solid #ccc ;
            font-size: 14px;
            font-weight: 400;
            line-height: 32px;
            padding-left:15px;
        }
        .box ul li a{
           font-size: 12px; 
           color: #666;
           text-decoration: none;
        }
        .box ul li a:hover{
            text-decoration:underline;
        }
        .box ul li{
            height:23px;
            line-height:23px;
            padding-left: 20px;
        }
        .box ul{
            margin-top:7px;
        }
    </style>
</head>
<body>
    <div class="box">
        <h3>尸块大清仓</h3>
        <ul>
            <li><a href="#">【特惠】荷叶饭尸块五折秒杀！</a></li>
            <li><a href="#">【特惠】励志轩尸块十元三斤！</a></li>
            <li><a href="#">【特惠】燃燃子尸块十元优惠券！</a></li>
            <li><a href="#">【特惠】瑶瑶尸块立省1000!</a></li>
            <li><a href="#">【特惠】蓝色米老鼠凡买以上商品免费送!</a></li>
        </ul>
    </div>
</body>
</html>

这就是显示的最终效果：

明天我要进行一个模电实验的考试和模电考试


http://www.kler.cn/a/390922.html

相关文章：

  • Qt 获取当前系统中连接的所有USB设备的信息 libudev版
  • Django博客网站上线前准备事项
  • vue3+vite 前端打包不缓存配置
  • 【Python】爬虫通过验证码
  • 自动驾驶3D目标检测综述（一）
  • 【webrtc】 RTP 中的 MID（Media Stream Identifier）
  • opencv_相关的问题
  • 【哲学和历史】-2 ：《看，这是哲学》《50堂经典哲学思维课》读书笔记
  • Linux权限和开发工具(3)
  • 手把手教你30秒下载Typora通用版(mac、win适用)
  • 前端知识点---Javascript中检测数据类型函数总结
  • 解决MAC安装QT启动项目不显示窗口问题
  • Unity导出APK加速与导出失败总结（不定时更新）
  • 丹摩征文活动｜智谱AI引领是实现文本可视化 - CogVideoX-2b 部署与使用
  • 一篇文章学会-图标组件库的搭建
  • Mac电脑如何解压rar压缩包
  • Python爬虫 | 什么是反爬虫技术与机制
  • Unity类银河战士恶魔城学习总结（P120 BUff Item Effect各种增益效果）
  • 迈入国际舞台，AORO M8防爆手机获国际IECEx、欧盟ATEX防爆认证
  • 人工智能的现状、应用与面临的挑战
  • 基于Zynq FPGA对雷龙SD NAND的测试
  • AI教育革命：个性化学习的新篇章
  • 注意力机制的目的:理解语义；编码器嵌入高纬空间计算；注意力得分“得到S*V”；解码器掩码和交叉注意力层用于训练；最终的编码器和输出实现大模型
  • 开源 AI 智能名片 S2B2C 商城小程序在微商内容展示中的应用与价值
  • 面试击穿mysql
  • 京东商品详情，Python爬虫的“闪电战”