1.知识要理一理。梳理。当天讲了什么内容？当天我学习到了什么内容？看懂。所有的学习型从模仿开始。1.看懂代码，看懂思路，学思路，多问自己问题，为什么要这么写？下一步为什么要这么写？因 果。2.多练多敲。熟能生巧。勤能补拙。
2.只有认真专心对一件事情付出百分之两百的耐心才能看起来毫不费力。昨天看到大神香一直在研究琢磨看代码。所有的收获都是努力应得的。一份耕耘，一份收获。坚定。笃定。相信自己，不卑不亢，不骄不躁，遇见困难，敢于向别人求助。
3.导入的图片是服务器端的图片。
一号店网页：
pagehome.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>1号店首页</title>
<link rel="stylesheet" href="css/homePage.css" />
</head>
<body>
<div id="con">
<header></header>
<section>
<div class="gg">
<ul>
<li>中秋送礼图鉴</li>
<li>营养早餐</li>
<li>宠物食品</li>
<li>垃圾分类</li>
</ul>
</div>
<div class="div_mid">
<!--新人通道-->
<div class="new_person_channel">
<a href="https://pro-pc.yhd.com/yhd/active/33KCN39KAit5hcQDiaoHaa8L39aX/index.html" target="_blank">
<img src="//img14.360buyimg.com/img/jfs/t1/32471/30/11988/36501/5cb6a33fEbce59d62/1a19815975696690.png" alt="">
</a>
</div>
<!--超级单品-->
<!--注释 div>ul>li*10>a>div*2-->
<div class="superSingle">
<ul>
<li>
<a href="">
<div></div>
<div></div>
</a>
</li>
<li>
<a href="//qianggou.yhd.com/1-213582735" target="_blank" title="臣源LK-80-12DC 电动抽油泵12V24V大功率550W柴油泵大流量自吸泵加油机" class="superSingle_a" >
<div class="single_top">
<div class="s_bz"></div>
<img class="single_top_img" src="https://img11.360buyimg.com/n12/s450x450_jfs/t1/38380/33/14819/163868/5d5cfd47Ead7dbce4/ba321cf10e37f9ee.jpg" alt="">
</div>
<div class="single_bottom">
<div class="s_title">臣源LK-80-12DC 电动抽油泵12V24V大功率550W柴油泵大流量自吸泵加油机</div>
<div class="s_bar">
<div class="s_progress" style="14% "></div>
</div>
<div class="s_con">
<div class="s_num">
<span class="s_num_unit">￥</span>
<span class="s_num_act">718</span>
<span class="s_num_underline">
<span class="s_num_unit">￥</span>
<span class="s_num_line">798</span>
</span>
</div>
</div>
</div>
</a>
</li>
<li>
<a href="//qianggou.yhd.com/1-213582735" target="_blank"
title="臣源LK-80-12DC 电动抽油泵12V24V大功率550W柴油泵大流量自吸泵加油机"
class="superSingle_a" >
<div class="single_top">
<div class="s_bz"></div>
<img class="single_top_img"
src="https://img12.360buyimg.com/n12/s450x450_jfs/t1/11359/32/7016/124286/5c495fceE33d5554c/555041ad6477d959.jpg" alt="">
</div>
<div class="single_bottom">
<div class="s_title">臣源LK-80-12DC 电动抽油泵12V24V大功率550W柴油泵大流量自吸泵加油机</div>
<div class="s_bar">
<div class="s_progress" style="14% "></div>
</div>
<div class="s_con">
<div class="s_num">
<span class="s_num_unit">￥</span>
<span class="s_num_act">718</span>
<span class="s_num_underline">
<span class="s_num_unit">￥</span>
<span class="s_num_line">798</span>
</span>
</div>
</div>
</div>
</a>
</li>
<li>
<a href="//qianggou.yhd.com/1-213582735" target="_blank"
title="臣源LK-80-12DC 电动抽油泵12V24V大功率550W柴油泵大流量自吸泵加油机"
class="superSingle_a" >
<div class="single_top">
<div class="s_bz"></div>
<img class="single_top_img"
src="https://img12.360buyimg.com/n12/s450x450_jfs/t1/11359/32/7016/124286/5c495fceE33d5554c/555041ad6477d959.jpg" alt="">
</div>
<div class="single_bottom">
<div class="s_title">臣源LK-80-12DC 电动抽油泵12V24V大功率550W柴油泵大流量自吸泵加油机</div>
<div class="s_bar">
<div class="s_progress" style="14% "></div>
</div>
<div class="s_con">
<div class="s_num">
<span class="s_num_unit">￥</span>
<span class="s_num_act">718</span>
<span class="s_num_underline">
<span class="s_num_unit">￥</span>
<span class="s_num_line">798</span>
</span>
</div>
</div>
</div>
</a>
</li>
<li>
<a href="//qianggou.yhd.com/1-213582735" target="_blank"
title="臣源LK-80-12DC 电动抽油泵12V24V大功率550W柴油泵大流量自吸泵加油机"
class="superSingle_a" >
<div class="single_top">
<div class="s_bz"></div>
<img class="single_top_img"
src="https://img12.360buyimg.com/n12/s450x450_jfs/t1/11359/32/7016/124286/5c495fceE33d5554c/555041ad6477d959.jpg" alt="">
</div>
<div class="single_bottom">
<div class="s_title">臣源LK-80-12DC 电动抽油泵12V24V大功率550W柴油泵大流量自吸泵加油机</div>
<div class="s_bar">
<div class="s_progress" style="14% "></div>
</div>
<div class="s_con">
<div class="s_num">
<span class="s_num_unit">￥</span>
<span class="s_num_act">718</span>
<span class="s_num_underline">
<span class="s_num_unit">￥</span>
<span class="s_num_line">798</span>
</span>
</div>
</div>
</div>
</a>
</li>
<li>
<a href="//qianggou.yhd.com/1-213582735" target="_blank"
title="臣源LK-80-12DC 电动抽油泵12V24V大功率550W柴油泵大流量自吸泵加油机"
class="superSingle_a" >
<div class="single_top">
<div class="s_bz"></div>
<img class="single_top_img"
src="https://img12.360buyimg.com/n12/s450x450_jfs/t1/11359/32/7016/124286/5c495fceE33d5554c/555041ad6477d959.jpg" alt="">
</div>
<div class="single_bottom">
<div class="s_title">臣源LK-80-12DC 电动抽油泵12V24V大功率550W柴油泵大流量自吸泵加油机</div>
<div class="s_bar">
<div class="s_progress" style="14% "></div>
</div>
<div class="s_con">
<div class="s_num">
<span class="s_num_unit">￥</span>
<span class="s_num_act">718</span>
<span class="s_num_underline">
<span class="s_num_unit">￥</span>
<span class="s_num_line">798</span>
</span>
</div>
</div>
</div>
</a>
</li>
<li>
<a href="//qianggou.yhd.com/1-213582735" target="_blank"
title="臣源LK-80-12DC 电动抽油泵12V24V大功率550W柴油泵大流量自吸泵加油机"
class="superSingle_a" >
<div class="single_top">
<div class="s_bz"></div>
<img class="single_top_img"
src="https://img12.360buyimg.com/n12/s450x450_jfs/t1/11359/32/7016/124286/5c495fceE33d5554c/555041ad6477d959.jpg" alt="">
</div>
<div class="single_bottom">
<div class="s_title">臣源LK-80-12DC 电动抽油泵12V24V大功率550W柴油泵大流量自吸泵加油机</div>
<div class="s_bar">
<div class="s_progress" style="14% "></div>
</div>
<div class="s_con">
<div class="s_num">
<span class="s_num_unit">￥</span>
<span class="s_num_act">718</span>
<span class="s_num_underline">
<span class="s_num_unit">￥</span>
<span class="s_num_line">798</span>
</span>
</div>
</div>
</div>
</a>
</li>
<li>
<a href="//qianggou.yhd.com/1-213582735" target="_blank"
title="臣源LK-80-12DC 电动抽油泵12V24V大功率550W柴油泵大流量自吸泵加油机"
class="superSingle_a" >
<div class="single_top">
<div class="s_bz"></div>
<img class="single_top_img"
src="https://img12.360buyimg.com/n12/s450x450_jfs/t1/11359/32/7016/124286/5c495fceE33d5554c/555041ad6477d959.jpg" alt="">
</div>
<div class="single_bottom">
<div class="s_title">臣源LK-80-12DC 电动抽油泵12V24V大功率550W柴油泵大流量自吸泵加油机</div>
<div class="s_bar">
<div class="s_progress" style="14% "></div>
</div>
<div class="s_con">
<div class="s_num">
<span class="s_num_unit">￥</span>
<span class="s_num_act">718</span>
<span class="s_num_underline">
<span class="s_num_unit">￥</span>
<span class="s_num_line">798</span>
</span>
</div>
</div>
</div>
</a>
</li>
<li>
<a href="//qianggou.yhd.com/1-213582735" target="_blank"
title="臣源LK-80-12DC 电动抽油泵12V24V大功率550W柴油泵大流量自吸泵加油机"
class="superSingle_a" >
<div class="single_top">
<div class="s_bz"></div>
<img class="single_top_img"
src="https://img12.360buyimg.com/n12/s450x450_jfs/t1/11359/32/7016/124286/5c495fceE33d5554c/555041ad6477d959.jpg" alt="">
</div>
<div class="single_bottom">
<div class="s_title">臣源LK-80-12DC 电动抽油泵12V24V大功率550W柴油泵大流量自吸泵加油机</div>
<div class="s_bar">
<div class="s_progress" style="14% "></div>
</div>
<div class="s_con">
<div class="s_num">
<span class="s_num_unit">￥</span>
<span class="s_num_act">718</span>
<span class="s_num_underline">
<span class="s_num_unit">￥</span>
<span class="s_num_line">798</span>
</span>
</div>
</div>
</div>
</a>
</li>
<li>
<a href="//qianggou.yhd.com/1-213582735" target="_blank"
title="臣源LK-80-12DC 电动抽油泵12V24V大功率550W柴油泵大流量自吸泵加油机"
class="superSingle_a" >
<div class="single_top">
<div class="s_bz"></div>
<img class="single_top_img"
src="https://img12.360buyimg.com/n12/s450x450_jfs/t1/11359/32/7016/124286/5c495fceE33d5554c/555041ad6477d959.jpg" alt="">
</div>
<div class="single_bottom">
<div class="s_title">臣源LK-80-12DC 电动抽油泵12V24V大功率550W柴油泵大流量自吸泵加油机</div>
<div class="s_bar">
<div class="s_progress" style="14% "></div>
</div>
<div class="s_con">
<div class="s_num">
<span class="s_num_unit">￥</span>
<span class="s_num_act">718</span>
<span class="s_num_underline">
<span class="s_num_unit">￥</span>
<span class="s_num_line">798</span>
</span>
</div>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
<!-- 懂你想要 -->
<!--
交集选择器
class="con_width mod_you_like understand_want wrap mod_lift_floor"
-->
<div class="con_width mod_you_like understand_want wrap mod_lift_floor">
<div class="under_log">
<img src="https://www.yhd.com/statics/index/images/dongni.png" alt="" >
<p class="u_log_font">可能比你自己更懂你</p>
</div>
<div class="you_like_list">
<ul>
<li>
<div class="you_like_list_li_top">
<img src="https://img13.360buyimg.com/n6/s250x250_jfs/t1/31476/39/13580/157238/5cbbcf88E649d97b0/b4b79ebe569b79d4.jpg" />
</div>
<div class="you_like_list_li_bottom">
<p class="single_tit text_limit_limp">【品牌特惠】帽子男夏天户外防晒透气凉帽网帽遮阳帽男士太阳帽鸭舌帽棒球帽潮 白色 87款网帽 可调节</p>
</div>
<div class="you_like_list hidden"></div>
</li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</section>
<footer>
<!--div#foot>div.div_*3-->
<div id="foot">
<div class="div_foot_top">
<!-- a[href='javascript:;']*4>img+b+span [额外添加span标签前] -->
<!-- a[href='javascript:;']*4>img+span.b_span>(b+span) [额外添加span标签后] -->
<a href="javascript:;">
<img src="img/1.jpg" alt="" />
<span class="b_span">
<b>正品保障</b>
<span>正品行货 放心选购</span>
</span>
</a>
<a href="javascript:;">
<img src="img/2.jpg" alt="" />
<span class="b_span">
<b>满86包邮</b>
<span>满86元 免运费</span>
</span>
</a>
<a href="javascript:;">
<img src="img/3.jpg" alt="" />
<span class="b_span">
<b>售后无忧</b>
<span>7天无理由退货</span>
</span>
</a>
<a href="javascript:;">
<img src="img/4.jpg" alt="" />
<span class="b_span">
<b>准时送达</b>
<span>收货时间由你做主</span>
</span>
</a>
</div>
<div class="div_foot_mid">
<!-- div.div_foot_mid_*2 -->
<div class="div_foot_mid_left">
<!--列表信息-->
<!-- dl*4>dt+dd*5>a -->
<dl>
<dt>新手入门</dt>
<dd><a href="">购物流程 </a></dd>
<dd><a href="">会员制度 </a></dd>
<dd><a href="">订单查询 </a></dd>
<dd><a href="">服务协议及隐私说明 </a></dd>
<dd><a href="">网站地图 </a></dd>
</dl>
<dl>
<dt>支付方式</dt>
<dd><a href="">货到付款 </a></dd>
<dd><a href="">网上支付 </a></dd>
<dd><a href="">礼品卡支付</a></dd>
<dd><a href="">其它支付 </a></dd>
</dl>
<dl>
<dt> 配送服务</dt>
<dd><a href="">配送进度查询 </a></dd>
<dd><a href="">商品验货与签收</a></dd>
</dl>
<dl>
<dt> 相关规则</dt>
<dd><a href="">平台规则 </a></dd>
<dd><a href="">退换货政策</a></dd>
<dd><a href="">发票制度 </a></dd>
<dd><a href="">帮助中心 </a></dd>
</dl>
</div>
<div class="div_foot_mid_right">
<!--二维码-->
<!--div*2>p+img-->
<div>
<p>APP更优惠</p>
<img src="https://img.yihaodianimg.com/front-homepage/index/images/qryhd.png?1=1" alt="APP更优惠" />
</div>
<div>
<p>加微信查订单</p>
<img src="https://img30.360buyimg.com/img/jfs/t15403/130/239695202/5772/891e9fb1/5a2798bbN479da3df.jpg" alt="加微信查订单" />
</div>
</div>
</div>
<div class="div_foot_bottom">
<p>
<a href=""> 沪ICP备16050468号 </a>|
<a href=""> 经营证照 </a>|
<a href=""> 互联网药品信息服务资格证(沪)-经营性-2017-0006 </a>|
<a href=""> 违法和不良信息举报电话：0527-88100253 </a>|
<a href=""> 沪B2-20170039 </a>|
<a href=""> 沪公网安备 31010502002939号 </a>|
<a href=""> 友情链接 </a>|
<a href=""> 出版物经营许可证 </a>|
<a href=""> 增值电信业务经营许可证 </a>
</p>
<p> Copyright© 1号店网上超市 2007-2019，All Rights Reserved</p>
<p>
<img src="img/CgQCr1PQy1CAF7vaAABDexsiEYM24800.jpg" alt="" />
<img src="img/CgQCrlPYTqCASlHXAAAd82JE0eA31000.png" alt="" />
<img src="img/ChEi1FYXHcOAVk_WAAAL2r2-yfo10200.jpg" alt="" />
<img src="img/ChEi2lh171KAJrGlAAALl_uZt0E75600.jpg" alt="" />
</p>
</div>
</div>
</footer>
</div>
</body>
</html>
homePage.css
* {
margin: 0px auto;
padding: 0px;
}
/*background-color: #F5F5F5;*/
#con {
1366px;
overflow: hidden;
background-color: #F5F5F5;
}
header {
1200px;
height: 100px;
background: lightblue;
}
/*section网页主体中的轮播广告*/
.gg {
1366px;
height: 300px;
background: no-repeat url("//img12.360buyimg.com/img/jfs/t1/77276/15/8655/96360/5d6736baEa757f6f4/f16793fd23b7aaaa.jpg");
background-size: contain;
/*自适应图片大小*/
margin: auto;
/*给父级容器定义相对定位元素*/
position: relative;
}
.gg ul {
list-style: none;
display: flex;
color: #666;
500px;
/*给子元素定位绝对定位元素*/
position: absolute;
bottom: -8px;
left: 390px;
}
.gg li {
100px;
height: 30px;
background: white;
margin: 10px;
text-align: center;
line-height: 30px;
font-size: 12px;
}
.gg li:hover {
cursor: pointer;
background: #666;
color: white;
}
/*.div_mid*/
.div_mid{
1024px;
}
/*超级单品样式*/
section .superSingle{
1070px;
height: 370px;
background: #EE3A42;
margin-top: 10px;
}
section .superSingle ul{
display: flex; /* 将ul父级容器下所有的子元素放置一行显示,子元素的宽度会压缩 */
flex-wrap: wrap; /*会根据定义的子元素宽度自行自动换行 */
}
section .superSingle li{
list-style: none;
210px;
height: 216px;
background: white;
margin-top: 5px;
}
/*去除超级单品的第一个li标签的背景颜色*/
section .superSingle li:first-of-type{
background-color: transparent; /*设置背景颜色为透明色*/
}
section .superSingle .single_top img{
110px;
height: 110px;
margin-left: 50px;
}
section .superSingle li a{
text-decoration: none;
font-size: 12px;
color: #666;
}
section .superSingle .single_bottom .s_title{
/* 多余文本省略... */
120px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.s_con{
120px;
}
section .superSingle li:hover{
/*变形_缩放*/
transform: scale(1.05);
/*transform: translateX(1px); */ /*变形_平移*/
/*设置过渡效果*/
/*transition: all linear 1s; */
}
/*底部 */
footer{
margin-top: 90px;
}
footer .div_foot_top{
1100px;
}
footer .div_foot_top a{
display: inline-block;
text-decoration: none;
250px;
margin-left: 20px;
}
footer .div_foot_top a .b_span{
/*display: block;*/ /*b标签行内元素更改成块级元素*/
vertical-align: top; /* vertical-align 垂直居中,只对行内元素有效 */
}
footer .div_foot_top a span{
font-size: 14px;
color: #666666;
display: inline-block;
120px;
}
footer .div_foot_top a .b_span b{
font-weight: bold;
font-size: 16px;
color: #333;
display: inline-block;
margin-top: 12px;
}
footer .div_foot_top img{
/*设置过渡效果*/
transition: all linear 1s;
}
footer .div_foot_top img:hover{
/*变形_旋转 */
transform: rotate(360deg);
}
footer .div_foot_mid {
display: flex;
1200px;
/*设置边框头部样式*/
border-top: 1px solid #999;
padding-top: 10px;
margin-top: 10px;
}
footer .div_foot_mid .div_foot_mid_left{
700px;
display: flex; /* 给当前元素的子元素设置和浮动一样的效果,但该元素还在标准文档流中 */
}
footer .div_foot_mid .div_foot_mid_left a{
text-decoration: none;
font-size: 12px;
color: #666;
}
footer .div_foot_mid .div_foot_mid_left a:hover{
color: orangered;
}
footer .div_foot_mid .div_foot_mid_left dt{
height: 32px;
padding: 0 8px;
font-size: 14px;
color: #666;
line-height: 32px;
overflow: hidden;
font-family: "Microsoft YaHei";
color: #666;
font-weight: bold;
}
footer .div_foot_mid .div_foot_mid_left dd{
padding: 0 8px;
}
footer .div_foot_mid .div_foot_mid_right{
300px;
display: flex;
}
footer .div_foot_mid .div_foot_mid_right p{
font-size: 16px;
font-weight: bold;
padding: 5px 0px;
color: #666666;
}
footer .div_foot_bottom{
text-align: center;
}
footer .div_foot_bottom p:nth-of-type(1) a{
text-decoration: none;
color: #666666;
font-size: 12px;
}
/*后代选择器 */
footer .div_foot_bottom p:nth-of-type(1) a:hover{
color: red;
}
footer .div_foot_bottom p:nth-of-type(2){
padding: 10px;
font-size: 14px;
color: #333;
}
/*网页 section*/
section .under_log{
text-align: center;
margin-top: 90px;
}
section .under_log img{
390px;
height: 65px;
}
section .under_log .u_log_font{
155px;
height: 22px;
font-family: PingFangSC-Regular;
font-size: 16px;
color: #999;
letter-spacing: 1px; /*字体间隙*/
}
/*background: pink;
height: 500px;
* */
section .you_like_list{
background: pink;
height: 500px;
1150px;
}
section .you_like_list ul{
display: flex;
}
section .you_like_list li{
list-style: none;
168px;
height: 236px;
background-color: white;
}
section .you_like_list li img{
150px;
height: 136px;
margin: 9px;
}
/*设置交集选择器样式的写法 */
.single_tit.text_limit_limp{
150px;
height: 20px;
margin:2px 9px;
font-size:14px ;
color: #333333;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.you_like_list_li_bottom{
/* background: red;*/
height: 78px;
}
.you_like_list.hidden{
168px;
height: 78px;
background: white;
display: none;
}
section .you_like_list li:hover{
border: 1px solid red;
}
section .you_like_list li:hover .hidden{
transform: translateY(-100px);
/*transition: all linear 1s;*/
display: block;
}