kaola
考拉布局
CSS
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: #f5f5f5;
}
.clearfix:after {
/*伪元素是行内元素 正常浏览器清除浮动方法*/
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
*zoom: 1;
/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}
.w {
width: 1100px;
margin: 0 auto;
background-color: #fff;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
.w .sport {
height: 74px;
line-height: 74px;
}
.w .sport h2 {
float: left;
}
.w .sport .hotword li {
float: left;
margin-left: 14px;
}
.w .sport .hotword li:nth-child(1) {
color: gray;
}
.w .sport .hotword li a {
color: orange;
}
.w .sport .hotword .nike {
color: gray;
}
.w .sport .hotword li a:hover {
text-decoration: underline;
}
.w .more {
float: right;
color: gray;
}
.w .more:hover {
text-decoration: underline;
}
.w .content .rightshop {
float: right;
}
.w .content .rightshop .hotsell {
width: 207.4px;
height: 58px;
line-height: 58px;
padding-left: 10px;
border: 0.1px solid gray;
}
.w .content .rightshop li {
width: 216.4px;
height: 117.2px;
background-color: pink;
border: 1px solid gray;
}
.w .content .loaded {
float: left;
width: 330px;
height: 541px;
background-color: pink;
}
.w .content .shoe .items{
float: left;
width: 272.2px;
height: 268px;
background-color: pink;
/* border-left: 1px solid gray; */
border-top: 1px solid gray;
border-right: 1px solid gray;
}
</style>
HTML
<body>
<div class="w">
<div class="sport">
<h2 >运动户外</h2>
<ul class="hotword">
<li>热搜词:</li>
<li><a href="#">阿迪达斯</a></li>
<li><a href="#" class="nike">耐克</a></li>
<li><a href="#">斯凯奇</a></li>
<li><a href="#">安德玛</a></li>
</ul>
<li><a href="#" class="more">更多好货></a></li>
</div>
<div class="content">
<ul class="rightshop">
<h3 class="hotsell">最新热卖</h3>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<div class="loaded">
<!-- 左边大图片 -->
</div>
<ul class="shoe">
<li class="items items1"></li>
<li class="items items2"></li>
<li class="items items3"></li>
<li class="items items4"></li>
</ul>
</div>
</div>
</body>
难点在border对盒子大小的影响
kaola的更多相关文章
- iOS Universal Links(通用链接)
公司的运维,发现最近大量的请求 /.well-known/apple-app-site-association这个文件,造成了大量的404,可是这是谁请求的呢? 其实是苹果从iOS9.3开始更改了通用 ...
- Ajax的js库分析简化版
Ajax jquery的库的简化版本 (function(){ //面向外界的唯一变量接口! var myajax = window.myajax = {}; //作者.版本号等等信 ...
- 使用express4.X + jade + mongoose + underscore搭建个人电影网站
(-｡-;), 周末过得真是快啊, 很久以前就看到imooc上有个搭建个人电影网站一期 ,二期的视频, 这两周宅家里撸玩没事干, 我也学着搭了一个, 这些东西都是基础, 只要花点时间很好学的, no ...
- Python GUI with Tkinter (from youtube) 在youtube上能找到很多编程视频...
Python GUI with Tkinter - 1 - Introduction以上链接是一个python tkinter视频系列的第一讲的链接.虽然英语不好,但是,程序还是看得懂的(照着做就可以 ...
- "org.eclipse.wst.validation" has been removed
导出maven工程遇到的问题,"org.eclipse.wst.validation" has been removed,还以为是工程本身的问题,后来发现是eclipse的问题. ...
- springMVC用法 以及一个简单的基于springMVC hibernate spring的配置
替代struts 1 web.xml中配置springmvc中央控制器 <?xml version="1.0" encoding="UTF-8"?> ...
- Android利用网络编程HttpClient批量上传（一个）
请尊重他人的劳动成果.转载请注明出处:Android网络编程之使用HttpClient批量上传文件 我曾在<Android网络编程之使用HTTP訪问网络资源>一文中介绍过HttpCient ...
- 转 Android网络编程之使用HttpClient批量上传文件 MultipartEntityBuilder
请尊重他人的劳动成果,转载请注明出处:Android网络编程之使用HttpClient批量上传文件 http://www.tuicool.com/articles/Y7reYb 我曾在<Andr ...
- scss语法介绍
这里既然是对语法的介绍,那么至于如何安装和编译scss我就不多少了,主要是因为本人在群里认识的小伙伴有的不会用scss,所以就借着放假的机会来对scss语法做个总结,博主在开发过程中用scss蛮多,所 ...
- 单点登录（SSO）的设计
一.前言 什么是SSO? SSO英文全称Single Sign On,单点登录.SSO是在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统.https://baike.baidu.c ...
随机推荐
- LeetCode-911 在线选举
来源:力扣(LeetCode)链接:https://leetcode-cn.com/problems/online-election 题目描述 给你两个整数数组 persons 和 times .在选 ...
- Spring Boot2中如何优雅地个性化定制Jackson
概述 本文的编写初衷,是想了解一下Spring Boot2中,具体是怎么序列化和反序列化JSR 310日期时间体系的,Spring MVC应用场景有如下两个: 使用@RequestBody来获取JSO ...
- 编程基础与python介绍
思维导图 https://gitee.com/starry-tong/python-data/blob/pyimage/day02.png 1.计算机内部存储数据的原理 2.编程语言的发展史 3.py ...
- 四种语言刷算法之删除链表的倒数第 N 个结点
力扣19. 删除链表的倒数第 N 个结点 1.C /** * Definition for singly-linked list. * struct ListNode { * int v ...
- Android悬浮窗全屏不获取焦点但是可以漏出软键盘的办法
addFlags( WindowManager.LayoutParams.FLAG_ALT_FOCUSABLE_IM);的作用是在不获取焦点的时候显示软键盘. 接触这个标记 getWindow().c ...
- 微信小程序（开发某些方式）
1.开发工具:微信小程序开发工具(需要appid登录)2.调试:可使用微信开发者工具预览(用真机测试)3.真机调试:微信开发者工具真机调试(可打印以及查看网络等)4.扫一扫功能: 1.小程序里面可 ...
- Word15 财务部年度报告office真题
1.课程的讲解之前,先来对题目进行分析,首先需要在考生文件夹下,将Wrod素材.docx文件另存为Word.docx,后续操作均基于此文件,否则不得分. 2.这一步非常的简单,打开下载素材文件,在 ...
- 数据库多表连接查询中使用group by分组语句，Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggregated column 'XXX' which is not functionally dependent on columns in GROUP BY claus
需求描述: 要是用两表联合查询,并对查询的结果进行分组:sql如下: 1 SELECT 2 a.`id`, 3 a.`fr_num`, 4 b.`ent_status` 5 FROM 6 `table ...
- java读取虚拟串口数据
语言:java 虚拟串口工具:Virtual Serial Port Driver Pro 9.0,选择pairing模块下,点击add virtual paring按钮即可创建串口对,还无法自定义o ...
- MySQL/MariaDB如何创建用户并限制指定才能IP访问？
MySQL/MariaDB如何创建用户并限制指定才能IP访问? 登入数据 $ mysql --version mysql Ver 15.1 Distrib 10.9.3-MariaDB, for de ...