【前端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中的较大值生效
【前端web入门第五天】03 清除默认样式与外边距问题【附综合案例产品卡片与新闻列表】_第1张图片

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

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

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

  • 取消子级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>Documenttitle>
    <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>

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

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

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>Documenttitle>
    <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>

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

综合案例

综合案例一 产品卡片

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>Documenttitle>
    <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>抖音直播SDKh4>
        <p>包含抖音直播看播功能p>
    div>
body>
html>

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

综合案例二 新闻列表

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>

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

你可能感兴趣的:(前端web开发,前端,html5,css)