学成在线案例

wwnewnewnew

已于 2023-07-06 22:42:52 修改

阅读量87

点赞数

分类专栏： html+css 文章标签： html css

于 2023-07-03 20:29:16 首次发布

本文链接：https://blog.csdn.net/qq_45994446/article/details/131479940

版权

html+css 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

文章详细介绍了CSS在网页布局中的应用，包括确认版心、浮动布局、导航栏与搜索框的制作、用户模块、Banner区域的创建，以及精品推荐和footer模块的样式设计。重点讲解了如何通过浮动、清除边距、内联元素与块级元素的转换来实现各种元素的定位和样式设置。

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

css属性书写顺序：

页面布局思路：

1.确认版心（可视区)，通过测量可知页面多宽。

2.分析页面行模块和行模块中的列模块

3.每行中的列模块通常是浮动的，先确定列大小，在确定列位置，页面布局第二准则。

4.先结构后样式，结构最重要

5.理清布局结构，再写代码，加油积累！

学成在线网页制作

准备工作：确认版心大小，清除页面边距。写通用css，需要直接调用

   *{
    margin: 0;
    padding: 0;
}
/* 整体版心样式，哪个盒子需要调用即可 */
.w{
    width: 1200px;
    margin: auto;
}

一.制作header头部区域

1.先写父级盒子样式

.header{
    height: 42px;
    /* 此处加上auto是为了防止覆盖版心的margin样式，无法居中 */
 margin: 30px auto;
}

2.添加logo

  <div class="logo">
            <img src="images/logo_03.png">
        </div>


.logo{
    width: 198px;
    height: 42px;

}

3.导航栏部分

实际导航栏开发中通常使用li包含链接（li+a)的做法

原因：

li+a语义更加清晰，更有条理；

直接使用a会使搜索引擎辨别为堆砌关键字，使网站降权影响排名。

（1）导航栏div>ul>li>a

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

注意：

根据一浮全浮，所以前面的logo样式也需要添加浮动，这样，导航栏盒子才能浮动到logo右侧。

nav导航栏不设置宽度，未来可添加其他文字。因为浮动有了行内块元素的特性，内容有多宽盒子就能有多宽。

.nav{
     /* 根据一浮全浮，所以前面的logo样式也需要浮动 */
    float: left;
    margin-left: 60px;
}

使导航栏内子盒子内容在一行显示，需要给li加浮动而不是a，因为li是块级元素，需要一行显示

.nav ul li{
    /* 使导航栏内子盒子内容在一行显示，需要给li加浮动而不是a，因为li是块级元素，需要一行显示 */
        float: left;
}

a属于行内元素无高度和宽度，写了高度不起作用，所以需要转成块级元素；

因为导航栏内文字数量不同，所以不方便给宽度，直接使用padding撑开。

.nav ul li a{
    /* a属于行内元素无高度和宽度，写了高度不起作用，所以需要转成块级元素 */
    display: block;
    height: 42px;
    /* 因为文字数量不同，所以不方便给宽度，直接使用padding撑开 */
    padding: 0 10px;
    /* 使文字垂直居中显示 */
    line-height: 42px;
    font-size:18px;
     color: #050505;
}

添加鼠标经过时的下划线

.nav ul li a:hover{
    /* 鼠标经过加入下划线 */
    border-bottom: 2px solid #00a4ff;
    color: #00a4ff ;

（2）搜索框

搜索框注意点：

根据一浮全浮需要将搜索框父盒子设置浮动。

input与button为表单行内块元素，两者宽度相加为父盒子宽度，但两者之间默认是有缝隙的，所以button被挤出父盒子，所以需要对两者添加浮动消除缝隙。

input设置宽度了在添加padding会撑大盒子，所以需要减小宽度。

button默认自带边框，所以需要border：0；去掉边框。

 <div class="search">
            <input type="text" value="输入关键词">
            <button></button>
        </div>

.search{
    float: left;
    width: 412px;
    height: 42px;
    background-color: skyblue;
    margin-left: 50px;
}
.search input{
     /* 因为input宽度加button宽度等于search盒子宽度,但input与button为行内块元素,
    两者之间默认有缝隙,所以button被挤了下来.所以两个都需要添加浮动 */
    float: left;
    width: 345px;
    height: 40px;
    border: 1px solid #00a4ff;
    border-right:0;
    color: #bfbfbf;
    font-size: 14px;
    /* input设置了宽度再加padding会撑大盒子,所以input的宽度应减去padding值 */
    padding-left: 15px;
}
.search button{
    /* 因为input宽度加button宽度等于search盒子宽度,但input与button为行内块元素,
    两者之间默认有缝隙,所以button被挤了下来.所以两个都需要添加浮动 */
    float: left;
    width: 50px;
    height: 42px;
    /* button默认自带边框,所以需要去除边框 */
    border: 0;
    background:url(images/search.png);

}

（3）用户模块

头像昵称居中对齐未学习

 <div class="user">
            <img src="images/touxiang.png" alt="">
            qq-likei
        </div>

.user{
    float: right;
    line-height: 42px;
    margin-right: 30px;
    font-size: 14px;
    color: #666;

}

二.制作banner区域

（1）制作底部蓝色背景

 <div class="banner">

.banner{
height: 421px;
background-color: #1c036c;
}

（2）制作版心部分

<div class="w">

.banner .w{
    /* no-repeat表示图片不重复显示 */
    background: url(images/banner2.png) no-repeat top center;
    height: 421px;
}

（3）制作版心左侧模块

<div class=left>
                <ul>
                    <!-- &gt;表示>符号,&lt;表示<符号 -->
                    <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="#">UI <span>&gt;</span></a></li>
                    <li> <a href="#">产品 <span>&gt;</span></a></li>
                </ul>
            </div>

 .left{
    height: 421px;
    width: 190px;
    /* 透明色 rgba（0，0，0，.3） */
    background-color: rgba(0,0,0,.3);
}
/* 因为a为行内元素，没有行高，所以在li内设置文字行高 */
.left ul li {
/* 文字行高为上一行文字底部到下一行文字底部的高度 */
    height: 45px;
    line-height: 45px;
    padding: 0 22px;
}

 .left ul li a{
     font-size: 14px;
     color: #fff;
}
.left ul li a span{
    float: right;
}

（4）制作版心右侧课程表模块

此处可分为一个大盒子内包含两个小盒子：我的课程表以及下面的具体内容。

 <div class="course">
                <h2>我的课程表</h2>
                <div class="nr">
                    <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>

此处先设置我的课程表的盒子样式，注意此处给嵌套的盒子添加外边距但父盒子没有产生外边距塌陷或者外边距合并现象是因为添加了浮动；然后设置盒子内文字样式。

然后对课程表具体内容设置样式，首先对下面盒子整体设置padding，使其内文字顶行对齐。

然后分别分为ul和a对其设置样式。

/* 我的课程表 */
.course
{
    float: right;
   /* 此处添加外边距没有产生外边距塌陷或者外边距合并现象是因为添加了浮动 */
  margin-top: 50px;
    width: 230px;
    height: 300px;
    background-color: #fff;
    
}
.course h2{
  /* 此处不用给宽度，和父盒子一样宽 */
    height: 50px;
    background-color: #9bceea;
    /* 垂直居中 */
     line-height: 50px;
    color: #fff;
/* 水平居中 */
    text-align: center;
    font-size:18px;
}
/* 使文字排列整齐 */
.nr{
    padding: 0 20px;
}

.nr ul li{
    padding: 14px 0;
    border-bottom: 1px solid #ccc;
}
.nr ul li h4{
    font-size: 16px;
    color: #4e4e4e;
    
}
.nr ul li p{
    font-size: 12px;
   color: #a5a5a5; 
}
.nr .more{
    /* a标签为行内元素,没有宽高,转换为块元素才能设置宽高 */
    display: block;
    height: 38px;
    border: 1px solid #00a4ff;
    margin-top:5px;
    text-align: center;
    line-height: 38px;
    color: #00a4ff;
    font-weight: 700;
    font-size: 16px;
}

完成样式图：

(5)制作精品推荐导航栏模块

首先设置父盒子样式,然后将其内分为左中右三个部分h3,ul和a标签;

直接对父盒子设置行高,,这样子元素可直接继承,使其内文字垂直居中;

分别对三个子元素设置浮动,使其在一行展示;

因为ul中的每个li中文字数量不同,所以可设置padding将其撑开文字大小;

 <div class="goods w">
        <h3>精品推荐</h3>
        <ul>
            <li><a href="#">Jquery</a></li>
            <li><a href="#">Spark</a></li>
            <li><a href="#">Mysql</a></li>
            <li><a href="#">JavaWeb</a></li>
            <li><a href="#">Python</a></li>
            <li><a href="#">Go</a></li>
        </ul>
        <a href="#" class="mood">修改兴趣</a>
    </div>

/* 精品推荐模块 */
.goods{
    height: 60px;
    margin-top: 10px;
    box-shadow: 0 2px 3px 3px rgba(0,0,0,.1);
    background-color: #fff;
    /* 直接指定父元素行高,子元素会直接继承,这样就不用给每个分别设置行高 */
     line-height: 60px;
}
.goods h3{
    float: left;
    margin-left: 30px;
    font-size: 16px;
    color: #00a4ff;
}
.goods ul{
    float: left;
    margin-left: 30px;
}
.goods ul li{
     float: left;
     
}
.goods ul li a{
    /* 每个字数不同,所以直接使用padding撑开 */
    padding: 0 30px;
    font-size: 16px;
    color: #050505;
    /* 给每个添加右边框 */
    border-left:1px solid #ccc;
 
}
.mood{
    float: right;
    margin-right: 30px;
    font-size: 14px;
    color: #00a4ff;
}

完成样式图:

(6)设置精品推荐详情模块

首先可将此模块分为box-hd和box-bd两部分,box-hd内添加标题和a链接;box-bd内通过ul完成盒子排序;

注意:

最外层大盒子可以不给高度,防止后续可能会添加商品,但里面内容存在浮动,为了防止下一模块标准流上浮,需要清除浮动;

当图片超出父盒子需要强制设置图片width:100%;

<div class="box w">
        <div class="box-hd">
            <h3>精品推荐</h3>
            <a href="#">查看全部</a>
        </div>
        <div class="box-bd">
            <ul class="clearfix">
                <li>
                    <em>
                        <img src="images/HOT.png" alt="">
                    </em>
                    <img src="images/pic3.png">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                    <div class="info">
                        <span>高级</span> • 1125人在学习
                    </div>
                </li>
                <li>
                    <em>
                        <img src="images/HOT.png" alt="">
                    </em>
                    <img src="images/pic4.png">
                    <h4>Android 网络图片加载框架详解</h4>
                    <div class="info">
                        <span>高级</span> • 1125人在学习
                    </div>
                </li>
                <li>
                    <em>
                        <img src="images/HOT.png" alt="">
                    </em>
                    <img src="images/pic5.png">
                    <h4>Angular 2 最新框架+主流技术+项目实战</h4>
                    <div class="info">
                        <span>高级</span> • 1125人在学习
                    </div>
                </li>
                <li>
                    <img src="images/pic6.png">
                    <h4>Android Hybrid APP开发实战 H5+原生！</h4>
                    <div class="info">
                        <span>高级</span> • 1125人在学习
                    </div>
                </li>
                <li>
                    <img src="images/pic6.png">
                    <h4>Android Hybrid APP开发实战 H5+原生！</h4>
                    <div class="info">
                        <span>高级</span> • 1125人在学习
                    </div>
                </li>
                <li>
                    <img src="images/pic3.png">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                    <div class="info">
                        <span>高级</span> • 1125人在学习
                    </div>
                </li>
                <li>
                    <img src="images/pic4.png">
                    <h4>Android 网络图片加载框架详解</h4>
                    <div class="info">
                        <span>高级</span> • 1125人在学习
                    </div>
                </li>
                <li>
                    <img src="images/pic5.png">
                    <h4>Angular 2 最新框架+主流技术+项目实战</h4>
                    <div class="info">
                        <span>高级</span> • 1125人在学习
                    </div>
                </li>
                <li>
                    <img src="images/pic6.png">
                    <h4>Android Hybrid APP开发实战 H5+原生！</h4>
                    <div class="info">
                        <span>高级</span> • 1125人在学习
                    </div>
                </li>
                <li>
                    <img src="images/pic6.png">
                    <h4>Android Hybrid APP开发实战 H5+原生！</h4>
                    <div class="info">
                        <span>高级</span> • 1125人在学习
                    </div>
                </li>
            </ul>
        </div>
    </div>

.box{
    margin-top: 35px;
    /* 可以不给高度,因为后期可能会添加商品 ,
    但需要添加清除浮动,防止下面标准流飘上来*/
   /* height: 600px;   */
}
.box-hd{
    /* 因为h3和a均添加了浮动,所以下面的信息就会跑上来,所以需要清除浮动,
或者对h3和a的父盒子box-hd添加高 */
    height: 45px;
}
.box-hd h3{
    float: left;
    font-size: 20px;
    color: #494949;

}
.box-hd a{
    float: right;
font-size: 12px;
color: #a5a5a5;
margin-top: 10px;
margin-right: 30px;
}
.box-hd a:hover{
    color: #00a4ff;
}
.box-bd ul{
    /* 此处为li的父元素ul添加宽度大于版心宽度,这样就可以有足够宽度一行放五个盒子以及他们的右外边距,
    从而li中盒子不会换行. 每个盒子228px,加上外边距15px就是243px,每行五个就是243*5=1215,
    所以宽度大于1215px即可放下每行五个盒子及其外边距*/
  width: 1216px;
}
.box-bd ul li{
    /* 父盒子需要添加相对定位.hot才能在盒子上方飘动 */
    position: relative;
    float: left;
    width: 228px;
    height: 270px;
    background-color: skyblue;
    /* 此处添加每个盒子的右外边距,每行最后一个盒子会被挤到下一行,一般都是直接清除每一行最后一个盒子的外边距,
    但此处是多行,很麻烦.所以直接扩大父元素ul的宽度,不会影响其父盒子的宽度,因为其父盒子已经采取了版心的宽度. */
    margin-right: 15px;
    margin-bottom: 15px;
}
/* 此处使用后代选择器>,选择修改li儿子img的样式,而不是em里孙子img的样式 */
.box-bd ul li >img{
    /* 此处的图片大于父盒子尺寸,超出了,所以强制设置图片尺寸自适应父盒子大小 */
    width: 100%;
}
/* 子盒子添加绝对定位 */
.box-bd ul li em{
    position: absolute;
    top: 4px;
    right: -4px;
}
.box-bd ul li h4{
    margin: 24px 20px 20px 24px;
    font-size: 14px;
    color: #050505;
    font-weight: 400;
}
.box-bd .info{
    font-size: 12px;
    color: #999;
     margin: 0px 20px 0px 24px;
}
.box-bd .info span{
    color: #ff7c2d;
}

完成样式图:

(7)footer模块制作

footer可分为左右两部分:copyright和links两个盒子;左边copyright由img和p标签,a标签组成;右边links盒子由dl自定义标签组成;

在设置footer盒子前要确保上面模块盒子清除了浮动,否则footer会上移;

 <div class="footer">
        <!-- 盒子内放置版心 -->
        <div class="w">
            <div class="copyright">
                <img src="images/logo2.png" alt="">
                <p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。<br>
                    © 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</p>
                <a href="#" class="app">下载APP</a>
            </div>
            <div class="links">
                <dl>
                    <dt>关于学成网</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>新手指南</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>合作伙伴</dt>
                    <dd><a href="#">合作机构</a></dd>
                    <dd><a href="#">合作导师</a></dd>

                </dl>
            </div>
        </div>
    </div>

.footer{
    height: 418px;
    margin-top: 40px;
    background-color: #fff;
}
.footer .w{
    /* 此处因为w版心是嵌套在footer中的盒子,使用margin会造成外边距合并塌陷,所以使用padding */
  padding-top: 35px;
}
 .copyright {
     float:left;
 }
 .copyright p{
    font-size: 12px;
    color:#666;
    margin: 25px 0 18px 0;
}
 .copyright .app{
    /* 因为a标签为行内元素没有宽高,设置宽高则一定要转换成行内块元素 */
     display: block;
    width: 118px;
    height: 33px;
     font-size: 16px;
    color: #00a4ff;
    text-align: center;
    line-height: 33px;
 border: 1px solid #00a4ff;
 }
   .links{
       float: right;
   }
      .links dl {
          float: left;
          margin-left: 115px;
      }
   .links dl dt{
       font-size: 16px;
       color: #333333;
       margin-bottom: 15px;
   }
    .links dl dd a{
        font-size: 12px;
        color: #333333;

    }

完成样式图:

wwnewnewnew

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学成在线案例

1.确认版心（可视区)，通过测量可知页面多宽。2.分析页面行模块和行模块中的列模块3.每行中的列模块通常是浮动的，先确定列大小，在确定列位置，页面布局第二准则。4.先结构后样式，结构最重要5.理清布局结构，再写代码，加油积累！
复制链接

扫一扫

专栏目录