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

html5静态网页制作代码

2024-06-18 22:06:59 前端知识 前端哥 748 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基本结构及基本标签
评论
还可以输入200
共0条数据,当前/页
首页 上一页 下一页 尾页
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

【Unity 编辑器插件】Runtime Editor 强大的编辑功能，可实现游戏运行时直接修改场景中的对象、组件、脚本和属性

2025-03-08 14:03:37

Lua与Unity交互

2025-03-08 14:03:36

Pygame介绍与游戏开发

2025-03-08 14:03:36

【Unity精品源码】JU TPS 3 – 完整的第三人称射击游戏模板

2025-03-08 14:03:36

自回归模型（Autoregressive, AR）解读

2025-03-08 14:03:36

[包管理器窗口] 搜索包时出错。UnityEditor.EditorApplication:Internal_CallUpdateFunctions ()

2025-03-08 14:03:34

Unity新版InputSystem短按与长按，改键的实现

2025-03-08 14:03:34

Pygame经典小游戏--贪吃蛇（完整代码 部分代码讲解）

2025-03-08 14:03:34

Unity Mirror插件WebGL端多人联机实现

2025-03-08 14:03:03

用 Python 写了一个天天酷跑(附源码)

2025-03-08 14:03:02

广告位招租：QQ85750956
大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS 动画效果（5种） - 附完整示例

2025-02-28 12:02:481000
3

在Vue中实现与OpenAI对话的功能

2025-02-27 11:02:161000
4

jQuery.flowchart 项目常见问题解决方案

2025-02-24 13:02:021000
5

CSS常用属性（文本属性）

2024-11-04 09:11:111000
6

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
7

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
8

vue使用datav echarts

2024-09-06 00:09:381000
9

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
10

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000

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

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

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

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

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