前端css综合案例1-7：新闻页面五彩导航产品模块快报模块学成在线首页CSS三角土豆案例
Posted karshey
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端css综合案例1-7：新闻页面五彩导航产品模块快报模块学成在线首页CSS三角土豆案例相关的知识，希望对你有一定的参考价值。
文章目录
案例1：新闻页面
效果
代码
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>新闻页面</title>
</head>
<body>
<h1>北方高温明日达鼎盛 京津冀多地地表温度将超60℃</h1>
<div class="grey">
2019-07-03 16:31:47 来源: <a href="">中国天气网 </a>
<input type="text" value="请输入查询条件..." class="search"> <button>搜索</button>
<!-- <input type="button" value="搜索"> -->
</div>
<!-- 分割线 -->
<hr>
<p>中国天气网讯
今天（3日），华北、黄淮多地出现高温天气，截至下午2点，北京、天津、郑州等地气温突破35℃。预报显示，今后三天（3-5日），这一带的高温天气将继续发酵，高温范围以及强度将在4日达到鼎盛，预计北京、天津、石家庄、济南等地明天的最高气温有望突破38℃，其中北京和石家庄的最高气温还有望创今年以来的新高。
</p>
<h4>气温41.4℃！地温66.5！北京强势迎七月首个高温日</h4>
<p class="pic">
<img src="pic.jpeg">
</p>
<p>今天，华北、黄淮一带的高温持续发酵，截至今天下午2点，陕西北部、山西西南部、河北南部、北京、天津、山东西部、河南北部最高气温已普遍超过35℃。大城市中，北京、天津、郑州均迎来高温日。</p>
<p>在阳光暴晒下，地表温度也逐渐走高。今天下午2点，华北黄淮大部地区的地表温度都在50℃以上，部分地区地表温度甚至超过60℃。其中，河北衡水地表温度高达68.3℃，天津站和北京站附近的地表温度分别高达66.6℃和66.5℃。
</p>
<h4>明日热度再升级！京津冀携手冲击38℃+</h4>
<p>中国天气网气象分析师王伟跃介绍，明天（4日），华北、黄淮地区35℃以上的高温天气还将继续升级，并进入鼎盛阶段，高温强度和范围都将发展到最强。
明天，北京南部、天津大部、河北中部和南部、山东中部和西部、山西南部局地、河南北部、东北部分地区的最高气温都将达到或超过35℃。</p>
<p>不过，专家提醒，济南被雨水天气完美绕开，因此未来一周，当地的高温还会天天上岗。在此提醒当地居民注意防暑降温，防范持续高温带来的各种不利影响。（文/张慧 数据支持/王伟跃 胡啸 审核/刘文静 张方丽）</p>
<p class="footer">本文来源：中国天气网 责任编辑：刘京_NO5631</p>
</body>
</html>
css:
body
/* font:字的大小/行间距 */
font: 16px/26px 'Microsoft yahei';
h1
/* 不加粗 */
font-weight: 400;
/* 居中对齐 */
text-align: center;
.grey
/* 时间、来源 */
color: gray;
font-size: 12px;
text-align: center;
a
/* 链接不要下划线 */
text-decoration: none;
.search
/* 搜索框的灰色字 */
color:gray;
width: 170px;
button
/* 搜索按钮加粗 */
font-weight: 700;
p
/* 两个字的缩进距离 */
text-indent: 2em;
/* 想让图片居中，则要让它的上级居中 */
.pic
text-align: center;
.footer
font-size: 12px;
color: gray;
效果：
案例2：五彩导航
效果
鼠标放上去会变色。
代码
html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>五彩导航</title>
</head>
<body>
<div class="nav">
<!-- 5个链接，每个都有背景图片 -->
<a href="#" class="bg1">五彩导航</a>
<a href="#" class="bg2">五彩导航</a>
<a href="#">五彩导航</a>
<a href="#">五彩导航</a>
<a href="#">五彩导航</a>
</div>
</body>
</html>
css：
.nav a
/* 允许在元素上设置宽度和高度 */
display: inline-block;
width: 120px;
height: 60px;
background-color: pink;
color: white;
text-align: center;
/* 跟height一样高，就能自动上下居中了，不过这里有背景图，不能一样高 */
line-height: 50px;
text-decoration: none;
.nav .bg1
background:url(bg1.png) no-repeat;
.nav .bg2
background:url(bg2.png) no-repeat;
/* 鼠标放上去就变背景图片 这里:hover前不能有空格*/
.nav .bg1:hover
background-image:url(bg4.png);
.nav .bg2:hover
background-image:url(bg22.png);
案例3：产品模块
效果
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UFT-8">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge"> -->
<title>产品模块</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="box">
<img src="img.jpg" alt="">
<p class="review">快递牛，整体不错蓝牙可以说秒连。红米给力</p>
<!-- <div class="info"> -->
<div class="re">来自于 117384232 的评价</div>
<div class="infoo">
<h4><a href="#">Redmi AirDots真无线蓝...</a></h4>
<em>|</em>
<span>99.9元</span>
</div>
<!-- </div> -->
</div>
</body>
</html>
css：
/* 清除网页元素的内外边距 */
*
margin: 0;
padding: 0;
body
background-color: #f5f5f5;
a
text-decoration: none;
color: black;
.box
width: 298px;
height: 415px;
background-color: #ffffff;
/* 让块级的盒子水平居中对齐 */
margin: 100px auto;
/* 图片跟上级的盒子一样宽 */
.box img
width: 100%;
.review
height: 90px;
margin-top: 30px;
font-size: 14px;
padding: 0 28px;
.re
color: gray;
font-size: 12px;
padding: 0 28px;
.infoo
margin-top: 15px;
font-size: 14px;
padding: 0 28px;
.infoo h4
display: inline-block;
font-weight: 400;
.infoo em
color: #ebe4e0;
margin: 0px 6px 0px 15px;
font-style: normal;
.infoo span
color: #ff6700;
案例4：快报模块
效果
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>快报模块</title>
</head>
<body>
<div class="box">
<h3>品优购快报</h3>
<div>
<ul>
<li><a href="#">【特惠】爆款耳机5折秒！ </a></li>
<li><a href="#">【特惠】母亲节，健康好礼低至5折！ </a>
<li><a href="#">【特惠】爆款耳机5折秒！ </a></li>
<li><a href="#">【特惠】9.9元洗100张照片！ </a></li>
<li><a href="#">【特惠】长虹智能空调立省1000 </a></li>
</ul>
</div>
</div>
</body>
</html>
css：
*
margin: 0px;
padding: 0px;
.box
margin: 100px auto ;
width: 250px;
height: 165px;
border: 1px solid grey;
h3
padding-left: 20px;
font-weight: 400;
font-size: 14px;
height: 33px;
line-height: 33px;
border-bottom: 1px dotted grey;
/* margin-top: auto;
margin-bottom: auto; */
/* ul
height: 132px;
line-height:132px ;
*/
ul li
list-style-type: none;
padding-left: 20px;
height: 24px;
line-height: 24px;
ul a
color: grey;
text-decoration: none;
font-size: 12px;
ul a:hover
text-decoration: underline;
效果：
案例5：学成在线首页
效果
代码
跟目标的效果不完全一样，有一点点偏差。
页眉区：
html：
<!-- 页眉区 -->
<div class="header w">
<!-- logo -->
<div class="logo">
<img src="logo.png">
</div>
<!-- 导航菜单 -->
<div class="menu1">
<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="user.png">
qq-lilei
</div>
</div>
css：
/* 整个背景 */
*
margin: 0;
padding: 0;
.w
width: 1200px;
margin: auto;
body
background-color: #f3f5f7;
a
text-decoration: none;
li
list-style: none;
/* ---------------header--------------- */
.header
/* 因为logo高度为42 */
height: 42px;
margin: 30px auto;
.header .logo
float: left;
width: 200px;
height: 42px;
.header .menu1
五彩导航案例