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 ...
随机推荐
- iview渲染函数
<Table border :columns="discountColumns" :data="discountData.rows"></Ta ...
- 关于mybatis中sql映射文件模糊查询的使用
1.从前台传递一个String类型的参数到后台进行查询,如果牵涉到模糊查询会报错,应该把参数封装到对象中再进行传递然后进行模糊查询 2.一个查询框,多个查询条件 <if test="c ...
- Python单例
01. 单例设计模式 设计模式 设计模式 是 前人工作的总结和提炼,通常,被人们广泛流传的设计模式都是针对 某一特定问题 的成熟的解决方案 使用 设计模式 是为了可重用代码.让代码更容易被他人理解.保 ...
- MySQL命令行脚本
1. 命令行连接 打开终端,运行命令 mysql -uroot -p 回车后输入密码,当前设置的密码为mysql 退出登录 quit 和 exit 或 ctrl+d 查看版本:select versi ...
- SVN代码迁移到GITlab
==================================================================================================== ...
- 搭建vue工程遇到的问题汇总
1.vue搭建环境- vue init webpack my-project无响应(如下报错) 原因:node 版本过高.v8.1.0 解决拌饭: 降级,终端指令 n v8.0.0; mac用户: s ...
- 五分钟学Java:打印Java数组最优雅的方式是什么?
在逛 Stack Overflow 的时候,发现了一些访问量像安第斯山一样高的问题,比如说这个:打印 Java 数组最优雅的方式是什么?访问量足足有 220W+,想不到啊,这么简单的问题竟然有这么多 ...
- SIMS(secondary ion mass spectroscopy)二次离子质谱
1.仪器介绍 二次离子质谱(SIMS)是一种用于通过用聚焦的一次离子束溅射样品表面并收集和分析喷射的二次离子来分析固体表面和薄膜的组成的技术.SIMS是最灵敏的表面分析技术,元素检测限为百万分之几到十 ...
- 「BJWC2010」模板严格次小生成树
题目描述 小 \(C\) 最近学了很多最小生成树的算法,\(Prim\) 算法.\(Kruskal\) 算法.消圈算法等等.正当小\(C\)洋洋得意之时,小\(P\)又来泼小\(C\)冷水了.小\(P ...
- php7 Memcached
PHP7 Memcached 扩展 wget https://codeload.github.com/websupport-sk/pecl-memcache/zip/php7/pecl-memcach ...