失眠网 > 【HTML CSS】笔记4日 [ 学成素材 ]

【HTML CSS】笔记4日 [ 学成素材 ]

时间：2021-02-18 03:37:09

准备素材和工具

学成在线PSD源文件。开发工具：PS（切图）/cutterman插件 + VScode（代码）+ Chrome（调试）。创建study目录文件夹（用于存放我们这个页面的相关内容），并用VScode打开这个目录文件夹。study目录内新建images文件夹，用于保存图片。新建首页文件夹index.html。（以后我们的网站首页同意规定为index.html）。新建style.css样式文件。本次我们采用外链样式表。将样式引入到我们的index.html文件页面中。样式表写入清除内外边距的样式，来检测样式表是否引入成功。素材自行食用，链接地址：/download/qq_39518871/13023059

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-gradient …

.jdc {display: block;position: relative;float: left;width: 100px;height: 100px;margin: 0 10px;padding: 20px 0;font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;color: #333;background: rgba(0,0,0,.5);-webkit-border-radius: 10px;-moz-border-radius: 10px;-o-border-radius: 10px;-ms-border-radius: 10px;border-radius: 10px;}

布局流程

为了提高网页制作的效率，布局时通常有以下的布局流程，具体如下：

必须确定页面的版心（可视区），我们测量可得知。分析页面中的行模块，以及每个行模块中的列模块。其实页面布局，就是一行行罗列而成制作HTML结构。我们还是遵循，先有结构，后有样式的原则。结构永远最重要。然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块。

效果图

`index.html`文件

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>学成在线</title><link rel="stylesheet" href="style.css" /></head><body><div class="header w"><div class="logo"><img src="images/logo.png" alt="" /></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 type="text" value="输入关键词" /><button></button></div><div class="user"><img src="images/user.png" alt="" />qq-lilie</div></div><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><div class="course"><h2>我的课程表</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="mod">修改兴趣</a></div><div class="box w"><div class="box-hd"><h3>精品推荐</h3><a href="#">查看全部</a></div><div class="box-bd"><ul class="clearfix"><li><img src="images/pic.png" alt="" /><h4>Think PHP 5.0 博客系统实战项目演练</h4><div class="info"><span>高级</span>• 1125人在学习</div></li><li><img src="images/pic.png" alt="" /><h4>Think PHP 5.0 博客系统实战项目演练</h4><div class="info"><span>高级</span>• 1125人在学习</div></li><li><img src="images/pic.png" alt="" /><h4>Think PHP 5.0 博客系统实战项目演练</h4><div class="info"><span>高级</span>• 1125人在学习</div></li><li><img src="images/pic.png" alt="" /><h4>Think PHP 5.0 博客系统实战项目演练</h4><div class="info"><span>高级</span>• 1125人在学习</div></li><li><img src="images/pic.png" alt="" /><h4>Think PHP 5.0 博客系统实战项目演练</h4><div class="info"><span>高级</span>• 1125人在学习</div></li><li><img src="images/pic.png" alt="" /><h4>Think PHP 5.0 博客系统实战项目演练</h4><div class="info"><span>高级</span>• 1125人在学习</div></li><li><img src="images/pic.png" alt="" /><h4>Think PHP 5.0 博客系统实战项目演练</h4><div class="info"><span>高级</span>• 1125人在学习</div></li><li><img src="images/pic.png" alt="" /><h4>Think PHP 5.0 博客系统实战项目演练</h4><div class="info"><span>高级</span>• 1125人在学习</div></li><li><img src="images/pic.png" alt="" /><h4>Think PHP 5.0 博客系统实战项目演练</h4><div class="info"><span>高级</span>• 1125人在学习</div></li><li><img src="images/pic.png" alt="" /><h4>Think PHP 5.0 博客系统实战项目演练</h4><div class="info"><span>高级</span>• 1125人在学习</div></li></ul></div></div><div class="footer"><div class="w"><div class="copyright"><img src="images/logo.png" alt=""><p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。<br />© 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>

`style.css`文件

* {margin: 0;padding: 0;}.w {width: 1200px;margin: auto;}body {background-color: #f3f5f7;/* height: 3000px; */}li {list-style: none;}a {text-decoration: none;}.clearfix:before,.clearfix:after {content: "";display: table;}.clearfix:after {clear: both;}.clearfix {*zoom: 1;}/* header部分 */.header {height: 42px;/* background-color: pink; *//* 注意此处的层叠性 */margin: 30px auto;}.logo {float: left;width: 198px;height: 42px;/* background-color: purple; */}.nav {float: left;margin-left: 60px;}.nav ul li {float: left;margin: 0 15px;}.nav ul li a {display: block;height: 42px;padding: 0 10px;line-height: 42px;font-size: 18px;color: #050505;}.nav ul li a:hover {border-bottom: 2px solid #00a4ff;color: #00a4ff;}.search {float: left;width: 412px;height: 42px;margin-left: 50px;/* background-color: skyblue; */}.search input {/* 表单元素是行内块元素，与后面同样是行内块元素的button之间会默认有个小间隔 *//* 使得 *//* 为了消除行内块元素的影响，给元素加浮动 */float: left;width: 345px;height: 40px;border: 1px solid #00a4ff;border-right: none;color: #bfbfbf;font-size: 14px;padding-left: 15px;}.search button {float: left;width: 50px;height: 42px;border: 0;background: url(images/fa-search.png);}.user {float: right;line-height: 42px;margin-right: 30px;font-size: 14px;color: #666666;} .user img {vertical-align: middle;}/* banner区域 */.banner {height: 421px;background-color: #1c036c;}.banner .w {height: 421px;background: url(images/banner2.png) no-repeat top center}.subnav {float: left;width: 190px;height: 421px;background: rgb(0, 0, 0, 0.3);}.subnav ul li {height: 45px;line-height: 45px;padding: 0 20px;}.subnav ul li a {font-size: 14px;color: #fff;}.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 h2 {height: 48px;background-color: #9bceea;text-align: center;line-height: 48px;font-size: 18px;color: #fff;}.course .bd {padding: 0 20px;}.bd ul li {padding: 14px 0;border-bottom: 1px solid #ccc;}.bd ul li h4 {font-size: 16px;color: #4e4e4e;}.bd ul li p {font-size: 12px;color: #a5a5a5;}.bd .more {display: block;height: 38px;border: 1px solid #00a4ff;margin-top: 5px;text-align: center;line-height: 38px;color: #00a4ff;font-size: 16px;font-weight: 700;}/* 精品推荐模块 */.goods {height: 60px;margin-top: 10px;background-color: #fff;box-shadow: 0 2px 3px 3px rgb(0, 0, 0, 0.1);line-height: 60px;}.goods h3 {float: left;margin-left: 30px;font-size: 16px;color: #00a4ff;}.goods ul {float: left;margin-left: 30px;}.goods ul li {float: left;}.goods ul li a {padding: 0 30px;font-size: 16px;color: #050505;border-left: 1px solid #ccc;}.goods .mod {float: right;margin-right: 30px;font-size: 14px;color: #00a4ff;}/* 核心内容模块 */.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;}.box-bd ul {width: 1225px;}.box-bd ul li {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 .info {margin: 0 20px 0 25px;font-size: 12px;color: #999999;}.box-bd ul .info span {color: #ff7c2d;}/* footer */.footer {height: 415px;background-color: #fff;}.footer .w {/* margin-top: 35px; */padding-top: 35px;/* background-color: blue; */}.copyright {float: left;}.copyright p {font-size: 12px;color: #666666;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: #333333;margin-bottom: 5px;}.links dl dd a {font-size: 12px;color: #333333;}

如果觉得《【HTML CSS】笔记4日 [ 学成素材 ]》对你有帮助，请点赞、收藏，并留下你的观点哦！

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

网友评论

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