html5静态网页制作代码

卯生奋斗中

已于 2024-03-23 18:10:27 修改

阅读量1k

点赞数 11

文章标签： html5 前端 html

于 2024-03-23 18:05:29 首次发布

本文链接：https://blog.csdn.net/weixin_63066890/article/details/136955061

版权

效果图

第一步将页面分割成几个大板块

代码：html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>申卯在线</title>
    <link rel="icon" type="image/x-ico" href="favicon.ico">
	<link rel="stylesheet" type="text/css" href="主页.css">
</head>

<body>
	<div class="heading">
	</div>

	<div class="body">
		<div class="body_left">	
		</div>
		<div class="body_right">		
		</div>	
   </div>

</body>

</html>

代码：css

*{
    margin:0px;
	padding:0px;
	font:14px/1.5,normal,"-apple-system","Arial","sans-serif","宋体","Tahoma"
}
body{background-image:url(2.jpg);background-repeat:no-repeat;background-size:cover;}
.heading{
    width:auto;
    height:70px;
    background:#24292e;
    border:1px solid #393838;
}
.body_left{
        float:left;
        width:25%;
        height:750px;
        background:rgba(255,255,255,0.8);
}
.body_right{
    float: left;
    width: 75%;
    height: 750px;
    background-color: rgba(126, 129, 127, 0.8);
    position: relative;
}

效果图

第二步写每个板块具体的内容

头部

分区

这里因为出现了一点问题输入框被覆盖了我就分成了俩个部分为了美观我后面改成了相同的颜色

代码:html

<div class="heading">
        <div class="heading2"></div>
	</div>

代码：css

.heading2{
    width:75%;
    height:70px;
    float:right;
    background:#6b0316;
}

第一个图像

代码：html

<div class="heading_img">
            <img src="favicon.ico" alt="头像">
        </div>

代码：css

.heading_img img{
    margin-top: 10px;
    border-radius:20px;
    display:inline;
    width:35px;
    height:35px;
    float:left;
    margin-left:15px;
}

效果图：

输入框

代码：html

 <div class="heading_searchbox">
            <form>
                <input type="text" placeholder="请输入内容">
                <img src="favicon.ico">
            </form>
        </div>

代码：css

.heading_searchbox form{
    margin-top: 15px;
    float:left;
    position:relative;
    margin-left:15px;
    width:300px;
    height:28px;
}
.heading_searchbox input{
    width:300px;
    height:28px;
    outline:none;
    border:1px solid #3f4448;
    border-radius:3px;
    background:#f4f6f8;
    color:#000000;
    text-indent:7px;

}
.heading_searchbox input:focus{/*点击效果*/
    width:310px;
    height:32px;
    outline:none;
    background:#fff;
    border:1px solide #e2e3e3;
}
.heading_searchbox img{
    padding-top:8px;
    display:block;
    width:25px;
    height:25px;
position: absolute;
    top: -5px;
    left:275px;
    cursor:pointer;
}

效果图：

导航栏

代码：html

<div class="heading2_navbar">
                <ul>
                    <li><a href="#">我的</a></li>
                    <li><a href="#">问题</a></li>
                    <li><a href="#">网站</a></li>
                    <li><a href="#">探讨</a></li>
                </ul>
            </div>

代码：css

.heading2_navbar{
    width:100%;
    height:30px;
    position:relative;
    margin-top: 5px;
}
.heading2_navbar ul{
    list-style:none;
    float:left;
    margin-left:20px;
    padding-top:15px;
    padding-bottom:6px;
}
.heading2_navbar li{
    float:left;
    padding-left:10px;
}
a{
    text-decoration:none;
    display:block;
    text-align:center;
}
.heading2_navbar a{
    color:white;
    font-size:15px;
}
.heading2_navbar a:hover{/*点击效果*/
    color:darkgray;
}

效果图

右边的三个图标

代码：html

<div class="heading2_right">
                <img src="favicon.ico" alt="">
                <img src="favicon.ico" alt="">
                <img  class="heading2_right_touxiang" src="favicon.ico" alt="">
            </div>

代码：css

.heading2_right{
    position:absolute;
    right:10px;
    top:15px;
    width:130px;
    height:50px;
}
.heading2_right img{
    width: 30px;
    height: 30px;
    margin-right: 5px;
    margin-top: 5px;
    cursor: pointer;
}
.heading2_right_touxiang{
    border-radius: 30px;
}

效果图

身体左侧

分区

如图我把它分了两个部分

上半部分

代码：html

<div class="body_left_one">
                <h5>搜索需要的内容</h5>
                <button tpye="botton" onclick="alert('检索完成')">new</button>
            </div>

代码：css

.body_left_one{
    width: 350px;
    height: 33px;
    margin: 30px 15px 4px 20px;
}
.body_left_one h4{
    color:rgb(58, 56, 56);
    line-height:21px;
    margin-bottom:4px;
}
.body_left_one button{
    float:right;
    width: 62px;
    height: 28px;
    margin-top:-24px;
    margin-right: 22px;
    display:block;
    border:1PX solid #218c3a  ;
    color:white;
    background-color:#28a745;
    background-image:
	linear-gradient(#6a8e72,#28a745);
    cursor:pointer;
}
.body_left_one button:hover{/*点击效果*/
	background: #28a745;
}

效果图

下半部分

代码：html

   <div class="body_left_two">
                <form action="">
                    <input type="text" placeholder="请输入要找寻的对象">
                </form>
            </div>

代码：css

.body_left_two{
	width:330px;
	height:35px;
	margin:20px 15px 10px ;
}
.body_left_two input{
    width:100%;
    height:35px;
    border:1px solid #000000;
    border-radius:3px;
    color:#09100b;
    box-shadow:inset 0 1px 2px #3d3c3c;
    text-indent:11px;
    outline:none
}
.body_left_two input:focus{/*点击效果*/
    width:100%;
    height:38px;
    box-shadow:0 1px 1px #11467f,0 0 8px #486a8f;
    outline:0;
}

效果图

身体中间部分

分区

如图把它分成了四个个部分

第一部分

代码：html

 <div class="body_right_mid">
                <h3>c语言学习基础入门</h3>
                    <p>
                        C语言是一门面向过程的、抽象化的通用程序设计语言，广泛应用于底层开发。C语言能以简易的方式编译、处理低级存储器。C语言是仅产生少量的机器语言以及不需要任何运行环境支持便能运行的高效率程序设计语言。
                    <a href="#">
                        c语言
                    </a>
                    </p>
                <button type="button">
                探究
                </button>
 </div>

代码：css

.body_right_mid{
    width: 65%;
    height:250px;
    position: relative;
    background-color: rgba(255, 255, 255, 0.85);
    margin:20px 10px;
    border:1px solid #a1a2a1;
    border-radius: 4px;
    
   }
.body_right_mid h3{
    padding:30px 70px 5px 30px;
    margin:10px;
}
.body_right_mid p{
    font-size:16px;
    padding-left:40px;
    padding-right:40px;
    color:rgb(19, 18, 18);
}
.body_right_mid a{
    display:inline;
    color:#11467f;
    text-decoration: underline;
}
.body_right_mid a:hover{
    color:#fc6209;
    text-decoration: underline;
}
.body_right_mid button{
    width: 100px;
    height: 25px;
    position: absolute;
    left:30px;
    bottom:40px;
    display:block;
    text-align: center;
    font-size: 15px;
    color:white;
    border:1px solid rgb(225, 219, 219);
    border-radius: 6px;
    background-color: #218c3a;
    box-shadow: inset 0px 1px  #0e3817;
    cursor:pointer;
}
.body_right_mid button:hover{
    background-color: white;
    box-shadow: inset 0px 1px  #918d8d;
    
    color:#2890d5;
}

效果图

第二部分

代码：html

<div class="body_right_mid02">
                
                <p><strong>申卯！</strong>这是申卯的第一个网站让我们开始html的学习吧&nbsp&nbsp<a href="#">html</a></p>
                <br>
                <p>申卯在线</p>

            </div>

代码：css

.body_right_mid02{
    width:65%;
    height:70px;
    margin:40px 25px;
    position: relative;
}
.body_right_mid02 p{
    float:left;
    font-size: 13px;
    color:#313432;
}
.body_right_mid02 a{
    display: inline;
    color:#01130d;
    text-decoration: none;}
.body_right_mid02 a:hover{
    color:#218c3a;
    text-decoration: underline;
}

效果图

第三部分

分成了俩个部分第二部分用表格完成的

代码：html

           <div class="body_right_mid03"><!--第一部分-->
                <img src="favicon.ico" alt="">
                <p>@ 2024 申卯在线</p>
                <table class="body_right_mid04"><!--第二部分-->
                    <tr>
						<td>c语言</td>
						<td>html</td>
						<td>c++</td>
					</tr>
					<tr>
						<td>Linux</td>
						<td>h3c</td>
						<td>3d max</td>
					</tr>
					<tr>
						<td>github</td>
						<td>secureCRT</td>
						<td>steam</td>
					</tr>
				

                </table>
            </div>

代码：css

.body_right_mid03{
    width:65%;
    height: 150px;
    margin:20px;
    position: absolute;
    left:0px;  
    bottom:0px;
}
.body_right_mid03 img{
    width:40px;
    height: 40px;
    float:left;
    border-radius:35px;
    cursor:pointer;
    margin-top: 5px;

}
.body_right_mid03 p{
    float:left;
    margin: 15px 10px 10px 10px;
    font-size: 12px;
    color:#000000;
    cursor:pointer;
}
.body_right_mid04 {
    float:right;
    font-size: 13px;
    color:#01031c;
    cursor:pointer;
    margin-top: 20px;

}
.body_right_mid04 td{
    padding:0px 27px 27px 27px;
}

效果图

第四部分

分区

如图我把它分成了7个版块

第1个部分

代码：html

  <div class="right_right"><!--整体的布局-->
<div class="demo01"><!--体内的布局-->
                <img src="favicon.ico" alt="">
                <p>
                    <strong>
                        GitHub 
                    </strong>
                    <br>
                    GitHub是一个面向开源及私有软件项目的托管平台
                    <br>
                    拥有1亿以上的开发人员
                </p>
                <span>x</span>
            </div>
</div>

代码：css

.right_right{
	float:right;
	width:380px;
	height:750px;
	position:absolute;
	right:0px;
	top:0px;
    background-color: rgba(210, 212, 210, 0.6);
}
.demo01{
	width:350px;
	height:100px;
    margin: 10px;
	border:.7px solid #4e94e2;	
	border-radius:10px;
	background:#f1f8ff;
    position: relative;
	font-size:12px;
	color:#586080;
}
.demo01 span{
 position: absolute;
    top:0px;
   right: 20px;
    color: #586080;
    font-size:23px;
    cursor: pointer;
}
.demo01 img{
    width:30px;
    height: 30px;
    float: left;
    display: block;
    margin: 8px 5px 5px 8px;
    cursor:pointer;
}
.demo01 p{
    float: right;
    margin-top: 10px;
    margin-right: 35px;
}

效果图

第2,3部分

代码：html

<div class="demo02">
                <img src="favicon.ico" alt="">
                <p>
                    <strong>
                        c语言
                    </strong>
                    <br>
                    C语言是一种较早的程序设计语言，诞生于1972年
                    <br>
                    它继承了B语言的许多思想
                </p>
                <span>x</span>
            </div>

            <div class="demo03">
                <img src="favicon.ico" alt="">
                <p>
                    <strong>
                        Liunx
                    </strong>
                    <br>
                   Linux是一种免费使用,自由传播的类UNIX操作系统
                </p>
                <span>x</span>
            </div>

代码：css

.demo02{
    width:350px;
    height: 80px;
    background-color: #f7f1f3;
    margin: 10px;
    border-radius: 10px;
font-size:12px;
color: #67454c;
position: relative;
border: 1px solid #9f7279;
}
.demo02 span{
 position: absolute;
    top:0px;
   right: 20px;
    color: #586080;
    font-size:23px;
    cursor: pointer;
}
.demo02 img,.demo03 img{
    width:30px;
    height: 30px;
    float: left;
    display: block;
    margin: 8px 5px 5px 8px;
    cursor:pointer;
}
.demo02 p,.demo03 p{
    float: right;
    margin-top: 10px;
    margin-right: 35px;
}


.demo03{
    width:350px;
    height: 50px;
    background-color: #ffffff;
    margin: 10px;
    border-radius: 10px;
font-size:12px;
color: #586080;
position: relative;
border: 1px solid #6ea5cd;
}
.demo03 span{
 position: absolute;
    top:0px;
   right: 20px;
    color: #586080;
    font-size:23px;
    cursor: pointer;
}

效果图

第4部分

代码：html

 <div class="demo04">
                <p><strong>
                   学习地址
                </strong></p>
            </div>

代码：css

.demo04{
    width:350px;
    height:20px;
    margin: 19px;

}
.demo04 p{
    font-size: 15px;
    color:#0d2c01;
    
}

效果图

第5,6部分

代码：html

<div class="demo05">
                <strong>
                    <a href="#">
                        https://github.com/
                    </a>
                    <a href="#">
                        https://www.csdn.net/
                    </a></strong><p>
                    github官网集成大佬一堆<br>
                    csdn国内能上的网站
                
            </p></div>

            <div class="demo06">
                <strong>
                    <a href="#">
                        https://www.runoob.com/
                    </a></strong><p>
                  菜鸟教程学的不仅是技术，更是梦想！
                
            </p></div>

代码：css

连写了第7部分一样的地方

.demo05,.demo06{
    width: 350px;
    height: 90px;
    margin: 19px;
    border-bottom: 1px solid #012311;
}
.demo05 P,.demo06 P,.demo07 P{
    font-size: 12px;
    color: #161f1a;
}
.demo05 a,.demo06 a,.demo07 a{
    font-size: 14px;
    display: block;
    color: #000000;
    text-align: left;
    text-decoration:none;
}
.demo05 a:hover,.demo06 a:hover,.demo07 a:hover{
    color: #cb4040;
}

效果图

第7部分

代码：html


            <div class="demo07">
                <strong>
                    <a href="#">
                        https://www.linuxprobe.com/
                    </a></strong><p>
                   《liunx就该这么学》--必读的liunx系统与红帽RHCE认证
                    <br><br><br>
                    快去深造吧 →
                
            </p></div>

代码：css

.demo07{
    width: 350px;
    height: 90px;
    margin: 19px;

}

效果图

完整代码html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>申卯在线</title>
    <link rel="icon" type="image/x-ico" href="favicon.ico">
	<link rel="stylesheet" type="text/css" href="主页.css">
</head>

<body>
	<div class="heading">

        <div class="heading_img">
            <img src="favicon.ico" alt="头像">
        </div>

        <div class="heading_searchbox">
            <form>
                <input type="text" placeholder="请输入内容">
                <img src="favicon.ico">
            </form>
        </div>
        
        <div class="heading2">

            <div class="heading2_navbar">
                <ul>
                    <li><a href="#">我的</a></li>
                    <li><a href="#">问题</a></li>
                    <li><a href="#">网站</a></li>
                    <li><a href="#">探讨</a></li>
                </ul>
            </div>

            <div class="heading2_right">
                <img src="favicon.ico" alt="">
                <img src="favicon.ico" alt="">
                <img  class="heading2_right_touxiang" src="favicon.ico" alt="">
            </div>

        </div>
	</div>

	<div class="body">

		<div class="body_left">

            <div class="body_left_one">
                <h4>搜索需要的内容</h4>
                <button tpye="botton" onclick="alert('检索完成')">new</button>
            </div> 	
            <div class="body_left_two">
                <form action="">
                    <input type="text" placeholder="请输入要找寻的对象">
                </form>
            </div>
		</div>

		<div class="body_right">	
            <div class="body_right_mid">
                <h3>c语言学习基础入门</h3>
                    <p>
                        C语言是一门面向过程的、抽象化的通用程序设计语言，广泛应用于底层开发。C语言能以简易的方式编译、处理低级存储器。C语言是仅产生少量的机器语言以及不需要任何运行环境支持便能运行的高效率程序设计语言。
                    <a href="#">
                        c语言
                    </a></p>
                <button type="button">探究</button>
            </div>	
            <div class="body_right_mid02">
                
                <p><strong>申卯！</strong>这是申卯的第一个网站让我们开始html的学习吧&nbsp&nbsp<a href="#">html</a></p>
                <br>
                <p>申卯在线</p>
            </div>
            <div class="body_right_mid03">
                <img src="favicon.ico" alt="">
                <p>@ 2024 申卯在线</p>
                <table class="body_right_mid04">
                    <tr>
						<td>c语言</td>
						<td>html</td>
						<td>c++</td>
					</tr>
					<tr>
						<td>Linux</td>
						<td>h3c</td>
						<td>3d max</td>
					</tr>
					<tr>
						<td>github</td>
						<td>secureCRT</td>
						<td>steam</td>
					</tr>
                </table>
            </div>
            <div class="right_right">
            <div class="demo01">
                <img src="favicon.ico" alt="">
                <p>
                    <strong>
                        GitHub 
                    </strong>
                    <br>
                    GitHub是一个面向开源及私有软件项目的托管平台
                    <br>
                    拥有1亿以上的开发人员
                </p>
                <span>x</span>
            </div>
            <div class="demo02">
                <img src="favicon.ico" alt="">
                <p>
                    <strong>
                        c语言
                    </strong>
                    <br>
                    C语言是一种较早的程序设计语言，诞生于1972年
                    <br>
                    它继承了B语言的许多思想
                </p>
                <span>x</span>
            </div>

            <div class="demo03">
                <img src="favicon.ico" alt="">
                <p>
                    <strong>
                        Liunx
                    </strong>
                    <br>
                   Linux是一种免费使用,自由传播的类UNIX操作系统
                </p>
                <span>x</span>
            </div>
            <div class="demo04">
                <p><strong>
                   学习地址
                </strong></p>
            </div>
            <div class="demo05">
                <strong>
                    <a href="#">
                        https://github.com/
                    </a>
                    <a href="#">
                        https://www.csdn.net/
                    </a></strong><p>
                    github官网集成大佬一堆<br>
                    csdn国内能上的网站
                
            </p></div>

            <div class="demo06">
                <strong>
                    <a href="#">
                        https://www.runoob.com/
                    </a></strong><p>
                  菜鸟教程学的不仅是技术，更是梦想！
                
            </p></div>
            
            <div class="demo07">
                <strong>
                    <a href="#">
                        https://www.linuxprobe.com/
                    </a></strong><p>
                   《liunx就该这么学》--必读的liunx系统与红帽RHCE认证
                    <br><br><br>
                    快去深造吧 →
                
            </p></div>
            </div>

		</div>	

   </div>

</body>

</html>

css

*{
    margin:0px;
	padding:0px;
	font:14px/1.5,normal,"-apple-system","Arial","sans-serif","宋体","Tahoma"
}
body{background-image:url(2.jpg);background-repeat:no-repeat;background-size:cover;}
.heading{
    width:auto;
    height:70px;
    background:#24292e;
    border:1px solid #393838;
}
.heading_img img{
    margin-top: 10px;
    border-radius:20px;
    display:inline;
    width:35px;
    height:35px;
    float:left;
    margin-left:15px;
}
.heading_searchbox form{
    margin-top: 15px;
    float:left;
    position:relative;
    margin-left:15px;
    width:300px;
    height:28px;
}
.heading_searchbox input{
    width:300px;
    height:28px;
    outline:none;
    border:1px solid #3f4448;
    border-radius:3px;
    background:#f4f6f8;
    color:#000000;
    text-indent:7px;

}
.heading_searchbox input:focus{
    width:310px;
    height:32px;
    outline:none;
    background:#fff;
    border:1px solide #e2e3e3;
}
.heading_searchbox img{
    padding-top:8px;
    display:block;
    width:25px;
    height:25px;
position: absolute;
    top: -5px;
    left:275px;
    cursor:pointer;
}
.heading2{
    width:75%;
    height:70px;
    float:right;
    background:#24292e;
}
.heading2_navbar{
    width:100%;
    height:30px;
    position:relative;
    margin-top: 5px;
}
.heading2_navbar ul{
    list-style:none;
    float:left;
    margin-left:20px;
    padding-top:15px;
    padding-bottom:6px;
}
.heading2_navbar li{
    float:left;
    padding-left:10px;
}
a{
    text-decoration:none;
    display:block;
    text-align:center;
}
.heading2_navbar a{
    color:white;
    font-size:15px;
}
.heading2_navbar a:hover{
    color:darkgray;
}
.heading2_right{
    position:absolute;
    right:10px;
    top:15px;
    width:130px;
    height:50px;
}
.heading2_right img{
    width: 30px;
    height: 30px;
    margin-right: 5px;
    margin-top: 5px;
    cursor: pointer;
}
.heading2_right_touxiang{
    border-radius: 30px;
}
.body_left{
    float:left;
    width:25%;
    height:750px;
    background:rgba(255,255,255,0.8);
}
.body_left_one{
    width: 350px;
    height: 33px;
    margin: 30px 15px 4px 20px;
}
.body_left_one h4{
    color:rgb(58, 56, 56);
    line-height:21px;
    margin-bottom:4px;
}
.body_left_one button{
    float:right;
    width: 62px;
    height: 28px;
    margin-top:-24px;
    margin-right: 22px;
    display:block;
    border:1PX solid #218c3a  ;
    color:white;
    background-color:#28a745;
    background-image:
	linear-gradient(#6a8e72,#28a745);
    cursor:pointer;
}
.body_left_one button:hover{
	background: #28a745;
}
.body_left_two{
	width:330px;
	height:35px;
	margin:20px 15px 10px ;
}
.body_left_two input{
    width:100%;
    height:35px;
    border:1px solid #000000;
    border-radius:3px;
    color:#09100b;
    box-shadow:inset 0 1px 2px #3d3c3c;
    text-indent:11px;
    outline:none

}
.body_left_two input:focus{
    width:100%;
    height:38px;
    box-shadow:0 1px 1px #11467f,0 0 8px #486a8f;
    outline:0;
}

.body_right{
    float: left;
    width: 75%;
    height: 750px;
    background-color: rgba(126, 129, 127, 0.8);
    position: relative;
}
.body_right_mid{
    width: 65%;
    height:250px;
    position: relative;
    background-color: rgba(255, 255, 255, 0.85);
    margin:20px 10px;
    border:1px solid #a1a2a1;
    border-radius: 4px;
    
   }
.body_right_mid h3{
    padding:30px 70px 5px 30px;
    margin:10px;
}
.body_right_mid p{
    font-size:16px;
    padding-left:40px;
    padding-right:40px;
    color:rgb(19, 18, 18);
}
.body_right_mid a{
    display:inline;
    color:#11467f;
    text-decoration: underline;
}
.body_right_mid a:hover{
    color:#fc6209;
    text-decoration: underline;
}
.body_right_mid button{
    width: 100px;
    height: 25px;
    position: absolute;
    left:30px;
    bottom:40px;
    display:block;
    text-align: center;
    font-size: 15px;
    color:white;
    border:1px solid rgb(225, 219, 219);
    border-radius: 6px;
    background-color: #218c3a;
    box-shadow: inset 0px 1px  #0e3817;
    cursor:pointer;
}
.body_right_mid button:hover{
    background-color: white;
    box-shadow: inset 0px 1px  #918d8d;
    
    color:#2890d5;
}
.body_right_mid02{
    width:65%;
    height:70px;
    margin:40px 25px;
    position: relative;
}
.body_right_mid02 p{
    float:left;
    font-size: 13px;
    color:#313432;
}
.body_right_mid02 a{
    display: inline;
    color:#01130d;
    text-decoration: none;}
.body_right_mid02 a:hover{
    color:#218c3a;
    text-decoration: underline;
}
.body_right_mid03{
    width:65%;
    height: 150px;
    margin:20px;
    position: absolute;
    left:0px;  
    bottom:0px;
}
.body_right_mid03 img{
    width:40px;
    height: 40px;
    float:left;
    border-radius:35px;
    cursor:pointer;
    margin-top: 5px;

}
.body_right_mid03 p{
    float:left;
    margin: 15px 10px 10px 10px;
    font-size: 12px;
    color:#000000;
    cursor:pointer;
}
.body_right_mid04 {
    float:right;
    font-size: 13px;
    color:#01031c;
    cursor:pointer;
    margin-top: 20px;

}
.body_right_mid04 td{
    padding:0px 27px 27px 27px;
}
.right_right{
	float:right;
	width:380px;
	height:750px;
	position:absolute;
	right:0px;
	top:0px;
    background-color: rgba(210, 212, 210, 0.6);
}
.demo01{
	width:350px;
	height:100px;
    margin: 10px;
	border:.7px solid #4e94e2;	
	border-radius:10px;
	background:#f1f8ff;
    position: relative;
	font-size:12px;
	color:#586080;
}
.demo01 span{
 position: absolute;
    top:0px;
   right: 20px;
    color: #586080;
    font-size:23px;
    cursor: pointer;
}
.demo01 img{
    width:30px;
    height: 30px;
    float: left;
    display: block;
    margin: 8px 5px 5px 8px;
    cursor:pointer;
}
.demo01 p{
    float: right;
    margin-top: 10px;
    margin-right: 35px;
}
.demo02{
    width:350px;
    height: 80px;
    background-color: #f7f1f3;
    margin: 10px;
    border-radius: 10px;
font-size:12px;
color: #67454c;
position: relative;
border: 1px solid #9f7279;
}
.demo02 span{
 position: absolute;
    top:0px;
   right: 20px;
    color: #586080;
    font-size:23px;
    cursor: pointer;
}
.demo02 img,.demo03 img{
    width:30px;
    height: 30px;
    float: left;
    display: block;
    margin: 8px 5px 5px 8px;
    cursor:pointer;
}
.demo02 p,.demo03 p{
    float: right;
    margin-top: 10px;
    margin-right: 35px;
}
.demo03{
    width:350px;
    height: 50px;
    background-color: #ffffff;
    margin: 10px;
    border-radius: 10px;
font-size:12px;
color: #586080;
position: relative;
border: 1px solid #6ea5cd;
}
.demo03 span{
 position: absolute;
    top:0px;
   right: 20px;
    color: #586080;
    font-size:23px;
    cursor: pointer;
}
.demo04{
    width:350px;
    height:20px;
    margin: 19px;

}
.demo04 p{
    font-size: 15px;
    color:#0d2c01;
    
}
.demo05,.demo06{
    width: 350px;
    height: 90px;
    margin: 19px;
    border-bottom: 1px solid #012311;
}
.demo05 P,.demo06 P,.demo07 P{
    font-size: 12px;
    color: #161f1a;
}
.demo05 a,.demo06 a,.demo07 a{
    font-size: 14px;
    display: block;
    color: #000000;
    text-align: left;
    text-decoration:none;
}
.demo05 a:hover,.demo06 a:hover,.demo07 a:hover{
    color: #cb4040;
}
.demo07{
    width: 350px;
    height: 90px;
    margin: 19px;

}