CSS 相关知识
精灵图
把许多小图标集中在一张背景透明的图片上。
在线工具：www.spritecow.com/
通过工具可以快速找到图标在精灵图上的坐标位置
外边距合并与塌陷
.parent {
width: 200px;
height: 200px;
background-color: green;
/* 防止外边距塌陷的写法：主要是把这个元素设置成BFC(块级格式化上下文 、独立的渲染区域)
1. 设置overflow:hidden
*/
overflow: hidden;
/*
2. 设置边框
*/
/* border: 1px solid white; */
/*
3. 可以让这个元素脱离正常文档流
*/
/* float: left; */
}
.child {
width: 100px;
height: 100px;
background-color: red;
/* 设置子元素距离父元素顶部50像素 */
margin-top: 50px;
}
</style>
<div class="parent">
<div class="child"></div>
</div>
<style>
.item {
width: 300px;
height: 100px;
}
.box-1 {
background-color: purple;
margin-bottom: 20px;
}
.box-2 {
background-color: deepskyblue;
margin-top: 30px;
}
/*
垂直方向，并列关系的两个元素，
上边元素设置margin-bottom：值
下边元素设置margin-top：值
这两个元素的间距不会相加，而是取属性值较大一个间距。
解决方案：
1. 并列关系的两个元素，要么统一设置margin-top或者统一设置margin-bottom
2. 给并列关系的两个元素嵌套一个父元素，设置overflow:hidden (形成BFC)
*/
.wrap {
overflow: hidden;
}
</style>
<div class="wrap"><div class="item box-1"></div></div>
<div class="wrap"><div class="item box-2"></div></div>
构建前端项目界面
在线设计平台有哪些？
masterGo
蓝湖
即时设计
设计稿
项目目录结构
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>首页</title>
<!-- 设置网页图标 -->
<link rel="shortcut icon" href="./images/Rectangle 22.png">
<!-- 初始化标签的默认样式 -->
<link rel="stylesheet" href="./css/reset.css">
<!-- 主要样式文件 -->
<link rel="stylesheet" href="./css/index.css">
<!-- 描述这个网页(提高搜索引擎优化) -->
<meta name="description" content="">
<!-- <meta name="description" content="淘宝网 - 亚洲较大的网上交易平台，提供各类服饰、美容、家居、数码、话费/点卡充值… 数亿优质商品，同时提供担保交易(先收货后付款)等安全交易保障服务，并由商家提供退货承诺、破损补寄等消费者保障服务，让你安心享受网上购物乐趣！"> -->
<meta name="keywords" content="">
<!-- <meta name="keyword" content="淘宝,掏宝,网上购物,C2C,在线交易,交易市场,网上交易,交易市场,网上买,网上卖,购物网站,团购,网上贸易,安全购物,电子商务,放心买,供应,买卖信息,网店,一口价,拍卖,网上开店,网络购物,打折,免费开店,网购,频道,店铺"> -->
</head>
<body>
<!-- wangyongguo 姓名拼音首字母 wyg-->
<!-- 最大容器（承载所有图文内容） -->
<div class="wyg-index-wrapper">
<!-- 1) 网站导航 -->
<div class="wyg-index-header"></div>
<!-- 2) 广告栏封面 -->
<div class="wyg-index-banner"></div>
<!-- 3) 关于我们 -->
<div class="wyg-index-about"></div>
<!-- 4) 吸引人的地方 -->
<div class="wyg-index-place"></div>
<!-- 5) 最新博客消息 -->
<div class="wyg-index-blog"></div>
<!-- 6）旅游周刊 -->
<div class="wyg-index-ctrip"></div>
<!-- 7) 大 LOGO -->
<div class="wyg-index-logo"></div>
<!-- 8) 画廊照片 -->
<div class="wyg-index-photo"></div>
<!-- 9) 联系旅行社 -->
<div class="wyg-index-tell"></div>
<!-- 10) 网页尾部 -->
<div class="wyg-index-footer"></div>
<!-- 11) 留言 -->
<div class="wyg-index-message"></div>
</div>
</body>
</html>
排查代码是否拼写错误
开发要求
-
结合所学的htmlcss还原UI设计效果图，完成前端编码。
-
注意web开发规范、标签使用规范、命名规范。
-
项目文件要做到结构、外观、行为相分离。
最后
当然，还有很多开发的知识等待大家去学习。 但是可以相信的是，只要你付出的时间+精力比别人多，那你就比别人优秀。
