Example code for Html layered box-shadow effect
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
body{
margin: 0;
}
.clearfix {
overflow:auto;
}
.shadow_box{
box-shadow: 0px 3px 10px 1px #888888;
}
div.sticky{
position: sticky;
top: 0;
background:azure;
text-align: center;
}
.img1{
float: left;
clear: both;
margin-left:100px;
opacity: 0.8;
overflow:auto;
}
ul{
list-style-type: 0;
margin: 0;
padding: 0;
width: 7%;
height: 100%;
background-color:rgb(147, 171, 235);
position:fixed;
overflow:auto;
border-radius: 25px;
}
li a{
display: block;
color:#000;
padding: 8px 16px;
text-decoration: none;
font-family:"bold";
}
li:hover{
background-color: #555;
color: white;
}
</style>
<title>XR official website</title>
</head>
<body>
<div class="sticky clearfix shadow_box">
<img class="img1" src="img/4.png" width="60px" height="60px" />
</div>
<div>
<ul>
<li><a href="index.html">Core Technology</a></li>
<li><a href="index.html">Party and Government Section</a></li>
<li><a href="index.html">Business Status</a></li>
<li><a href="index.html">Future Development</a></li>
<li><a href="index.html">Contact Us</a></li>
</ul>
</div>
<div style="padding-bottom: 2000px;"></div>
</body>
</html> Directly on the complete code, this is also everyone's favorite way, no more procrastination, we mainly look at this
This is the "culprit" of the shadow effect. Because I defined box-shadow and then specified the relevant parameters, I can set it like this. A friend asked, what does this parameter mean and how do I know? It’s okay, I’ll tell you with a picture!
This is the end of this article about Html layered box-shadow effect. For more related HTML layered box-shadow content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future! |
>>: 4 functions implemented by the transform attribute in CSS3
Recommend
JavaScript to achieve full or reverse selection effect in form
This article shares the specific code of JavaScri...
Three ways to achieve background blur in CSS3 (summary)
1. Normal background blur Code: <Style> htm...
A brief discussion on MySQL event planning tasks
1. Check whether event is enabled show variables ...
Analysis of the use of Linux vulnerability scanning tool lynis
Preface: Lynis is a security audit and hardening ...
Three ways to use CSS inline styles, embedded styles, and external reference styles
A simple example of how to use the three methods ...
Detailed steps for configuring virtual hosts in nginx
Virtual hosts use special software and hardware t...
Solve the problem of Nginx returning 404 after configuring proxy_pass
Table of contents 1. Troubleshooting and locating...
Which loop is the fastest in JavaScript?
Knowing which for loop or iterator is right for o...
Collection of 25 fonts used in famous website logos
This article collects the fonts used in the logos...
Various methods to restart Mysql under CentOS (recommended)
1. MySQL installed via rpm package service mysqld...
Implementing parameter jump function in Vue project
Page Description: Main page: name —> shisheng...
Ubuntu View and modify mysql login name and password, install phpmyadmin
After installing MySQL, enter mysql -u root -p in...
Introduction to cloud native technology kubernetes (K8S)
Table of contents 01 What is Kubernetes? 02 The d...
How to center images horizontally and vertically in DIV or DIV
<div class="box"> <img /> &...
Script example for starting and stopping spring boot projects in Linux
There are three ways to start a springboot projec...