＜CSS练习＞ 综合案例-学成网 含素材 静态网页
2024-05-17 09:06:53
效果图
浏览器缩放缩小之后的
正常打开的：
这个案例综合了html css很多知识点
盒子的使用 伪链接选择器 定位position 浮动float ul li的用法 以及外边距margin 边框border 内边距padding等 但是没有添加Javasript的效果
一半情况下 如果是一排的盒子 如图中 绿色的图片 摆放很整齐 用浮动
盒子上有固定的小图标就用定位 如图中绿色图片上的hot 以及左侧固定的侧边栏
下面简单说明一下注意的点：
左侧固定的侧边栏的位置主要是看版心
这是它跟绝对定的盒子居中知识点的不同之处
比如本案例中
先走left的50%
再往左走版心的一半
再继续走自己的宽度
最后根据美观 自己再往左调整一下就可以了
综上的代码是：(版心的width是1200px ，自己width是180px）
我这里是继续往左走了10px
/* 先left50% */left: 50%;/* 再左走版心的一半 *//* 再继续走自己的宽度 -600+（-180） *//* 自己看着再调一下 因为美观 但最少保证780 */margin-left: -790px;
总的代码是：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link rel="stylesheet" type="text/css" href="style.css"/></head><body><!-- 固定的侧边栏 --><div class="fixedbar"><ul><li><a href="#">编程入门</a></li><li><a href="#">数据分析师</a></li><li><a href="#">机器学习工程师</a></li><li><a href="#">前端开发工程师</a></li><li><a href="#">人工智能工程师</a></li><li><a href="#">Java工程师</a></li><li><a href="#">VR开发者</a></li><li><a href="#">深度学习</a></li></ul></div><!-- header头部模块开始 --><div class="header w"><!-- logo --><div class="logo"><img src="data:image/logo.png" ></div><!-- nav --><div class="nav"><ul><li><a href="#">首页</a></li><li><a href="#">课程</a></li><li><a href="#">职业规划</a></li></ul></div> <!-- search --><div class="search"><input type="text" name="" id="" value="请输入关键字" /><button type="button"></button></div><!-- user --><div class="user"><img src="data:image/pic.png" >12132323qq@com</div></div><!-- header头部模块结束 --><!-- banner部分start --><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><!-- 右侧course --><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></div></div><!-- banner部分end --><!-- goods部分开始 --><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><!-- goods部分end --><!-- box部分start --><div class="box w"><div class="box-hd"><h3>精品推荐</h3><a href="#">查看全部</a></div><!-- 务必务必务必清除浮动 调用clearfix函数清除浮动 --><div class="box-bd clearfix"><ul><li><img src="data:image/hot.jpg" class="hot"><img src="data:image/course.png" ><h4>Think php 5.0博客系统实战项目演练</h4><p><span>高级</span># 1125人在学习</p></li><li><img src="data:image/hot.jpg" class="hot"><img src="data:image/course.png" ><h4>Think php 5.0博客系统实战项目演练</h4><p><span>高级</span># 1125人在学习</p></li><li><img src="data:image/hot.jpg" class="hot"><img src="data:image/course.png" ><h4>Think php 5.0博客系统实战项目演练</h4><p><span>高级</span># 1125人在学习</p></li><li><img src="data:image/hot.jpg" class="hot"><img src="data:image/course.png" ><h4>Think php 5.0博客系统实战项目演练</h4><p><span>高级</span># 1125人在学习</p></li><li><img src="data:image/hot.jpg" class="hot"><img src="data:image/course.png" ><h4>Think php 5.0博客系统实战项目演练</h4><p><span>高级</span># 1125人在学习</p></li><li><img src="data:image/hot.jpg" class="hot"><img src="data:image/course.png" ><h4>Think php 5.0博客系统实战项目演练</h4><p><span>高级</span># 1125人在学习</p></li><li><img src="data:image/hot.jpg" class="hot"><img src="data:image/course.png" ><h4>Think php 5.0博客系统实战项目演练</h4><p><span>高级</span># 1125人在学习</p></li><li><img src="data:image/hot.jpg" class="hot"><img src="data:image/course.png" ><h4>Think php 5.0博客系统实战项目演练</h4><p><span>高级</span># 1125人在学习</p></li><li><img src="data:image/hot.jpg" class="hot"><img src="data:image/course.png" ><h4>Think php 5.0博客系统实战项目演练</h4><p><span>高级</span># 1125人在学习</p></li><li><img src="data:image/hot.jpg" class="hot"><img src="data:image/course.png" ><h4>Think php 5.0博客系统实战项目演练</h4><p><span>高级</span># 1125人在学习</p></li></ul></div></div><!-- box部分end --><div class="box w"><div class="box-hd"><h3>精品推荐</h3><a href="#">查看全部</a></div><!-- 务必务必务必清除浮动 调用clearfix函数清除浮动 --><div class="box-bd clearfix"><ul><li><img src="data:image/hot.jpg" class="hot"><img src="data:image/course.png" ><h4>Think php 5.0博客系统实战项目演练</h4><p><span>高级</span># 1125人在学习</p></li><li><img src="data:image/hot.jpg" class="hot"><img src="data:image/course.png" ><h4>Think php 5.0博客系统实战项目演练</h4><p><span>高级</span># 1125人在学习</p></li><li><img src="data:image/hot.jpg" class="hot"><img src="data:image/course.png" ><h4>Think php 5.0博客系统实战项目演练</h4><p><span>高级</span># 1125人在学习</p></li><li><img src="data:image/hot.jpg" class="hot"><img src="data:image/course.png" ><h4>Think php 5.0博客系统实战项目演练</h4><p><span>高级</span># 1125人在学习</p></li><li><img src="data:image/hot.jpg" class="hot"><img src="data:image/course.png" ><h4>Think php 5.0博客系统实战项目演练</h4><p><span>高级</span># 1125人在学习</p></li></ul></div></div><!-- footer开始 --><div class="footer"><div class="w"><!-- 左侧 --><div class="copyright"><img src="data:image/logo.png" ><p>市场不代表币不然加粗是发不出仅代表句</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><dd><a href="#">工作机会</a></dd><dd><a href="#">客户服务</a></dd><dd><a href="#">帮助</a></dd></dl></div></div></div><!-- footer结束 --></body>
</html>css部分：
/* 清除元素默认的内外边距 */
* {padding: 0;margin: 0;
}/* 清除列表样式 */
li {list-style: none;
}/* 清除按钮默认的自带边框 */
a {text-decoration: none;
}/* 清除浮动 */
.clearfix:before,
.clearfix:after {content: "";display: table;
}
.clearfix::after {clear: both;
}
.clearfix {*zoom=1;
}button {border: 0;
}
body {background-color: #F3F5F7;
}
/* 版心 1200宽度 水平居中 */
.w {width: 1200px;margin: auto;
}
/* fixedbar开始 */
.fixedbar {/* 左侧固定的侧边栏如何固定 */position: fixed;top: 200px;/* 先left50% */left: 50%;/* 再左走版心的一半 *//* 再继续走自己的宽度 -600+（-180） *//* 自己看着再调一下 因为美观 但最少保证780 */margin-left: -790px;z-index: 999;width: 180px;height: 420px;background-color: #fff;}
.fixedbar li {margin: 30px;
}
.fixedbar a {color: #000;
}
.fixedbar li a:hover{color: #00A4FF;
}
/* fixedbar结束 */
/* header start */
.header {/* 直接调用W 备注的属性不用写 *//* width: 1200px; */height: 42px;/* background-color: pink; *//* margin: auto; */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;line-height: 40px;margin-right: 20px;padding: 0 10px;font-size: 18px;color: #050505;text-decoration: none;
}
/* 鼠标经过链接 才有底边框 */
.nav ul li a:hover {border-bottom: 2px solid #00a4ff;
}
.search {float: left;margin-left: 70px;
}
.search input {/* 因为盒子设置了宽度 又设置了内左边距 所以盒子会撑宽 这时 w-左内边距=360-20 *//* width: 360px; *//* 两个盒子浮动后 行内块之间就没有缝隙了 可以紧挨着 */float: left;width: 340px;height: 40px;padding-left: 20px;border: 1px solid #00A4FF;border-right: 0;color: #ccc;
}
.search button {float: left;width: 50px;height: 42px;background: url(image/fa-search.png);
}
.user {float: left;height: 42px;line-height: 42px;margin-left: 30px;color: #666;font-size: 14px;
}
/* hander结束 */
/* banner开始 */
.banner {height: 420px;background: #1c036c url(image/banner.jpg) no-repeat top center;
}
.subnav {/* width: 190px; */float: left;width: 150px;height: 420px;padding: 0 20px;background-color: rgba(0,0,0,.3);
}
.subnav ul li a span {float: right;
}
.subnav li {height: 45px;line-height: 45px;
}
.subnav li a {color: #fff;font-size: 14px;text-decoration: none;
}
.subnav li a:hover {color: #00B4FF;
}
.course {float: right;width: 228px;height: 300px;margin-top: 50px;background-color: #fff;
}
.course-hd {height: 48px;background-color: #9bceea;font-size: 18px;text-align: center;line-height: 48px;color: #fff;font-weight: bold;
}
.course-bd {padding: 0 15px;
}.course-bd ul {/* 外边距塌陷的问题 *//* margin-top: 10px; */padding-top: 10px;
}
.course-bd li {height: 50px;border-bottom: 1px solid #ccc;margin-top: 10px;
}
.course-bd li h4 {font-size: 14px;color: #4e4e4e;
}
.course-bd li p {font-size: 12px;color: #a5a5a5;
}
.all {display: block;height: 38px;border: 1px solid #00A4FF;margin-top: 10px;font-size: 16px;color: #00A4FF;line-height: 38px;text-align: center;
}
.all:hover {color: #FFF;background-color: #00A4FF;
}
/* banner结束 */
/* goods开始 */
.goods {height: 60px;background-color: #FFFFFF;margin-top: 10px;/* 利用行高可以继承的特性 */line-height: 60px;box-shadow: 2px 2px 2px rgba(0,0,0,.2);
}
.goods h3 {float: left;font-size: 16px;color: #00A4FF;margin:0 30px;
}
.goods-item {float: left;color: #bfbfbf;
}
.goods-item a {font-size: 16px;color: #050505;margin: 0 30px;
}
.mod {float: right;font-size: 16px;color: #00A4FF;margin-right: 30px;}
/* goods结束 */
/* box开始 */
.box {margin-top: 15px;
}
.box-hd {height: 60px;/* 继承特性 让后面的内容都能垂直居中对齐 */line-height: 60px;background-color: #fff;
}
.box-hd h3 {float: left;/* 让加粗的字体不变粗 */font-weight: 400;color: #BFBFBF;font-size: 20px;
}
.box-hd a {float: right;margin-right: 30px;font-size: 12px;color: #a5a5a5;
}
.box-bd {/* box-bd 宽度超过了1200 的版心的宽度 是可以的 就解决了第五个li掉下来的情况 */width: 1215px;
}
.box-bd li {position: relative;float: left;height: 270px;width: 228px;background-color: #fff;margin-right: 15px;margin-bottom: 15px;box-shadow: 2px 2px 2px rgba(0,0,0,.3);
}
/* .hot {width: 50px;
} */
/* 权重不够 */
.box-bd .hot {position: absolute;top: 0;right: -4px;width: 43px;
}
.hot {background: rgba(0,0,0, .1);
}
.box-bd li img {/* width: 228px; */width: 100%;
}
.box-bd li h4 {font-size: 14px;margin: 20px;color: #040404;font-weight: 400;
}
.box-bd li p {margin:0 20px;font-size: 12px;color: #999;
}
.box-bd li p span {color: orange;
}
/* box结束 */
/* footer开始 */
.footer {height: 385px;padding-top: 30px;background-color: #fff;
}
.copyright {float: left;
}.copyright p {font-size: 12px;color: #666;margin: 20px 0 15px 0;
}
.app {display: block;width: 118px;height: 34px;font-size: 16px;border: 1px solid #00A4FF;line-height: 34px;text-align: center;}
.links {float: right;
}
.links dl {float: right;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;
}
/* footer结束 */
素材：
＜CSS练习＞ 综合案例-学成网 含素材 静态网页相关推荐
- ＜CSS3练习＞ CSS动画综合案例 热点图（含素材）
CSS动画分为两个步骤: 1.先定义动画 2.再调用动画 语法如下 1.定义: @keyframs 动画名称 {from(0%){}to(100%){}} 这里的数字可以从0%~100% 可以任意 代 ...
- css实操：学成网综合案例
css实操:学成网综合案例 页面效果: 易错点很多,需要注意的地方都有注释.常看! HBuilder X > css > 学成网首页.html <!DOCTYPE html> ...
- Web前端案例——学成网首页制作
简易的学成网网站制作.代码均有注释,可以说十分新手向了. 相关知识:html+css,主要学习的是css的浮动布局.下一篇文章会在这个网页的基础上添加定位盒子. 运行效果图: html部分: < ...
- [附相应图片]HTML+CSS学成网首页制作基础案例
这是一个比较基础的html和css基础案例实战,适合刚学习完各种html控件和css标签的应用. 实现效果图如下:(3张图片为同一个页面) html编码部分: <!DOCTYPE html> ...
- 7.（css）使用浮动布局学成网案例
文章目录 1. 页面制作重点提炼 2. 前期准备素材 3. 前期准备工作 4. CSS属性书写顺序(重点) 5. 布局流程 6. 页面制作 6.1 1) 头部制作 6.2 2)banner制作 6.3 ...
- CSS 学成网（二）
学成网小圆点 /* 小圆点模块 */.circle {width: 180px;height: 22px;/* background-color: pink; */position: absolute ...
- CSS学习笔记之学成在线项目（下） 3.3
1.1 机器学习工程师模块 本人思路:定义一个content大盒子,里面包含top和ugui上下两个小盒子,小盒子里的布局以及样式与前面的模块是一致的,这里不再赘述,可直接套用style样式. 结构代 ...
- 黑马程序员前端-CSS练手之学成在线页面制作
前端学习笔记教程不定期更新中,传送门: 前端HTML第一天:什么是网页?什么是HTML?网页怎么形成? 黑马程序员前端-CSS入门总结 黑马程序员前端-CSS之emmet语法 黑马程序员前端-CSS的 ...
- 用HTML+CSS编写一个计科院网站首页的静态网页
用HTML+CSS编写一个计科院网站首页的静态网页 利用浏览器查看网页源代码,并将一些图片分门别类的下载到本地,然后删除javascript脚本. 项目的文件目录 最终效果 <!DOCTYPE ...
最新文章
- 【PHPExcel】设置打印格式
- [转]linq to sql （Group By/Having/Count/Sum/Min/Max/Avg操作符）
- 【Python】20个小技巧，让数据可视化图表更专业！
- 决策树：特征分布空间划分方法
- Live Rate creation中的Territory check逻辑
- SQL 语句中 where 条件后 写上1=1 是什么意思
- 微服务网关Gateway
- 微软应提前发布专用于ARM处理器的Windows 8平板电脑系统
- 如何从零开始学好单片机
- 【Flink】HttpClient 报错 I/O SocketException caught when processing request to Connection Reset
- 基于JAVA+Servlet+JSP+MYSQL的实验室机房预约管理系统
- redis 中一个字段 修改map_Redis 几种数据类型及应用场景
- 三维旋转详细解读（Rodrigues‘ Roatation Formula 罗德里格旋转公式）
- ASP.Net之发展史
- View 添加阴影效果
- 一键让网页变黑白色调
- 别在坑年轻人了，他们好骗但不傻。
- AI作曲的诺亚方舟将去往何处
- 我的电脑被谁远程登陆过？怎么查看电脑远程登陆日志？
- 传统责任链模式和变种责任链模式