css 微信首页案例

最新推荐文章于 2023-03-31 11:56:25 发布

Shao_mou_ren

最新推荐文章于 2023-03-31 11:56:25 发布

阅读量349

点赞数 2

分类专栏： css

本文链接：https://blog.csdn.net/Shao_mou_ren/article/details/103308264

版权

本文通过代码展示如何使用CSS技术来创建一个微信首页的案例。详细讲解了相关代码实现，适合前端开发者学习和参考。

摘要由CSDN通过智能技术生成

如图所示:

代码如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
		*{
			margin: 0; padding: 0;
		}
		body{
			background: url(img/wx.jpg) repeat-x scroll top left;
		}
        .nav{
        	width: 1200px;
        	height: 80px;
        	margin: auto;
        }
        .lb1>.logo {
        	padding-top: 0;
        	margin-right: 100px;
        }
        .lb1 li{
        	list-style: none;
        	float: left;
        	padding-top: 21px;
        }
        
        .nav li a{
        	display: block;
            background: url(img/to.png) no-repeat;
            color: #fff;
            font-size: 12px;
            line-height: 33px;
            padding-left: 15px;
            text-decoration: none;
            margin-left: 10px;
        }
        .nav li a:hover{
        	background-image: url(img/ao.png);
        	}
        .nav li a:hover span{
        	background-image:  url(img/ao.png) ;
        }
        .nav li a span{
        	 display: block;
             height: 33px;
            background: url(img/to.png) no-repeat right center;
             padding-right: 15px
        }
        .bd{
        	height: 500px;
        	width: 1200px;
        	margin: auto;
        }
        .box1{
        	float: left;
        	margin-top: 60px;
        }
        .box1 h3{
        	font-size: 22px;
        	font-weight: 400;
        }
        .box1 p{
        	margin-top: 10px;
        	color: #979797;
        	font-size: 14px;