学成在线首页——静态页面基础项目（HTML+CSS）【学习笔记】

超、凢脫俗 2022-11-20 02:00 151阅读 0赞

来源：黑马前端  
难度：⭐（简单）——适合刚学习html和css的新手小白  
源码和素材：链接: https://pan.baidu.com/s/1Qf6OuMNyFDswJOcB93NCrw 提取码: fsih  
效果图：

![在这里插入图片描述][20201121154424922.png_pic_center]

## 1 CSS属性书写顺序(重点) ##

建议遵循以下顺序：

1.  布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）
2.  自身属性：width / height / margin / padding / border / background
3.  文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
4.  其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …

.jdc { 
        display: block;
        position: relative;
        float: left;
        width: 100px;
        height: 100px;
        margin: 0 10px;
        padding: 20px 0;
        font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
        color: #333;
        background: rgba(0,0,0,.5);
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -o-border-radius: 10px;
        -ms-border-radius: 10px;
        border-radius: 10px;
    }

## 2 布局流程 ##

为了提高网页制作的效率，布局时通常有以下的布局流程，具体如下：

1、必须确定页面的版心（可视区）， 我们测量可得知。

2、分析页面中的行模块，以及每个行模块中的列模块。其实页面布局，就是一行行罗列而成

3、制作HTML结构。我们还是遵循，先有结构，后有样式的原则。结构永远最重要。

4、然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块。  
![在这里插入图片描述][20201121155342561.png_pic_center]

## 3 页面制作 ##

这个页面的版心是 1200像素 每个版心都要水平居中对齐，所以，我们干脆把版心定义为：  
index.html:

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>学成在线-不是所有的网站都叫学成在线</title>
    	<link rel="stylesheet" href="style.css">
    </head>
    <body>
        <class class="w"></class>
    </body>
    </html>

style.css:

/* 清除元素默认的内外边距 */
    *{ 
        margin: 0;
        padding: 0;
    }
    /* 版心 1200 水平居中 */
    .w { 
        width: 1200px;
        margin: auto;
    }

#### 1) 头部制作 ####

结构图如下：

![20201121155858712.png_pic_center][]

*  1号是版心盒子header 1200 \* 42 的盒子水平居中对齐, 上下给一个margin值就好了。
 *  版心盒子 里面包含 2号盒子 logo
 *  版心盒子 里面包含 3号盒子 nav导航栏
 *  版心盒子 里面包含 4号盒子 search搜索框
 *  版心盒子 里面包含 5号盒子 user个人信息
 *  注意，要求里面的 4个盒子 必须都浮动

index.html:

<body>
    	
    	<div class="header w">
    		
    		<div class="logo">
    			<img src="images/logo.png" alt="">
    		</div>
    		
    		<div class="nav">
    			<ul>
    				<li><a href="#">首页</a></li>
    				<li><a href="#">课程</a></li>
    				<li><a href="#">职业规划</a></li>
    			</ul>
    		</div>
    		
    		<div class="search">
    			<input type="text" value="输入关键词">
    			<button></button>
    		</div>
    		
    		<div class="user">
    			<img src="images/user.jpg" alt="" style="vertical-align: middle;">
    			lilei-hanmm
    		</div>
    	</div>
    	
        </div>
    </body>

style.css:

body { 
        background-color: #f3f5f7;
    }
    
    
    /* 清除默认样式 */
    li { 
        list-style: none;
    }
    
    button { 
        border: none;
    }
    
    a { 
        text-decoration: none;
    }
    
    /* header start */
    
    .header { 
        width: 1200px;
        height: 42px;
        /* background-color: pink; */
        margin: 30px auto;
    }
    
    .logo { 
        float: left;
        margin-right: 60px;
    }
    
    .nav { 
        float: left;
    }
    
    .nav ul li { 
        float: left;
    }
    
    .nav ul li a { 
        display: block;
        height: 40px;
        padding: 0 10px;
        margin-right: 20px;
        line-height: 40px;
        color: #050505;
        font-size: 18px;
        /* text-decoration: none; */
    }
    
    
    /* 鼠标经过链接，出现底边框 */
    
    .nav ul li a:hover { 
        border-bottom: 2px solid #00a4ff;
    }
    
    .search { 
        float: left;
        margin-left: 70px;
    }
    
    .search input { 
        float: left;
        width: 340px;
        height: 40px;
        border: 1px solid #00a4ff;
        border-right: 0;
        padding-left: 20px;
        color: gray;
    }
    
    .search button { 
        float: left;
        width: 50px;
        height: 42px;
        background-color: #fff;
        background: url(images/btn.png);
    }
    
    .user { 
        float: left;
        margin-left: 30px;
        height: 42px;
        line-height: 42px;
        font-size: 14px;
        color: #666;
        vertical-align: middle;
    }

细节：用户部分的盒子中使用vertical-align实现图片垂直居中对其  
![在这里插入图片描述][20201121165147185.png_pic_center]

![在这里插入图片描述][2020112116505480.png_pic_center]

#### 2）banner制作 ####

结构图如下：

![20201121161250137.png_pic_center][]

*  1号盒子是通栏的大盒子banner， 不给宽度，给高度，给一个蓝色背景。
 *  2号盒子是版心， 要水平居中对齐。
 *  3号盒子版心内，左对齐 subnav侧导航栏。
 *  4号盒子版心内，右对齐 course 课程。

![在这里插入图片描述][20201121163108150.png_pic_center]

index.html:

<div class="banner">
    		<div class="w">
    			
    			<div class="subnav">
    				<ul>
    					<li><a href="#">前端开发 <span>></span></a></li>
    					<li><a href="#">后端开发 <span>></span></a></li>
    					<li><a href="#">移动开发 <span>></span></a></li>
    					<li><a href="#">人工智能 <span>></span></a></li>
    					<li><a href="#">商业预测 <span>></span></a></li>
    					<li><a href="#">云计算&大数据 <span>></span></a></li>
    					<li><a href="#">运维&从测试 <span>></span></a></li>
    					<li><a href="#">UI设计 <span>></span></a></li>
    					<li><a href="#">产品 <span>></span></a></li>
    				</ul>
    			</div>
    	</div>

style.css:

/* banner start */
    .banner{ 
        height: 420px;
        background: #1c036c url(images/banner2.jpg) no-repeat top center;
        
    }
    
    .subnav{ 
        float: left;
        width: 190px;
        height: 420px;
        padding: 0 20px;
        /* 背景半透明 */
        background: rgba(0,0,0,.3);
    
    }
    
    .subnav li{ 
        height: 45px;
        line-height: 45px;
        
    }
    .subnav li a{ 
        font-size: 14px;
        color: white;
        /* text-decoration: none; */
    }
    
    .subnav li a:hover{ 
        color: #00a4ff;
    }
    .subnav span{ 
        float: right;
    }

#### 3）课程表 ####

模块

结构图如下：

![在这里插入图片描述][20201121163745594.png_pic_center]

*  1号盒子 是 228 \* 300 的盒子 右浮动 注意 浮动的元素 不会有外边距塌陷的问题
 *  1号盒子内 分为 上下 两个 子盒子
 *  2号子盒子是 上部分 我们命名为 course-hd (hd 是 head 的简写 头部的意思，我们经常用)
 *  3号子盒子是 下部分 我们命名为 course-bd (bd 是 body 的简写 主体的意思，我们经常用)  
    ![在这里插入图片描述][20201121163726323.png_pic_center]  
    index.html:

<div class="course">
    				<div class="course-hd">我的课程表</div>
    				<div class="course-bd">
    					<ul>
    						<li>
    							<h4>继续学习 程序语言设计</h4>
    							<p>正在学习-使用对象</p>
    						</li>
    						<li>
    							<h4>继续学习 程序语言设计</h4>
    							<p>正在学习-使用对象</p>
    						</li>
    						<li>
    							<h4>继续学习 程序语言设计</h4>
    							<p>正在学习-使用对象</p>
    						</li>
    						
    					</ul>
    					<a href="#" class="all">全部课程</a>
    				</div>
    			</div>
    		</div>

style.css:

.course{ 
       float: right;
        width: 228px;
        height: 300px;
        background-color: #f3f5f7;
        margin-top: 50px;
    }
    
    .course-hd{ 
        height: 48px;
        background-color: #7ccdf8;
        color: white;
        font-size: 18px;
        font-weight: bold;
        text-align: center;
        line-height: 48px;
        
    }
    
    .course-bd{ 
       padding: 0 15px; 
    }
    
    .course-bd li{ 
        height: 50px;
        border-bottom: 1px solid #ccc;
        margin-top: 10px;
    }
    .course-bd ul{ 
        /* 外边距塌陷问题 margin-top: 10px; */
        padding-top: 10px;
    }
    
    .course-bd li h4{ 
        font-size: 14px;
        color: #4e4e4e;
    }
    .course-bd li p{ 
        font-size: 10px;
        color: #5a5a5a;  
    }
    .all{ 
        display: block;
        height: 38px;
        border:1px solid #00a4ff;
        margin-top: 10px;
        line-height: 38px;
        font-size: 16px;
        color: #00a4ff;
        text-align: center;
    
    }

#### 4）精品推荐小模块 ####

结构图如下：

![20201121163146119.png_pic_center][]

*  **复习点：** 因为里面三个盒子都要垂直居中，我们利用 继承性，给 最大的盒子 一个垂直居中的代码就好了。  
    可以继承的样式： font- line- text- color
 *  大盒子水平居中 goods 精品 ，注意此处有个盒子阴影
 *  1号盒子是标题 H3 左侧浮动
 *  2号盒子 里面放链接 左侧浮动 goods-item 距离可以控制链接的 左右外边距（注意行内元素只给左右内外边距）
 *  3号盒子 右浮动 mod 修改

index.html:

<div class="goods w">
    		<h3> 精品推荐 </h3>
    		<div class="goods-item">
    			|  <a href="#">jQuery</a>
    			|  <a href="#">Spark</a>
    			|  <a href="#">MySQL</a>
    			|  <a href="#">JavaWeb</a>
    			|  <a href="#">MySQL</a>
    			|  <a href="#">JavaWeb</a>
    		</div>
    		<div class="mod"> 修改兴趣 </div>                                                                
    	</div>

style.css:

/* goods start */
    .goods{ 
        height: 60px;
        background-color:#fff;
        box-shadow: 2px 2px 2px rgba(0,0,0,.2);
        margin-top: 10px;
        line-height: 60px;
        /* 行高可以继承 */
    }
    .goods h3{ 
        float: left;
        margin: 0 30px;
        font-size: 16px;
        color: #00a4ff;
    
    }
    .goods-item{ 
        float: left;
        color: #bfbfbf;
    }
    .goods-item a{ 
        font-size: 16px;
        color: #050505;
        margin: 0 30px;
    }
    .mod{ 
        float: right;
        color:#00a4ff;
        margin-right: 30px;
    }

#### 5）精品推荐大模块 ####

结构图如下：

![20201121164028541.png_pic_center][]

*  1号盒子为最大的盒子 box 版心水平居中对齐
 *  2号盒子为上面部分 box-hd – 里面 左侧标题H3 左浮动 右侧 链接 a 右浮动
 *  3号盒子为底下部分 box-bd — 里面是无序列表 有 10个 小li 组成
 *  小li 外边距的问题， 这里有个小技巧。 给box-hd 宽度为 1215 就可以一行装开5个 li了
 *  复习点： 我们用到清除浮动 因为 box-hd 里面的盒子个数不一定多少，我们就不给高度了，但是里面的盒子浮动了， 影响下面的布局，此时需要浮动

清除浮动：  
style.css:

.clearfix:before, .clearfix::after{ 
        content: "";
        display: table;
    }
    .clearfix:after{ 
        clear: both;
    }
    .clearfix{ 
        *zoom: 1;
    }

index.html:

<div class="box w">
    		<div class="box-hd">
    			<h3>精品推荐</h3>
    			<a href="#">查看全部</a>
    		</div>
    		
    		<div class="box-bd clearfix">
    			<ul>
    				<li>
    					<img src="images/pic.jpg" alt="">
    					<h4>Think PHP 5.0 博客系统实战项目演练</h4>
    					<p><span>高级</span>  •  1125人在学习</p>
    				</li>
    				<li>
    					<img src="images/pic.jpg" alt="">
    					<h4>Think PHP 5.0 博客系统实战项目演练</h4>
    					<p><span>高级</span>  •  1125人在学习</p>
    				</li>
    				<li>
    					<img src="images/pic.jpg" alt="">
    					<h4>Think PHP 5.0 博客系统实战项目演练</h4>
    					<p><span>高级</span>  •  1125人在学习</p>
    				</li>
    				<li>
    					<img src="images/pic.jpg" alt="">
    					<h4>Think PHP 5.0 博客系统实战项目演练</h4>
    					<p><span>高级</span>  •  1125人在学习</p>
    				</li>
    				<li>
    					<img src="images/pic.jpg" alt="">
    					<h4>Think PHP 5.0 博客系统实战项目演练</h4>
    					<p><span>高级</span>  •  1125人在学习</p>
    				</li>
    				<li>
    					<img src="images/pic.jpg" alt="">
    					<h4>Think PHP 5.0 博客系统实战项目演练</h4>
    					<p><span>高级</span>  •  1125人在学习</p>
    				</li>
    				<li>
    					<img src="images/pic.jpg" alt="">
    					<h4>Think PHP 5.0 博客系统实战项目演练</h4>
    					<p><span>高级</span>  •  1125人在学习</p>
    				</li>
    				<li>
    					<img src="images/pic.jpg" alt="">
    					<h4>Think PHP 5.0 博客系统实战项目演练</h4>
    					<p><span>高级</span>  •  1125人在学习</p>
    				</li>
    				<li>
    					<img src="images/pic.jpg" alt="">
    					<h4>Think PHP 5.0 博客系统实战项目演练</h4>
    					<p><span>高级</span>  •  1125人在学习</p>
    				</li>
    				<li>
    					<img src="images/pic.jpg" alt="">
    					<h4>Think PHP 5.0 博客系统实战项目演练</h4>
    					<p><span>高级</span>  •  1125人在学习</p>
    				</li>
    			</ul>
    		</div>
    	</div>

style.css:

/* box start */
    .box{ 
        display: block;
        margin-top: 15px;
        
    }
    .box-hd{ 
        height: 60px;
        line-height: 60px;
    }
    .box h3{ 
        float: left;
        font-size: 20px;
        font-weight: normal;
    }
    .box-hd a{ 
        margin-right: 30px;
        float: right;
        font-size: 12px;
        color: #a5a5a5;
    }
    .box-bd{ 
    width: 1215px;
    
    }
    
    .box-bd li{ 
        float: left;
        width: 228px;
        height: 270px;
        margin-right: 15px;
        margin-top: 15px;
        background-color: #fff;
        box-shadow: 2px 2px 2px rgba(0,0,0,.3);
    }
    .box-bd li img{ 
        width: 100%;
    }
    .box-bd li h4{ 
        margin:20px;
        font-size: 14px;
        color: #050505;
        font-weight: 400;
    }
    .box-bd li p{ 
        margin: 0 20px;
        font-size: 12px;
        color: #999;
    }
    .box-bd li span{ 
        color:orange;
    }

#### 6） 底部模块制作 ####

结构图如下：

![20201121164416159.png_pic_center][]

*  1号盒子通栏大盒子 底部 footer 给高度 底色是白色
 *  2号盒子版心水平居中
 *  3号盒子版权 copyright 左对齐
 *  4号盒子 链接组 links 右对齐

index.html:

<div class="footer">
    		<div class="w">
    			
    			<div class="copyright">
    				<img src="images/logo.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>

style.css:

/* footer */
    .footer{ 
        height: 385px;
        padding-top: 30px;
    }
    
    .copyright{ 
        float: left;
    }
    
    .copyright p{ 
    font-size: 12px;
    color: #666;
    margin: 20px 0 15px 0;
    }
    
    .app{ 
        display: block;
        height: 34px;
        width: 118px;
        border:1px solid #00a4ff;
        margin-top: 10px;
        line-height: 34px;
        font-size: 16px;
        color: #00a4ff;
        text-align: center;
    }
    
    .links{ 
        float: right;
    }
    .links dl{ 
        float: left;
        margin-left: 100px;
    }
    
    .links dt{ 
        height: 35px;
        font-size: 16px;
        color: #333;
    }
    
    .links dd a{ 
        font-size: 12px;
        color: #333;
    }
    
    .links dd a:hover{ 
        color: #00a4ff;
    }

[20201121154424922.png_pic_center]: /images/20221120/537f07f7225349ccb151a2ff9b7dff61.png
[20201121155342561.png_pic_center]: /images/20221120/db464cdb6d50439d8a19189f4418f838.png
[20201121155858712.png_pic_center]: /images/20221120/9ea8557717c642f89f43cef954bb08cb.png
[20201121165147185.png_pic_center]: /images/20221120/81fc8f5b4ed040889454b06a865da0ee.png
[2020112116505480.png_pic_center]: /images/20221120/1a2eb5b69c454e2cbef6939da53e4e75.png
[20201121161250137.png_pic_center]: /images/20221120/59627e12b84747448925b74c8e5130b9.png
[20201121163108150.png_pic_center]: /images/20221120/7d69d17e08a54ec397fe1fef001b33f6.png
[20201121163745594.png_pic_center]: /images/20221120/f8310e383e754d859e870b51724deace.png
[20201121163726323.png_pic_center]: /images/20221120/28c6fcab5b724dfdaae5ff07396b97f5.png
[20201121163146119.png_pic_center]: /images/20221120/541160fd143f423d8af860f7737cca59.png
[20201121164028541.png_pic_center]: /images/20221120/1a469b3fba3244c1a6663466378ed23f.png
[20201121164416159.png_pic_center]: /images/20221120/3a427f81b5d842b7bf289e3e75c60985.png