CSS第五天——学成网在线

1.CSS属性书写顺序

布局定位属性：display / position / float / clear / visibility / overflow…
自身属性：width / height / margin / padding / border / background…
文本属性：color / font / text-decoration / text-align / vertical-align / white-space / break-word…
其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow…

index.html代码

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>学成在线-不是所有的网站都叫学成在线</title><link rel="stylesheet" href="style.css">
</head>
<body><!--header头部模块开始--><div class="header w">
<!--        logo--><div class="logo"><img src="data:images/logo.png" alt=""></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" value="输入关键字"><button></button></div>
<!--        user--><div class="user"><img src="data:images/user.jpg" alt="">薯片</div></div><!--header头部模块结束--><!--banner 部分start--><div class="banner"><div class="w"><!--左侧 subnav --><div class="subnav"><ul><li><a href="https://user.qzone.qq.com/954308078?source=aiostar">小冯空间</a><span> > </span></li><li><a href="https://user.qzone.qq.com/2950207776?source=aiostar">小冰空间</a><span> > </span></li><li><a href="#">情侣小窝</a><span> > </span></li><li><a href="#">十年之约</a><span> > </span></li><li><a href="#">百年好合</a><span> > </span></li><li><a href="#">热爱彼此</a><span> > </span></li><li><a href="#">忠于对方</a><span> > </span></li><li><a href="#">比翼双飞</a><span> > </span></li><li><a href="#">相敬如宾</a><span> > </span></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><!--banner 部分 end--><!--goods START--><div class="goods w"><h3>精品推荐</h3><div class="goods-item"><a href="#">小xiao</a><a href="#">冰bing</a><a href="#">和and</a><a href="#">小xiao</a><a href="#">甜sweet</a><a href="#">瓜gua</a></div><div class="mod">修改兴趣</div></div><!--goods END--><!-- 4. box核心内容区域 --><div class="box w"><div class="box-hd"><h3>精品推荐</h3><a href="#">查看全部</a></div><div class="box-bd"><ul class="clearfix"><li><img src="data:images/pic.png" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><div class="info"><span>高级</span> • 1125人在学习</div></li><li><img src="data:images/pic.png" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><div class="info"><span>高级</span> • 1125人在学习</div></li><li><img src="data:images/pic.png" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><div class="info"><span>高级</span> • 1125人在学习</div></li><li><img src="data:images/pic.png" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><div class="info"><span>高级</span> • 1125人在学习</div></li><li><img src="data:images/pic.png" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><div class="info"><span>高级</span> • 1125人在学习</div></li><li><img src="data:images/pic.png" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><div class="info"><span>高级</span> • 1125人在学习</div></li><li><img src="data:images/pic.png" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><div class="info"><span>高级</span> • 1125人在学习</div></li><li><img src="data:images/pic.png" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><div class="info"><span>高级</span> • 1125人在学习</div></li><li><img src="data:images/pic.png" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><div class="info"><span>高级</span> • 1125人在学习</div></li><li><img src="data:images/pic.png" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><div class="info"><span>高级</span> • 1125人在学习</div></li></ul></div></div><!-- 5. footer模块制作 --><div class="footer"><div class="w"><div class="copyright"><img src="data:images/logo.png" alt=""><p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。<br>© 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</p><a href="#" class="app">下载APP</a></div><div class="links"><dl><!-- 自定义列表<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><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>

css代码

/*清除元素默认的内外边距*/
*{margin: 0;padding: 0;
}
/*清除列表样式*/
li{list-style: none;
}
/*去掉button 默认自帶的边框*/
button {border: none;
}
/* 清除浮动 */
.clearfix:before,
.clearfix:after {content:"";display:table;
}
.clearfix:after {clear:both;
}
/*清除列表样式*/
body{background-color:#f3f5f7;/*方便写代码一会别忘了删除*/height: 3000px ;
}
a{text-decoration: none;
}
/*版心 1200 水平居中*/
.w {width: 1200px;margin: auto;
}
/*header start*/
.header{height: 42px;/*background-color: pink;*/margin: 30px auto;
}
/*下面的logo nav search user都要浮动*/
.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;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{float: left;width: 340px;height: 40px;border: 1px solid #00a4ff;border-right: 0;padding-left: 20px;color: #ccc;
}
.search button{float: left;width: 50px;height: 42px;background: url("images/btn.png") no-repeat;
}
.user{float: left;height: 42px;margin-right: auto;margin-left: 30px;font-size: 14px;color: #666;
}
/*banner start*/
.banner{height: 420px;background: #1c036c url(images/banner.jpg) no-repeat top center;
}
.subnav{float: left;width: 150px;height: 420px;padding: 0 20px;/*背景半透明*/background: rgba(0,0,0,.3);
}
.subnav li{height: 45px;line-height: 45px;
}
.subnav li a{color: #ffffff;font-size: 14px;text-decoration: none;
}
.subnav li a:hover{color: #00a4ff;
}
.subnav span{float: right;
}
.course{/*因为course子盒子有了浮动，则就不会外边距塌陷的问题了*/float: right;width: 228px;height: 300px;background-color: #ffffff;margin-top: 50px;
}
.course-hd{height: 48px;background-color: #9bceea;font-size: 18px;text-align: center;line-height: 48px;color: #ffffff;/*文字加粗*/font-weight: bold;
}
.course-bd {/*没有宽度的盒子padding不会撑开盒子*/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;text-align: center;line-height: 38px;
}
.all:hover {background-color: #00a4ff;color: #fff;
}
/*banner end*/
/*goods start*/
.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;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;margin-right: 30px;font-size: 14px;color: #00a4ff;
}
/*goods END*/
.box {margin-top: 30px;
}
.box-hd {height: 45px;
}
.box-hd h3 {float: left;font-size: 20px;color: #494949;
}
.box-hd a {float: right;font-size: 12px;color: #a5a5a5;margin-top: 10px;margin-right: 30px;
}
/* 把li 的父亲ul 修改的足够宽一行能装开5个盒子就不会换行了 */
.box-bd ul {width: 1225px;
}
.box-bd ul li {/* 子绝父相 */position: relative;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;font-size: 14px;color: #050505;font-weight: 400;
}
.box-bd ul li em {position: absolute;top: 4px;right: -4px;
}
.box-bd .info {margin: 0 20px 0 25px;font-size: 12px;color: #999;
}
.box-bd .info span {color: #ff7c2d;
}
/* footer 模块 */
.footer {height: 415px;background-color: #fff;
}
.footer .w {padding-top: 35px;
}
.copyright {float: left;
}
.copyright p {font-size: 12px;color: #666;margin: 20px 0 15px 0;
}
.copyright .app {display: block;width: 118px;height: 33px;border: 1px solid #00a4ff;text-align: center;line-height: 33px;color: #00a4ff;font-size: 16px;
}
.links {float: right;
}
.links dl {float: left;margin-left: 100px;
}
.links dl dt {font-size: 16px;color: #333;margin-bottom: 5px;
}
.links dl dd a {color: #333;font-size: 12px;
}

（hhh,文字是随便加的，但是大致框架完全一致。）
注：本文根据《黑马程序员-web前端》笔记改编

CSS第五天——学成网在线相关推荐

css实操：学成网综合案例
css实操:学成网综合案例页面效果: 易错点很多,需要注意的地方都有注释.常看! HBuilder X > css > 学成网首页.html <!DOCTYPE html> ...
7.（css）使用浮动布局学成网案例
文章目录 1. 页面制作重点提炼 2. 前期准备素材 3. 前期准备工作 4. CSS属性书写顺序(重点) 5. 布局流程 6. 页面制作 6.1 1) 头部制作 6.2 2)banner制作 6.3 ...
[附相应图片]HTML+CSS学成网首页制作基础案例
这是一个比较基础的html和css基础案例实战,适合刚学习完各种html控件和css标签的应用. 实现效果图如下:(3张图片为同一个页面) html编码部分: <!DOCTYPE html> ...
CSS学习笔记之学成在线项目（下） 3.3
1.1 机器学习工程师模块本人思路:定义一个content大盒子,里面包含top和ugui上下两个小盒子,小盒子里的布局以及样式与前面的模块是一致的,这里不再赘述,可直接套用style样式. 结构代 ...
CSS 学成网（二）
学成网小圆点 /* 小圆点模块 */.circle {width: 180px;height: 22px;/* background-color: pink; */position: absolute ...
＜CSS练习＞综合案例-学成网含素材静态网页
效果图浏览器缩放缩小之后的正常打开的: 这个案例综合了html css很多知识点盒子的使用伪链接选择器定位position 浮动float ul li的用法以及外边距margin 边框bo ...
黑马程序员前端-CSS练手之学成在线页面制作
前端学习笔记教程不定期更新中,传送门: 前端HTML第一天:什么是网页?什么是HTML?网页怎么形成? 黑马程序员前端-CSS入门总结黑马程序员前端-CSS之emmet语法黑马程序员前端-CSS的 ...
Web前端案例——学成网首页制作
简易的学成网网站制作.代码均有注释,可以说十分新手向了. 相关知识:html+css,主要学习的是css的浮动布局.下一篇文章会在这个网页的基础上添加定位盒子. 运行效果图: html部分: < ...
【HTML、CSS】利用HTML、CSS实现静态页面——学成在线
学成在线头部精品推荐模块侧边导航&&编程入门模块数据分析师模块机器学习工程师&&前端开发工程师模块页面底部模块代码地址:GitHub - wmc145956 ...
CSS浮动/常见网页布局/清除浮动/学成在线案例
CSS 04 1. 浮动(float) 1.1 传统网页布局的三种方式网页布局的本质--用 CSS 来摆放盒子. 把盒子摆放到相应位置. CSS 提供了三种传统布局方式(简单说,就是盒子如何进行排列 ...

CSS第五天——学成网在线

CSS第五天——学成网在线

1.CSS属性书写顺序

CSS第五天——学成网在线相关推荐

最新文章

热门文章