HTML-CSS学成在线案例 | pink老师讲解思路 | 完整源代码
目录
1.学成在线案例准备工作
2.CSS属性书写顺序
3.页面布局整体思路
4.确定版心
5.学成在线-header区域制作
6.Banner模块
7.精品推荐小模块
8.精品推荐大模块
9.底部模块
10.完整源代码
index.html
style.css
学成在线案例
效果图:
1.学成在线案例准备工作
采取结构和样式相分离思想:
- 新建images文件夹,用于保存图片;
- 新建首页文件index.html;
- 新建style.css样式文件。我们本次采用外链样式表;
2.CSS属性书写顺序
建议遵循以下顺序:
- 布局定位属性:display/position/float/clear/visibility/overflow(建议display第一个写,毕竟关系到模式);
- 自身属性: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/background:linear-gradienr...;
3.页面布局整体思路
为了提高网页制作的效率,布局时通常有以下的整体思路:
- 必须确定页面的版心(可视区),我们测量可得知;
- 分析页面中的行模块,以及每个行模块中的列模块。其实页面布局第一准则;
- 一行中的列模块经常浮动布局,先确定每个列的大小,之后确定列的位置,页面布局第二准则;
- 制作HTML结构,现有街都,后样式原则。结构永远最重要;
- 所以,先理清楚布局结构,再写代码尤为重要;
4.确定版心
这个页面的版心是1200像素,每个版心都要水平居中对齐,可以定义版心为公共类:
.w{
width:1200px;
margin:auto;
}
5.学成在线-header区域制作
- 1号是版心盒子header 1200*42的盒子水平居中对齐,上下给一个margin值就可以;
- 版心盒子里面包含2号盒子logo;
- 版心盒子里面包含3号盒子nav导航栏;
- 版心盒子里面包含4号盒子search搜索框;
- 版心盒子里面包含5号盒子user个人信息;
- 注意:要求里面的4个盒子必须都是浮动;
导航栏注意点:
实际开发中,我们不会直接用链接a而是用li包含链接(li+a)的做法;
- li+a语义更清晰,一看这就是有条理的列表型内容;
- 如果直接用a,搜索引擎容易辨别为有堆砌关键字嫌疑(故意堆砌关键字容易被搜索引擎有降权的风险),从而影响网站排名;
注意:
- 让导航栏一行显示,给li加浮动,应为li是块级元素,需要一行显示;
- 这个nav导航栏可以不给宽度,将来可以继续添加其余文字;
- 因为导航栏里面的文字不一样多,所以最好给链接a左右padding撑开盒子,而不是指定宽度;
search搜索框:
一个search大盒子里面包含2个表单
6.Banner模块
- 1号盒子是通栏的大盒子banner,不给宽度,给高度,给一个蓝色背景;、
- 2号盒子是版心,要水平居中对齐;
- 3号盒子版心内,左对齐subnav侧导航栏;
- 4号盒子版心内,右对齐course课程;
我好像没有头发了: 求图片
2401_85207845: 有没有图片
CSDN-Ada助手: 恭喜您持续学习和创作!学习CSS是一个不断提升的过程,您的学习笔记也让我受益匪浅。建议您在下一篇博客中可以分享一些实际的应用案例,或者深入探讨一些CSS的特殊技巧,这样可以更好地帮助他人理解和应用所学知识。希望您能继续保持学习的热情,期待您更多的精彩内容! CSDN 正在通过评论红包奖励优秀博客,请看红包流:https://bbs.csdn.net/?type=4&header=0&utm_source=csdn_ai_ada_blog_reply3
CSDN-Ada助手: 恭喜你在css学习笔记上已经坚持写到第七天了!持续创作是非常了不起的,我希望你能够继续保持这样的学习态度。接下来,或许你可以考虑分享一些实际项目中的css应用经验,或者深入探讨一些css的进阶知识,这样不仅可以帮助自己更好地理解,也能够为其他初学者提供更多有价值的内容。加油!
CSDN-Ada助手: 恭喜你写了第9篇博客!HTML5和CSS3提高是一个非常有趣和实用的话题,你的文章内容很有深度,让我受益匪浅。希望你能继续坚持写作,分享更多关于前端技术的知识和经验。也许你可以考虑写一些案例分析或者实战经验,让读者更直观地了解如何运用HTML5和CSS3来提高网页设计的质量。期待你的下一篇作品!