LinMinquan's Blog

Experience technology to change life

前端笔记

HTML:


用来在屏幕上画一条线。

Use the


tag to define a thematic change in the content

https://www.w3schools.com/tags/tag_hr.asp

Udacity HTML/CSS Style Guide

HTML Validator

MDN HTML Element Reference page.

  gives text strong importance, and is typically displayed in bold.

  stress emphasis

CSS

# 后跟的是ID,

. 后跟的是class

[] 里跟的是attribute

css它的代码被浏览器load是有顺序的,代码越后面,越迟被load,后面的代码会overwrite前面的代码,如果只是想稍微修改一下代码,可以在css的最后加一些代码。

CSS Validator

Google Fonts

Box-Shadow

Web Safe Fonts

Device Independent Pixels VS Hardware Pixels

Device Pixel Ratio = ( Hardware pixels) / ( Device Independent Pixels )

=======width + max-width======

CSS中指定了一张图片的width(例如width: 1024px),那再指定max-width: 100%会有什么效果。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animal Trading Cards</title>
    <link href="css/styles.css" rel="stylesheet">
</head>
<body>
    <div class="card">
        <h3 class="fish-name">Clownfish</h3>
        <img src="images/clownfish.png" alt="clownfish" id="fish-image">
    </div>
</body>
</html>
#fish-image {
    
    width: 1024px;
    max-width: 100%;
}

上面的代码,如果没加max-width,会使得如果在device-width小于1024px的device上打开时,图片fish-image会overflow。max-width的意思是,如果device-width小于fish-image width,则width等于device-width,进一步限制了fish-image width。

==============end===========

@media screen and (min-width: 401px) and (max-width: 599px) {

body {background-color: green;}

}

==========

Flexboxsheet

http://jonibologna.com/content/images/flexboxsheet.pdf

How to Build Responsive Images with srcset

https://www.sitepoint.com/how-to-build-responsive-images-with-srcset/

70 Expert Ideas For Better CSS Coding

https://hackhands.com/70-Expert-Ideas-For-Better-CSS-Coding/

========

Html5tags

Document and website structure

https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure

Bootstrap:

  • Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
  • Use rows to create horizontal groups of columns.
  • Content should be placed within columns, and only columns may be immediate children of rows.

https://getbootstrap.com/docs/3.3/css/

JavaScript

https://daringfireball.net/projects/markdown/

document.getElementsByTagName("h1")[0].style.color = "#ff0000";
document.body.addEventListener('click', function () {
     var myParent = document.getElementById("Banner"); 
     var myImage = document.createElement("img");
     myImage.src = 'https://thecatapi.com/api/images/get?format=src&type=gif';
     myParent.appendChild(myImage);
     myImage.style.marginLeft = "160px";
});

 

 

 


Share