【前端web入门第五天】03 清除默认样式与外边距问题【附综合案例产品卡片与新闻列表】

文章目录:

  • 1.清除默认样式
    • 1.1清除内外边距
    • 1.2清除列表圆点(项目符号)
  • 3.外边距问题-合并现象
  • 4.外边距问题–塌陷问题
  • 5.行内元素垂直内外边距
  • 6.圆角与盒子阴影
    • 6.1圆角
    • 6.2 盒子模型-阴影(拓展)

综合案例一 产品卡片
综合案例二 新闻列表


1.清除默认样式

在实际设计开发中,要清除默认的样式,默认的内外边距

1.1清除内外边距

box-sizing可以加到这里面写,控制盒子大小

*{ bn
margin: 0;
padding: 0;

box-sizing: border-box;
}

1.2清除列表圆点(项目符号)

li {
list-style: none;
}

2.盒子模型–元素溢出

作用:控制溢出元素的内容的显示方式
属性名: overflow
属性值

属性值效果
hidden溢出隐藏
scroll溢出滚动(无论是否溢出,都显示滚动条位置)
auto溢出滚动(溢出才显示滚动条位置)

3.外边距问题-合并现象

场景:垂直排列的兄弟元素,上下margin会合并
现象:取两个margin中的较大值生效
在这里插入图片描述

.one {
margin-bottom: 50px;
}
.two {
margin-top: 20px;
}

4.外边距问题–塌陷问题

在这里插入图片描述
解决方法:

  • 取消子级margin,父级设置padding
  • 父级设置overflow: hidden
  • 父级设置border-top

5.行内元素垂直内外边距

场景:行内元素添加margin和 padding,无法改变元素垂直位置
解决方法:给行内元素添加line-height可以改变垂直位置

span {
/*margin和padding属性,无法改变垂直位置*/
margin: 50px;
padding: 20px;

/*行高可以改变垂直位置*/
line-height: 100px;
}

6.圆角与盒子阴影

6.1圆角

作用:设置元素的外边框为圆角。
属性名:border-radius
属性值:数字+px/百分比
提示:属性值是圆角半径

<style>
div{
margin: 50px auto;
width: 200px;
height: 200px;
background-color: orange;
/*border-radius: 20px;*/
/*记忆:从左上角顺时针赋值,没有取值的角与对角取值相同*/
/产四值:左上 右上 右下 左下*/
/*border-radius: 10px 20px 40px 80px;*/
/*三值:左上右上+左下右下*/
/*border-radius: 10px 40px 80px;*/
/产两值:左上+右下右上+左下*/
border-radius: 10px 80px;
}
</style>
  • 常见应用-正圆形状
    • 正方形盒子设置圆角属性值为宽高的一半/50%
<!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>
       img{
        width: 100px;
        height: 100px;
        display: block;
        margin: 0 auto;
        padding: 100px;
        border-radius: 50%;
       }
    </style>
   
</head>
<body>
    <img src="E:\E盘_U盘文件夹\图片资源2\150px.jpg" >
</body>
</html>

在这里插入图片描述

  • 常见应用-胶囊形状
    • 长方形盒子设置圆角属性值为盒子高度的一半

6.2 盒子模型-阴影(拓展)

作用:给元素设置阴影效果
属性名: box-shadow
属性值:X轴偏移量 Y轴偏移量 模糊半径 扩散半径 颜色 内外阴影

注意:

  • x轴偏移量和Y轴偏移量必须书写
  • 默认是外阴影,内阴影需要添加inset
<!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>
       img{
        width: 100px;
        height: 100px;
        display: block;
        margin: 50px auto;
        border-radius: 50%;
        box-shadow: 2px 5px 10px 1px rgba(0,0,0,0.5);
       }
    </style>
   
</head>
<body>
    <img src="E:\E盘_U盘文件夹\图片资源2\150px.jpg" >
</body>
</html>

在这里插入图片描述

综合案例

综合案例一 产品卡片

CSS书写顺序:
1.盒子模型属性
2.文字样式
3.圆角、阴影等修饰属性

<!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-sizing: border-box;
        }
        body{
            background-color: #f1f1f1;
        }
        .product{
            margin: 50px auto;
            width: 270px;
            height: 253px;
            background-color: #fff;
            text-align: center;
            padding: 40px;
            border-radius: 10px;
        }
        .product h4{
            margin-top: 20px;
            margin-bottom: 12px;
            color: #333;
            font-size: 18px;
            font-weight: 400;
        }
        .product p{
            font-size: 12px;
            color: #555;
        }
    </style>
</head>
<body>
    <div class="product">
        <img src="./images/liveSDK.svg">
        <h4>抖音直播SDK</h4>
        <p>包含抖音直播看播功能</p>
    </div>
</body>
</html>

在这里插入图片描述

综合案例二 新闻列表

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>新闻列表</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    li {
      list-style: none;
    }

    a {
      text-decoration: none;
    }

    .news {
      margin: 100px auto;
      width: 360px;
      height: 200px;
      /* background-color: pink; */
    }

    .news .hd {
      height: 34px;
      background-color: #eee;
      border: 1px solid #dbdee1;
      border-left: 0;
    }

    .news .hd a {
      /* -1 盒子向上移动 */
      margin-top: -1px;
      display: block;
      border-top: 3px solid #ff8400;
      border-right: 1px solid #dbdee1;
      width: 48px;
      height: 34px;
      background-color: #fff;

      text-align: center;
      line-height: 32px;
      font-size: 14px;
      color: #333;
    }

    .news .bd {
      padding: 5px;
    }

    .news .bd li {
      padding-left: 15px;
      background-image: url(./images/square.png);
      background-repeat: no-repeat;
      background-position: 0 center;
    }

    .news .bd li a {
      padding-left: 20px;
      background: url(./images/img.gif) no-repeat 0 center;

      font-size: 12px;
      color: #666;
      line-height: 24px;
    }

    .news .bd li a:hover {
      color: #ff8400;
    }
  </style>
</head>
<body>
  <!-- 新闻区域 包含 标题 + 内容 -->
  <div class="news">
    <div class="hd"><a href="#">新闻</a></div>
    <div class="bd">
      <ul>
        <li><a href="#">点赞“新农人” 温暖的伸手</a></li>
        <li><a href="#">在希望的田野上...</a></li>
        <li><a href="#">“中国天眼”又有新发现 已在《自然》杂志发表</a></li>
        <li><a href="#">急!这个领域,缺人!月薪4万元还不好招!啥情况?</a></li>
        <li><a href="#">G9“带货”背后:亏损面持续扩大,竞争环境激烈</a></li>
        <li><a href="#">多地力推二手房“带押过户”,有什么好处?</a></li>
      </ul>
    </div>
  </div>
</body>
</html>

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/383905.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

OpenCV-36 多边形逼近与凸包

目录 一、多边形的逼近 二、凸包 一、多边形的逼近 findContours后的轮廓信息countours可能过于复杂不平滑&#xff0c;可以用approxPolyDP函数对该多边形曲线做适当近似&#xff0c;这就是轮廓的多边形逼近。 apporxPolyDP就是以多边形去逼近轮廓&#xff0c;采用的是Doug…

带特效喝酒神器小程序源码-多种游戏支持流量主

由多个游戏组合而成,每一个小程序都基本带特效~~ 功能如下 1.小马快跑(支持竞选模式和个人单选模式,PS马是真的在跑哟) 2.彩票智能选号(支持多个彩种选号,快来选你的专属号码吧) 3.整蛊鳄鱼(少了一颗牙自动往酒杯加酒,看你和几杯) 4.真心话大冒险(这个就不多做解释啦) 5.…

【数学建模】【2024年】【第40届】【MCM/ICM】【F题 减少非法野生动物贸易】【解题思路】

一、题目 &#xff08;一&#xff09; 赛题原文 2024 ICM Problem F: Reducing Illegal Wildlife Trade Illegal wildlife trade negatively impacts our environment and threatens global biodiversity. It is estimated to involve up to 26.5 billion US dollars per y…

PyCharm2023.3.2配置conda环境

重点在于Path to conda这一步&#xff0c;需要找到conda.bat这个文件&#xff0c;PyCharm才能识别出现有的conda环境。

分享76个文字特效,总有一款适合您

分享76个文字特效&#xff0c;总有一款适合您 76个文字特效下载链接&#xff1a;https://pan.baidu.com/s/1rIiUdCMQScoRVKhFhXQYpw?pwd8888 提取码&#xff1a;8888 Python采集代码下载链接&#xff1a;采集代码.zip - 蓝奏云 学习知识费力气&#xff0c;收集整理更不…

操作系统(14)----文件系统的结构

目录 一.文件系统的层次结构 1.用户接口&#xff1a; 2.文件目录系统&#xff1a; 3.存取控制模块&#xff1a; 4.逻辑文件系统与文件信息缓冲区&#xff1a; 5.物理文件系统&#xff1a; 二.文件系统的全局结构 1.文件系统在外存中的结构 &#xff08;1&#xff09;物…

Linux nohup命令和

参考资料 linux后台运行nohup命令的使用及2>&1字符详解 目录 前期准备一. 基本语法二. 执行时不指定日志文件三. 执行后不想要日志文件四. nohup命令的执行与kill4.1 执行4.2 kill 前期准备 &#x1f4c4;handle_file.sh #!/bin/bashecho "文件复制开始..."…

2.11 运算符

1、选择题 1.1、若有以下程序 main() { char a1,b2; printf("%c,",b); printf("%d\n",b-a); } 程序运行后的输出结果是 C A&#xff09;3,2 B&#xff09;50,2 C&#xff09;2,2 D&#xff09;2,50 解析&#xff1a;b是先赋值后自加&#…

MacOS - M1芯片 Mac 在“恢复”模式中启用系统扩展教程

部分软件需要开启系统扩展才能正常使用&#xff0c;但是默然M1芯片的Mac不能直接打开系统扩展&#xff0c;如下两图。 若要启用系统扩展&#xff0c;您需要在“恢复”环境中修改安全性设置。 若要执行此操作&#xff0c;请将系统关机&#xff0c;然后按住触控ID或电源按钮以开…

寻找最优的路测线 - 华为OD统一考试

OD统一考试&#xff08;C卷&#xff09; 分值&#xff1a; 200分 题解&#xff1a; Java / Python / C 题目描述 评估一个网络的信号质量&#xff0c;其中一个做法是将网络划分为栅格&#xff0c;然后对每个栅格的信号质量计算。 路测的时候&#xff0c;希望选择一条信号最好…

《数电》理论笔记-第1章-逻辑代数基础

参考&#xff1a;视频 和 《数字电路与逻辑设计》 电子书 一&#xff0c;第1章 逻辑代数基础 1 数字量和模拟量 略 2 数制&#xff08;十进制&#xff0c;二进制&#xff0c;八进制和十六进制&#xff09; 拨电话&#xff08;BoDH&#xff09;---&#xff08;2八10十六&…

【Django】Django项目部署

项目部署 1 基本概念 项目部署是指在软件开发完毕后&#xff0c;将开发机器上运行的软件实际安装到服务器上进行长期运行。 在安装机器上安装和配置同版本的环境[python&#xff0c;数据库等] django项目迁移 scp /home/euansu/Code/Python/website euansuxx.xx.xx.xx:/home…

labelImg和labelme区别

LabelImg和LabelMe是两种常用的标注工具&#xff0c;用于创建标注数据集以供机器学习和计算机视觉任务使用。虽然它们都具有相似的目标&#xff0c;即方便用户进行图像标注&#xff0c;但在某些方面存在一些区别。下面将介绍LabelImg和LabelMe的区别及联系&#xff0c;同时提供…

如何写出别人写不出的内容(译)

&#xff08;译者序&#xff1a;这篇文章不只是写作&#xff0c;对信息获取、阅读也都有启发。随着社交媒体和 AI 的发展&#xff0c;人们越来越被动的接收海量信息&#xff0c;如何主动查找与整理对自己有用的内容&#xff0c;将是一个不可或缺的能力。&#xff09; 原文&…

模型 PMF(产品市场契合度)

系列文章 主要是 分享 思维模型&#xff0c;涉及各个领域&#xff0c;重在提升认知。产品与市场高度契合。 1 PMF(Product Market Fit)产品市场契合度 的应用 1.1 PMF在创业过程中的应用-Vincy公司的产品PartnerShare 实现PMF需要企业深入了解目标市场的需求和用户的反馈&…

导数的定义【高数笔记】

【含义】可以抽象成&#xff0c;在一个极其短的时间段内&#xff0c;温度差 / 时间差 【本质】瞬间的平均值 【分类】可以分成几类&#xff1f;每类需要注意的点 【导数存在的必要条件】 【导数与极限的关系】可以参考导数的定义的式子 【题型解法】分几个题型&#xff1f;每个…

C++ shell - 在线 C++ 编译器

C shell - 在线 C 编译器 1. C shell2. Example program3. Options4. ExecutionReferences 1. C shell C Shell v2 https://cpp.sh/ https://cpp.sh/about.html C Shell v2, free online compiler, proudly uses emscripten to compile your code. emscripten is a clang-ba…

联想DP510、DP520、DP515打印机恢复出厂和自定义纸张方法

联想DP510、DP520、DP515恢复出厂设置方法 一、按下打印方式键&#xff0c;同时开机&#xff0c;直至打印头动作停止时松手&#xff1b; 二、水平装入 A4 纸&#xff0c;打印机自动调入并开始打印&#xff0c;若打印机将纸退出&#xff0c;将纸放平重新装入&#xff1b; 三、…

寒假9-蓝桥杯训练

//轨道炮 #include<iostream> using namespace std; #include<algorithm> int logs[100010]; int main() {int n;cin >> n;for (int i 1;i < n;i){cin >> logs[i];}sort(logs 1, logs n 1);int ans 1000000000;for (int i 2;i < n;i){if (…

Java:字符集、IO流 --黑马笔记

一、字符集 1.1 字符集的来历 我们知道计算机是美国人发明的&#xff0c;由于计算机能够处理的数据只能是0和1组成的二进制数据&#xff0c;为了让计算机能够处理字符&#xff0c;于是美国人就把他们会用到的每一个字符进行了编码&#xff08;所谓编码&#xff0c;就是为一个…