学生个人网页制作html代码学生个人网页制作html代码简单-聚上美

关于学生个人网页制作html代码✅的问题，下面有几个最新学生个人网页制作html代码简单的观点，这里聚上美网站生活见闻小编希望能帮您找到想要的学生个人网页制作html代码答案，了解更多怎样在自己网站上创建html文件的相关详细知识。
相关学生个人网页制作html代码的扩展：
怎样在自己网站上创建html文件 这个东西呢。你要先学下HTML，也就是网页标记语言。当然现在做这东西有很多软件都能做，不一定要自己去学，像DW之类的。当然最简单的就是用我们常用的Word做了。因为这个软件我们一般都会用，也就是做好以后（也就是打打字，插几张图片之类的）选择-文件-另存为Web页就好了。当然如果要做的很漂亮还是好好学下DW，Javascript脚本语言更好了。当然前面说的网页标记语言是一定要学的，那是基本。
html5个人网页设计作品带留言

1.网页效果图

2，网站首页代码：

	<!DOCTYPE html>

	<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></head><body style="">





	<title>开心营业♡ </title>
	<meta name="keywords" content="">
	<meta name="description" content="">
	<link href="css/default.css" rel="stylesheet" type="text/css" media="screen">
	<script src="js/jquery-1.10.2.min.js"></script>
	<script src="js/common.js"></script>
	<link rel="stylesheet" href="css/swiper.min.css">
	<style>
	.banner_slide {
	width: 100%;
	height: 300px;
	}

	#audio {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 888
	}
	</style>




	<!-- start header -->
	<div id="header">
	<div id="logo" style="height: 144.5px;">
	<h1><a href="index.html#"> 我的个人空间♡ </a></h1>

	</div>
	<div id="menu">
	<ul>
	<li class="active"><a href="index.html" accesskey="1" title="">首页</a></li>
	<li><a href="about.html" accesskey="4" title="">关于我</a></li>
	<li><a href="school.html" accesskey="2" title="">我的学校</a></li>
	<li><a href="class.html" accesskey="3" title="">我的专业</a></li>
	<li><a href="jiaxiang.html" accesskey="5" title="">我的家乡</a></li>
	<li><a href="msg.html" accesskey="6" title="">留言板</a></li>
	<div class="clear"></div>
	</ul>
	</div>
	</div>
	<!-- end header -->
	<div id="gallery">
	<div id="top-photo">
	<!--banner-->
	<div class="swiper-container banner_slide swiper-container-horizontal">
	<div class="swiper-wrapper" style="transition-duration: 0ms; transform: translate3d(-830px, 0px, 0px);">
	<div class="swiper-slide banner_slide swiper-slide-prev" style="background: url("images/image007.jpg") center center / cover no-repeat; width: 830px;">
	</div>

	<div class="swiper-slide banner_slide swiper-slide-active" style="background: url("images/image009.jpg") center center / cover no-repeat; width: 830px;"> </div>


	</div>
	<!-- Add Pagination -->
	<div class="swiper-pagination swiper-pagination-bullets"><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet swiper-pagination-bullet-active"></span></div>
	<span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span></div>
	<!--banner end-->

	</div>
	</div>



	<!-- start page -->
	<div id="page">
	<!-- start content -->
	<div id="content">
	<div class="post">
	<h1 class="title">青春寄语</h1>
	<p class="byline"><span>1. 对的，<label style="color:#FFEA6F">坚持</label>;错的，放弃! </span></p>
	<p class="byline"><span>2. 即使光环已不再也不要放弃你的<label style="color:#FFEA6F">梦想</label>。 </span></p>
	<p class="byline"><span>3. 等待<label style="color:#FFEA6F">机会</label>，是一种十分笨拙的行为。 </span></p>
	<p class="byline"><span>4. 成功者绝不放弃，放弃者绝不会<label style="color:#FFEA6F">成功</label>。 </span></p>
	<p class="byline"><span>5. 当有人说你是<label style="color:#FFEA6F">傻瓜</label>时，证明你离成功不远了。
	</span></p>
	<p class="byline"><span>6. 理想的路总是为有<label style="color:#FFEA6F">信心</label>的人预备着。 </span></p>
	<p class="byline"><span>7. 抱最大的<label style="color:#FFEA6F">希望</label>，为最大的努力，做最坏的打算。 </span></p>
	<p class="byline"><span>8. 有些事情本身我们无法控制，只好<label style="color:#FFEA6F">控制</label>自己。 </span></p>
	<p class="byline"><span>9. 自己要先<label style="color:#FFEA6F">看得起</label>自己，别人才会看得起你。 </span></p>
	<p class="byline"><span>10. 生命太过<label style="color:#FFEA6F">短暂</label>，今天放弃了明天不一定能得到。 </span></p>

	</div>

	</div>
	<!-- end content -->
	<!-- start sidebar -->
	<div id="sidebar">
	<ul>
	<!-- <li>
	<h2>作品欣赏</h2>
	<ul>
	<li><a href="#">如何成为一个好学生？</a></li>
	<li><a href="#">大学生活应该怎么渡过？</a></li>
	<li><a href="#">用欣赏的眼光看待别人</a></li>
	<li><a href="#">生活欺骗了你吗？</a></li>
	<li><a href="#">好好学习，天天向上</a></li>
	<li><a href="#">多参加比赛，锻炼自己</a></li>
	</ul>
	</li> -->
	<li>
	<h2>我喜爱的作者</h2>
	<ul>
	<li><a href="index.html#">张爱玲</a> (23)</li>
	<li><a href="index.html#">王小波</a> (31)</li>
	<li><a href="index.html#">沈复</a> (31)</li>
	<li><a href="index.html#">东野圭吾</a> (30)</li>
	<li><a href="index.html#">村上春树</a> (31)</li>
	<li><a href="index.html#">太宰治</a> (30)</li>
	<li><a href="index.html#">苏利·普吕多姆</a> (31)</li>
	<li><a href="index.html#">安东尼·伯吉斯</a> (28)</li>
	<li><a href="index.html#">雅克·巴尔赞</a> (31)</li>
	<li><a href="index.html#">卡勒德·胡赛尼</a> (31)</li>
	</ul>
	</li>
	</ul>
	</div>
	<!-- end sidebar -->
	</div>
	<div style="clear: both; height: 30px"> </div>
	<!-- end page -->
	<div id="footer">
	<p>© All Rights Reserved. • Designed by </p>
	</div>

	<!-- Swiper JS -->
	<script src="js/swiper.min.js"></script>
	<!-- Initialize Swiper -->
	<script>
	var swiper = new Swiper('.swiper-container', {
	pagination: {
	el: '.swiper-pagination',
	},
	autoplay: {
	delay: 2500,
	disableOnInteraction: false,
	}
	});
	</script>

	<div><object id="ClCache" click="sendMsg" host="" width="0" height="0"></object></div></body></html>

3.网站css代码：

.dl_block{ line-height: 40px; } .dl_block dd{ width: 120px; margin-right: 20px; float: left; font-size: 15px; text-align: right; } .dl_block dt{ width: 240px; float: left; text-align: left; font-size: 14px; } .dl_block dt .block_input{ border: 1px solid #ddd; min-width: 100px; height: 30px; line-height: 30px; padding:0 5px; } .login_box h2{ padding: 0px 0 10px 170px;text-align:left } .dl_block{ padding: 10px 0; } .dl_block dt .sex{ padding-right: 10px; } .school_p{ text-align:center } .btn_submit{ padding: 5px 20px; background: #FFEA6F; color: #372412; } body {margin: 0;padding: 0;background: #372412 url(../images/img01.gif) repeat-x;font-size: 13px;color: #FFFFFF;}body, th, td, input, textarea, select, option {font-family: Arial, Helvetica, sans-serif;}h1, h2, h3 {text-transform: lowercase;font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;font-weight: normal;color: #FFFFFF;}h1 {letter-spacing: -2px;font-size: 3em;}h2 {letter-spacing: -1px;font-size: 2em;}h3 {font-size: 1em;}p, ul, ol { }blockquote {padding-left: 1em;}blockquote p, blockquote ul, blockquote ol {line-height: normal;font-style: italic;}a {color: #FFEA6F;}a:hover {text-decoration: none;}img { border: none; }.page_p{text-align:left;text-indent:2em;}/* Header */#header {width: 830px;height: 280px;margin: 0 auto;background: url no-repeat;}/* Logo */#logo {height: 130px;background: url(../images/img07.gif) no-repeat top 20px left 0;}#logo h1 { padding: 40px 40px 0 50px;letter-spacing: -2px;font-size: 38px;}#logo h2 {float: right;padding: 68px 0 0 0;font-size: 24px;}#logo a {text-decoration: none;color: #372412;}/* Gallery */#gallery {clear: both;width: 830px;height: 300px;margin: 0 auto;}#top-photo h2 {height: 1.4em;font-size: 1em;}#top-photo p {margin: 0;padding: 0 0 10px 0;}/* Menu */#menu {width: 830px;height: 70px;background: url(../images/img03.jpg) no-repeat;}#menu ul {margin: 0;padding: 0;list-style: none;}#menu li {display: inline;}#menu a {display: block;float: left;width: 138px;height: 73px;padding-top: 35px;text-transform: lowercase;text-decoration: none;text-align: center;letter-spacing: -1px;font-size: 24px;color: #FFFFFF;}#menu a:hover {background: url(../images/img09.jpg) no-repeat;background-size:100% 80px;color: #FFFFFF;}#menu .active a {background: url(../images/img09.jpg) no-repeat;background-size:100% 80px;color: #372412;}/* Page */#page {width: 830px;margin: 0 auto;padding: 20px 0;}/* Content */#content {float: left;width: 532px;}.post {padding: 0 0 20px 0;}.title {margin: 0;border-bottom: 2px solid #4A3903;margin-bottom:20px}.byline {margin: 10px 0;}.meta {border-top: 1px solid #4A3903;text-align: right;color: #646464;}.meta a {padding-left: 15px;background: url(../images/img06.gif) no-repeat left center;font-weight: bold;}/* Sidebar */#sidebar {float: right;width: 240px;}#sidebar ul {margin: 0;padding: 0;list-style: none;}#sidebar li {}#sidebar li ul {padding: 15px 0;}#sidebar li li {padding-left: 30px;border-bottom: 1px dotted #4A3903;background: url(../images/img06.gif) no-repeat 15px 50%;}#sidebar h2 {margin: 0;padding: 20px 0 2px 30px;background: url(../images/img05.gif) no-repeat left bottom;border-bottom: 2px solid #4A3903;}#sidebar a {text-decoration: none;}#sidebar a:hover {text-decoration: underline;}/* Footer */#footer {clear: both;padding: 20px 0;background: #FFEA6F;border-top: 3px solid #E8AD35;text-align: center;font-size: smaller;color: #E8AD35;}#footer a {color: #C28C21;}.fl{float:left;}.fr{float:right}.clear{clear:both;}.about_imgfl{ width: 255px;}.about_txt{ width: 400px; margin-left:40px; text-align: left; line-height: 20px; font-size: 16px; } .about_fr{width: 275px;background: #fff;padding: 10px;box-sizing: border-box;}.about_fr h2{ padding-bottom: 10px;}.about_fr p{text-align: left;line-height:20px}.ul_dy{ margin: 40px auto 0 0;-webkit-padding-start:0 } .ul_dy li{ width: 250px; float: left; margin-bottom: 20px; margin-right:40px; } .ul_dy li:nth-child(3n){ margin-right:0 }.ul_dy li a{color:#fff;text-decoration:none}.ul_dy li .dy_img{ width: 250px; height: 230px; background:#fff;}.ul_dy li .dy_img:hover{opacity: 0.8;}.ul_dy li .til{ padding: 10px 0; }.ul_dy li .til .fl{color: #F40;font-size: 16px;font-weight: bold;}.ul_dy li .til .fr{color: #999;font-size: 12px;}.ul_dy li .til:hover{color: #2B7ACD;}.ul_dy li .p_txt{text-align: left; overflow: hidden;padding-bottom: 10px;}.dl_contact{ text-align: left; } .dl_contact dd{ font-size: 18px; line-height: 40px; font-weight: bold;padding-left:0;-webkit-margin-start: 0px;padding-top:20px; } .dl_contact dt{ font-size: 16px; line-height: 30px; } .compay_services_block{ position: relative; padding: 25px 0; border-bottom: 1px solid #eee;}.compay_services_block .compay_services_blockImg{ position: absolute; left:0; top:30px; display: table-cell; text-align:center; vertical-align: middle;}.compay_services_block .compay_services_blockImg img{ overflow: hidden; }.compay_services_block .compay_services_blockImg img:hover{-webkit-transform:scale(1.2); -moz-transform:scale(1.2); transform:scale(1.2); transition: all 0.6s ease;}.dl_compay_services dt.dl_compay_services_til{ font-size: 18px; line-height: 40px; font-size: 16px; color: #1F1F1F;}.dl_compay_services dt.dl_compay_services_til a:hover{ }.dl_compay_services dd{ color:#fff; margin-top: 10px; -webkit-margin-start: 0px;}.dl_compay_services dd.dd1{ word-break:break-all; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }.dl_compay_services dd.dd2{ line-height: 30px; }.compay_services_block .dl_compay_services{ padding-left: 330px; text-align: left;}.dl_compay_services dd.dd2 a:nth-child(1){ margin-left: 0;}.dl_compay_services dd.dd2 span,.dl_compay_services dd.dd2 a{ color: #fff; margin: 0 10px; }.dl_compay_services dd.dd2 span.zeng_color{ color:#fff;}/*.compay_servicesBox{ padding: 20px 0;}*/.compay_services_block .compay_services_blockImg{width: 240px; height: 160px; overflow: hidden;}.compay_services_block .compay_services_blockImg img{max-width: 240px; max-height: 160px; } .compay_services_block .dl_compay_services{ padding-left: 270px;}.compay_services_block{ min-height: 160px;} 今天学生个人网页制作html代码的内容先分享到这里了，读完本文后，是否找到相关学生个人网页制作html代码简单的答案，想了解更多，请关注yfnsxy.cn聚上美世界奇闻怪事网站。

聚上美

学生个人网页制作html代码学生个人网页制作html代码简单

热门推荐

热门世界奇闻文章

热门标签