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

简介: 本文档详细介绍了CSS中清除默认样式的方法,包括清除内外边距、列表项目符号等;探讨了外边距的合并与塌陷问题及其解决策略;讲解了行内元素垂直边距的处理技巧;并介绍了圆角与盒子阴影效果的实现方法。最后通过产品卡片和新闻列表两个综合案例,展示了所学知识的实际应用。

文章目录:

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


1.清除默认样式

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

1.1清除内外边距

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

*{ bn
margin: 0;
padding: 0;

box-sizing: border-box;
}

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

li {
list-style: none;
}

2.盒子模型–元素溢出

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

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>

image.png

相关文章
|
11天前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
盒模型 盒模型: 所谓盒模型,就是浏览器为页面中的每个HTML元素生成的矩形盒子。 这些盒子们都要按照可见板式模型在页面上排布。 可见的板式模型主要由三个属性控制:position 属性、display 属性和 float属性。 position属性控制页面上元素间的位置关系。 display属性控制元素是堆叠、并排或者不在页面上显示。 float属性提供控制的方法,以便于把元素组成成多栏布局。 盒模型讲解: 在默认的情况下,每个盒子的边框是不可见的,背景也是透明的。 所以我们 不能直接的看到页面中的盒
56 0
|
11天前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
伪类:伪类这个叫法源自于它们跟类相似,但实际上并没有类会附加到标记中的标签上。 伪类分为两种(以及新增的伪类选择器): UI伪类:会在HTML元素处于某种状态时(例如:鼠标指针位于连接上),为该元素应用CSS样式。 :hover 结构化伪类:会在标记中存在某种结构上的关系时 例如: 某元素是一组元素中的第一个或最后一个,为该元素应用CSS样式。 :not和:target(CSS3新增的两个特殊的伪类选择器)
55 1
|
11天前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
上下文选择器(迭代选择器):基于祖先或同胞元素选择一个元素 ID和类选择器:基于id#和class的属性值进行选择元素。 属性选择器:基于属性的有无和特征进行选择。 ①上下文选择器: 上下文选择器的语法格式:标签1 标签2{属性:值;} //注意:组合选择器和上下文选择器的区别,组合选择器以逗号隔开, 上下文选择器以空格隔开 ②特殊的上下文选择器 子选择器> : 语法格式:标签1>标签2 解释说明:标签1和标签2
71 1
|
5月前
|
Java 数据库 网络架构
菜鸟之路Day36一一Web开发综合案例(部门管理)
本文详细记录了基于Spring Boot的Web开发综合案例——部门管理功能的实现过程。从环境搭建到功能开发,涵盖数据库表设计、Spring Boot项目创建、依赖引入、配置文件设置以及Mapper、Service、Controller的基础结构构建。文章重点讲解了查询、删除、新增和修改部门信息的业务逻辑实现,遵循RESTful规范设计接口,并通过统一响应结果类`Result`优化前后端交互体验。借助Spring的IoC容器管理与MyBatis的SQL映射,实现了高效的数据操作与业务处理,最终完成部门管理的全功能开发。
149 12
|
11天前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
继承 我们的CSS中很多的属性也是可以继承的,其中相当一部分是跟文字的相关的,比如说颜色、字体、字号。 当然还有一部分是不能继承的。 例如边框、内外边距。 层叠 层叠是CSS的核心机制。 层叠的工作机制: 当元素的同一个样式属性有多种样式值的时候,CSS就是靠层叠机制来决定最终应用哪种样式。 层叠规则: 层叠规则一:找到应用给每个元素和属性的声明。 说明:浏览器在加载每个页面时,都会据此查找到每条CSS规则, 并标识出所有受到影响的HTML元素。
31 1
|
4月前
|
XML SQL 前端开发
菜鸟之路Day37一一Web开发综合案例(员工管理)
本文介绍了基于Web开发的员工管理综合案例,涵盖分页查询、条件分页查询、删除员工和新增员工四大功能模块。通过前后端交互,前端传递参数(如页码、每页记录数、查询条件等),后端使用MyBatis与PageHelper插件处理数据查询与操作。代码结构清晰,包括Controller层接收请求、Service层业务逻辑处理以及Mapper层数据访问,并结合XML动态SQL实现灵活的条件查询。此外,新增与删除功能分别通过POST与DELETE请求完成,确保系统功能完整且高效。
143 7
|
4月前
|
存储 前端开发 Java
菜鸟之路Day38一一Web开发综合案例(三)
本文介绍了Web开发中的文件上传与员工信息修改的综合案例,涵盖前端到后端的完整流程。重点讲解了阿里云OSS的集成,包括Bucket创建、密钥获取及SDK使用,并通过Spring Boot实现文件上传功能。同时,详细描述了员工信息查询与修改的操作逻辑,涉及Controller、Service和Mapper层代码实现。最后探讨了配置文件的优化,对比@Value与@ConfigurationProperties注解,展示了如何通过实体类批量注入配置参数,提升代码可维护性与灵活性。
116 1
|
9月前
|
Dart 前端开发
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
308 75
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
5月前
|
Web App开发 前端开发 JavaScript
鸿蒙5开发宝藏案例分享---Web适配一多开发实践
这是一份实用的鸿蒙Web多设备适配开发指南,针对开发者在不同屏幕尺寸下的布局难题提供了解决方案。文章通过三大法宝(相对单位、媒体查询和窗口监听)详细介绍如何实现智能适配,并提供了多个实战案例,如宫格布局、对话框变形和自适应轮播图等。此外,还分享了调试技巧及工具推荐,帮助开发者快速上手并优化性能。最后鼓励读者实践探索,并提示更多官方资源等待发现。
|
7月前
|
云安全 数据采集 安全
阿里云热门云安全产品简介:Web应用防火墙与云防火墙产品各自作用介绍
在阿里云的安全类云产品中,Web应用防火墙与云防火墙是用户比较关注的两款安全产品,二者在作用上各有侧重,共同构成了阿里云强大的安全防护体系。本文将对Web应用防火墙与云防火墙产品各自的主要作用进行详细介绍。