HTML实验一
实验一 网页制作
1.内容
2、设计电商销售图书列表页面，设计效果可参考图2。页面内容应包括图书封面照片、图书名称、作者、出版社、售价、评论、图书详情等信息（评论和图书详情可通过超链接跳转某电商页面）。
2.开始实验（限时两小时）
2.实验二
HTML代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>实验二</title>
<link href="demo2.css" type="text/css" rel="stylesheet"/>
</head>
<div class="main">
<div class="picture">
<a href="https://detail.tmall.com/item.htm?id=535840259361&ali_refid=a3_430583_1006:1103478962:N:%E8%A7%A3%E5%BF%A7%E6%9D%82%E8%B4%A7%E5%BA%97%E6%AD%A3%E7%89%88%E5%8C%85%E9%82%AE:f3dd63cc189c3b9cd0ad89293741bbb3&ali_trackid=1_f3dd63cc189c3b9cd0ad89293741bbb3&spm=a230r.1.14.1" target="_blank"><img src="book.jpg" width="300" height="300" ></a>
</div>
<p class="name"><a href="http://product.dangdang.com/23464478.html" target="_blank"><span class="text2">东野圭谷：</span><span class="text1">解忧杂货铺</span><span class="text2">《白夜行》后东野圭吾备受欢迎作品：不是推理小说，却更扣人心弦。中国影响力图书年度读者推荐大奖，800万中国读者挚爱选择。</span></a></p>
<p class="price">
<span class="now_price">¥27.30</span>
<span class="discount" style="text-decoration:none">定价：</span>
<span class="pre_price">¥39.50</span>
<span class="discount"> (6.92折) </span>
</p>
<p class="author">
<span>(日)东野圭谷</span>
<span>/2014-05-01</span>
<span>/南海出版公司</span>
</p>
<p class="star_line" >
<span class="star_black">
<span style="width: 100%;"></span>
</span>
<a href="http://product.dangdang.com/23464478.html?point=comment_point" target="_blank">1348213条评论</a>
</p>
<p class="label">
<span class="newlabel">
<span class="newlabel1">当当自营</span>
<span class="newlabel1">包邮</span>
<span class="newlabel2">加价购</span>
</span>
</p>
<p class="detail"><a href="http://product.dangdang.com/23464478.html" target="_blank">★《白夜行》后，东野圭吾zui受欢迎作品 ★不是推理小说，却更扣人心弦 ★荣获中央公论文艺奖 ★荣登纪伊国屋、诚品、博客来、金石堂各大排行榜第1名 ★东野圭吾这次选择的，是生活中*平凡的片段：在事业和爱情间艰难抉择的运动员、离家打拼却屡遭挫折的音乐人、想要挣钱报答亲人的女招待 他们真诚又忐忑地写下信件，想要为自己的未来找到新的可能。互不相识的人因一家可以咨询烦恼的杂货店而走到一起，虽未谋面，心与心却真诚相对，这正是东野圭吾想要展现的力量：现代人内心流失的东西，这家杂货店能帮你找回。 ★僻静的街道上有一家店，不仅销售杂货，还提供烦恼咨询。无论你挣扎犹豫，还是绝望痛苦，欢迎来信！ ★《解忧杂货店》充分展现了东野圭吾的创作才华。通过书信这种已渐渐淡出人们生活的交谈方式，人物依次登场</a></p>
</div>
<body>
</body>
</html>CSS代码：
/* CSS Document */
/*限制网页格式*/
.main{
margin: 0 auto;
width: 980px;
height: 242px;
}
/*图片设置*/
.picture{
display: block;
left: 20px;
top:21px;
height: 200px;
width: 200px;
position: absolute;
}
.name{
position: absolute;
left: 300px;
top: 21px;
line-height: 20px;
height: 20px;
width: 720px;
margin: 0;
padding: 0;
list-style-type: none;
border: 0;
}
.text1{
font-size: 14px;
font-family: simsun;
color: red;
}
.text2{
font-size: 14px;
font-family: simsun;
color: blue;
}
.price{
position: absolute;
left: 300px;
top:48px;
font-family: "arial";
line-height: 30px;
width: 720px;
}
.now_price{
color: red;
font-size: 20px;
float: left;
margin-right: 10px;
overflow: hidden;
font-weight: bold;
}
.discount{
color: #969696;
font-size: 15px;
font-weight: normal;
font-family: arial,'Hiragino Sans GB',"Simsun";
float: left;
text-decoration: none;
}
.pre_price{
color: #969696;
text-decoration: line-through;
font-size: 15px;
font-weight: normal;
font-family: arial,'Hiragino Sans GB',"Simsun";
float: left;
}
.author{
position: absolute;
left: 300px;
top: 70px;
color: #787878;
font-size: 15px;
font-weight: normal;
line-height: 30px;
height: 30px;
overflow: hidden;
word-break: break-all;
word-wrap: break-word;
font-family: arial,'Hiragino Sans GB',"Simsun";
}
.star_line{
position: absolute;
left: 300px;
top: 92px;
color: #787878;
padding-top: 8px;
}
.star_black{
width: 76px;
height: 16px;
background: url(http://search.dangdang.com/Standard/Search/Extend/hosts/images/model/vsearch/icon_star3.png) 0 -16px repeat-x;
display: inline-block;
zoom: 1;
vertical-align: middle;
font-size: 0;
}
.star_black span{
background: url(http://search.dangdang.com/Standard/Search/Extend/hosts/images/model/vsearch/icon_star3.png) repeat-x;
height: 16px;
line-height: 16px;
display: inline-block;
font-size: 0;
}
.label{
position: absolute;
top: 123px;
left: 301px;
}
.newlabel{
float: right;
margin-left: 10px;
}
.newlabel1{
background-color: white;
border: 1px solid #ff2832;
color: #ff2832;
border-radius: 2px;
padding: 0 2px;
font-size: 12px;
font-family: "Microsoft YaHei";
margin-right: 5px;
display: inline-block;
white-space: nowrap;
margin-bottom: 4px;
line-height: 14px
}
.newlabel2{
background-color: #ff2933;
color: white;
margin-right: 5px;
font-size: 12px;
font-family: "Microsoft YaHei";
padding: 1px 2px;
border-radius: 2px;
display: inline-block;
white-space: nowrap;
margin-bottom: 4px;
line-height: 14px;
}
.detail{
position: absolute;
left: 300px;
top: 145px;
line-height: 20px;
height: 40px;
color: #333;
width: 720px;
font-size: 14px;
}
p{
display: block;
margin-before: 1em;
margin-after: 1em;
margin-start: 0px;
margin-end: 0px;
}
a:link{
text-decoration: none;
}
a:visited{
text-decoration: underline;
color: black;
}
a:hover{
text-decoration: underline;
}
a:active{
text-decoration: underline;
} 截图：
ps:
1. 总结实验中遇到的问题及解决方法。
在实验中遇到的问题主要为链接语句的使用不当，文本span语句的不熟悉，div分块不熟，导致整体界面歪曲，以至于花费了大量时间用于调试界面。
解决办法为：直接上相关网站上查看相应的网页代码，尝试着复制后进行自己的调试。语句不熟悉问题分别是在网页源码上找到解决，大部分是在w3school里找到的相应帮助文档。
2.写出实验心得与收获。
心得和收获最大的是以往认为前端太过于简单，现在发现其实并不是那么的简单，有函数的调用，这个是一本学问，如何使自己的代码看起来比较简洁，如何使自己的代码量减小，如何简化代码，这个都是值得思考的，只有经历这个过程才能将美化前端的事情做好。总之，多打多看多练没有错。
浙公网安备 33010602011771号