Some notes about Web Design

From the winter vacation to the present, the Code is not written too much, but there is no small number of webpages. It mainly takes a lot of effort. Now I will summarize some of the recently used things and I can write them down now, they are basically searched on the Internet before. Now, write them down for future use.

Div border shadow: box-shadow: 3px 3px 6px #666;/* The four parameters are X axis offset, Y axis offset, blur volume, color */ Teshuai's font: font-family: Microsoft YaHei;/* use as needed */ Step 1 to start css ,*{

Margin: 0; padding: 0;

} Img {border: none;} with the above two sentences, you can avoid detours on Monday due to compatibility issues. Move the mouse into the hand effect. This is always forgotten !!! Cursor: pointer; Element transparency, mainly used for divopacity: 0.8;/* The higher the value 0-1, the lower the transparency */ The html code is as follows:

<Ul> <li> Project 1 </li> <li> Project 2 </li> <li> Project 2 </li> <li> Project 2 </li> </ul>

Css code: ul {list-style: none;} li {

Display: block;
Width: 50px;
Height: 30px;
Margin: 5px; float: left:

} Text vertical center display, this effect can only be used on block elements, and the element must have a height: line-height: n px; /* the value of n must be the same as the height of the element */vertical-align: middle; In-element text overflow is replaced by ellipsis: element {

Overflow: hidden; text-overflow: ellipsis; white-space: nowrap;

} Achieve div rounded corners:-webkit-border-top-left-radius: 4px;-webkit-border-top-right-radius: 4px; -webkit-border-bottom-left-radius: 4px;-webkit-border-bottom-right-radius: 4px; border-radius: 4px 4px 4px; /* It Can Be Used in Firefox browsers, and the above effects do not support IE. IE and your sister's building are a new age. */screen rotation-webkit-transform: rotate (180deg ); /* 180deg indicates the Rotation Angle */