用前端做bing网站页面 css和图片

淡淡的烟草味﹌ 2022-10-15 10:53 164阅读 0赞

body{
        
    	font-family: "microsoft yahei";
    }
    body,h1,h2,h3,h4,h5,h6,ul,ol,;i,p,table,tr,td{
        
    	margin: 0;
    	padding: 0;
    }
    html, body, div, ul, li, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, form, input, textarea, th, td, select {
        
        margin: 0;
        padding: 0;
    }
    ul,li,ol{
        
    	list-style: none;
    }
    a{
        
    	text-decoration: none;
    	color: inherit;/* 继承父亲用什么颜色它就什么颜色 */
    }

.body{
        
    	width: 100%;
    	height: 100%;
    	z-index: -1;
    	position: absolute;
    	/* background-image: url(../img/2.jpg);
    	background-size: 100%; */
    }
    .content{
        
    	margin: 0 auto;
    	width: 1400px;
    	overflow: hidden;
    }
    /* 顶部 */
    .top .content .lt{
        
    	float: left;
    }
    .top .content .lt li{
        
    	float: left;
    	font-family: Arial,Helvetica,Sans-Serif;
    	color: #fff;
    	margin-top: 14px;
    	margin-left: 30px;
    	font-size: 14px;
    	opacity: .8;
    }
    .top .content ul li:first-child{
        
    	margin-left: 15px;
    }
    .top .content ul li:nth-child(7){
        
    	margin-top: 17px;
    }
    .top .content ul li:nth-child(8){
        
    	margin-top: 16px;
    }
    .top .content .rt{
        
    	float: right;
    }
    .top .content .rt li{
        
    	float: left;
    	font-family: Arial,Helvetica,Sans-Serif;
    	color: #fff;
    	margin-top: 14px;
    	margin-right: 12px;
    	font-size: 14px;
    	opacity: .8;
    }
    .top .content .rt li:last-child{
        
    	margin-right: 10px;
    }
    .top .content .rt .headimg{
        
    	background-image: url(../img/jlt.png);
    	width: 32px;
    	height: 32px;
    	background-size: 241px 224px;
    	border-radius: 16px;
    	background-color: #FFFFFF;
    	background-position: -11px -149px;
    	margin-top: 8px;
    	margin-right: 22px;
    }
    .top .content .rt .option{
        
    	background-image: url(../img/jlt.png);
    	background-size: 241px 224px;
    	width: 32px;
    	height: 32px;
    	background-position: -170px -149px;
    	margin-top: 16px;
    }
    /* 中间 */
    .center .content{
        
    	position: relative;
    }
    #lc{
        
    	background-image: url(../img/jlt.png);
    	width: 27px;
    	height: 27px;
    	background-size: 361.5px 336px;
    	background-position: -27px -619px;
    	display: inline-block;
    	margin-left: 15px;
    	margin-top: 90px;
    	position: relative;
    	top: 5px;
    }
    .center .content span{
        
    	font-size: 18px;
    	color: #FFFFFF;
    	font-weight: 600;
    }
    .center .content input{
        
    	height: 52px;
    	width: 558px;
    	border-radius: 8px 0px 0px 8px;
    	border: 1px solid grey;
    	outline: none;
    	border-right: none;
    	margin-left: 15px;
    }
    .center .content .cr{
        
    	background-image: url(../img/jlt.png);
    	height: 52px;
    	width: 66px;
    	display: inline-block;
    	background-color: #FFFFFF;
    	background-size: 241px 224px;
    	background-position: -150px -500px;
    	border-radius: 0px 8px 8px 0px;
    	position: relative;
    	top: 23px;
    	border: 1px solid grey;
    	outline: none;
    	border-left: none;
    }
    /* 点击  轮播图 */
    .penult .content #img1{
        
    	background-image: url(../img/kbz.png);
    	width: 42px;
    	height: 42px;
    	background-position: 1px -566px;
    	cursor: pointer;
    	display: inline-block;
    	margin-top: 430px;
    	margin-left: 1230px;
    }
    .penult .content #img2{
        
    	background-image: url(../img/kbz.png);
    	width: 42px;
    	height: 42px;
    	background-position: 1px -608px;
    	cursor: pointer;
    	display: inline-block;
    	margin-left: 15px;
    }
    .penult .content #img3{
        
    	background-image: url(../img/kbz.png);
    	width: 42px;
    	height: 42px;
    	background-position: 1px -524px;
    	cursor: pointer;
    	display: inline-block;
    	margin-left: 15px;
    }
    /* 底下 */
    .bottom .content{
        
    	width: 100%;
    	height: 35px;
    	background-color: #444;
    	position: fixed;
    	bottom: 0;
    	font-size: 13px;
    	color: #666;
    	line-height: 35px;
    }
    .bottom .content span{
        
    	margin-right: 22px;
    }
    .bottom .content span:first-child{
        
    	margin-left: 55px;
    }
    .bottom .content span:last-child{
        
    	margin-left: 230px;
    }

![请添加图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hsdF9iaw_size_16_color_FFFFFF_t_70]

![请添加图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hsdF9iaw_size_16_color_FFFFFF_t_70 1]  
![请添加图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hsdF9iaw_size_16_color_FFFFFF_t_70 2]  
![请添加图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hsdF9iaw_size_16_color_FFFFFF_t_70 3]  
![请添加图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hsdF9iaw_size_16_color_FFFFFF_t_70 4]  
![请添加图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hsdF9iaw_size_16_color_FFFFFF_t_70 5]  
![请添加图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hsdF9iaw_size_16_color_FFFFFF_t_70 6]  
![请添加图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hsdF9iaw_size_16_color_FFFFFF_t_70 7]  
![请添加图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hsdF9iaw_size_16_color_FFFFFF_t_70 8]  
![请添加图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hsdF9iaw_size_16_color_FFFFFF_t_70 9]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hsdF9iaw_size_16_color_FFFFFF_t_70]: /images/20221014/398c2827b7e149df9a12ae5a9e83808f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hsdF9iaw_size_16_color_FFFFFF_t_70 1]: /images/20221014/c91afeeda49b47ee8079a73a58bbd90b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hsdF9iaw_size_16_color_FFFFFF_t_70 2]: /images/20221014/e782d7ecb698402392b878f5d7b8a319.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hsdF9iaw_size_16_color_FFFFFF_t_70 3]: /images/20221014/d65968f85a0a4ea9b6e908d12553cbe6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hsdF9iaw_size_16_color_FFFFFF_t_70 4]: /images/20221014/0b7356e42e2c44219d0926f98d1aa550.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hsdF9iaw_size_16_color_FFFFFF_t_70 5]: /images/20221014/fbe4a124299a4e06b0959630473042af.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hsdF9iaw_size_16_color_FFFFFF_t_70 6]: /images/20221014/8e296530e33c4737a7d80ecc12968b71.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hsdF9iaw_size_16_color_FFFFFF_t_70 7]: /images/20221014/7b6417b329af4c5ea4f4464cb865fdea.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hsdF9iaw_size_16_color_FFFFFF_t_70 8]: /images/20221014/f43224ab9fd84816b6be07a82590f1cf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hsdF9iaw_size_16_color_FFFFFF_t_70 9]: /images/20221014/d3ca99cd5d874ffc9661311ca7da3384.png