html个人简介个人主页网页源码期末大作业0011

老学长毕业设计辅导

已于 2023-01-12 21:40:36 修改

阅读量1.2k

点赞数 2

分类专栏： html网页作品文章标签： html javascript

于 2022-05-07 16:51:46 首次发布

本文链接：https://blog.csdn.net/m0_37916936/article/details/124634312

版权

html网页作品专栏收录该内容

198 篇文章 15 订阅

订阅专栏

网页截图

首页：

我的学校:

我的家乡：

部分代码展示

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3</title>
<style>
body {
	margin: 0px;
	padding: 0px;
	color: #000000;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size:13px;
	line-height:1.5em; 
	background-color: #f6f2e6;
}

a, a:link, a:visited {
	color: #990000;
}

a:hover {
	color: #CC6600;
	text-decoration: none;
}

p { font-size:16px; margin: 0px; padding: 0 0 16px 0; }
img { border: none; }

h1, h2, h3, h4, h5 { font-weight: normal; }

h1 { font-size: 40px; color: #333; margin: 0 0 30px 0; padding: 5px 0; }
h3 { font-size: 21px; color: #fff; margin: 0 0 20px 0; padding: 0; }
h5 { font-size: 16px; color: #fff; margin: 0 0 10px 0; padding: 0; }

.cleaner { clear: both; width: 100%; height: 0px; font-size: 0px;  }

.cleaner_h1 { clear: both; width:100%; height: 10px; }
.cleaner_h3 { clear: both; width:100%; height: 30px; }
.cleaner_h5 { clear: both; width:100%; height: 50px; }

.image_wrapper {
	padding: 4px;
	border: 1px solid #ccc;
	background: #1b1f29;
	margin-bottom: 10px;
}


.button a {
	clear: both;
	display: block;
	width: 92px;
	height: 24px;
	padding: 5px 0 0 0;
	background:	url(../images/templatemo_button.png) no-repeat;
	color: #AAAAAA;
	font-weight: bold;
	font-size: 11px;
	text-align: center;
	text-decoration: none;
}

.button a:hover {
	color: #FFFFFF;
	background:#949494;
}

ul {
	margin: 20px;
	padding: 0;
	list-style-image:  url(../images/list_icon.png);
}

ul li {
	margin: 0 0 15px 0;
	padding: 0 0;
}



/* header */
#header_wrapper {
	width: 100%;
	height: 80px;
    background: #1d1a18;
}

#header {
	width: 970px;
	margin: 0 auto;
	padding: 0 20px;
}

#header  #site_title {
	float: left;
	padding: 25px 20px 0;
}

#header  #site_title h1 {
	margin: 0;
	padding: 0;
}

#header  #site_title h1 a {
	margin: 0px;
	padding: 0px;
	font-size: 30px;
	color: #ffffff;
	font-weight: normal;
	text-decoration: none;
}

#header  #site_title h1 a span {
	display: block;
	text-align: left;
	font-size: 14px;
	color: #5f6675;
	font-weight: bold;
	letter-spacing: 2px;
}
/* end of header */


/* header_menu */

#header_menu {
	float: right;
	height: 45px;
}

#header_menu ul {
	margin: 25px 0 0 0;
	padding: 0px;
	list-style: none;
}

#header_menu ul li {
	padding: 0px;
	margin: 0px;
	display: inline;
}

#header_menu ul li a {
	position: relative;
	float: left;
	display: block;
	padding: 3px 15px;
	margin-left: 10px;
	text-align: center;
	font-size: 14px;
	text-decoration: none;
	color: #d8d3bd;	
	font-weight: normal;
	outline: none;
}

#header_menu li a:hover, #menu li .current {
	color: #fff;
	padding: 3px 14px;
	background: #0a0908;
	border: 1px solid #201e1b;
}

/* end of header_menu */


/* main */
#content_wrapper {
	clear: both;
	width: 100%;
	border-bottom: 1px solid #fff;	
}

#content {
	width: 930px;
	padding: 40px 30px;
	margin: 0 auto;
}


/* gallery */
#gallery {
	width: 960px;
	padding: 40px 0;
}
#gallery ul { 
    list-style: none;
	 margin: 0; 
	 padding: 0; 
}
#gallery ul li {
	float: left;
	display: inline; 
	padding: 0;
	margin: 0;
	width: 245px;
	padding: 9px;
	margin: 0 0 40px 40px;
	background: #1b1f29;
	border: 1px solid #000;
}
#gallery ul img {
	width: 245px;
	height: 330px;
	border: none;
	margin-bottom: 10px;
}

#gallery ul p {
	color: #CCC;
}

#gallery a {
	color: #fff;
}
/* end of gallery */


/* footer */
#footer_wrapper {
	clear: both;
	width: 100%;
	background: #1d1a18;
	border-top: 1px solid #0f0d0c;	
	border-bottom: 1px solid #312d2b;
}

#footer {
	width: 930px;
	padding: 45px 30px;
	margin: 0 auto;
	color: #d8d3bd;
}

.footer_box {
	float: left;
	width: 280px;
	padding: 0 30px 0 0;
}

.footer_menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer_menu li {
	margin: 0;
	padding: 5px 0;
}

.footer_menu li a {
	color: #d8d3bd;
}

.footer_menu li a:hover {
	color: #fff;
}

#footer img {
	padding: 4px;
	background: #000;
	border: 1px solid #34322f;
	margin-bottom: 10px;
}
/* end of footer */



/* copyright */
#copyright_wrapper {
	width: 100%;
	background: #131110;
	border-top: 1px solid #000;
	 position:fixed; 
	 bottom:0px; 
}

#copyright {
	width: 960px;
	margin: 0 auto;
	padding: 15px 20px;
	text-align: center;
	color: #6e6965;
}
/* end of copyright */
</style>
<script type="text/javascript">

</script>
</head>

<body>
<div id="header_wrapper">
	<div id="header">

		<div id="site_title">
            <h1><a href="1.html">
                <strong>李承泽个人简介</strong>     
            </a>
            </h1>
        </div>
        
        <div id="header_menu">
            <ul>
                
                
                <li><a href="index.html">个人简介</a></li>
                <li><a href="mySchool.html" class="current">我的学校</a></li>
                <li><a href="myHometown.html">我的家乡</a></li>
            </ul>    	
    	</div> 
        <!-- end of templatemo_menu -->
        
        <div class="cleaner"></div>
	</div> 
    <!-- end of header -->
</div> 
<!-- end of header_wrapper -->

<div id="content_wrapper">
	<div id="content">
    	
        <h1>个人简介</h1>
        
        <p style="text-indent:2em; ">我是李承泽，一名大二学生，本人性格热情开朗，待人友好，为人诚实谦虚。工作勤奋，认真负责，能吃苦耐劳，尽职尽责，有耐心，喜欢快节奏的工作。具有亲和力，平易近人，善于与人沟通。有很强的团队精神，诚实守信。我会在以后的工作中，不断进取，更加努力。
        
<div id="gallery">
		 <h1>个人风采</h1>
                    <ul>
                    
                        <li><a href="images/s1.jpg" class="pirobox" title="Project 1"><img src="images/1.jpg" alt="css template 1" /></a>
                        </li>
                        <li>
                            <a href="images/gallery/image_02_b.jpg" class="pirobox" title="Project 2"><img src="images/2.jpg" alt="css template 2" /></a>
                        </li>
                        <li>
                            <a href="images/gallery/image_03_b.jpg" class="pirobox" title="Project 3"><img src="images/3.jpg" alt="css template 3" /></a>
               
                        </li>
                    </ul>
                    
<div class="cleaner"></div>
                </div>
    
    	<div class="cleaner"></div>
	</div> 
    <!-- end of content -->
</div> 
<!-- end of content_wrapper --> 

<div id="copyright_wrapper">
	<div id="copyright">
    
		Copyright © 2020 学号：201904010313 姓名：李承泽<br>All rights reserved
        
    </div> 
    <!-- end of templatemo_copyright -->
</div> 
<!-- end of copyright wrapper -->
</body>
</html>