期末HTML作业，反思与思考！

最新推荐文章于 2022-08-10 18:43:48 发布

程序员ouyangwangchu

最新推荐文章于 2022-08-10 18:43:48 发布

阅读量4k

点赞数 15

分类专栏： HTML 文章标签： css css3 html html5 javascript

本文链接：https://blog.csdn.net/ldj2222/article/details/106730438

版权

这篇博客记录了作者在期末忙碌中的HTML作业经历。作者提到自己对CSS的感觉，认为其复杂且不喜欢，但为了学业还是尽力去理解并完成任务。文章分享了作者的代码，并提醒大家在编程时注意细节，以防后期找bug。尽管过程枯燥，作者仍抱有乐观态度，祝愿所有人考试顺利。

摘要由CSDN通过智能技术生成

最近期末，学校事情有点多，然而我有点缓不过气来，这其实也是我自己的原因，故事要从一年前说起。
那是一个炎热的夏季，每年六月都有异常的不安和烦躁，跟不要说那即将高考的学子来说了，我不是一个归人，我只是过客。
青春对于长得不错的人来说是一场，美妙的旅程，对于我来说，不过是一场迷迷糊糊的梦吧了，如果有怀恋的话，那就是那年的懵懵懂懂的“友谊”，经此而已。
下面就是我这渣渣的代码，有兴趣的谢谢观看。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>电商网页制作</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<!-- videobox bigan -->
<div class="videobox">
 	<header>
 		<div class="con">
 			<section class="left"></section>
 			<section class="right">
 				<a href="../../../117-ldj/css/dengl.html">登录</a>
 				<a href="../../../117-ldj/css/zc.html">注册</a>
 			</section>
 		</div>
 	</header>
 	<nav>
 		<ul>
 			<li class="left">
 				<a class="one" href="#">
 					<img src="images/sanxian.png" alt="">
 					<span>选项</span>
 					<img src="images/sanjiao.png" alt="">
 				</a>
 				<aside>
 					<span></span>
 					<ol class="zuo">
 						<li class="con">护肤</li>
 						<li>>洁面</li>
 						<li>>爽肤水</li>
 						<li>>精华</li>
 						<li>>乳液</li>
 						<li class="con">彩妆</li>
 						<li>>BB霜</li>
 						<li>>卸妆</li>
 						<li>>粉底液</li>
 						<li class="con">香氛</li>
 						<li>>女士香水</li>
 						<li>>男士香水</li>
 						<li>>中性香水</li>					
 					</ol>
 					<ol class="you">
 						<li class="con">男士专区</li>
 						<li>>爽肤水</li>
 						<li>>洁面</li>
 						<li>>面霜</li>
 						<li>>精华</li>
 						<li class="con">热门搜索</li>
 						<li>>洗面奶</li>
 						<li>>去黑头</li>
 						<li>>隔离</li>
 						<li>>面膜</li>						
 					</ol>
 					<img src="images/tu1.jpg" alt="">
 				</aside>
 			</li>
 			<li class="center">
 				<form>
 				<input type="text" value="请输入商品名称、品牌或编号">
 				</form>
 			</li>
 			<li class="right">
 				<a href="#">&#xe65e;</a>
 				<a href="#">&#xe608;</a>
 				<a href="#">&#xf012a;</a>
 				<a href="#">&#xe68e;</a>
 			</li>
 		</ul>
 	</nav>
 	<video src="video/home_loop_720p.mp4" autoplay="ture" loop="ture" ></video>
 	<audio src="audio/home.ogg" autoplay="ture" loop="ture"></audio>
 	<div class="pic">
 		<p>Select the right resolution for your PC and dive in! （请为您的电脑选择正确的分辨率）</p>
 		<ul>
 			<li class="one"><span>&#xe662;</span>STANDARD标准</li>
 			<li class="two"><span>&#xe662;</span>HD高清</li>
 		</ul>
 	</div>
 </div>
<!-- videobox end -->
<!-- new bigan -->
<div class="new">
 	<header>
 		<img src="images/new.jpg" alt="">
 	</header>
 	<p>补水保湿 提亮肤色 低敏配方 收缩毛孔 滋养容颜</p>
 	<ul>
 		<li>
 			<hgroup>
 				<h2>fresh skin 薏仁水</h2>
 				<h2>化妆水/爽肤水单品</h2>
 				<h2></h2>
 				<h2></h2>
 			</hgroup>
 		</li>
 		<li>
 			<hgroup>
 				<h2>蜂蜜原液天然滋养</h2>
 				<h2>美白护肤套装</h2>
 				<h2></h2>
 				<h2></h2>
 			</hgroup>
 		</li>
 		<li>
 			<hgroup>
 				<h2>纯情诱惑一抹惊艳</h2>
 				<h2>告别暗淡唇</h2>
 				<h2></h2>
 				<h2></h2>
 			</hgroup>
 		</li>
 	</ul>
 </div>
<!-- new end -->
<!-- try bigan -->
<div class="try">
	<header>
		<img src="images/shizhuang.jpg" alt="">
	</header>
	<p>美化容貌 增添自信 突出个性 </p>
	<ul>
		<li>
			<img class="zheng" src="images/try1.jpg" alt="">
			<img class="fan" src="images/try4.jpg" alt="">
		</li>
		<li>
			<img class="zheng" src="images/try2.jpg" alt="">
			<img class="fan" src="images/try5.jpg" alt="">
		</li>
		<li>
			<img class="zheng" src="images/try3.jpg" alt="">
			<img class="fan" src="images/try6.jpg" alt="">
		</li>
	</ul>
</div>
<!-- try end -->
<!-- text bigan -->
<div class="text">
	<header>
		<img src="images/cp.jpg" alt="">
	</header>
	<p>评测 我们更专业 用户更放心</p>
	<ul>
		<li>
			<img  class="tu" src="images/cp1.jpg" alt="">
			<img class="tihuan" src="images/th1.png" alt="">
		</li>
		<li>
			<img class="tu" src="images/cp2.jpg" alt="">
			<img class="tihuan" src="images/th2.png" alt="">
		</li>
		<li>
			<img class="tu" src="images/cp3.jpg" alt="">
			<img class="tihuan" src="images/th3.png" alt="">
		</li>
		<li>
			<img class="tu" src="images/cp4.jpg" alt="">
			<img class="tihuan" src="images/th4.png" alt="">
		</li>
		<li>
			<img class="tu" src="images/cp5.jpg" alt="">
			<img class="tihuan" src="images/th5.png" alt="">
		</li>
		<li>
			<img class="tu" src="images/cp6.jpg" alt="">
			<img class="tihuan" src="images/th6.png" alt="">
		</li>
		<li>
			<img class="tu" src="images/cp7.jpg" alt="">
			<img class="tihuan" src="images/th7.png" alt="">
		</li>
		<li>
			<img class="tu" src="images/cp8.jpg" alt="">
			<img class="tihuan" src="images/th8.png" alt="">
		</li>
	</ul>
</div>
<!-- text end -->
<footer>
	<div class="logo"></div>
	<div class="message">
		<form>
			<ul class="left">
				<li>
					<p><label for="">姓名：</label></p>
					<input type="text">
				</li>
				<li>
					<p>邮箱：</p>
					<input type="email">
				</li>
				<li>
					<p>电话：</p>
					<input type="tel" pattern="^\d{
   11}$" title="请输入11位数字">
				</li>
				<li>
					<p>密码：</p>
					<input type="password">
				</li>
				<li>
					<input class="but" type="submit" value="" href="../../../117-ldj/css/zc.html">
				</li>
			</ul>
			<div class="right">
				<p>留言：</p>
				<textarea></textarea>
			</div>
		</form>
	</div>
</footer>
 <div class="banquan">
		<a href="#"> fresh skin 美肤科技有限公司</a>
	</div> 	
</body>
</html>

下面是css的代码。就我自己而言。太过复杂，就本人来说不喜欢这样的语言，可是由于学校课程设置，我也不能有什么反抗的权力，只是把自己的本能工作，做好，其实也还好了，就是要，了解css的语言，语义，不能够忘记了，还有就是打字的时候要小心，不然，后面回来找bug是非常麻烦的事情，我本身是讨厌，这种重复枯燥的行为！
废话都说了一大堆，直接上代码！

*{
   margin:0;padding:0;border:0;list-style: none;}
body{
   font-family:"微软雅黑",Arial, Helvetica, sans-serif; font-size:14px;}
/* @font-face {font-family: 'freshskin';src:url('../fonts/iconfont.ttf') format('truetype')} */
a{
   color:#999;text-decoration: none;}
a:hover{
   color:#fff;}
input,textarea{
   outline: none;}
 @font-face {
   
	font-family: 'freshskin';
    src:url('../fonts/iconfont.ttf');
}  
/* videobox */
 .videobox{
   
	width:100%;
	height:680px;
	overflow: hidden;
	position: relative;
}