CSS学习第三天（附件，案例）

加蓓努力我先飞

已于 2022-04-18 10:16:05 修改

阅读量262

点赞数

分类专栏： 2.CSS 文章标签： css

于 2020-08-13 17:45:17 首次发布

本文链接：https://blog.csdn.net/ingenuou_/article/details/107945185

版权

2.CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

案例

新浪导航栏
案例一：产品模块
案例二：快报模块

新浪导航栏

巧妙的运用padding内边距可以撑开盒子

因为每一个导航栏里面的数字不一样多，用padding设置左右内边距都为一个值

相关取值：

上边框3像素，颜色为#FF8500
下边框1像素，颜色为#edeef0
盒子高度为41像素，背景颜色为#fcfcfc
文字颜色为#4c4c4c

下面是参照

在这里插入图片描述

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style>
   .nav {
    height: 41px;
    /* 外边距顶部 */
    border-top: 3px solid #ff8500;
    /* 外边距底部 */
    border-bottom: 1px solid #edeef0;
    /* div盒子阴影 */
    background-color: #fcfcfc;
    /* 想要文字在盒子中居中，文字行高等于行高 */
    line-height: 41px;
   }
   .nav a {
    /* a属于行内元素 此时必须要转换 行内块元素 */
    display: inline-block;
    height: 41px;
    /* 内边距上下边距为0，左右边距为20 */
    padding: 0 20px;
    font-size: 12px;
    color: #4c4c4c;
    text-decoration: none;
   }
   .nav a:hover{
    /* 鼠标经过地方，背景颜色#eee 字体颜色#ff8500 */
    background-color: #eee;
    color: #ff8500;
   }
  </style>
 </head>
 <body>
  <div class="nav">
   <a href="#">新浪导航</a>
   <a href="#">手机新浪网</a>
   <a href="#">移动客户端</a>
   <a href="#">微博</a>
   <a href="#">博客园</a>
  </div>
 </body>
</html>

成品
在这里插入图片描述

案例一：产品模块

参照

在这里插入图片描述

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>综合案例产品模块</title>
  <style >
   * {
    /*没有内外边距*/
    margin: 0;
    padding: 0;
   }
   body {
   /*定义整体背景颜色*/
    background-color: #f5f5f5;
   }
   a {
   /*定义所有a链接，字体颜色，不加下划线*/
    color: #333;
    text-decoration: none;
   }
   .box {
   /*定义大盒子*/
    width: 413px;
    height: 576px;
    background-color: #fff;
    /* 让块级的盒子水平居中对齐 */
    margin: 100px auto;
   }
   .box img {
   /*图片宽度铺满box大盒子*/
    width: 100%;
   }
   .review {
    height: 110px;
    font-size: 14px;
    /* 因为这个段落没有width属性，所有padding不会撑开盒子的宽度 */
    padding: 0 37px;/*内边距上下为0，左右为37px*/
    margin-top: 46px;/*上外边距为46px*/
   }
   .appraise {
    color: #c7c9c6;
    padding: 0 37px;
    font-size: 14px;
   }
   
   .info h4 {
   /*块级元素改为行内块元素*/
    display: inline-block;
    padding: 0 37px;
    /*将标题设置为不加粗*/
    font-weight: 400;
    
   }
   .info span {
    color: #fdcea4;
   }
   .info em {
   /*将斜体em设置为正常*/
    font-style: normal;
    color: #c7c9c6;
    /*外边距 上0，右6px 下0 左15px*/
    margin: 0 6px 0 15px;
   }
  </style>
 </head>
 <body>
  <div class="box">
   <a href="#"><img src="img/1%20(2).jpg" alt=""><a>
   <p class="review"><a href="#">快递牛，整体感觉不错蓝牙可以说秒连。红米给力。整体感觉不错蓝牙可以说秒连。<a></p>
   <div class="appraise">来自117384232的评价</div>
   <div class="info">
    <h4><a href="#">Redmi AirDots真无蓝线...</a></h4>
    <em>|</em>
    <span>99元</span>
    </div>
  </div>
 </body>
</html>

在这里插入图片描述
成品

案例二：快报模块

在这里插入图片描述

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style>
   * {
    margin: 0;
    padding: 0;
   }
   li {
    /* 去掉li前面的小圆点，所有的li里面都去掉 */
    list-style: none;
   }
   .box {
    /* 定义外边框的宽度、实线、颜色 */
    border: 1px solid #d6d8d5 ;
    width: 610px;
    height: 400px;
    /* 盒子自动居中 */
    margin:100px auto;
   }
   .box h3 {
    height: 79px;
    /* 只定义盒子底部 宽度、虚线，颜色 */
    border-bottom: 1px dotted #d6d8d5;
    font-size: 33px;
    font-weight: 400;
    /* 行高 */
    line-height: 79px;
    /* 左内边距41px */
    padding-left: 41px;
   }
   .box ul li a {
    /* 链接的颜色，没有下划线 */
    color: #6f6e74;
    text-decoration: none;
    font-size: 29px;
   }
   .box ul li a:hover {
    /* 鼠标经过链接的时候有下划线 */
    text-decoration: underline;
   }
   .box ul li {
    /* 定义每个li的行高，左内边距 */
    line-height: 55px;
    padding-left: 54px;
   }
   .box ul {
    /* 定义整体ul列表 上内边距 */
    padding-top: 15px;
   }
  </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>