day20190904一号店网页HTML+CSS

1.知识要理一理。梳理。当天讲了什么内容？当天我学习到了什么内容？看懂。所有的学习型从模仿开始。1.看懂代码，看懂思路，学思路，多问自己问题，为什么要这么写？下一步为什么要这么写？因果。2.多练多敲。熟能生巧。勤能补拙。

2.只有认真专心对一件事情付出百分之两百的耐心才能看起来毫不费力。昨天看到大神香一直在研究琢磨看代码。所有的收获都是努力应得的。一份耕耘，一份收获。坚定。笃定。相信自己，不卑不亢，不骄不躁，遇见困难，敢于向别人求助。

3.导入的图片是服务器端的图片。

一号店网页：

pagehome.html

<!DOCTYPE html>
<html>

　　<body>
　　　　<div id="con">
　　　　　　<header></header>
　　　　　　<section>
　　　　　　　　<div class="gg">
　　　　　　　　　　<ul>
　　　　　　　　　　　　<li>中秋送礼图鉴</li>
　　　　　　　　　　　　<li>营养早餐</li>
　　　　　　　　　　　　<li>宠物食品</li>
　　　　　　　　　　　　<li>垃圾分类</li>
　　　　　　　　　　</ul>
　　　　　　　　</div>

<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 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="width: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>

<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 id="foot">
<div class="div_foot_top">


<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 class="div_foot_mid_left">


<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>
<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 {
width: 1366px;
overflow: hidden;
background-color: #F5F5F5;
}
header {
width: 1200px;
height: 100px;
background: lightblue;
}

/*section网页主体中的轮播广告*/
.gg {
width: 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;
width: 500px;
/*给子元素定位绝对定位元素*/
position: absolute;
bottom: -8px;
left: 390px;
}
.gg li {
width: 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{
width: 1024px;
}

/*超级单品样式*/
section .superSingle{
width: 1070px;
height: 370px;
background: #EE3A42;
margin-top: 10px;
}

section .superSingle ul{
display: flex; /* 将ul父级容器下所有的子元素放置一行显示,子元素的宽度会压缩 */
flex-wrap: wrap; /*会根据定义的子元素宽度自行自动换行 */
}

section .superSingle li{
list-style: none;
width: 210px;
height: 216px;
background: white;
margin-top: 5px;
}

/*去除超级单品的第一个li标签的背景颜色*/
section .superSingle li:first-of-type{
background-color: transparent; /*设置背景颜色为透明色*/
}
section .superSingle .single_top img{
width: 110px;
height: 110px;
margin-left: 50px;
}

section .superSingle li a{
text-decoration: none;
font-size: 12px;
color: #666;
}

section .superSingle .single_bottom .s_title{
/* 多余文本省略... */
width: 120px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.s_con{
width: 120px;
}

section .superSingle li:hover{
/*变形_缩放*/
transform: scale(1.05);
/*transform: translateX(1px); */ /*变形_平移*/
/*设置过渡效果*/
/*transition: all linear 1s; */
}

/*底部 */
footer{
margin-top: 90px;
}

footer .div_foot_top{
width: 1100px;
}

footer .div_foot_top a{
display: inline-block;
text-decoration: none;
width: 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;
width: 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;
width: 1200px;
/*设置边框头部样式*/
border-top: 1px solid #999;
padding-top: 10px;
margin-top: 10px;

}

footer .div_foot_mid .div_foot_mid_left{
width: 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{
width: 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{
width: 390px;
height: 65px;
}

section .under_log .u_log_font{
width: 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;
width: 1150px;
}

section .you_like_list ul{
display: flex;
}
section .you_like_list li{
list-style: none;
width: 168px;
height: 236px;
background-color: white;
}

section .you_like_list li img{
width: 150px;
height: 136px;
margin: 9px;
}

/*设置交集选择器样式的写法 */
.single_tit.text_limit_limp{
width: 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{
width: 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;
}

day20190904一号店网页HTML+CSS的更多相关文章

移动端网页 rem css书写
移动端网页书写 css样式: @charset "utf-8";body,html{font-family: "微软雅黑";font-size:100px; ...
网页DIV+CSS布局和动画美化全程实例 (陈益材) 随书光盘
网站的建站技术近几年得到迅速的发展,网页的布局与特效动画技术层出不穷,网站建设已经从简单的技术支持时代衍变到现在的视觉美化时代.但如何使设计的网页高人一筹,达到让人过目不忘的境界,如何追求以最简单的特 ...
利用wget 抓取网站网页包括css背景图片
利用wget 抓取网站网页包括css背景图片 wget是一款非常优秀的http/ftp下载工具,它功能强大,而且几乎所有的unix系统上都有.不过用它来dump比较现代的网站会有一个问题:不支持c ...
网页布局 CSS实现DIV并列等高
同事去笔试遇到的问题要求3列div根据内容的变化通过css实现等高效果图: 原理: 同列的div设置一个父级 overflow:hidden 超出部分隐藏给同列的div设置css margin- ...
《网页设计基础——CSS常用语法》
网页设计基础--CSS常用语法一.注释: 例如: /* 在此处书写注释 */ 二.清除浏览器默认设置: 例如: *{ /* 全局声明 */ margin: 0; padding: ...
《网页设计基础——CSS的四种引入方式详解》
网页设计基础--CSS的四种引入方式详解一.行内式: 规则: 1. 行内式是所有样式方法中最为直接的一种,它直接对HTML的标记使用style属性,然后将CSS代码直接写在其中. 格 ...
HTML 网页特效CSS大全
css属性代码大全一CSS文字属性:color : #999999; /* 文字颜色*/font-family : 宋体,sans-serif; /* 文字字体*/font-size : 9pt; / ...
第一节 HTML网页和CSS样式
1. 第一行 <!DOCTYPE html> 表明网页使用的是HTML5版本 2. 网页的head内容,包含了 title,meta. 3. 网页的标题 title,注意这个显示在浏览器的 ...
Win7使用IIS通过域名访问本地程序（网页、css、js等）
一.目的:在本地浏览器里面,输入www.abc.com 可以访问我们本地搭建的网页程序二.好处:在本地模拟,真实的访问,另外可以设置一些二级域名,例如static.abc.com域名用来存储像图片, ...

随机推荐

基于jquery,php实现AJAX长轮询(LongPoll)，类似推送机制
HTTP是无状态.单向的协议,用户只能够通过客服端向服务器发送请求并由服务器处理发回一个响应.若要实现聊天室.WEBQQ.在线客服.邮箱等这些即时通讯的应用,就要用到“ 服务器推送技术(Comet)” ...
Java中的substring()用法
String str = "Hello Java World!"; Method1: substring(int beginIndex) 返回从起始位置(beginIndex)至 ...
java常用类比较器/system/math/big
Java 比较器自然排序:java.lang.Comparable 定制排序:java.util.Comparator 自然排序:java.lang.Comparable Comparable接口 ...
Docker应用部署
MySQL: #拉取mysql镜像 docker pull centos/mysql--centos7 #创建容器 #-p 端口映射 -e添加环境变量MYSQL_ROOT_PASSWORD 是root ...
MIT线性代数：5.转置，置换，向量空间
手写SpringMVC 框架
手写SpringMVC框架细嗅蔷薇心有猛虎背景:Spring 想必大家都听说过,可能现在更多流行的是Spring Boot 和Spring Cloud 框架:但是SpringMVC 作为一款实现 ...
Weed:线段树
观察复杂度,是log级别以下回答询问的. O(1)?逗我kx呢? 自然而然地想到线段树. 学长讲的原题啊考场上还不会打. 线段树上的每个节点都表示一个操作区间. 线段树上维护的权值有3个:这个子区间一 ...
ASP.NET Core 3.0 gRPC 拦截器
目录 ASP.NET Core 3.0 使用gRPC ASP.NET Core 3.0 gRPC 双向流 ASP.NET Core 3.0 gRPC 拦截器一. 前言前面两篇文章给大家介绍了使用g ...
P3521 [POI2011]ROT-Tree Rotations（线段树合并）
一句话题意(不用我改了.....):给一棵n(1≤n≤200000个叶子的二叉树,可以交换每个点的左右子树,要求前序遍历叶子的逆序对最少. ......这题输入很神烦呐... 给你一棵二叉树的dfs序 ...
TensorFlow2.0（10）：加载自定义图片数据集到Dataset
.caret, .dropup > .btn > .caret { border-top-color: #000 !important; } .label { border: 1px so ...

day20190904一号店网页HTML+CSS

day20190904一号店网页HTML+CSS的更多相关文章

随机推荐

热门专题