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域名用来存储像图片, ...

随机推荐

新的服务器安装的mysql使用navcat连接不上
首先出现问题然后在防火墙添加3306端口 /sbin/iptables -I INPUT -p tcp --dport 3306 -j ACCEPT 又出现了问题 ERROR 1130: Host ...
ElasticSearch中文分词器-IK分词器的使用
IK分词器的使用首先我们通过Postman发送GET请求查询分词效果 GET http://localhost:9200/_analyze { "text":"农业银行 ...
java 项目时间和服务器时间不一致
今天线上项目关于时间的几个任务都出了问题,查看日志发现日志的时间不对,用的是log4j,日志输出的时间都早了很长时间. 1 首先先登上服务器查看了服务器的系统时间 linux下 date命令时间正确 ...
mysql设计规范二
一.基本规范必须使用InnoDB存储引擎必须使用UTF8字符集数据表.数据字段必须加入中文注释二.设计规范库名称.表名称.字段名称必须使用小写,最好不要使用驼峰式,使用“_”区分,例如use ...
noip11 string
这道题改题时我打了个玄学复杂度的暴力,然后我成功的造了一组数据hack掉了自己的代码.... 通过观察,我们可以很容易的发现在操作几次后,整个序列就会变成一块一块相同的字母. 于是我们可以对我们的暴力 ...
树上神奇逆逆序对（我的叫法）hh的小纸条重中之重！！！！！
HH是一位十分爱好数学的大佬,尤其喜爱数数,一天百无聊赖的他写下了一个1-N的排列,并且在小纸条上记下了每个数前面有多少个数比他小,但HH不小心忘记了这个排列.现在只有当时记下的小纸条,现在请你还原出 ...
国际C语言混乱代码大赛优胜作品详解之“A clock in one line”
原文链接:https://blog.csdn.net/herorenme/article/details/8864351 摘要:IOCCC,即国际混乱C语言代码大赛是一项著名的国际编程赛事迄今已举办2 ...
Go 基础学习笔记（5）| 数据类型说明与使用
在 Go 编程语言中,数据类型用于声明函数和变量. 数据类型的出现是为了把数据分成所需内存大小不同的数据,编程的时候需要用大数据的时候才需要申请大内存,就可以充分利用内存. Go 语言按类别有以下几种 ...
php imagick设置图片圆角的方法
php imagick设置图片圆角的方法 <pre>header('Content-Type: image/png'); $image = new Imagick('http://stat ...
深入理解java继承从“我爸是李刚”讲起
目录 1.继承的概述 2.关于继承之后的成员变量 3.关于继承之后的成员方法 4.关于继承之后的构造方法 5.关于继承的多态性支持的例子 6.super与this的用法前言本文主要多方面讲解jav ...

day20190904一号店网页HTML+CSS

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

随机推荐

热门专题