考拉布局

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的更多相关文章

  1. iOS Universal Links(通用链接)

    公司的运维,发现最近大量的请求 /.well-known/apple-app-site-association这个文件,造成了大量的404,可是这是谁请求的呢? 其实是苹果从iOS9.3开始更改了通用 ...

  2. Ajax的js库分析简化版

    Ajax jquery的库的简化版本 (function(){    //面向外界的唯一变量接口!    var myajax = window.myajax = {};    //作者.版本号等等信 ...

  3. 使用express4.X + jade + mongoose + underscore搭建个人电影网站

    (-｡-;), 周末过得真是快啊,  很久以前就看到imooc上有个搭建个人电影网站一期 ,二期的视频, 这两周宅家里撸玩没事干, 我也学着搭了一个, 这些东西都是基础, 只要花点时间很好学的, no ...

  4. Python GUI with Tkinter (from youtube) 在youtube上能找到很多编程视频...

    Python GUI with Tkinter - 1 - Introduction以上链接是一个python tkinter视频系列的第一讲的链接.虽然英语不好,但是,程序还是看得懂的(照着做就可以 ...

  5. "org.eclipse.wst.validation" has been removed

    导出maven工程遇到的问题,"org.eclipse.wst.validation" has been removed,还以为是工程本身的问题,后来发现是eclipse的问题. ...

  6. springMVC用法 以及一个简单的基于springMVC hibernate spring的配置

    替代struts 1  web.xml中配置springmvc中央控制器 <?xml version="1.0" encoding="UTF-8"?> ...

  7. Android利用网络编程HttpClient批量上传（一个）

    请尊重他人的劳动成果.转载请注明出处:Android网络编程之使用HttpClient批量上传文件 我曾在<Android网络编程之使用HTTP訪问网络资源>一文中介绍过HttpCient ...

  8. 转 Android网络编程之使用HttpClient批量上传文件 MultipartEntityBuilder

    请尊重他人的劳动成果,转载请注明出处:Android网络编程之使用HttpClient批量上传文件 http://www.tuicool.com/articles/Y7reYb 我曾在<Andr ...

  9. scss语法介绍

    这里既然是对语法的介绍,那么至于如何安装和编译scss我就不多少了,主要是因为本人在群里认识的小伙伴有的不会用scss,所以就借着放假的机会来对scss语法做个总结,博主在开发过程中用scss蛮多,所 ...

  10. 单点登录（SSO）的设计

    一.前言 什么是SSO? SSO英文全称Single Sign On,单点登录.SSO是在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统.https://baike.baidu.c ...

随机推荐

  1. Java处理正则匹配卡死（正则回溯问题）

    目录 背景 项目现场问题 问题跟踪 优化方案 处理正则问题 使用子线程来匹配正则实现 监控线程实现 最优选择方案 参考文章 正则匹配卡死怎么来的? 背景 背景:这次问题的背景是项目上遇到了,在使用正则 ...

  2. 疑问：如何替代dtb文件

    学习设备树,想添加自己定义的节点,编译好了,但不知道如何替代原来的dtb文件

  3. 使用Java API操作Neo4j

    使用IntelliJ IDEA (Jet Brains) 创建java工程 把下载好的neo4j包中的lib文件下的所有jar文件复制到工程Neo4j_Project的lib文件夹下(若无lib文件夹 ...

  4. [JavaScript]对象数组 - 不完全整理

    对象数组中查询属性为某个值的对象,使用Array.find() const array1 = [5, 12, 8, 130, 44]; const found = array1.find(elemen ...

  5. function的length，就是第一个具有默认值之前的参数个数。

    一个拥有 length 属性和若干索引属性的对象就可以被称为类数组对象,类数组对象和数组类似,但是不能调用数组的方法.常见的类数组对象有 arguments 和 DOM 方法的返回结果,还有一个函数也 ...

  6. 使用open打开子页面时，父页面关闭子页面操作

    <button onclick="open1()">kaiqi</button> <button onclick="close1()&quo ...

  7. R.swift 使用详解

    R.Swift 能快速访问本地图片.颜色.字体等资源的一个库 使用介绍 1.工程中倒入R.swift 以pod为例 pod 'R.swift' 2.配置执行脚本 "$PODS_ROOT/R. ...

  8. 实验四 Web服务器2

    任务详情 基于华为鲲鹏云服务器CentOS中(或Ubuntu),使用Linux Socket实现: Web服务器的客户端服务器,提交程序运行截图 实现GET即可,请求,响应要符合HTTP协议规范 服务 ...

  9. Web服务器1-socket编程

    任务详情 基于华为鲲鹏云服务器CentOS中(或Ubuntu),使用Linux Socket实现: time服务器的客户端服务器,提交程序运行截图 echo服务器的客户端服务器,提交程序运行截图,服务 ...

  10. 【转】wamp如何添加多个站点

    1.打开wamp目录下的bin目录下的apache/conf/extra/httpd-vhosts.conf文件(虚拟目录配置文件),修改文件:在num01下创建index.php文件,输出01,:在 ...