HTML+CSS实战——学成在线项目（含源码、素材、psd文件）

lalaxuan

已于 2022-11-29 13:43:14 修改

阅读量1k

点赞数 5

分类专栏： HTML&CSS实战文章标签： css html css3

于 2022-11-29 13:42:14 首次发布

本文链接：https://blog.csdn.net/weixin_45732235/article/details/128081319

版权

本文详细介绍了如何使用HTML和CSS进行实战项目构建，包括准备工作、版心设置、header布局、logo和nav布局、搜索框设计、用户区域处理、banner布局、精品推荐展示以及版权区域的设计。在布局过程中，特别强调了浮动和清除浮动的重要性，以确保页面布局的正确显示。

摘要由CSDN通过智能技术生成

文章目录

项目源码——点击下载

准备工作

在这里插入图片描述

版心和清除默认样式

布局：从外到内，从上到下，从左到右
CSS: 浮动/display；盒子模型文字样式

<body>
  <!-- 头部 -->
  <div class="header wrapper">1</div>
</body>

* {
   
    margin: 0;
    padding: 0;
    /* 內减模式 */
    box-sizing: border-box;
}

li {
   
    list-style: none;
}

a {
   
    text-decoration: none;
}

.clearfix:before,
.clearfix:after {
   
    content: "";
    display: table;
}

.clearfix:after {
   
    clear: both;
}

body {
   
    background-color: #f3f5f7;
}

/* 版心 */
.wrapper {
   
    width: 1200px;
    margin: 0 auto;
}

在这里插入图片描述

header布局

/* 头部 */
.header {
   
    height: 42px;
    background-color: pink;
    /* margin-top: 30px;
    margin-bottom: 30px; */
    margin: 30px auto;
}

logo和nav布局

 <body>
    <!-- 头部 -->
    <div class="header wrapper">
      <h1>
        <a href=""><img src="./images/logo.png" alt="" /></a>
      </h1>

      <!-- 导航区域 -->
      <div class="nav">
        <ul>
          <li><a href="#">首页</a></li>
          <li><a href="#">课程</a></li>
          <li><a href="#">职业规划</a></li>
        </ul>
      </div>
    </div>
  </body>

h1 {
   
    float: left;
}

/* 导航 纯文字区域 可以不用给宽度*/
.nav {
   
    float: left;
    margin-left: 70px;
    height: 42px;
}

.nav li {
   
    float: left;
    /* 右边距 是量出距离后 减去内边距 35px -9px */
    margin-right: 26px;
}

.nav li a {
   
    display: block;
    padding: 0 9px;
    height: 42px;
    line-height: 42px;
    font-size: 18px;
    color: #050505;
    /* border-bottom: 2px solid #00a4ff; */
}

.nav li a:hover {
   
    border-bottom: 2px solid #00a4ff;
}

在这里插入图片描述

搜索——布局和文本框

都在头部区域

 <!-- 搜索 -->
      <div class="search">
        <input type="search" placeholder="请输入关键词" />
        <button></button>
      </div>

/* 搜索 */
.search {
   
    float: left;
    margin-left: 59px;
    width: 412px;
    height: 40px;
    border: solid 1px #00a4ff;
}

.search input {
   
    float: left;
    width: 360px;
    height: 38px;
    border: none;
    padding-left: 20px;
}

/* 控制placeholder的样式 */
.search input::placeholder {
   
    font-size: 14px;
    color: #bfbfbf;
}

.search button {
   
    float: left;
    width: 50px;
    height: 40px;
    background-image: url("../images/btn.png");
    border: none;
}

用户区域

<!-- 用户区域 -->
      <div class="user">
        <img src="./images/user.png" alt="" />
        <span>qq-leishui</span>
      </div>

/* 用户区域 */
.user {
   
    float: right;
    margin-right: 35px;
    height: 42px;
    line-height: 42px;
}

.user img {
   
    /* 调节图片对齐方式 垂直方向上的 */
    vertical-align: middle;
}

在这里插入图片描述

banner布局

在这里插入图片描述

<!-- 轮播图banner -->
 <div class="banner">
   <div

最低0.47元/天解锁文章