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

    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

    通用部分

    • 基础框架

      1. <!DOCTYPE html>
      2. <html lang="en">
      3. <head>
      4.     <meta charset="UTF-8">
      5.     <title>filename</title>
      6. </head>
      7.  
      8. <body>
      9. 	<main>
      10. 		<section>
      11.  
      12. 		</section>
      13. 	</main>
      14.  
      15. 	<footer>
      16.         <p>No Copyright -<a href="#">linkname</a> </p>
      17.   </footer>
      18.  
      19. </body>
      20. </html>

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

    2022.10.20 html框架

    19:50 10mins

    待学习知识点预估：

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

    css基础知识点

    1. 独立css文档调用

      多个html文档共用同一个样式文件，相当于一个样式的组件便于快速修改样式

      <link rel="stylesheet" href="coffeepattern.css">

    2. css样式链接

      1. 为单个元素做样式
      2. 为多个元素做样式的便捷操作
      3. 为某个类做样式
      4. 为全局的某个类做样式
      1. body{}
      2. h1,h2{...}
      3. x.classname{}
      4. .classname{}

    3. 样式类型

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

    2022.10.22 改善布局

    css盒等进阶内容

    1. 样式

      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设定圆角

    2. 复杂调用

      1. id作为元素的唯一标识，在css中用#设定，由于元素唯一可以省略元素显示，即#idname{}
      2. 伪类如a:link

    3. 不像html元素中那样无序，css中顺序很重要，html调用css的样式表顺序也重要‼️

    4. 设备适配兼容

      1. @media screen and（min-device-width：481px）{
      2. 	#guarantee{
      3. 			margin-right:250px;
      4. 	}
      5. }
      6.  
      7. @media screen and（max-device-width：480px）{
      8. 	#guarantee{
      9. 			margin-right:30px;
      10. 	}
      11. }

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

    2022.10.26 开启第二课的代码学习

    15:30-16:00

    答题记录

    • step25居中元素：center the divhorizontally

      • setting its margin-leftand margin-right properties to auto

        1. margin-left:auto;
        2. 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.

        1. <article class="item">
        2.   <p class="flavor">French Vanilla</p>
        3.   <p class="price">3.00</p>
        4. </article>

      • add a displayproperty with value inline-blockso the pelements behave more like inline elements.通过筛选类中的p实现内联

      1. .item p{
      2.   display:inline-block;
      3. }

    • 边框问题

      • 内联元素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.
  • 相关阅读:
    营销邮件主题怎么写？编写邮件主题的技巧？
    记一次 .NET 某埋线管理系统 崩溃分析
    【系统架构设计】计算机公共基础知识： 2 计算机系统基础知识
    嵌入式单片机笔试题
    WordPress安装报错常见问题
    【Java第十八期】：#用Java模拟实现一个单向不带头不循环的链表
    【数据测试】之后端（一）
    为gnustep项目移植到wsl的过程
    NAT的知识点和实现
    早期Java Swing的eclipse项目导入idea使用
  • 原文地址：https://blog.csdn.net/hcud024/article/details/127651101