HTML和CSS练习布局(设计图、静态文件、源码全套)

简介

        适合HTML和CSS初学者,练习HTML和CSS。具有设计图、静态图片、源码


目录


前言

        初学HTML和CSS找不到合适的设计稿?没有静态图片?没有成功的源码参考?

往下看,你都可以轻松的找到他。


一、设计图

 

二、所需的静态图片

 

 

三、目录结构 

四、源码 

        1、CSS文件

body {
  background: #f0f0f0;
}
.content {
  width: 1000px;
  margin: 0 auto;
  background-color: #fff;
}
.content .top {
  border: 2px solid #000;
}
.content .top .header {
  display: flex;
  width: 100%;
  height: 200px;
  justify-content: center;
  align-items: center;
}
.content .top .header img {
  display: block;
  width: 200px;
  height: 200px;
  margin-right: 20px;
}
.content .top .tab {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  height: 50px;
  align-items: center;
  background-color: red;
  color: #fff;
  font-size: 20px;
}
.content .top .tab div {
  margin-left: 20px;
}
.content .top .bigPicture {
  background: url("../images/WechatIMG188.jpeg") no-repeat center;
  width: 100%;
  height: 449px;
}
.content .top .middleContent {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}
.content .top .middleContent .left {
  width: 24%;
  border-left: 1px solid #c7c7c7;
}
.content .top .middleContent .left .item .title {
  height: 30px;
  line-height: 30px;
  text-align: center;
  background-color: #EF5A54;
  color: #fff;
}
.content .top .middleContent .left .item .contentItem {
  padding: 20px;
}
.content .top .middleContent .right {
  width: 74%;
  border-top: 1px solid #3c3c3c;
  border-right: 1px solid #000;
}
.content .top .middleContent .right .line {
  text-align: center;
}
.content .top .middleContent .right .footer {
  background: url("../images/WechatIMG189.jpeg") no-repeat center;
  height: 200px;
}
.content .top .middleContent .right .culture h1 {
  height: 50px;
  line-height: 50px;
  text-align: center;
}
.content .top .middleContent .right .culture div {
  padding: 20px;
}
.content .top .middleContent .right .rightContent {
  width: 100%;
}
.content .top .middleContent .right .rightContent .title {
  display: flex;
  font-size: 20px;
  font-weight: 700;
  justify-content: space-between;
  padding: 0 10px;
}
.content .top .middleContent .right .rightContent .title div:nth-child(2) {
  color: #EA918E;
}
.content .top .middleContent .right .rightContent .rightContentText {
  font-size: 14px;
  padding: 20px;
}
.content .top .middleContent .right .rightContent .footerRight {
  display: flex;
  justify-content: flex-start;
}
.content .top .middleContent .right .rightContent .footerRight div {
  margin-left: 10px;
  color: #c7c7c7;
}

        2、less文件

body{
  background: #f0f0f0;
}
.content {
  width: 1000px;
  margin: 0 auto;
  background-color: #fff;

  .top {
    border: 2px solid #000;
    .header {
      display: flex;
      width: 100%;
      height: 200px;
      justify-content: center;
      align-items: center;
      img {
        display: block;
        width: 200px;
        height: 200px;
        margin-right: 20px;
      }
    }
    .tab{
      display: flex;
      justify-content: flex-start;
      width: 100%;
      height: 50px;
      align-items: center;
      background-color: red;
      color: #fff;
      font-size: 20px;
      div{
        margin-left: 20px;
      }
    }
    .bigPicture{
      background: url("../images/WechatIMG188.jpeg") no-repeat center;
      width: 100%;
      height: 449px;
    }
    .middleContent{
      display: flex;
      justify-content: space-between;
      margin-top: 10px;
      .left{
        width: 24%;
        border-left: 1px solid #c7c7c7;
        .item{
          .title{
            height: 30px;
            line-height: 30px;
            text-align: center;
            background-color:#EF5A54;
            color: #fff;
          }
          .contentItem{
            padding: 20px;
          }
        }
      }
      .right{
        width: 74%;
        border-top: 1px solid #3c3c3c;
        border-right: 1px solid #000;
        .line{
          text-align: center;
        }
        .footer{
          background: url("../images/WechatIMG189.jpeg") no-repeat center;
          height: 200px;
        }
        .culture{
          h1{
            height: 50px;
            line-height: 50px;
            text-align: center;
          }
          div{
            padding: 20px;
          }
        }
        .rightContent{
          width: 100%;
          .title{
            display: flex;
            font-size: 20px;
            font-weight: 700;
            justify-content: space-between;
            padding: 0 10px;
            div:nth-child(2){
              color: #EA918E;
            }
          }
          .rightContentText{
            font-size: 14px;
            padding: 20px;
          }
          .footerRight{
            display: flex;
            justify-content: flex-start;
            div{
              margin-left: 10px;
              color: #c7c7c7;
            }
          }
        }
      }
      
    }
  }
  
}

         3、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>Document</title>
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>
  <!-- 外部容器 -->
  <div class="content">
    <div class="top">
      <div class="header">
        <img src="./images/WechatIMG50.jpeg" alt="">
        <div>Kentucky Fried Chicken</div>
      </div>
      <div class="tab">
        <div>首页</div>
        <div>菜单</div>
        <div>关于KFC</div>
        <div>联系KFC</div>
      </div>
      <div class="bigPicture"></div>
      <div class="middleContent">
        
        <div class="right">
          <div class="culture">
            <h1>KFC企业文化</h1>
            <div>作为烹鸡专家的肯德基,当家产品自然以鸡肉为主打,有大家熟知的吮指原味鸡、香辣鸡翅、香辣鸡腿堡等,在经典产品的基础上,肯德基还不断为消费者提供更多的选择。2017
              年,肯德基对部分产品进行升级,其中包括倍受欢迎的冰淇淋,肯德基将其奶浆升级为全乳脂冰淇淋,浓醇柔滑,乳香浓郁,品质更上一层楼。2021年,肯德基深入挖掘中国本土的“地方风味”,将越来越多的“地域美食”加入了菜单,在不同时段不同地区推出了超过12款地域美食,并覆盖早餐、下午茶、夜宵多个餐期的菜单。
            </div>
          </div>
          <div class="line">------------------------------------------------------------------------</div>
          <div class="rightContent">
            <div class="title">
              <div >美味推荐一</div>
              <div >老北京鸡肉卷</div>
            </div>
            <div class="rightContentText">
              肯德基秉承“爱的肯定”公益理念,由爱出发,积极承担社会责任。2002年,肯德基中国与中国青少年发展基金会建立了旨在帮助贫困大学生完
            </div>
            <div class="footerRight">
              <div>
                推荐指数100%
              </div>
              <div>
                好评率100%
              </div>
            </div>
          </div>
          <div class="line">------------------------------------------------------------------------</div>
          <div class="footer"></div>
        </div>
        <div class="left">
          <div class="item">
            <div class="title">热门推荐</div>
            <div class="contentItem">
              <div>热燕麦拿铁-中</div>
              <div>焦糖玛奇朵-中</div>
              <div>热美式-大</div>
              <div>热蓝式-中</div>
            </div>
          </div>
          <div class="item">
            <div class="title">开心下午茶</div>
            <div class="contentItem">
              <div>四味小食拼盘</div>
              <div>葡式蛋挞四个</div>
              <div>人气餐随心选A</div>
              <div>人气餐随心选B</div>
              <div>人气餐随心选C</div>
            </div>
          </div>
          <div class="item">
            <div class="title">儿童餐</div>
            <div class="contentItem">
              <div>快乐儿童餐</div>
              <div>亲子图书套餐</div>
              <div>美味儿童餐</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
  </div>
</body>

</html>


总结

        本文只提供大家学习参考,不得作为商业用途。

  • 1
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

王鹏飞的解忧屋

您的鼓励是我最大的创作来源

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值