Dic + css page layout sharing and diccss page layout
HTML code
<! DOCTYPE html> Certificate ---------------------------------------------------------------------------------------------------------------------------------------------
CSS code
Body {
Background-color: antiquewhite;
Margin: 0px;
Padding: 0px;
Font-size: 12px;
Font-family: Arial;
}
# Container {
Margin: 0px auto;
Width: 810px;
Height: 600px;
Text-align: left;
Background: cadetblue;
}
# Banner {
Margin: 0px;
Padding: 0px;
Background: wheat;
Height: 150px;
Width: 100%;
}
# Globllink {
Margin: 0px;
Padding: 0px;
Background: salmon;
Height: 50px;
}
# Globllink ul {
List-style-type: none;
Margin: 0px;
}
# Globllink ul li {
Float: left;
Text-align: center;
Width: 80px;
Margin: 0px 20px;
}
# Globllink ul li {
Display: block;
Padding: 9px 6px 11px 6px;
Margin: 7px;
Background: url ("../img/5.jpg") no-repeat;
}
# Globllink a: link, # globllink a: visited {
Color: #004a87;
Text-decoration: underline;
}
# Globllink a: hover {
Color: # fffff;
Text-decoration: none;
Background: url ("../img/2.jpg") no-repeat;
Transform: rotate (30deg );
-Ms-transform: rotato (30deg);/* ie9 */
-Moz-transform: rotate (30deg);/* firefox */
-Webkit-transform: rotate (30deg);/* safari and chrome */
}
# Left {
Width: 200px;
Background: cadetblue;
Padding: 0px 0px 5px 0px;
Margin: 0px;
Color: blank;
Float: left;
-Display: inline;
}
# Weather {
Background: url ("../img/2.jpg") no-repeat;
Margin: 0px 5px;
Background-color: cadetblue;
}
# Weather h3 {
Font-size: 12px;
Padding: 1px 0px 0px 70px;
Color: gold;
Margin: 0px;
}
# Weather ul {
Margin: 8px 5px 0px 5px;
Padding: 10px 0px 8px 15px ;;
List-style-type: none;
}
# Weather ul li {
Background: url ("../img/5.jpg") no-repeat;
}
# Today h3 {
Color: seagreen;
Font-size: 15px;
Margin: 15px 0px 0px 20px;
Padding: 4px 0px 2px 30px;
Background: url ("../img/3.jpg ");
}
# Today {
Background: cadetblue;
Margin: 0px 3px;
Padding:-2px 0px;
}
# Today ul {
List-style-type: none;
Padding: 10px;
Margin: 0px;
}
# Today ul li {
Text-align: center;
}
# Today ul li img {
Border: 1px mediumvioletred solid;
}
# Today ul li a: link, # today ul li a: visited {
Color: # d8ecff;
Text-decoration: none;
}
# Today ul li a: hover {
Text-decoration: underline;
}
# Center {
Display: inline;
Background: white;
Margin: 0px 5px;
Padding: 5px 0px 5px 0px;
Float: left;
Width: 400px;
Height: 370px;
}
# Blank {
Border: 1px solid salmon;
Margin-top:-5px;
Margin-bottom:-4px;
}
# Blank1 h3 {
Color: brown;
Margin: 5px 5px;
Padding: 0px 0px 0px 70px;
}
# Blank1 {
Background: url ("../img/5.jpg"); no-repeat;
Padding: 13px;
}
# Blank2 a img {
Margin-right:-2px;
Padding: 0px;
Border: # C71585 solid 1px;
}
# Right {
Width: 200px;
Height: 370px;
Background: cadetblue;
Margin: 0;
Padding: 0px 0px 5px 0px;
Float: left;
}
# Map h3 {
Font-size: 13px;
Color: green;
Font-style: italic;
Font-weight: bold;
Font-family: "";
Margin: 0px;
Padding: 2px 0px 0px 5px;
}
# Map img {
Margin-bottom:-14px;
Padding-top:-100px;
}
# Food, # lifo {
Font-size: 15px;
}
# Food ul li, # lifo ul li {
Padding: 0px;
Border-bottom: 1px dashed # eeeeee;
}
# Lifo {
Margin-top:-10px;
}
# Food a: link, # food a: visited {
Color: crimson;
Text-decoration: none;
}
# Food a: hover {
Text-decoration: underline;
Background: url ("../img/2.jpg") no-repeat;
}
# Lifo a: link, # lifo a: visited {
Color: crimson;
Text-decoration: none;
}
# Lifo a: hover {
Text-decoration: underline;
Background: url ("../img/2.jpg") no-repeat;
}
# Footer {
Width: 100%;
Height: 30px;
Background: silver;
Margin: 1px 0px 0px 0px;
Padding: 1px 0px;
Clear: both;
Padding-left: 70px;
}
Static Page Effect
Edge Running Effect
2016-11-2109:45:07
Edge display is normal, but IE11 compatibility is not normal (the layout of the middle div is staggered up and down ).
Hope Daniel points out the solution
IE11 Running Effect