html 纯ccs弹窗口,CCS+DIV实战代码示例--一个静态页面

最新推荐文章于 2022-05-14 21:40:15 发布

谈融

最新推荐文章于 2022-05-14 21:40:15 发布

阅读量208

点赞数

文章标签： html 纯ccs弹窗口

index.html文件

JOE-DIV+CSS

天气查询

乌鲁木齐雷阵雨
吐鲁番多云转阴
喀什阵雨转多云
库尔勒阵雨转阴

今日推荐

魔鬼域

美景寻踪

线路精选

新疆风光

小吃推荐

宾馆推荐

样式文件css.css

body{

background:#2286c6;

margin: 0px;

padding: 0px;

font-size: 12px;

font-family: Arial;

}

#container{

margin: 0px auto;

width: 780px;

text-align: left;

background: #123456;

}

#banner{

margin: 0px;

padding: 0px;

background: #778899;

width: 100%;

}

#globllink{

margin: 0px;

padding: 0px;

background: #567;

height: 50px;

width: 100%;

}

#globllink ul{

list-style-type: none;

margin: 0px;

padding: 0px;

}

#globllink ul li{

text-align: center;

float: left;

margin: 0px;

padding: 0px;

}

#globllink ul li a{

display: block;

width: 78px;

padding: 10px 0px;

font-size: 15px;

}

#globllink ul a:link,#globllink ul a:visited{

color: black;

background: url("images/button1.png") no-repeat;

text-decoration: underline;

}

#globllink ul a:hover{

color: white;

background: url("images/button1_bg.png") no-repeat;

text-decoration: none;

}

#left{

width: 200px;

background: #66b3ff;

margin: 0px;

padding: 0px 0px 5px 0px;

color: #d8ecff;

float: left; // 表示向左浮动

}

#weather{

background: url("images/weather.jpg") no-repeat;

padding: 0px;

margin: 2px 5px 20px 5px;

}

#weather h3{

text-align: center;

margin: 5px 0px;

padding: 5px 0px;

color: yellow;

}

#weather ul{

list-style-type: none;

padding: 0px;

margin: -10px 0px;

}

#weather li{

background: url("images/icon1.png") no-repeat 2px 2px;

padding: 5px 26px;

margin: 0px 8px;

}

#today{

margin: 2px 5px 84px 5px;

}

#today h3{

color: #0000c6;

background: #ddddff url("images/icon2.png") no-repeat 2px 3px;

padding: 3px 25px;

}

#today ul{

list-style-type: none;

padding: 0px;

text-align: center;

margin: -5px 0px;

}

#today ul li{

margin: 0px;

padding: 0px;

}

#today li img{

border: #ffffff solid;

padding: 0px;

margin: 0px;

}

#today li a{

padding: 0px;

margin: 0px;

}

#today li a:link, #today li a:visited{

padding: 2px;

margin: 0px;

}

#today li a:hover{

color: #ffffff;

text-decoration: none;

}

#middle{

width: 400px;

background: #ffffff;

margin: 0px 0px;

padding: 5px 5px;

float: left;

}

#scene h3{

text-align: left;

padding: 0px 0px 0px 10px;

margin: 5px 0px;

}

#scene ul, #route ul{

list-style-type: none;

padding: 0px;

margin: 0px;

}

#scene ul li img{

float: left;

margin: 0px 3px 0px 3px;

border: #ff5809 solid 2px;

}

#route {

clear: both;

margin: 0px;

padding: 5px 0px;

}

#route h3{

text-align: left;

padding: 0px 0px 0px 10px;

margin: 5px 0px;

}

#route ul li{

background: url("images/icon2.png") no-repeat 2px ;

padding: 5px 25px;

color: #ffdc35;

}

#route ul li a:list, #route ul li a:visited{

text-decoration: none;

color: #004e8a;

}

#route ul li a:hover{

text-decoration: underline;

color: #000000;

}

#right{

width: 170px;

background: #66b3ff;

margin: 0px;

padding: 0px 0px 5px 0px;

float: left;

}

#fengguang,#xiaochi,#binguan{

margin: 2px 0px 20px 0px;

padding: 0px;

}

#fengguang img{

margin: 0px;

padding: 0px 0px 5px 0px;

}

#fengguang h3,#xiaochi h3,#binguan h3{

margin: 5px 2px 10.3px 0px;

padding: 0px;

background: #ddddff;

}

#fengguang ul, #xiaochi ul, #binguan ul{

list-style-type: none;

padding: 0px;

margin: 5px;

}

#fengguang ul li{

text-align: center;

margin: 10px 0px 0px 0px;

padding: 0px 0px 10px 0px;

}

#xiaochi ul li, #binguan ul li{

background: url("images/icon2.png") no-repeat;

margin: 2px;

padding: 0px 0px 2px 25px;

border-bottom: 1px dashed #eeeeee;

}

#xiaochi ul li a:link, #binguan ul li a:visited{

text-decoration: none;

color: blue;

}

#xiaochi ul li a:hover, #binguan ul li a:hover {

text-decoration:underline;

color: #ffffff;

}

#footer{

background: #f9f900;

width: 100%;

margin: 2px 2px;

padding: 1px 0px;

clear: both;

}

#footer p{

text-align: center;

}

#footer p a{

color: #ffffff;

text-decoration: none;

}

图片文件

图片文件在同级目录的images文件夹下.