CSS背景图片设置
*{
margin:0px;
padding:0px;
list-style: none;
text-decoration: none;
font-family: Arial,'Microsoft YaHei',"Helvetica Neue",Helvetica,sans-serif;
}
body{
background-color: #e5e5e5;
background: url(../images/tyczz2.jpg);
background-position: center top;
background-size: 100%;
background-repeat: no-repeat;
background-attachment: fixed; }
.main{
background-color: #ffffff;
width:1220px;
margin:0 auto;
height:1480px;
}
.head{
width:100%;
height:40px;
background-color:#000;
}
.nav{ position:relative;
z-index:;
}
.nav ul{
width:1305px;
height:40px;
margin:0px auto;
}
.nav ul li{
font-size:16px;
color:#fff;
width:115px;
height:40px;
float:left;
text-align:center;
margin-left:30px;
}
.nav ul li dl a{
color:#fff;
}
.nav ul li dl dt{
margin:0px;
padding:0px;
width:115px;
height:40px;
line-height:40px;
position: relative;
}
.nav ul li dl dt:hover{
background-color:#173E7B;
}
.nav ul li dl dd{
font-size:14px;
color:black;
width:115px;
height:30px;
background-color:#000;
border-top:1px solid #fff;
line-height: 30px;
display:none;
border-radius:5px; }
.nav ul li:hover dl dd{
display:block;
position:relative; }
.nav ul li dl dd .hot{
color:red; }
.nav ul li dl dd a:hover{
color: #ffd053;
}
.nav ul li dl dd .hot:hover{
color:#44EAAD;
}
.nav ul li dl dt img{
position:absolute;
bottom:25px;
}
.nav ul li dl dd .hot-img {
position:absolute;
bottom:20px; }
.creat{
display: inline-block;
width:;
height:;
margin-left: 2px;
vertical-align: middle;
border-top: 4px dashed;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
}
.nav ul li dl dd p{
width:60px;
height:30px;
line-height:30px;
}
.ad1{
width:100%;
margin:0px auto;
margin-left:10px;
}
.ad{
width:100%;
height:110px;
margin:5px auto;
margin-left:10px;
} /***********************************************************************/
.container{
width:1200px;
height:568px;
margin-left:10px;
}
.promo{
width:800px;
height:458px;
float:left;
}
.rec{
width:350px;
height:458px;
float:left;
}
.pic{
width:115px;
height: 70px;
float:left;
margin-right:15px; }
.promo ul li{
width:100%;
height:70px;
margin-top:15px;
}
.promo ul li p{
position: relative;
} .promo ul li p a{
color:#f60;
position:absolute;
right:0px;
top:0px;
}
.promo ul li p a:hover{
text-decoration: underline;
}
.promo ul li h3 a{
display:block;
color: #333;
font-size: 18px;
margin-bottom:8px;
}
.promo ul li h3 a:hover{
text-decoration: underline;
color: #FF6600;
}
.promo ul li p {
font-size: 12px;
height: 40px;
line-height: 20px;
overflow: hidden;
color: #666565;
position: relative;
}
.rec{
margin-left: 50px;
}
/***********************************************************************/
.rec-type{
width: 350px;
height: 165px; }
.rec-1{
width:350px;
height:45px;
border-left:3px solid #00aa98;
padding-left:7px;
margin-top:15px;
}
.rec-1 h3{
font-size: 16px;
height:27px
line-height:22px;
color:#000;
padding: 0 12px 0 5px;
float:left;
}
.rec-1 span{
display:block;
color:#787878;
height:27px;
line-height:24px;
font-size: 12px; }
.rec-4{
padding:0 8px;
font-size: 14px;
height:18px;
line-height:20px;
}
.rec a{
color:#333;
}
.rec a:hover{
text-decoration: underline;
}
.promo h2{
border-bottom: 3px solid #00aa98;
display:inline-block;
height: 30px;
padding-left: 28px;
background: url(../images/ico_i_sys.png) 0 0 no-repeat;
}
.rec h2{
border-bottom: 3px solid #00aa98;
display:inline-block;
height: 30px;
padding-left: 28px;
background: url(../images/ico_i_sys.png) 0 -30px no-repeat;
margin-bottom:10px;
} /**************************************************************************/
.footer1 {
height: 190px;
background-color:#061a31;
margin:20px 0px 0px 0px;
padding: 0px;
width: 1200px; text-align: center;
display: block;
margin-left:10px; }
.footer-ad {
padding: 0px;
margin: 0px;
width: 24.83%;
height: 70px;
background-color:#071f3c;
border: 1px solid #D5B362;
float: left;
display: block;
}
.footer-ad p {
margin-top: 4px;
color: #fff;
font-size: 18px; }
.footer-ad-bottom{
position:relative;
}
.footer1 i {
display: block;
width: 900px;
height: 4px;
background-color: #fff;
overflow: hidden;
position:relative;
left: 140px;
top:55px;
clear: both;
z-index:;
}
.footer-ul {
height: 100%;
margin: 0px;
padding: 0px;
display: flex; }
.footer-ul li {
margin-top: 10px;
padding: 0px;
z-index:;
margin: 0px auto;
padding: 0px;
display: inline-block;
}
.footer-bootom-radius {
width: 100px;
height: 100px;
border-radius: 50px;
float: left;
background-color: #fff;
padding: 0px;
margin-top: 5px;
}
.footer-bootom-radius span {
display: block;
font-size: 30px;
line-height: 36px;
margin-top: 22px;
}
/****************************************************************************/
.footer{
width:100%;
background-color: #020c18;
text-align: center;
padding-bottom: 20px;
}
.w1000{
width: 1000px;
margin:0px auto;
}
.ico{
height: 47px;
background:url(../images/ico.png) no-repeat;
}
.footer .flink {
text-align: center;
color: #434343;
height: 50px;
line-height: 50px;
}
.footer .flink a {
font-size: 12px;
font-family: "微软雅黑";
color: #fff;
margin: 0 10px;
transition: all 0.3s;
}
.footer .flink a:hover{
color: #ffcf2e;
}
.footer .copyright {
text-align: center;
color: #fff;
font-size: 12px;
font-family: "微软雅黑"; }
CSS背景图片设置的更多相关文章
- Bootstrap css背景图片的设置
一. 网页中添加图片的方式有两种 一种是:通过<img>标签直接插入到html中 另一种是:通过css背景属性添加 居中方法:水平居中的text-align:center 和 margin ...
- css样式背景图片设置缩放
一.背景颜色图片平铺 background-color 背景颜色 background-image 背景图片地址 background-repeat 是否平铺 默认是平铺 background-pos ...
- 利用wget 抓取 网站网页 包括css背景图片
利用wget 抓取 网站网页 包括css背景图片 wget是一款非常优秀的http/ftp下载工具,它功能强大,而且几乎所有的unix系统上都有.不过用它来dump比较现代的网站会有一个问题:不支持c ...
- css背景图片拉伸 以及100% 满屏显示
如何用css背景图片拉伸 以及100% 满屏显示呢?这个问题听起来似乎很简单.但是很遗憾的告诉大家.不是我们想的那么简单. 比如一个容器(body,div,span)中设定一个背景.这个背景的长宽值在 ...
- div css背景图片不显示
我们在写页面时,为了便于维护,css样式通常都是通过link外部导入html的,有时在css中写入背景图片时,此时背景图片的路径应该是相对css文件的.比如,此时的文件有index.html,css. ...
- Android TextView背景颜色与背景图片设置
Android TextView 背景颜色与背景图片设置,android textview 控件,android textview 背景, android textview 图片,android te ...
- JAVA GUI学习 - 窗体背景图片设置方法:重写paintComponent(Graphics g)方法
public class BackgroundImage extends JFrame { public BackgroundImage() { this.setTitle("窗体背景图片设 ...
- CSS背景图片定位
原文:CSS背景图片定位 在网页开发中我们经常需要对图片进行分割(如下图)来使用,而不是分别提供单独的图片来调用,常见的如页面背景,按钮图标等,这样做的好处就是减少请求次数,节省时间和带宽. 对背景图 ...
- 【IE6的疯狂之八】链接伪类(:hover)CSS背景图片有闪动BUG
IE6下链接伪类(:hover)CSS背景图片有闪动BUG,主要原因ie会再一次请求这张图片,或者说图片没被缓存. 例如: CSS代码 a:hover{background:url(imagepath ...
随机推荐
- Vue - 组件 Prop
组件注册 全局注册 可在多个vue实例中使用 <div id="app"> <my-component></my-component> < ...
- POJ2909_Goldbach's Conjecture(线性欧拉筛)
Goldbach's Conjecture: For any even number n greater than or equal to 4, there exists at least one p ...
- 简单json 转换为 map、对象
1.如果转换的是Map.或者是简单的对象 package com.gc.action; import java.util.Map; import net.sf.json.JSONObject; /** ...
- EVE-NG镜像模板资源占用统计
转:http://www.emulatedlab.com/forum.php?mod=viewthread&tid=432&extra=page%3D1 EVE Image fold ...
- composer 配置 切换中国镜像
composer 默认地址改为中国镜像地址,以及中国镜像地址还原成默认地址 一.查看当前镜像地址 在命令行输入如下命令,即可查看全局镜像地址: $ composer config -g repo.pa ...
- 7、Java类型转换
类型转换 自动类型转换 自动类型转换指的是容量小的数据类型可以自动转换为空量大的数据类型.(容量大小不是看字节数来定的,是按照类型可以容纳多的数来定的,所以long,可以自动转为float) //特例 ...
- Sql性能优化梳理
前言 先简单梳理下Mysql的基本概念,然后分创建时和查询时这两个阶段的优化展开. 1.0 基本概念简述 1.1 逻辑架构 第一层:客户端通过连接服务,将要执行的sql指令传输过来 第二层:服务器解析 ...
- 去除移动端苹果手机(ios)的input默认样式与input禁止键盘出现的方式
样式: input{-webkit-appearance: none;} 在iPhone plus点击input框出生日期时会出现如下图: 为了去掉下面那条苹果自带的,可以这样处理:在HTML中的in ...
- AD10如何新建一个集成库
1.新建一个集成库工程 2.添加原理图库 3.添加封装库 4.最关键的一步:对这个工程需要进行编译 5.在界面的右边就能看到自己建的封装库了
- 一年读100本书---HHR,NZJ---19年最后4个月
那些自律到极致的人,都拥有了开挂的人生.生物钟,绝对一致之后,一切都会很高效. 19年最后一个季度的HHR计划:还剩下3个月的时间,主要搞定几件事情:创业(以太一堂,混沌大学),工作能力(推荐算法工程 ...