CSS Learning Notes 6 (CSS positioning)
CSS Learning Notes 6 (CSS positioning)
CSS positioning
location
Relative positioning
Positioning is to move relative to your previous position in the standard flowFormat: position: relative;Sample program
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
...
Posted by MP145 on Fri, 18 Feb 2022 12:53:11 +0100
position attribute of css
definition
The position attribute is used to specify the position of an element on the web page. It is mainly described through three dimensions: benchmark, whether to take off the mark and occupy the position, and whether to set the margin. There are five positioning methods: static, relative, absolute, fixed and sticky. Before talking about ...
Posted by magi on Fri, 18 Feb 2022 05:07:03 +0100
"HTML+CSS" custom loading animation [048]
preface
Hello! buddy! First of all, thank you very much for reading Haihong's article. If there are mistakes in the article, you are welcome to point out ~ Ha ha, introduce yourself Nickname: Haihong Label: program ape a C + + player student Introduction: I got acquainted with programming in C language and then transferred to computer major ...
Posted by maciek4 on Fri, 18 Feb 2022 04:17:49 +0100
CSS learning notes - HTML document structure
Chapter 1 HTML tags and document structure
Each web page initially uses HTML to mark the content. The purpose of this move is to give the meaning of the web page. The object of operation is the user agent, that is, let your user agent read the content you write in the document.
The so-called user agent includes browser, screen reader, Web cra ...
Posted by ngreenwood6 on Fri, 18 Feb 2022 03:24:51 +0100
Use the white space attribute to realize the newline format and space format of the reserved text field textarea
backgroundIn yesterday's product requirements review, the product manager received feedback from the user. There are some text fields in the system. The user hopes that the text content and format filled in the text can be retained. At present, only the text content can be saved. The line breaks and spaces in the text field are not displayed co ...
Posted by az_wraith on Thu, 17 Feb 2022 03:40:34 +0100
Common text labels
1, Comments in html
1.1 annotation label
Shortcut keys for adding comments in the development environment:
windows system: ctrl +/Apple system: cmd +/
1.2 general format of notes
<!--This is a comment. Comments are not displayed in the browser.-->
1.3 condition notes
<!--[if IE 8]>
.... some HTML here ....
<![endif]-- ...
Posted by tpearce2 on Sun, 13 Feb 2022 17:34:51 +0100
Basic knowledge of HTML+CSS
origin
HTML(1993.6~2013.5.6) W3C (World Wide Web Consortium) was established in 1994 (neutrality)
Shortcuts & basic labels
To get the empty style CSS, click me Run: Ctrl+r Completion syntax: Tab Label: < H1 > ~ < H6 > Paragraph: < p ></p> Line feed:</br> Horizontal line: < / HR > Bold: < strong > ...
Posted by ardyandkari on Sat, 12 Feb 2022 17:56:26 +0100
HTML CSS transition effect
HTML CSS transition effect
1,transition
Transition: through the transition, you can specify the switching mode of the attribute of an element when it changes, so as to create some very good effects and improve the user experience. For example:
transition: height 2s; /*When the height of the element changes, it takes two seconds to transition ...
Posted by saraadmin on Sat, 12 Feb 2022 07:06:16 +0100
Basic use of Scss (@ extend, @ mixin, @ import, @ if, @ for, @ while, @ each)
Portal: basic use of Scss (variable, nested) Portal: Sass Chinese network Portal: Sass tutorial | rookie tutorial
1. Inheritance (@ extend)
@The extend instruction tells Sass that the style of one selector is inherited from another selector. Using @ extend is useful if one style is almost the same as another with only a few differences.
< ...
Posted by shellyrobson on Fri, 11 Feb 2022 11:18:31 +0100
Various implementation schemes of tab
1. First build structure and style
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>tab </title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.box {
width: 500px;
...
Posted by supinum on Fri, 11 Feb 2022 09:39:10 +0100