Dic + css page layout sharing and diccss page layout

Source: Internet
Author: User

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.