菜单 搜索
首页 前端知识 html5静态网页制作代码

html5静态网页制作代码

2024-06-18 22:06:59 前端知识 前端哥 732 245 我要收藏

效果图

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

代码：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;

}
转载请注明出处或者链接地址：https://www.qianduange.cn//article/12664.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

@JsonSerialize注解的使用

2024-06-24 23:06:21

JsonParseException : Illegal unquoted character ((CTRL-CHAR, code 10)

2024-06-24 23:06:21

Rust 实战丨通过实现 json! 掌握声明宏

2024-06-24 23:06:17

如何完美解决 org.springframework.http.converter.HttpMessageNotReadableException: JSON parse 错误

2024-06-24 23:06:14

Spring MVC Content type ‘application/json；charset=UTF-8’ not supported问题

2024-06-24 23:06:08

jmeter如何测试一个post请求（发送json请求报文）

2024-06-24 23:06:04

adobe安装“Error:SyntaxError:JSON Parse error:Unexpec

2024-06-24 23:06:04

解决win11安装node后npm报错 \node_modules\npm\bin\npm-cli.js“ prefix -g‘ 不是内部或外部命令，也不是可运行的程序 或批处理文件。

2024-06-24 23:06:00

npm install报错

2024-06-24 23:06:56

简单解决：npm install --save echarts报错、卡住

2024-06-24 23:06:55

大家推荐的文章
1

在HTML和CSS当中运用显示隐藏

2024-06-17 09:06:541000
2

成为优秀的TS体操高手 之 TS 类型体操前置知识储备

2024-06-10 11:06:351000
3

django改了html网页没有变化,,前端页面居然没有对应变化?!修改了css文件但是前端页面没有反应

2024-06-06 10:06:201000
4

html简单网页代码：基于html关爱空巢老人网页设计与实现

2024-06-04 10:06:181000
5

jquery实现注册表单验证（仅供参考）

2024-06-07 00:06:411000
6

基于Echarts的高校就业数据可视化管理系统设计与实现（计算机毕业设计源码81461）

2024-05-29 10:05:301000
7

VUE3 Vite Pinia TypeScript项目笔记

2024-05-20 14:05:191000
8

轻松掌握数据库中JSON数据提取：json_extract函数用法详解

2024-05-09 11:05:011000
9

HTML5(六)——Canvas 高级操作

2024-05-09 10:05:191000
10

UE4.27支持HTML5

2024-05-07 13:05:261000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！