I hope you are happy, I hope you are healthy, I hope you are happy, I hope you like it!
Finally, follow meow, follow meow, follow meow, you will see more interesting blogs! ! !
Meow meow meow, you are really important to me!
Table of contents
Relative positioning: relative
Web page title: Application of CSS background style
Web page title: Application of background images
Web page title: Colorful website logo
Web page title: mouseover effect
Preface
Final exam week has begun, and there are so many things to take. The Buddhist system is updated and completed during the summer vacation.
CSS positioning mechanism
CSS Positioning can place HTML elements anywhere you specify on the page. CSS The principle of positioning is to define the point in the upper left corner of the page as the coordinate (0,0) 's origin , and then build the entire web page into a coordinate system in pixels. Among them, the x axis has the same direction as the mathematical coordinate system, and the number is larger toward the right; y< a i=13>The axis is in the opposite direction to the mathematical coordinate system, and the number is larger as it goes down.
Document flow positioning
element type
块级元素 （ display: block ）The width of the block-level element is 100% , and there is a newline character hidden behind it, so that the block-level element always occupies one line. Title, paragraph, list, table, section (div) , body elements are all block-level elements.行级元素 （ display: inline ）is also called an inline element. There are no line breaks before and after the element. Row-level elements have no height and width , so they have no fixed shape and only occupy the size of their content when displayed. Elements such as hyperlinks, <span> , and forms are all row-level elements.Description : inline-block . For example, image < img > (has height and width, But there are no line breaks before and after)
CSSUsedisplay attribute to specify the type of element
Any element can usedisplayattribute to change the default display type
floating positioning
Float (float) is a positioning method with a high usage rate. Sometimes you want adjacent block-level elements to be arranged left and right, or one box to be surrounded by another box, to create a mixed arrangement of graphics and text. The simplest way is to use the float attribute to position the box in floating mode.
float attribute
A floated element can be moved left or right until its margin edge touches the padding edge of the containing block or the margin edge of another floated element. Any element can be floated, and a floated element becomes a block element.
The use of float
When used to mix images and text, set the wrapping method of images and text.Multi-column layout for web pages
Characteristics of float
clear attribute
Clear floats specify which sides of an element do not allow other floated elements.The value of Clear :both : Clear the floats on the left and right sidesleft and right : Only floats in one direction can be clearednone: Default value, running floating elements appear on both sides
layer positioning
When you need to layer the elements of a webpage on top of another element, and the effect of overlay or coverage appears, you need to use layer positioning.
The position attribute determines which layer the current layer can be positioned relative to. Different values have different references.
position attribute
fixed fixed positioning
Elements that do not change with the scroll bar of the browser window and are always in sight
Relative positioning: relative
The element box set to relative positioning will be offset by a certain distance from the normal document flow. The element retains its unpositioned shape and the space it originally occupied remains . Relative positioning is relative to itsimmediate parent element
Absolute positioning: absolute
A layer positioned as absolute will be separated from the normal document flow and relative< The difference between a i=4>: its original position in the normal flow no longer exists. Is positioned relative to the nonstatic direct parent element. If no parent layer is defined as nonstatic, it is relative to bodyPosition.
relative+absolute
Typical application: The parent layer is set to relative positioning ( relative ), and the child layer is set to absolute positioning ( absolute ), so that the sub-layer can change as the position of the parent layer changes.
Homework
Web page title: Application of CSS background style
- The main content of the web page is:
<body>
<div></div>
</body>
- Use internal style sheets to set the following style effects for web pages:
- The background color of the web page is: #fd8e47
- Define the id named box and apply it to the div. The style requirements are:
Width 400px, height 300px; 6px dotted blue border; set background image fm.jpg;
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS背景样式的应用</title>
<style>
body{
background-color:#fd8e47;
}
#box{
width:400px;
height:300px;
border:6px dashed #0000FF;
background-image:url(images/fm.jpg);
background-repeat:no-repeat;
background-position:right center;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
Web page title: Application of background images
- The main code of the web page is shown in the figure below:
- Set the following styles in the internal style sheet:
- Set the background color #FFCC66 for the body; the background image butterfly.gif, the background image does not display repeatedly, does not scroll with the scroll bar, and is fixed in the lower right corner.
- Set the width of h1 to 800px; the background color is #FC9804; the font color is #990000; the text is centered and displayed; h1 is displayed horizontally in the center of the page (margin: 0 auto;).
- Set the width to 800px for p; display it horizontally in the center of the page (margin:10px auto;).
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>背景图像的应用</title>
<style>
body{
background-color:#ffcc66;
background-image:url(images/butterfly.gif);
background-repeat:no-repeat;
background-position:right bottom;
background-attachment:fixed;
}
h1{
width:800px;
background-color:#fc9804;
color:#900;
text-align:center;
margin:10px auto;
}
p{
width:800px;
margin:10px auto;
}
</style>
</head>
<body>
<h1>背景图像的应用</h1>
<p>Iste quidem veteres inter ponetur honeste, qui vel mense brevi vel toto est iunior anno. Utor permisso, caudaeque pilos ut equinae paulatim vello unum, demo etiam unum, dum cadat elusus ratione ruentis acervi, qui redit in fastos et annis miraturque. Ennius et sapines et fortis et alter Homerus, ut critici dicunt, leviter curare videtur, quo promissa cadant et somnia Pythagorea.Naevius in manibus non est et mentibus haeret paene recens? Adeo sanctum est vetus omne poema. Ambigitur quotiens, sit prior, Pacuvius docti.</p>
<p>Iste quidem veteres inter ponetur honeste, qui vel mense brevi vel toto est iunior anno. Utor permisso, caudaeque pilos ut equinae paulatim vello unum, demo etiam unum, dum cadat elusus ratione ruentis acervi, qui redit in fastos et annis miraturque. Ennius et sapines et fortis et alter Homerus, ut critici dicunt, leviter curare videtur, quo promissa cadant et somnia Pythagorea.Naevius in manibus non est et mentibus haeret paene recens? Adeo sanctum est vetus omne poema. Ambigitur quotiens, sit prior, Pacuvius docti.</p>
<p>Iste quidem veteres inter ponetur honeste, qui vel mense brevi vel toto est iunior anno. Utor permisso, caudaeque pilos ut equinae paulatim vello unum, demo etiam unum, dum cadat elusus ratione ruentis acervi, qui redit in fastos et annis miraturque. Ennius et sapines et fortis et alter Homerus, ut critici dicunt, leviter curare videtur, quo promissa cadant et somnia Pythagorea.Naevius in manibus non est et mentibus haeret paene recens? Adeo sanctum est vetus omne poema. Ambigitur quotiens, sit prior, Pacuvius docti.</p>
<p>Iste quidem veteres inter ponetur honeste, qui vel mense brevi vel toto est iunior anno. Utor permisso, caudaeque pilos ut equinae paulatim vello unum, demo etiam unum, dum cadat elusus ratione ruentis acervi, qui redit in fastos et annis miraturque. Ennius et sapines et fortis et alter Homerus, ut critici dicunt, leviter curare videtur, quo promissa cadant et somnia Pythagorea.Naevius in manibus non est et mentibus haeret paene recens? Adeo sanctum est vetus omne poema. Ambigitur quotiens, sit prior, Pacuvius docti.</p>
</body>
</html>
Web page title: Colorful website logo
- html main part code: <h1>Colorful Summer Clothes</h1>
- NewExternal style sheet”style2.css”,Set the following styles for this web page:
- Set the style of h1 to: width 250px; use "Arial" font; font size 50px; font color: #369; bottom padding 4px (padding-bottom); add bottom border line: 2px solid line #ccc; set background image "3.jpg", repeated horizontally at the bottom; character spacing is set to 12px (letter-spacing:12px;)
- Useclass selector to set the following different display colors for the four texts: #B3EE3A #71C671 #00F5FF #00EE00
- External block style table”style2.css”Entering网页”< a i=4>6-6.html” Medium.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>炫彩网站Logo</title>
<link rel="stylesheet" href="css/style2.css">
</head>
<body>
<h1>
<span class="one">缤</span><span class="two">纷</span><span class="three">夏</span><span class="four">衣</span>
</h1>
</body>
</html>
style2.css
@charset "utf-8";
/* CSS Document */
h1{
width:250px;
font-family:Arial, Helvetica, sans-serif;
font-size:50px;
color:#369;
padding-bottom:4px;
letter-spacing:12px;
border-bottom:2px solid #ccc;
background-image:url(images/3.jpg);
background-repeat:repeat-x;
background-position:bottom;
}
.one{color:#B3EE3A;}
.two{color:#71C671; }
.three{color:#00F5FF;}
.four{color:#00EE00;}
Web page title: mouseover effect
- The main body code of html is as follows:
<h2>神奇的CSS</h2>
<div id="box">
<p>Learning<< /span>CSS>em<The best way is to keep practicing, keep thinking, and keep practicing again. For those who are new to >em</CSS>emem> will definitely find it difficult to start with the full code. . </p>
<p>Here are some work experiences for readers, hoping to help readers improve their writing skills Code ability: Master the meaning of each tag in the (X)HTML code; check it in time<em> ;CSS</em>Manual; do more<em>CSS< /span>CSS< /span>>p</How to lay out the website; good at summarizing experience . >em</>em<Exercises on laying out a website; searching the web and solve problems; analyze and think>em</
</div>
- Create a new file named "style3.css" in the CSS folder, and useexternal style sheet to set the following styles:
- Global style: set the outer margin to 0 (margin:0); set the inner margin to 0 (padding:0);
- h2 title style: font "Microsoft Yahei"; font size 40px; width 500px, height 70px; line height 70px; top margin 10px (margin-top: 10px); background color #fc0; text aligned center; font color is white .
- Set the style of the ID selector box: top border 5px double solid line color #f63; inner margin 10px (padding:10px;); background color #ff9; width 480px;
- Set the style of the p tag as follows: first line indentation 2 characters; line height 1.5em; font size 12px.
- Set the style of the em tag to: font size 20px; color #f00; add underline.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>鼠标悬停效果</title>
<link rel="stylesheet" href="CSS/style3.css">
</head>
<body>
<h2>神奇的CSS</h2>
<div id="box">
<p>学习<em>CSS</em>的最好办法就是不断的练习、不断的思考、不断的再练习。对于刚刚接触<em>CSS</em>的读者，面对满篇的代码肯定显得无从下手。</p>
<p>这里给读者一些工作经验，希望能够帮助读者提高编写代码的能力：掌握(X)HTML代码中每个标签的含义；及时查阅<em>CSS</em>手册；多做<em>CSS</em>布局网站的练习；在网络中搜索并解决问题；分析、思考<em>CSS</em>布局网站的处理方式；善于总结经验。</p>
</div>
</body>
</html>
style3.css
@charset "utf-8";
/* CSS Document */
*{
margin:0;
padding:0;
}
h2{
font-family:"微软雅黑";
font-size:40px;
width:500px;
height:70px;
line-height:70px;
margin-top:10px;
background-color:#fc0;
text-align:center;
color:#fff;
}
#box{
border-top:5px double #f63;
padding:10px;
background-color:#ff9;
width:480px;
}
p{
text-indent:2em;
line-height:1.5em;
font-size:12px;
}
em{
font-size:20px;
color:#f00;
text-decoration:underline;
}
I hope you are happy, I hope you are healthy, I hope you are happy, I hope you like it!
Finally, follow meow, follow meow, follow meow, you will see more interesting blogs! ! !
Meow meow meow, you are really important to me!
