HTML+CSS 学成在线首页案例实操详解(超良心版!)

y191024

发布于 2022-09-20 19:45:09

3.2K00

代码可运行

文章被收录于专栏：睡不着所以学编程睡不着所以学编程

运行总次数：0

代码可运行

终于做完了网页(很简略!!!),但是也花了我不少时间,这篇文章决定详细的讲解,顺便也当做是复习巩固了,因为自己做的时候真的踩了很多坑...

首先先来看看我们要做的网页首页是怎样的.

先整理一下整体的结构和思路才方便制作,所以我们可以将整个首页分为以下几个部分:

头部 header:

logo部分:

导航栏部分 nav :

搜索框部分 search :

搜索框中的 input :

搜索框中的 button :

用户 user 部分 :

banner 部分:

banner 版心部分:

侧边栏 subnav :

课程表 course :

精品推荐区 goods :

核心的 box 区:

又分为box-hd(head)和box-bd(body)上下两个区域:

box-hd:

box-bd:

最后就是底部的footer区域:

左边的为版权copyright部分,右边为links链接部分.

现在我们可以开始做了,由于html的代码很多,我们需要使用外部链接法:

重点:只要是首页的html文件都取名为index.html,CSS的取名为style.css即可.

首先先在html文件的title下link一下外部CSS样式:

<link rel="stylesheet" href="./style1.css" />

如图:

下面就可以开始写啦!

最最最首先的一步是在CSS文件里清除网页自带的边距:

CSS
* {
  margin: 0;
  padding: 0;
}

由于网页自带背景颜色,我们不妨给body设置一个背景色:

CSS
body {
  background-color: #f3f5f7;
  将高度设置为3000px方便滑动滚动条浏览.
  height: 3000px;
}

同时,消除所有a链接自带的下划线和li列表前面的小圆点:

CSS
li {
  list-style: none;
}
a {
  text-decoration: none;
}

header部分

合理使用注释,以减少错误的产生,也方便自己看.(虽然还是产生很多错误...)

HTML

<!-- 头部区域开始 -->
    header部分是有宽度的,所以类名为w
    <div class="header w">
      <!-- logo部分 -->
      <div class="logo">
      使用ps切图截取logo图片
        <img src="./image/logo.png" alt="" />
      </div>
      <!-- logo部分结束 -->
      <!-- 导航部分开始 -->
      <div class="nav">
      网页里的a链接都用 ul>li>a 的形式
        <ul>
          <li><a href="#">首页</a></li>
          <li><a href="#">课程</a></li>
          <li><a href="#">职业规划</a></li>
        </ul>
      </div>
      <!-- 导航部分结束 -->
      <!-- 搜索框开始 -->
      <div class="search">
        <input type="text" placeholder="输入关键字" />
        <button></button>
      </div>
      <!-- 搜索框结束 -->
      以下是user用户区域:                            
      <div class="user"><img src="./image/user.png" alt="" />qq-leishui</div>
    </div>
    <!-- 头部区域结束 -->

CSS

我们发现整个首页是有一个1200px的宽度的,且在网页中居中显示,包括头部,所以我们可以直接在CSS里定义一个w类,并把所有宽度设置为1200px,然后给宽度为1200px的部分取名为w就可以了.

CSS
.w {
  width: 1200px;
  margin: 0 auto;
}

头部是有一个高度的,且距离网页上下有一个30px的距离

.header {
  height: 42px;
  margin: 30px auto;
}

我们的logo在头部的左侧,所以要使用浮动:

.logo {
  float: left;
}

接下来是nav导航部分,记住一个原则:一浮全浮,因为logo部分加了浮动,所以这里也要加浮动,nav距离左边有60px的距离.

.nav {
  float: left;
  margin-left: 60px;
}

nav中的每一个li也要添加浮动,否则会竖着显示,text-align:center使文字水平居中,line-height=盒子的高度height可以使得文字垂直居中显示,且每个li之间也是有距离的.

.nav ul li {
  float: left;
  margin: 0 15px;
  text-align: center;
  line-height: 42px;
}

接下来设置a的属性,要先将a转换成块元素!!!因为a是行内元素,不转换是会有显示问题的,padding也是没有效果的,最后设置文字大小和颜色.

.nav ul li a {
  display: block;
  padding: 0 10px;
  font-size: 18px;
  color: #050505;
}

由于鼠标移动到a链接时会出现一个蓝色的下边框,所以我们要设置伪元素hover:

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

现在到了search部分,首先设置浮动!后面就是宽度和高度,距离左边也有一个距离,没什么难点

.search {
  float: left;
  width: 412px;
  height: 42px;
  margin-left: 70px;
}

然后就是input,浮动!!设置宽度,同时我们能看到这个搜索框是没有右边框的,所以我们要把他去掉,再把点击输入框时的外边框去掉.

.search input {
  float: left;
  width: 340px;
  height: 40px;
  border: 1px solid #00a4ff;
  border-right: 0;
  outline: none;
  padding-left: 20px;
  font-size: 14px;
  color: #bfbfbf;
}

button部分: 浮动,注意按钮的宽度和输入框的宽度加起来要等于search的宽度(412px),否则button会掉下来.

.search button {
  float: left;
  width: 50px;
  height: 42px;
  background-image: url(./image/btn.png);
  border: 0;
}

user部分:很简单,不做解释,唯一要注意的还是加浮动.

.user {
  float: left;
  height: 42px;
  margin-left: 32px;
  line-height: 42px;
  font-size: 14px;
  color: #666666;
}

banner部分

HTML

    <div class="banner">
      banner中有一个1200px宽度的版心
      <div class="w">
        <!-- 侧边导航栏 -->
        <div class="subnav">
          <ul>
            <li>
            &gt;是一个">"符号.
            由于实在太懒所以就没一个一个打.
              <a href="#">前端开发<span>&gt;</span></a>
            </li>
            <li>
              <a href="#">前端开发<span>&gt;</span></a>
            </li>
            <li>
              <a href="#">前端开发<span>&gt;</span></a>
            </li>
            <li>
              <a href="#">前端开发<span>&gt;</span></a>
            </li>
            <li>
              <a href="#">前端开发<span>&gt;</span></a>
            </li>
            <li>
              <a href="#">前端开发<span>&gt;</span></a>
            </li>
            <li>
              <a href="#">前端开发<span>&gt;</span></a>
            </li>
            <li>
              <a href="#">前端开发<span>&gt;</span></a>
            </li>
            <li>
              <a href="#">前端开发<span>&gt;</span></a>
            </li>
          </ul>
        </div>
          <!-- 侧边栏结束 -->
          <!-- 课程表开始 -->
          <div class="course">
            <h3>我的课程表</h3>
            <ul>
              <li>
                <h4>继续学习 程序语言设计</h4>
                <p>正在学习-使用对象</p>
              </li>
              <li>
                <h4>继续学习 程序语言设计</h4>
                <p>正在学习-使用对象</p>
              </li>
              <li>
                <h4>继续学习 程序语言设计</h4>
                <p>正在学习-使用对象</p>
              </li>
            </ul>
            <a href="#" class="more">课程表</a>
          <!-- 课程表结束 -->
        </div>
      </div>
    </div>
    <!-- banner部分结束 -->

CSS

banner部分:整个banner是没有宽度的,但是有一个高度和背景颜色,且距离顶部有一个距离:

.banner {
  height: 421px;
  margin-top: 20px;
  background-color: #1b036b;
}

banner版心部分:

.banner .w {
  height: 421px;
  /* 注意取消背景重复 不然下面会多出一些颜色 */
  background: url(./image/banner2.png) no-repeat;
}

侧边栏subnav部分:不要忘记浮动,可以看到这个侧边栏是可以看到后面的背景的,所以是一个半透明背景,要用到rbga.

.subnav {
  float: left;
  width: 190px;
  height: 421px;
  background-color: rgba(0, 0, 0, 0.3);
}

li部分:让文字水平居中,且左右设置边距.

.subnav ul li {
  height: 45px;
  line-height: 45px;
  padding: 0 20px;
}

每个a链接的属性:

.subnav ul li a {
  color: #fff;
  font-size: 14px;
}

我们看到在每个a链接的后面还有一个>的小角标:使其浮动,就可以显示在最右边,他不会靠在每个subnav的最右侧是因为li设置了左右padding值,他只会顶到li的最右侧,距离subnav的最右侧有20px的距离.

.subnav ul li a span {
  float: right;
}

鼠标经过每个a链接会改变颜色,所以要设置伪元素hover属性.

.subnav ul li a:hover {
  color: #00b4ff;
}

课程表course部分:在右侧浮动,距离上面有一部分距离.

.course {
  float: right;
  width: 230px;
  height: 300px;
  background-color: #fff;
  margin-top: 15px;
}

course的标题部分,很简单不解释.

.course h3 {
  width: 230px;
  height: 48px;
  background-color: #9bceea;
  font-size: 18px;
  color: #ffffff;
  line-height: 48px;
  text-align: center;
}

ul部分:

.course ul {
  padding: 0 20px;
}

li部分:上下有个padding值,如果使用的是margin,那么边框显示的位置是不对的,会紧贴着文字下方,而设置内边距padding才能使文字和边框之间有距离.

.course ul li {
  padding: 14px 0;
  border-bottom: 1px solid #efefef;
}

下方的文字部分:也很简单,知识设置文字大小和文字的颜色.

.course ul li h4 {
  font-size: 16px;
  color: #4e4e4e;
}
.course ul li p {
  font-size: 12px;
  color: #a5a5a5;
}

more部分:由于是a链接,所以一定要转换元素!!!才能设置宽度和高度.

.course .more {
  display: block;
  height: 38px;
  width: 200px;
  border: 1px solid #00a4ff;
  margin: 6px 14px 12px 14px;
  line-height: 38px;
  text-align: center;
  font-size: 16px;
  color: #00a4ff;
  font-weight: 700;
}

精品推荐部分

HTML

 <!-- 精品推荐开始 -->
    goods有宽度
    <div class="goods w">
        <h3>精品推荐</h3>
        <ul>
          <li><a href="#">JQuery</a></li>
          <li><a href="#">JQuery</a></li>
          <li><a href="#">JQuery</a></li>
          <li><a href="#">JQuery</a></li>
          <li><a href="#">JQuery</a></li>
          <li><a href="#">JQuery</a></li>
        </ul>
        <a href="#" class="mod">修改兴趣</a>
    </div>
    <!-- 精品推荐结束 -->

CSS

goods部分:注意盒子的边缘是有阴影的.

.goods {
  height: 60px;
  margin-top: 8px;
  line-height: 60px;
  background-color: #fff;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}

文字和链接部分: 盒子里的内容需要加浮动,给a链接加padding值而不是li,原因是可以增加a链接的点击范围,可以提高用户的使用体验.

.goods h3 {
  float: left;
  padding: 0 34px;
  font-size: 16px;
  color: #00a4ff;
}
.goods ul li {
  float: left;
}
.goods ul li a {
  padding: 0 34px;
  border-left: 1px solid #bfbfbf;
  font-size: 16px;
  color: #050505;
}

mod部分:在右侧浮动,在右侧加一个浮动即可.

.mod {
  float: right;
  margin-right: 28px;
  font-size: 14px;
  color: #00a4ff;
}

核心box区域

HTML

 <!-- 核心区域开始 -->
    <div class="box w ">
    <!-- 核心头部开始 -->
      <div class="box-hd">
        <h2>精品推荐</h2>
        <a href="#" class="all">查看全部</a></div>
        <!-- 核心头部结束 -->
        <!-- 核心中心部分 -->
        <div class="box-bd">
    注意清除浮动!!!由于ul是不给高度的(不适合给高度),里面的li标签都是
  浮动的,ul的高度会变成0,所以这里的ul需要清除浮动,否则下面footer盒子
  会跑到这里的li盒子下面.
    为什么其他的不用清除呢? 由于上面的goods之类的盒子都设置了固定的高度,
  所以并不会影响文档流.
         <ul class="clearfix">
            <li>
              <a href="#"><img src="./image/图层133.png" alt="">
                <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                <p><span>高级</span>   •  1125人在学习</p>
              </a>
            </li>
            <li>
              <a href="#"><img src="./image/图层133.png" alt="">
                <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                <p><span>高级</span>   •  1125人在学习</p>
              </a>
            </li>
            <li>
              <a href="#"><img src="./image/图层133.png" alt="">
                <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                <p><span>高级</span>   •  1125人在学习</p>
              </a>
            </li>
            <li>
              <a href="#"><img src="./image/图层133.png" alt="">
                <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                <p><span>高级</span>   •  1125人在学习</p>
              </a>
            </li>
            <li>
              <a href="#"><img src="./image/图层133.png" alt="">
                <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                <p><span>高级</span>   •  1125人在学习</p>
              </a>
            </li>
            <li>
              <a href="#"><img src="./image/图层133.png" alt="">
                <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                <p><span>高级</span>   •  1125人在学习</p>
              </a>
            </li>
            <li>
              <a href="#"><img src="./image/图层133.png" alt="">
                <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                <p><span>高级</span>   •  1125人在学习</p>
              </a>
            </li>
            <li>
              <a href="#"><img src="./image/图层133.png" alt="">
                <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                <p><span>高级</span>   •  1125人在学习</p>
              </a>
            </li>
            <li>
              <a href="#"><img src="./image/图层133.png" alt="">
                <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                <p><span>高级</span>   •  1125人在学习</p>
              </a>
            </li>
            <li>
              <a href="#"><img src="./image/图层133.png" alt="">
                <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                <p><span>高级</span>   •  1125人在学习</p>
              </a>
            </li>
          </ul>
        </div>
    </div>
    <!-- 核心区域结束 -->

box和box-hd部分:不是很难不解释.

.box {
  margin-top: 36px;
}
.box-hd {
  height: 45px;
}
.box-hd h2 {
  float: left;
  font-size: 20px;
  font-weight: 400;
  color: #494949;
}
.box-hd .all {
  float: right;
  line-height: 42px;
  font-size: 12px;
  color: #a5a5a5;
  margin-right: 30px;
}

box-bd部分:这里将width设置为1225px的原因是每个li都有一个右边距margin值,这样加起来一行显然会超出1200px((228px+15px)*5=1215px),这样一排就只能显示4个li盒子,有一个会掉下去,但是首页的一排是有5个的,所以索性将宽度加大,覆盖掉原来的1200px,这样盒子就不会掉下去,且不会影响浏览器的使用体验.

图片得宽度需要设置为宽度的100%,否则是会大于盒子的大小的.

.box-bd ul {
  width: 1225px;
}
.box-bd ul li{
  float: left;
  width: 228px;
  height: 270px;
  margin-right: 15px;
  margin-bottom: 15px;
  background-color: #fff;
}
.box-bd img {
  width: 100%;
}
.box-bd ul li a h4 {
  padding: 20px 20px 15px 25px;
  font-weight: 400;
  font-size: 14px;
  color: #050505;
}
.box-bd ul li p {
  margin-left: 25px;
  font-size: 12px;
  color: #999999;
}
.box-bd ul li p span {
  font-size: 12px;
  color: #ff7c2d;
}

footer部分

HTML

<!-- footer区域开始 -->
    <div class="footer w">
      <div class="copyright">
      <img src="./image/logo.png" alt="">
      <p>
        学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。<br>
        © 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号
      </p>
      <a href="#" class="app">下载App</a>
      </div>
    <div class="links">
      <dl>
        <dt><a href="#">关于学成网</a></dt>
        <dd><a href="#">关于</a></dd>
        <dd><a href="#">管理团队</a></dd>
        <dd><a href="#">工作机会</a></dd>
        <dd><a href="#">客户服务</a></dd>
        <dd><a href="#">帮助</a></dd>
      </dl>
      <dl>
        <dt><a href="#">关于学成网</a></dt>
        <dd><a href="#">关于</a></dd>
        <dd><a href="#">管理团队</a></dd>
        <dd><a href="#">工作机会</a></dd>
        <dd><a href="#">客户服务</a></dd>
        <dd><a href="#">帮助</a></dd>
      </dl>
      <dl>
        <dt><a href="#">关于学成网</a></dt>
        <dd><a href="#">关于</a></dd>
        <dd><a href="#">管理团队</a></dd>
        <dd><a href="#">工作机会</a></dd>
        <dd><a href="#">客户服务</a></dd>
        <dd><a href="#">帮助</a></dd>
      </dl>
    </div>
</div>
    <!-- footer区域结束 -->

CSS

footer部分:

.footer {
  margin-top: 23px;
  height: 420px;
  background-color: #fff;
}

copyright部分:

.copyright {
  float: left;
  padding-top: 35px;
}
.copyright img {
  margin-left: 20px;
}
.copyright p {
  margin-top: 24px;
  margin-left: 20px;
  font-size: 12px;
  color: #666;
}
.copyright a {
  注意a标签一定要转换成块元素,否则margin和padding都不会生效.
  display: block;
  margin-left: 20px;
  margin-top: 18px;
  width: 120px;
  height: 35px;
  border: 1px solid #00a4ff;
  text-align: center;
  line-height: 35px;
  font-size: 16px;
  color: #00a4ff;
}

links部分:到最后一部分啦!这里运用了自定义列表<dl>的知识.

.links {
  padding-top: 35px;
  margin-right: 35px;
}
.links dl {
  float: right;
  margin-left: 100px;
}
.links dl dt a {
  font-size: 16px;
  color: #333;
}
.links dl dd a {
  /* 注意此处的选择器没有dt 因为dt和dd是同级的!!! */
  font-size: 12px;
  color: #333;
}

差不多到这里就结束啦,其实收获还是很大的,跳进了很多坑,中途写到很多次都卡住了,有因为类名写错的,父子级别写错的,忘记加浮动的,但是好在最后都靠自己解决了,跟着老师学习也学到了很多新的知识!真的很喜欢这种自己发现问题,解决问题的感觉,每一个问题可以是绊脚石,但是解决了也可以铺成一条路,助我越走越远.

完整的代码在下一章发布.

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2021-08-06，如有侵权请联系 cloudcommunity@tencent.com 删除

css