How to enable developer mode in safari browser
Open the Safari browser preferences
[Advanced] - check [Show "Development" menu in menu bar]
How does the Safari browser view element attributes: first click with two fingers and select [Inspect Element]
Or click [Development] in the upper menu of the Safari browser, and click any option in the red box
Finally, follow the instructions in the figure to view the element properties.
Case: Mi Mall
1. Observe the menu bar layout
1.1 Analysis of the logo area
The a tag is an inline tag, and the height, width, and margin are invalid by default
So if you want to modify its margins, you need to turn it into an inline & block level label
.site-header .header-logo a{
margin-top: 22px;
display: inline-block;
}1.2 Analysis menu bar
The text of the a tag is underlined by default, if you don't want the underline:
text-decoration: noneWhen the mouse is on the menu, the font changes color
.site-header .header-nav a:hover{ color: #fd4603;}2. Observe the recommended area layout
set transparency
opacity：0～1Supplementary knowledge points
1.hover (pseudo class)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.download{
display: none;
}
.c1:hover .download{
display: block;
}
</style>
</head>
<body>
<div class="c1">
<a href="https://www.mi.com/appdownload">点击此处下载</a>
<div class="download">
<img src="images/download.png" alt=""/>
</div>
</div>
</body>
</html>2.after (pseudo class)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1:after{
content:"大帅哥";
}
</style>
</head>
<body>
<div class="c1">qy</div>
<div class="c1">qy</div>
</body>
</html>Generally not commonly used, but it will be used to clear float
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.clearfix:after{
content: "";
display: block;
clear: both;
}
.item{
float: left;
}
</style>
</head>
<body>
<div class="clearfix">
<div class="item">1</div>
<div class="item">12</div>
<div class="item">123</div>
<div class="item">1234</div>
</div>
</body>
</html>3.position
3.1fixed: fixed at a certain position of the window
- Case: return to top box
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0;
}
.back{
width: 50px;
height: 50px;
border: 1px solid black;
position: fixed;
right: 10px;
top: 50%;
}
</style>
</head>
<body>
<div class="back">
</div>
</body>
</html>- Case: Dialog
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0;
}
.dialog{
position: fixed;
width: 600px;
height: 500px;
background-color: white;
left: 0;
right: 0;
top: 100px;
margin: 0 auto;
z-index:999;
}
.mask{
background-color: black;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
opacity: 0.7;
z-index: 0;
}
</style>
</head>
<body>
<div>abcd</div>
<!-- 对话框一定要放在最上面，可以通过z-index解决这个问题-->
<div class="dialog"></div>
<div class="mask"></div>
</body>
</html>
3.2 relative and absolute:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0;
}
.c1{
height: 300px;
width: 500px;
border: 1px solid red;
margin: 100px;
position: relative;
}
.c1 .c2{
background-color: green;
height: 60px;
width: 60px;
position: absolute;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div class="c1">
<div class="c2">
</div>
</div>
</body>
</html>
4. Border
/*solid line: solid; dotted line: dotted*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
height: 200px;
width: 300px;
/*实线：solid；虚线：dotted*/
border-left: 1px dotted blue;
border-right :2px solid red;
}
</style>
</head>
<body>
<div class="c1">
</div>
</body>
</html>Realize the function that the mouse stays on the font and the border appears
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
height: 25px;
width: 80px;
font-size: 25px;
line-height: 25px;
text-align: center;
border: 1px solid transparent;
}
.c1:hover{
border-left: 1px solid grey;
border-right: 1px solid grey;
}
</style>
</head>
<body>
<div class="c1">
菜单
</div>
</body>
</html>5. Background color
background-color:red;