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 ...
随机推荐
- 关于Excel,你一定用的到的36个Python函数
从Excel到Python:最常用的36个Pandas函数关于Excel,你一定用的到的36个Python函数 本文涉及pandas最常用的36个函数,通过这些函数介绍如何完成数据生成和导入.数据清洗 ...
- 谈谈我对Promise的理解
一.Promise是什么? Promise是最早由社区提出和实现的一种解决异步编程的方案,比其他传统的解决方案(回调函数和事件)更合理和更强大. ES6 将其写进了语言标准,统一了用法,原生提供了Pr ...
- c++中sort函数调用报错Expression : invalid operator <的内部原理
当我们调用sort函数进行排序时,中的比较函数如果写成如下 bool cmp(const int &a, const int &b) { if(a!=b) return a<b; ...
- python基础 pyc
关于pyc的几点记录: python运行时会将python语句----->"字节码"------>转发到"虚拟机" 字节码:在大型的python程序 ...
- 《一句话理解Vue核心内容》阅读笔记
Vue.js(读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式框架. 在解释什么是渐进式框架之前,有必要了解一下什么是框架 在最初的前端开发中,我们利用JS获取HTML中的DOM元素 ...
- MySQL必知必会(第4版)整理笔记
参考书籍: BookName:<SQL必知必会(第4版)> BookName:<Mysql必知必会(第4版)> Author: Ben Forta 说明:本书学习笔记 1.了解 ...
- 【C语言】在有序数组中插入一个数,保证它依然有序
#include<stdio.h> int main() { ] = { ,,,,,, }; int key, i, j; printf("请输入一个数\n"); sc ...
- Codeforces Round #577 (Div. 2) 题解
比赛链接:https://codeforc.es/contest/1201 A. Important Exam 题意:有\(n\)个人,每个人给出\(m\)个答案,每个答案都有一个分值\(a_i\), ...
- 移动端 vue + mintUI 实现头部页签切换,按需加载~
记录~记录~~有时候,我们会遇到一个页面有两个页签切换需求,但是为了避免同时加载两个页面,我们要做到的就是当前进入的是那个页面,就先加载哪一个页面,并且也不会造成浏览器地址的变化.一开始我使用的方法是 ...
- gRPC Learning Notes
简介 更多内容参考:https://www.grpc.io/docs/guides/ gRPC 是一个高性能.开源和通用的 RPC 框架,面向移动和 HTTP/2 设计.目前提供 C.Java 和 G ...