失眠网 > HTML+CSS实战——学成项目（含源码素材 psd文件）

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

时间：2021-01-16 18:32:00

文章目录

准备工作版心和清除默认样式header布局logo和nav布局搜索——布局和文本框用户区域 banner布局精品推荐版权区域

项目源码——点击下载

准备工作

版心和清除默认样式

布局：从外到内，从上到下，从左到右

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布局

<div class="banner"><div class="wrapper"><div class="left"><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 class="right"><h2>我的课程表</h2><div class="content"><dl><dt>继续学习程序语言设计</dt><dd>正在学习使用对象</dd></dl><dl><dt>继续学习程序语言设计</dt><dd>正在学习使用对象</dd></dl><dl><dt>继续学习程序语言设计</dt><dd>正在学习使用对象</dd></dl></div><a href="#" class="more">全部课程</a></div></div></div>

/* 轮播图 banner*/.banner {height: 420px;background-color: #1c036a;}.banner .wrapper {height: 420px;background-image: url(../images/banner2.png);}.banner .left {float: left;padding: 0 20px;width: 190px;height: 420px;/* 行高属于控制文字的属性可以继承 */line-height: 44px;background-color: rgba(0, 0, 0, 0.3);}.banner .left span {float: right;}.banner .left a {color: #fff;font-size: 14px;}.banner .left a:hover {color: #00b4ff;}.banner .right {float: right;margin-top: 50px;width: 228px;height: 300px; background-color: #ffffff;}.banner .right h2 {height: 48px;background-color: #9bceea;color: #fff;font-size: 18px;font-weight: 400;line-height: 48px;text-align: center;}.banner .right .content {padding: 0 18px;}.banner .right .content dl {/* 测量出来的padding为19 但是还有浏览器默认行高影响所以要小点 */padding: 12px 0;border-bottom: 1px solid #e5e5e5;}.banner .right .content dt {font-size: 16px;color: #4e4e4e;}.banner .right .content dd {font-size: 14px;color: #a5a5a5;}.banner .right .more {display: block;/* margin: 4px 14px 0; */margin: 4px auto 0;width: 200px;height: 40px;border: solid 1px #00a4ff;font-size: 16px;color: #00a4ff;font-weight: 700;text-align: center;line-height: 40px;}

精品推荐

<div class="goods wrapper"><h2>精品推荐</h2><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="#">MySQL</a></li><li><a href="#">JavaWeb</a></li></ul><a href="#" class="hobby">修改兴趣</a></div><div class="course wrapper"><div class="title"><h2>精品推荐</h2><a href="#">查看全部</a></div><div class="content clearfix"><ul><li><a href="#"><img src="./images/course07.png" alt="" /><h3>Think PHP 5.0 博客系统实战项目演练</h3><p><span>高级</span> • 1125人在学习</p></a></li><li><a href="#"><img src="./images/course07.png" alt="" /><h3>Think PHP 5.0 博客系统实战项目演练</h3><p><span>高级</span> • 1125人在学习</p></a></li><li><a href="#"><img src="./images/course07.png" alt="" /><h3>Think PHP 5.0 博客系统实战项目演练</h3><p><span>高级</span> • 1125人在学习</p></a></li><li><a href="#"><img src="./images/course07.png" alt="" /><h3>Think PHP 5.0 博客系统实战项目演练</h3><p><span>高级</span> • 1125人在学习</p></a></li><li><a href="#"><img src="./images/course07.png" alt="" /><h3>Think PHP 5.0 博客系统实战项目演练</h3><p><span>高级</span> • 1125人在学习</p></a></li><li><a href="#"><img src="./images/course07.png" alt="" /><h3>Think PHP 5.0 博客系统实战项目演练</h3><p><span>高级</span> • 1125人在学习</p></a></li><li><a href="#"><img src="./images/course07.png" alt="" /><h3>Think PHP 5.0 博客系统实战项目演练</h3><p><span>高级</span> • 1125人在学习</p></a></li><li><a href="#"><img src="./images/course07.png" alt="" /><h3>Think PHP 5.0 博客系统实战项目演练</h3><p><span>高级</span> • 1125人在学习</p></a></li><li><a href="#"><img src="./images/course07.png" alt="" /><h3>Think PHP 5.0 博客系统实战项目演练</h3><p><span>高级</span> • 1125人在学习</p></a></li><li><a href="#"><img src="./images/course07.png" alt="" /><h3>Think PHP 5.0 博客系统实战项目演练</h3><p><span>高级</span> • 1125人在学习</p></a></li></ul></div></div>

/* 精品推荐 */.goods {height: 60px;line-height: 60px;padding-left: 34px;padding-right: 26px;background-color: #fff;margin-top: 8px;box-shadow: 0px 2px 3px 0px rgba(118, 118, 118, 0.2);}.goods h2 {float: left;font-size: 16px;color: #00a4ff;font-weight: 400;}.goods ul {float: left;margin-left: 30px;}.goods ul li {float: left;/* 加给li 太长了 *//* border-left: 1px solid #bfbfbf; */}.goods li a {border-left: 1px solid #bfbfbf;padding: 0 30px;font-size: 16px;color: #050505;}.goods .hobby {float: right;font-size: 14px;color: #00a4ff;}/* 精品推荐课程 */.course {/* 不方便加高度的区域靠内容撑开 */margin-top: 35px;}.title {height: 40px;/* background-color: blue; */}.course .title h2 {float: left;font-size: 20px;font-weight: 400;color: #494949;}.course .title a {float: right;margin-right: 30px;font-size: 12px;color: #a5a5a5;}.course .content li {float: left;margin-right: 15px;margin-bottom: 15px;width: 228px;height: 270px;background-color: #fff;}.course .content li:nth-child(5n) {margin-right: 0;}.course .content li h3 {padding: 20px;font-size: 14px;color: #050505;font-weight: 400;}.course .content li p {padding: 0 20px;font-size: 12px;color: #999;}.course .content li span {color: #ff7c2d;}

版权区域

布局时候发现，白色区域到精品课程推荐下面了。

因为精品推荐课程内容部分浮动了而且没有给高度，所以我们要清除浮动

<div class="footer"><div class="wrapper"><div class="left"><img src="./images/logo.png" alt="" /><p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。<br />© XTCG Inc.保留所有权利。-沪ICP备15025210号</p><a href="#">下载APP</a></div><div class="right"><dl><dt>关于学成网</dt><dd><a href="#">关于</a><a href="#">管理团队</a><a href="#">工作机会</a><a href="#">客户服务</a><a href="#">帮助</a></dd></dl><dl><dt>新手指南</dt><dd><a href="#">如何注册</a><a href="#">如何选课</a><a href="#">如何拿到毕业证</a><a href="#">学分是什么</a><a href="#">考试未通过怎么办</a></dd></dl><dl><dt>合作伙伴</dt><dd><a href="#">合作机构</a><a href="#">合作导师</a></dd></dl></div></div></div>

/* 版权区域 */.footer {/* 宽度不给因为是通栏 */height: 417px;background-color: #fff;padding-top: 30px;}.footer .left {float: left;}.footer .left p {margin-top: 20px;margin-bottom: 10px;font-size: 12px;color: #666;}.footer .left a {display: block;width: 120px;height: 36px;line-height: 36px;text-align: center;border: solid 1px #00a4ff;font-size: 16px;color: #00a4ff;}.footer .right {float: right;}.footer .right dl {float: left;margin-left: 120px;color: #333;}.footer .right dt {font-size: 16px;}.footer .right dd {margin-top: 15px;}.footer .right a {display: block;font-size: 12px;color: #333;}

如果觉得《HTML+CSS实战——学成项目（含源码素材 psd文件）》对你有帮助，请点赞、收藏，并留下你的观点哦！

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。