红米个人案例

HTML5的学习及练习

红米个人案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>redmi</title></head>
<body>
<div class="father"><img src="data:images/red.jpg" alt=""><h4>小米Redmi红米K30pro 5G手机 (可选变焦版) 天际蓝 变焦版 8G+256G 全网通</h4><div class="son"><span class="one"> ¥3199</span><span class="two"> ¥3599</span></div><div class="zi clearfix"><span class="shu">已售87%</span><div class="niu"><div class="little"></div></div><span class="wen">剩余29件</span></div><div><a href="#">立即抢购</a></div>
</div>
</body>
</html>

学成在线案例

学成在线的案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>学成在线首页</title><link rel="stylesheet" href="style.css">
</head>
<body>
<!--头部区域-->
<div class="header w">
<!--    logo部分--><div class="logo"></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 class="one" type="text" value="输入关键词" ><input class="two" type="button"></div>
<!--    用户模块--><div class="user"><img src="data:images/user.png" style="vertical-align: middle">qq-lilei</div>
</div>
<!--banner区域-->
<div class="banner"><div class="w"><div class="subnav"><ul><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="#">前端开发 <span>&gt;</span> </a></li><li><a href="#">前端开发 <span>&gt;</span> </a></li></ul></div>
<!--        课程表模块--><div class="course"><h2 class="biao">我的课程表</h2><div class="bd"><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></div>
</div>
<!--精品推荐区域-->
<div class="goods w"><h3>精品推荐</h3><ul><li><a href="#">jQuery</a></li><li><a href="#">jQuery</a></li><li><a href="#">jQuery</a></li><li><a href="#">jQuery</a></li><li><a href="#">jQuery</a></li></ul><a href="#" class="niu">修改兴趣</a>
</div>
<!--box核心区域-->
<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="data:images/hot.png" alt=""></em><img src="data:images/pic.png" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><div class="infor"><span>高级</span>• 1125人在学习</div></li><li><img src="data:images/pic.png" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><div class="infor"><span>高级</span>• 1125人在学习</div></li><li><img src="data:images/pic.png" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><div class="infor"><span>高级</span>• 1125人在学习</div></li><li><img src="data:images/pic.png" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><div class="infor"><span>高级</span>• 1125人在学习</div></li><li><img src="data:images/pic.png" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><div class="infor"><span>高级</span>• 1125人在学习</div></li><li><img src="data:images/pic.png" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><div class="infor"><span>高级</span>• 1125人在学习</div></li><li><img src="data:images/pic.png" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><div class="infor"><span>高级</span>• 1125人在学习</div></li><li><img src="data:images/pic.png" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><div class="infor"><span>高级</span>• 1125人在学习</div></li><li><img src="data:images/pic.png" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><div class="infor"><span>高级</span>• 1125人在学习</div></li><li><img src="data:images/pic.png" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><div class="infor"><span>高级</span>• 1125人在学习</div></li></ul></div>
</div>
<!--footer区域-->
<div class="footer"><div class="w"><div class="copyright"><img src="data:images/logo2.png"><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><dd><a href="#">工作机会</a></dd><dd><a href="#">客户服务</a></dd><dd><a href="#">帮助</a></dd></dl></div></div>
</div>
</body>
</html>

学成在线案例

 4. {margin: 0;padding: 0;
}
.w {width: 1200px;margin: 0 auto;
}
.clearfix:before,.clearfix:after {content:"";display:table;
}
.clearfix:after {clear:both;
}
.clearfix {*zoom:1;
}
body {background-color: #f3f5f7;
}
a {text-decoration: none;
}
.header {height: 42px;/*注意此地方会重叠w中的margin*/margin: 30px auto;
}
.logo {float: left;width: 198px;height: 42px;background-image: url(images/logo.png);
}
.nav {float: left;font-size: 18px;margin-left: 60px;
}
.nav ul li {float: left;margin: 0 15px;
}
.nav li a {display: block;height: 42px;text-decoration: none;color: black;line-height: 42px;padding: 0 10px;
}
li {list-style: none;
}
.nav li a:hover {border-bottom:2px solid skyblue;color: #00a4ff;
}
.search {width: 421px;height: 42px;float: left;line-height: 42px;margin-left: 70px;
}
.search .one {float: left;width: 345px;height: 40px;border: 1px solid skyblue;border-right: 0;color: #bfbfbf;font-size: 16px;padding-left: 15px;
}
.search .two {float: left;width: 50px;height: 42px;/*button默认有一个边框需要我们手动去掉*/border: 0;background-image: url(images/tuceng.png);
}
.user {float: right;height: 42px;line-height: 42px;margin-right: 30px;font-size: 14px;color: #666666;
}
.banner {height: 421px;background-color: #1c036c;
}
.banner .w {height: 421px;background-image: url(images/banner.png);background-position: top center;
}
.banner .subnav {float: left;width: 190px;height: 421px;background-color: rgba(0,0,0,.3);
}
.subnav ul li {height: 45px;line-height: 45px;padding: 0 20px;
}
.subnav ul li a {text-decoration: none;font-size: 14px;color: white;
}
.subnav ul li a span {float: right;
}
.subnav ul li a:hover {color: #00a4ff;
}
.course {float: right;width: 230px;height: 300px;background-color: #fff;/*浮动的盒子不会有外边距合并的问题*/margin-top: 50px;
}
.course .biao {height: 48px;text-align: center;line-height: 48px;background-color: #9bceea;color: white;
}
.course .bd {padding:0 20px;
}
.bd ul li {border-bottom: 1px solid #ccc;padding: 12px 0;
}
.course .bd ul li h4 {font-size: 16px;color: #4e4e4e;
}
.bd ul li p {font-size: 12px;color: #a5a5a5;
}
.bd .more{display: block;text-decoration: none;height: 38px;line-height: 38px;border: 1px solid #00a4ff;text-align: center;margin-top: 5px;color: #00a4ff;font-size: 16px;font-weight: 700;
}
.goods {height: 60px;background-color: white;box-shadow: 0 2px 3px 3px rgba(0,0,0,.1);margin-top: 10px;/*行高会继承，会继承给h3 ul a*/line-height: 60px;
}
.goods a {float: right;text-decoration: none;
}
.goods h3 {font-size: 20px;margin-left: 30px;float: left;color: #00a4ff;
}
.goods ul {padding-left: 30px;float: left;
}
.goods li {float: left;
}
.goods ul li a {font-size: 16px;color: #050505;padding: 0 30px;border-left: 1px solid #ccc;
}
.goods .niu {margin-right: 30px;color: #00a4ff;
}
.box {margin-top: 30px;
}
.box-hd {height: 45px;
}
.box h3 {font-size: 20px;color: #494949;float: left;
}
.box .box-hd a {font-size: 12px;color: #a5a5a5;float: right;margin-top: 10px;margin-right: 30px;
}
/*把li的父亲ul修改的足够宽一行能装开五个盒子就不会换行了*/
.box-bd ul {width: 1225px;
}
.box-bd ul li {/*子绝父相*/position: relative;/*overflow: hidden;*/float: left;width: 228px;height: 270px;background-color: #fff;margin-right: 15px;margin-bottom: 15px;
}
.box-bd ul li >img {width: 100%;
}
.box-bd ul li h4 {margin: 20px 20px 20px 25px;color: #050505;font-size: 14px;font-weight: 400;
}
.box-bd ul li em {position: absolute;top: 4px;right: -4px;
}
.box-bd ul li .infor {margin: 0 20px 0 25px;font-size: 12px;color: #999;
}
.box-bd ul li .infor span {color: orange;
}
.footer {height: 415px;background-color: #fff;
}
.footer .w {/*会有外边距合并问题*//*margin-top: 35px;*/padding-top: 35px;
}
.footer .copyright {float: left;
}
.footer .copyright p {font-size: 12px;color: #666;margin-top: 15px;margin-bottom: 20px;
}
.footer .copyright .app {display: block;width: 118px;height: 35px;text-align: center;line-height: 35px;font-size: 20px;color: #00a4ff;border: 1px solid #00a4ff;
}
.footer .links {float: right;
}
.footer .links dl {float: right;margin-left: 100px;
}
.footer .links dl dt {font-size: 16px;color: #333;margin-bottom: 5px;
}
.footer .links dl dd a {font-size: 12px;color: #333;
}

红米案例

 .clearfix:after {content: "";display: block;height: 0;clear: both;visibility: hidden;}.clearfix {/* IE6、7 专有 */*zoom: 1;}body {background-color: beige;}.father {width: 300px;height: 550px;background-color: white;margin: 100px auto;}.father img {width: 100%;height: 350px;}.father .son .one {font-size: 20px;font-weight: 700;color: red;}.son .two {font-size: 15px;color: gray;text-decoration: line-through;}.father .niu {position: absolute;top: 9px;left: 25px;width: 160px;height: 8px;border: 1px solid red;border-radius: 4px;margin-left: 40px;}.niu .little {width: 87%;height: 100%;background-color: red;transition: width 1s;}.little:hover {width: 100%;}.zi {position: relative;height: 30px ;}.zi .shu{position: absolute;top: 7px;left: 5px;font-size: 12px;}.zi .wen{position: absolute;top: 6px;right: 15px;font-size: 12px;}a {display: block;width: 300px;height: 55px ;text-decoration: none;color: #fff;background-color: red;font-size: 20px;text-align: center;line-height: 55px;}

使用html和css进行红米案例、学成在线开发相关推荐

黑马程序员前端-CSS练手之学成在线页面制作
前端学习笔记教程不定期更新中,传送门: 前端HTML第一天:什么是网页?什么是HTML?网页怎么形成? 黑马程序员前端-CSS入门总结黑马程序员前端-CSS之emmet语法黑马程序员前端-CSS的 ...
CSS学习笔记之学成在线项目（下） 3.3
1.1 机器学习工程师模块本人思路:定义一个content大盒子,里面包含top和ugui上下两个小盒子,小盒子里的布局以及样式与前面的模块是一致的,这里不再赘述,可直接套用style样式. 结构代 ...
【HTML、CSS】利用HTML、CSS实现静态页面——学成在线
学成在线头部精品推荐模块侧边导航&&编程入门模块数据分析师模块机器学习工程师&&前端开发工程师模块页面底部模块代码地址:GitHub - wmc145956 ...
web前端入门学习 css（5）（浮动）（ps切图）（css属性书写顺序）（学成在线网站案例）
文章目录传统网页布局的三种方式标准流(普通流.文档流) 浮动(为什么需要浮动?) 浮动特性浮动元素会脱离标准流,可以与普通流的元素相重叠如果多个盒子都设置了浮动,则它们会按照属性值一行内显示并 ...
CSS浮动/常见网页布局/清除浮动/学成在线案例
CSS 04 1. 浮动(float) 1.1 传统网页布局的三种方式网页布局的本质--用 CSS 来摆放盒子. 把盒子摆放到相应位置. CSS 提供了三种传统布局方式(简单说,就是盒子如何进行排列 ...
css实操：学成网综合案例
css实操:学成网综合案例页面效果: 易错点很多,需要注意的地方都有注释.常看! HBuilder X > css > 学成网首页.html <!DOCTYPE html> ...
CSS浮动、PS切图、学成在线案例前期准备
传统网页布局的三种方式网页布局的本质--用CSS来摆放盒子,把盒子摆放到相应位置 CSS提供了三种传统布局方式(简单说,就是盒子如何进行排列顺序): 普通流(标准流) 浮动定位标准流所谓标准流 ...
学成在线案例——黑马程序员pink老师\思路讲解\完整源代码
本文为跟随B站黑马程序员pink老师学习CSS时所写,文章讲解了学成在线首页的制作思路,并贴出了源代码,作为学习笔记分享给大家如有错误,欢迎指出.如有侵权,联系删除文章目录 1. 案例准备工作 2 ...
综合案例之学成在线首页
综合案例之学成在线首页 1 准备素材和工具 2 案例准备工作 3 CSS属性书写属性 4 页面布局整体思路 5 确定版心 6 头部制作 7 banner制作 8 精品推荐小模块 9 精品推荐大模块 1 ...

使用html和css进行红米案例、学成在线开发

目录

红米个人案例

学成在线案例

使用html和css进行红米案例、学成在线开发相关推荐

最新文章

热门文章