python第七十九天--第十四周作业
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>仿京东</title>
<style>
/*外框*/ .div_mingr {
height: 30px;
margin: 0 auto;
width: 980px;
}
/*左边*/ .div_left,
.div_cent_l,
.menu_cent_1 {
float: left;
}
/*中间*/ .div_cent_l {
width: 190px;
height: 100%;
background-color: #0dfsd;
} .div_cent_r {
height: 100%;
background-color: aqua;
}
/*右边*/ .div_right,
.div_cent_r,
.menu_cent_r,
.menu_cent_2 {
float: right;
}
/* 用来清楚浮动*/ .div_float {
clear: both;
}
/*<!--顶部 -->*/ .div_top_1 {
line-height: 30px;
} #div_0_1 a,
#div_0_2 a {
color: #999999;
line-height: 30px;
}
/*logo*/ .div_logo,
.div_logo_0 {
height: 170px;
}
/*标志 logo*/ .a_logo {
overflow: hidden;
display: block;
height: 170px;
/*width: 190px;*/
background-image: url(img/logo.v2.png);
} /*搜索 外框*/ .form {
margin: 0, 70px, 0, 0;
left: 320px;
top: 25px;
width: 339px;
height: 35px;
border: 1px solid;
border-color: red;
} /*搜索框*/
.input_s {
margin: 0 auto;
float: left;
line-height: 30px;
width: 280px;
border-color: red;
border-right:white ;
} .upload-bg{
margin: 0 auto;
float: left;
width: 20px;
height: 20px;
background: url(img/sprite-photo-search.png) no-repeat;
cursor: pointer;
margin-top: 10px;
}
/*<!--搜索提示-->*/
.ls a {
font: "微软雅黑";
font-size: small;
color: #666666;
} /*搜索按钮*/
.button {
margin: 0 auto;
width: 35px;
height: 35px;
background: url(img/magnifier1211.png);
} /*菜单*/
.div_meun {
background-color: red;
height: 40px;
} .menu_cent_1 {
width: 160px;
text-aling: ceter;
} /*a 标签 */
.a_red {
color: white;
line-height: 40px;
font-weight: bolder;
text-align: center;
} #go {
margin-top: 70px;
width: 188px;
height: 33px;
background-color: #fff;
text-align: center;
line-height: 33px;
overflow: hidden;
position: relative;
z-index: 1;
float: left;
border: 1px solid #e3e4e5;
} .menu_cent_2 {
margin-left: 80px;
} #meun_1 {
margin: 0 auto;
width: 160px;
text-align: center;
}
/*中间内容
.cent_meun{
width: 980px;
}*/ .left_big_meun {
float: left;
height: 310px;
width: 160px;
border: 1px solid;
border-color: #CCCCCC;
} .span_menu {
width: 160px;
height: 50px;
border: 1px solid;
border-color: #CCCCCC;
} .a_red_z {
margin: 0 auto;
font-size: 20px;
font-weight: bolder;
} .a_red_let {
font-size: 15px;
}
/*菜单左边下方*/ .cent_l_d {
clear: both;
margin-top: 30px;
width: 160px;
height: 36px;
border: 1px solid;
border-color: #CCCCCC;
background: #DDDDDD;
}
/*右边内容*/
/*右边内容上方*/ .div_cen_r_u {
/*background-color: grey;*/
width: 800px;
height: 300px;
} .div_cen_r_u_1 {
margin: auto;
} #div_r_u {
margin-top: 20px;
border: 1px solid #DDDDDD;
border-top: 2px solid red;
width: 100%;
height: 200px;
} .p_m {
padding-left: 45px;
} hr {
width: 95%;
} .td_1 {
color: #005EA7;
font-weight: bolder;
}
/*右边内容下方*/ .div_cen_r_d {
background-color: ;
width: 800px;
height: 300px;
} .cen_r_d_1 {
margin: 0 auto;
padding: 0;
border: 1px solid #D0D0D0;
height: 50px;
} .r_d_2 {
float: left;
line-height: 20px;
margin: 0 auto;
} .r_d_3 {
margin: 0 auto;
float: right;
line-height: 20px;
} .a_33 {
margin-left: 10px;
color: blue;
}
/*<!-- 右边内容下方 产品图片-->*/ .product { width: 100%;
height: 750px;
} .rp{
width: 100%;
float: left;
}
.rp1{ border: 1px solid red;
text-align: center;
float: left;
margin:5px 5px 5px 10px;
/*padding: 10px;*/
} .rp1 img{
width: 150px;
height: 150px;
}
.rp1 input[type="text"]{
width: 25px;
}
/*去除a 标签的下划线*/
ul{
list-style-type: none;/*除去ul标签前缀*/
} a {
text-decoration: none;
color: black;
}
</style> </head> <body style="margin: 0 auto">
<!--顶部 -->
<div class="div_top" id="div_0" style="background-color: #DDDDDD;">
<!--顶部 -->
<div class="div_mingr">
<div class="div_top_1 div_left" id="div_0_1">
<a>收藏本站</a>
</div>
<div class="div_top_1 div_right" id="div_0_2">
<a href="" methods="">登陆</a>
<a href="">注册</a>
<a href="">我的订单</a>
<a href="">我的收藏</a>
<a href="">VIP会员俱乐部</a>
<a href="">客户服务</a>
<a href="">关注</a>
<a href="">手机版</a>
</div>
</div>
<div class="div_float"></div>
</div> <!--logo-->
<div class="div_logo " id="div_1">
<div class="div_mingr div_logo_0">
<div class="div_mingr div_logo_0">
<div class="div_left div_logo_1">
<!-- logo 中间-->
<div class="div_cent_l">
<!-- logo图片框-->
<a href="#" class="a_logo"></a>
</div>
<div style="float: right; height: 170px; width: 300px; margin-left:200px ;">
<div style="height: 70px;"></div>
<div class="form">
<!--搜索框 -->
<form action="#">
<input type="text" name="" id="" value="水果" class="input_s" />
<span class="upload-bg"></span>
<button class="button"></button>
</form> </div>
<div class="ls">
<a href="">热门搜索:</a>
<a href="">火龙果,电脑</a>
</div>
</div> <!---->
</div>
<div class="div_right">
<div id="go">
<a href="#" name="">购物车 </a>
<a href="" style="color:red">2</a>
<a href="">件∇ </a>
</div>
<!--<input type="button" value="" />-->
</div>
</div>
<div class="div_float"></div>
</div>
<div class="div_float"></div>
</div> <!--菜单 -->
<div class="div_meun " id="div_1"> <!-- 菜单左边-->
<div class="div_mingr div_meun_0" id="">
<!-- 左边 1-->
<div class="div_meun_1 div_left">
<div class="menu_cent_1">
<a href="#" class="a_red" id="meun_1">全部商品分类</a>
</div>
<div class="menu_cent_2">
<a href="" class="a_red">首页</a>
<a href="" class="a_red">网上超市</a>
<a href="" class="a_red">水果超市</a>
<a href="" class="a_red">超级订餐</a>
<a href="" class="a_red">生活娱乐</a>
<a href="" class="a_red">研究院</a>
</div>
<div style="clear: both;"></div> </div>
<!--右边-->
<div class="div_right"> <a href="" class="a_red">研究院</a>
<a href="" class="a_red">开发组</a>
<a href="" class="a_red">论 坛</a> </div>
</div>
<div class="div_float"></div>
</div> <!--中间部分-->
<div class="cent_mingr">
<div class="mingr cent_meun div_mingr">
<div class="div_left">
<!--左边菜单-->
<div class="left_big_meun">
<div class="span_menu">
<!--左边菜单 分类-->
<a href="#" class="a_red_z">家用电器</a> <br />
<a href="" class="a_red_let">电冰箱</a>
<a href="" class="a_red_let">电冰箱</a>
<a href="" class="a_red_let">电冰箱</a>
</div>
<div class="span_menu">
<!--左边菜单 分类-->
<a href="#" class="a_red_z">水果</a> <br />
<a href="" class="a_red_let">香蕉</a>
<a href="" class="a_red_let">苹果</a>
<a href="" class="a_red_let">桃子</a>
</div>
<div class="span_menu">
<!--左边菜单 分类-->
<a href="#" class="a_red_z">家用电器</a> <br />
<a href="" class="a_red_let">电冰箱</a>
<a href="" class="a_red_let">电冰箱</a>
<a href="" class="a_red_let">电冰箱</a> </div>
<div class="span_menu">
<!--左边菜单 分类-->
<a href="#" class="a_red_z">家用电器</a> <br />
<a href="" class="a_red_let">电冰箱</a>
<a href="" class="a_red_let">电冰箱</a>
<a href="" class="a_red_let">电冰箱</a>
</div>
<div class="span_menu">
<!--左边菜单 分类-->
<a href="#" class="a_red_z">家用电器</a> <br />
<a href="" class="a_red_let">电冰箱</a>
<a href="" class="a_red_let">电冰箱</a>
<a href="" class="a_red_let">电冰箱</a>
</div>
<div class="span_menu">
<!--左边菜单 分类-->
<a href="#" class="a_red_z">水果</a> <br />
<a href="" class="a_red_let">香蕉</a>
<a href="" class="a_red_let">苹果</a>
<a href="" class="a_red_let">桃子</a>
</div>
</div>
<div style="width: 160px ; height: 15px; clear: both"> </div>
<div class="cent_l_d">
<!-- 左边下方-->
<p>热销排行榜</p>
</div>
<div style="border: 1px solid ;border-color:#ECECEC ;">
<a href="">coneting</a>
</div> </div> <div class="div_right">
<!--右边内容-->
<div class="div_cen_r_u">
<!-- 右边内容上方-->
<div style="height: 30px;"></div>
<div class="div_cen_r_u_1">
<a href="#">电脑</a> >>
<a href="">品牌</a>>>
<a href="#">联想</a>>>
</div>
<div id="div_r_u">
<p>您已选择： 联想 </p>
<hr/>
<p class="p_m">
<tr>
<a href="">
<td class="td_1">材质：</td>
</a>
<a href="">
<td> 工艺金属</td>
</a>
<a href="">
<td> 工程塑料</td>
</a>
<a href="">
<td> 红木</td>
</a>
</tr>
</p>
<hr />
<p class="p_m">
<tr>
<a href="">
<td class="td_1">风格：</td>
</a>
<a href="">
<td> 小清新</td>
</a>
<a href="">
<td> 温情脉脉</td>
</a>
<a href="">
<td> 创意</td>
</a>
</tr>
</p>
<hr />
<p class="p_m">
<tr>
<a href="">
<td class="td_1">材质：</td>
</a>
<a href="">
<td> 工艺金属</td>
</a>
<a href="">
<td> 工程塑料</td>
</a>
<a href="">
<td> 红木</td>
</a>
</tr>
</p> </div>
<div>
<div style="width:70px;height: 20px; border: 1px solid #DDDDDD; margin: 0 auto; font-size:12px ; text-align: center;">
<a href="">更多选项</a>
</div>
</div> </div> <!-- 右边内容下方-->
<div class="div_cen_r_d">
<!-- 右边内容下方-->
<div class="cen_r_d_1">
<div class="r_d_2">
<p><span id="" style="margin-right: 25px;">排序:</span>
<a href="" class="a_33">价格</a>
<a href="" class="a_33">销量</a>
<a href="" class="a_33">最新</a>
</p>
</div>
<div class="r_d_3">
<p>
<a href="" style="color:red">共XX件商品 1</a>
<a href="">/1685</a> <input type="button" name="" id="" value="<" /><input type="button" name="" id="" value=">" /></p>
</div>
</div>
<!--<div class="div_float"></div>-->
<!-- 右边内容下方 产品图片-->
<div class="product">
<!--<div class="lp">-->
<ul class="rp"><!--小视窗--> <li class="rp1"><a class="a1" href="#"><img src="img/11.jpg"><p>¥5999.00<br>Apple MacBook Air <br>13.3英寸笔记本电脑</p></a>
<input type="button" name="" id="" value="-" />
<input type="text" value="1"/>
<input type="button" name="" id="" value="+" />
</li>
<li class="rp1"><a class="a1" href="#"><img src="img/12.jpg"><p>¥6480.00<br>拯救者R720<br>联想电脑旗舰店</p></a>
<input type="button" name="" id="" value="-" />
<input type="text" value="1"/>
<input type="button" name="" id="" value="+" /> </li>
<li class="rp1"><a class="a1" href="#"><img src="img/13.jpg"><p>¥5999.00<br>惠普(HP)暗影精灵II代Pro 暗影红<br>15.6英寸游戏笔记本</p></a>
<input type="button" name="" id="" value="-" />
<input type="text" value="1"/>
<input type="button" name="" id="" value="+" />
</li>
<li class="rp1"><a class="a1" href="#"><img src="img/14.jpg"><p>¥3599.00<br>小米(MI) Air 12.5英寸<br>金属超轻薄笔记本电脑</p></a>
<input type="button" name="" id="" value="-" />
<input type="text" value="1"/>
<input type="button" name="" id="" value="+" />
</li> </ul>
<ul class="rp">
<li class="rp1"><a class="a1" href="#"><img src="img/15.jpg"><p>¥4199.00<br>宏碁（acer）小e E5<br>15.6英寸便携笔记本电脑</p></a>
<input type="button" name="" id="" value="-" />
<input type="text" value="1"/>
<input type="button" name="" id="" value="+" />
</li>
<li class="rp1"><a class="a1" href="#"><img src="img/13.jpg"><p>¥5999.00<br>拯救者R720<br>联想电脑旗舰店</p></a>
<input type="button" name="" id="" value="-" />
<input type="text" value="1"/>
<input type="button" name="" id="" value="+" />
</li>
<li class="rp1"><a class="a1" href="#"><img src="img/12.jpg"><p>¥5999.00<br>拯救者R720<br>联想电脑旗舰店</p></a>
<input type="button" name="" id="" value="-" />
<input type="text" value="1"/>
<input type="button" name="" id="" value="+" />
</li>
<li class="rp1"><a class="a1" href="#"><img src="img/11.jpg"><p>¥5999.00<br>拯救者R720<br>联想电脑旗舰店</p></a>
<input type="button" name="" id="" value="-" />
<input type="text" value="1"/>
<input type="button" name="" id="" value="+" />
</li>
</ul> <!--</div>--> </div>
</div> </div> </div>
<div class="div_float"></div> </div>
</body> </html>
python第七十九天--第十四周作业的更多相关文章
- python第一百六十九天,第十九周作业
FIRSTCRM 学员管理开发需求: 1.分讲师\学员\课程顾问角色, 2.学员可以属于多个班级,学员成绩按课程分别统计 3.每个班级至少包含一个或多个讲师 4.一个学员要有状态转化的过程 ,比如未报 ...
- 孤荷凌寒自学python第七十九天开始写Python的第一个爬虫9并使用pydocx模块将结果写入word文档
孤荷凌寒自学python第七十九天开始写Python的第一个爬虫9 (完整学习过程屏幕记录视频地址在文末) 今天在上一天的基础上继续完成对我的第一个代码程序的书写. 到今天终于完成了对docx模块针对 ...
- 孤荷凌寒自学python第七十六天开始写Python的第一个爬虫6
孤荷凌寒自学python第七十六天开始写Python的第一个爬虫6 (完整学习过程屏幕记录视频地址在文末) 今天在上一天的基础上继续完成对我的第一个代码程序的书写. 不过由于对python-docx模 ...
- 孤荷凌寒自学python第七十五天开始写Python的第一个爬虫5
孤荷凌寒自学python第七十五天开始写Python的第一个爬虫5 (完整学习过程屏幕记录视频地址在文末) 今天在上一天的基础上继续完成对我的第一个代码程序的书写. 直接上代码.详细过程见文末屏幕录像 ...
- 孤荷凌寒自学python第七十四天开始写Python的第一个爬虫4
孤荷凌寒自学python第七十四天开始写Python的第一个爬虫4 (完整学习过程屏幕记录视频地址在文末) 今天在上一天的基础上继续完成对我的第一个代码程序的书写. 直接上代码.详细过程见文末屏幕录像 ...
- 孤荷凌寒自学python第七十天学习并实践beautifulsoup对象用法3
孤荷凌寒自学python第七十天学习并实践beautifulsoup对象用法3 (完整学习过程屏幕记录视频地址在文末) 今天继续学习beautifulsoup对象的属性与方法等内容. 一.今天进一步了 ...
- 孤荷凌寒自学python第六十九天学习并实践beautifulsoup对象用法2
孤荷凌寒自学python第六十九天学习并实践beautifulsoup对象用法2 (完整学习过程屏幕记录视频地址在文末) 今天继续学习beautifulsoup对象的属性与方法等内容. 一.今天进一步 ...
- 孤荷凌寒自学python第五十九天尝试使用python来读访问远端MongoDb数据服务
孤荷凌寒自学python第五十九天尝试使用python来读访问远端MongoDb数据服务 (完整学习过程屏幕记录视频地址在文末) 今天是学习mongoDB数据库的第五天.今天的感觉是,mongoDB数 ...
- 孤荷凌寒自学python第四十九天继续研究跨不同类型数据库的通用数据表操作函数
孤荷凌寒自学python第四十九天继续研究跨不同类型数据库的通用数据表操作函数 (完整学习过程屏幕记录视频地址在文末,手写笔记在文末) 今天继续建构自感觉用起来顺手些的自定义模块和类的代码. 不同类型 ...
随机推荐
- Rip配置
Rip配置 首先建立如图拓扑图 分别配置两台电脑的ip地址和子网掩码和网关.如图所示. 在router0上配置两个端口的IP以及子网掩码 在路由器router0上配置rip2协议.里面的no auto ...
- Nginx 的两种认证方式
简介: 今天来研究一下 Nginx 的两种认证方式. 1.auth_basic 本机认证 2.ngx_http_auth_request_module 第三方认证 一.安装 Nginx shell & ...
- Hadoop项目实战－用户行为分析之应用概述（三）
1.概述 本课程的视频教程地址:<项目工程准备> 本节给大家分享的主题如下图所示: 下面我开始为大家分享今天的第三节的内容——<项目工程准备>,接下来开始分享今天的内容. 2. ...
- mysql遇见contains nonaggregated column 'information_schema.PROFILING.SEQ'异常
报错如下:[Err] 1055 - Expression #1 of ORDER BY clause is not in GROUP BY clause and contains nonaggrega ...
- 精读JavaScript模式(四)，数组，对象与函数的几种创建方式
一.前言 放了个元旦,休息了三天,加上春运抢票一系列事情的冲击,我感觉我的心已经飞了.确实应该收收心,之前计划的学习任务也严重脱节了:我恨不得打死我自己. 在上篇博客中,笔记记录到了关于构造函数方面的 ...
- 微信小程序开发总结（一）
微信小程序从2016年9月21日开始内测 ,以及在2017年1月9号正式发布也有一段时间了, 很多人开始拥抱微信小程序,我也是一样 ,从微信小程序内测开始就加入进来 , 开始研究微信小程序 ,属于最早 ...
- U3D GameObject 解读
GameObject本身没有功能,是Unity场景里所有组件的基类,但很多时候我们需要在脚本中操作GameObject.先讲一下GameObject类包含哪些内容,其中常用的用红色标出了 Variab ...
- 常量(const)和只读变量(readonly)
//const修饰的数据叫做 常量 //常量一旦声明常量的值就不能改变. //常量在声明的时候 必须要赋初始值 //C#编译器在编译的时候 声明常量的那句话不见了. //在使用常量的地方就用常量的值代 ...
- SQL Server 数据类型映射（转载）
SQL Server 数据类型映射 SQL Server 和 .NET Framework 基于不同的类型系统. 例如,.NET Framework Decimal 结构的最大小数位数为 28,而 S ...
- JavaSE Map集合
Map集合 在Map集合中保存的数据为一组数据,其中:一个数据为key,另外一个数据为value.而key和value具备对应的关系,在集合中它们属于一组(一对)数据.而每个key只能对应唯一的一个v ...