【FreeCodeCamp】 ResponsiveWebDesign网页设计测试2学习笔记

袭瑛

已于 2022-11-04 17:42:29 修改

阅读量748

点赞数

分类专栏：前端开发文章标签： css html5

于 2022-11-02 14:36:03 首次发布

本文链接：https://blog.csdn.net/hcud024/article/details/127651101

版权

前端开发专栏收录该内容

16 篇文章 1 订阅

订阅专栏

Learn Basic CSS by Building a Cafe Menu

https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-basic-css-by-building-a-cafe-menu/step-1

通用部分

基础框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>filename</title>
</head>

<body>
	<main>
		<section>

		</section>
	</main>

	<footer>
        <p>No Copyright -<a href="#">linkname</a> </p>
  </footer>

</body>
</html>

使用<link>标签链接css样式文档rel=“stylesheet”

2022.10.20 html框架

19:50 10mins

待学习知识点预估：

背景
1. 类型
  1. 全局背景
  2. 局部背景
2. 样式
  1. 纯色背景
  2. 图片背景
排版
1. 居中
2. 左右对齐
3. 分割线
  1. 文字划线text-decoration: underline;跟随文字长度显示，有多种样式
  2. 文字下分割线，延伸至页面的边缘border-bottom
  3. 如果只是在局部区域中间划线呢？
字体
1. 类型
  1. serif ['serif]（衬线字体）
  2. sans-serif（非衬线字体）
  3. monospace （等宽字体）
  4. cursive ['kə:siv]（草书字体）
  5. fantasy ['fæntəsi]（虚幻字体
2. 粗体
3. 斜体

css基础知识点

独立css文档调用

多个html文档共用同一个样式文件，相当于一个样式的组件便于快速修改样式
```
<link rel="stylesheet" href="coffeepattern.css">
```
css样式链接
1. 为单个元素做样式
2. 为多个元素做样式的便捷操作
3. 为某个类做样式
4. 为全局的某个类做样式
```
body{}
h1,h2{...}
x.classname{}
.classname{}
```
样式类型
1. 背景background
  1. color
  2. image官方文档写明了本地资源无法通过 WXSS 获取，但是可以用网络图片，或者 base64
    1. **（没找到）**网络图片Welcome to nginx!将图片传上去，然后将外链地址复制到url
    2. **（没上传成功）**base64base64 转图片在线解码编码将图片传上去，然后将转码复制到url（转码后比较长，所以我通常选择用网络图片）
2. 间距padding
  1. 方向：上下左右
3. 字体font
  1. family：字体，类型
  2. size：大小——px、em、%
4. 线框border——多种类型&语法规则
  1. 方向：上下左右
  2. 类型：solid、dotted…
  3. 颜色
  4. 宽度
5. 文字text
  1. 布局align：center

存在的问题及待学习的内容

背景图片如何添加？
1. 尝试了background-image，发现通过这个方式无法实现本地图片的展示，只能通过url方式，但没有合适的url链接进行测试
自适应大小的可阅读性如何设定？
边距怎么设置便捷合理？
线的长短如何定义？
如果做左右对齐的布局？

2022.10.22 改善布局

css盒等进阶内容

样式
1. 行高line-height
2. 外边距margin与内边距padding
3. background
  1. background-image:url(image/name.png);调用本地图片
  2. background-repeat:no- repeat；默认重复图片，需要特殊设定
  3. -position可设定位置
4. border-radius设定圆角
复杂调用
1. id作为元素的唯一标识，在css中用#设定，由于元素唯一可以省略元素显示，即#idname{}
2. 伪类如a:link
不像html元素中那样无序，css中顺序很重要，html调用css的样式表顺序也重要‼️

设备适配兼容

@media screen and（min-device-width：481px）{
	#guarantee{
			margin-right:250px;
	}
}

@media screen and（max-device-width：480px）{
	#guarantee{
			margin-right:30px;
	}
}

css文档较大的时候建议在html中采用<link>元素指定不同的样式表

2022.10.26 开启第二课的代码学习

15:30-16:00

答题记录

step25居中元素：center the divhorizontally
- setting its margin-leftand margin-right properties to auto
```
margin-left:auto;
margin-right:auto;
```
内联与外联
- pelements are block-level elements, so they take up the entire width of their parent element.
- o get them on the same line, you need to apply some styling to the pelements, so they behave more like inline elements.
- Add a classattribute with the value item to the first articleelement under the Coffeeheading.
```
<article class="item">
  <p class="flavor">French Vanilla</p>
  <p class="price">3.00</p>
</article>
```
- add a displayproperty with value inline-blockso the pelements behave more like inline elements.通过筛选类中的p实现内联
```
.item p{
  display:inline-block;
}
```
边框问题
- 内联元素only take up the width of their content.
- 在设置50%时出现换行，调成49有空隙、将html中改为一行再改回50%就不换行了
屏幕适配
- The current width of the menu will always take up 80% of the body element's width. On a very wide screen, the coffee and dessert appear far apart from their prices.Add a max-width property to the menu class with a value of 500px to prevent it from growing too wide.
装饰
- 分割线：You can use an hr element to display a divider between sections of different content.
伪类
- You change properties of a link when the link has actually been visited by using a pseudo-selector that looks like a:visited { propertyName: propertyValue; }.Change the color of the footer Visit our website link to be grey when a user has visited the link.