Style table attribute/background, style table attribute background
! DOCTYPE html>
<Html>
<Head>
<Meta charset = "UTF-8">
<Title> </title>
<Style>
. Font {
/* Select the font style */
Font-family: "";
/* Select the text size style */
Font-size: 20px;
/* Font color */
Color: bisque;
/* Background Color */
Background-color: black;
/* Font skew */
/* Italic skew */
Font-style: italic;
/* You can also directly write code in the <em> </em> or <I> </I> label */
/* Bold */
Font-weight: bold;
/* Underline */
Text-decoration: underline;
/* Dashes */
Text-decoration: overline;/* over indicates exceeding the limit in English */
/* Remove the underline */
Text-decoration: none;/* none does not mean it */
}
. Btn {
Width: 200px;
Height: 50px;
Border: 1px solid #000000;/* border line setting */
Font-size: 15px;/* font size */
/* Row Height column center style */
Line-height: 50px;/* This is generally used to replace vertical-align: middle; column center */
Transition: 2 s;/* excessive time of special effect transformation * // * the elements that are usually placed before the mouse points */
}
/* Special Effects pointed to by the mouse */
. Btn: hover {
/* Special effect */
Cursor: pointer;/* point the cursor to the target and turn it into a small hand */
/* Rounded corner */
Border-radius: 10px;/* The value generally does not exceed 50%. If it exceeds 50%, the value is calculated as 50% */
/* Rotate by angle */
Transform: rotate (45deg );
/* Rotate based on the X axis */
Transform: rotateX (360deg );
/* Rotate by Y axis */
Transform: rotateY (360deg );
}
. Div1 {
Width: 100px;
Height: 30px;
Border: 1px solid blue;
Background: deepskyblue;
/* Horizontal center */
Text-align: center;
/* Center the high column of the row */
Line-height: 30px;
/* Rounded corner 10px */
Border-radius: 10px;
/* The left corner of the rounded corner is 10px */
Border-bottom-left-radius: 10px;
/* Shadow */
Box-shadow: 1px 1px 1px cadetblue;
/* Meaning of the value in the style: The first 1px is 1 pixel down, the second 1px is 1 pixel to the right, and the third 1px is over one pixel .*/
/* The last one is the shadow color. If you want to add a shadow to the left, you only need to change the value to a negative number */
/* Inner shadow */
-Webkit-box-shadow: 1px 1px 1px cadetblue;
/* The value in the style has the same meaning as the shadow */
/* Rotate */
/* 1 */transform: rotate (45deg);/* rotate 45 degrees clockwise */
/* You can also extend x and Y axis rotation */
/* Twist */
Transform: skew (45deg );
}
/* Define what happens when an event is pointed up with the mouse */
. Div1: hover {
Transform: rotate (45deg)
}
</Style>
</Head>
<Body>
<Div class = "font">
Text demo case
</Div>
<Div class = "btn">
This is a button.
</Div>
<Div class = "div1">
Press the & nbsp; button
</Div>
<Style>
Ul {
/* Cancel the style */
List-style: none;
/* You can also put a smaller image for style use */
/* List-style: url (img/163.png); * // * image size as small as possible */
/* Hide the excess part */
Overflow: hidden;
/* Scroll bar appears in the excess part */
Overflow: scroll;/* scroll bar */
/* Overflow of stackoverflow */
/* Baidu in the programmer field */
/* Stackoverflow is the URL, but FQ is required */
/* Visible and hidden means that the hidden content does not occupy the Occupied Space */
Style = "vvisibility: hidden;"/* hidden hide visibility display */
/* Also indicates hiding space not occupied */
Style = "display: none;"/* none hide block display */
}
</Style>
<Ul>
<Li> 1 </li>
<Li> 2 </li>
<Li> 3 </li>
<Li> 4 </li>
</Ul>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
