考拉布局

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. .net core使用 ELK

    一 Linux 下安装部署 第一种方法:docker-compose 安装方式 1.1 创建 docker-compose.yml 文件 version: '3.1' services: elasti ...

  2. pwn基础

    pwn常用工具 1.IDA 是一个世界顶级的交互式反汇编工具,主要用来静态分析. 使用F5即可将汇编反编译成易于阅读的伪代码:空格键:文本,图形和反汇编窗口的切换:ESC:退到上一个操作地址:F7:单 ...

  3. 【C学习笔记】day3-1 将数组A中的内容和数组B中的内容进行交换。（数组一样大）

    #include <stdio.h> int main() { int a[5]; for (int i = 0; i < 5; i++) { scanf_s("%d&qu ...

  4. leetcode刷题（二）

    1.栈 逆波兰表达式求值 根据逆波兰表示法,求表达式的值. 有效的运算符包括 +, -, *, / .每个运算对象可以是整数,也可以是另一个逆波兰表达式. 说明: 整数除法只保留整数部分.给定逆波兰表 ...

  5. echarts 总结

    ECharts访问链接 https://blog.csdn.net/Yi2008yi/article/details/122808328 :force-use-old-canvas="tru ...

  6. reset slave

    reset slave 所有中继日志文件都被删除,即使它们还没有被复制 SQL 线程完全执行. reset slave all 所有中继日志文件都被删除,它会清除连接参数(需要重新change mas ...

  7. 【Excel】IF条件函数公式怎么用？

    版本 Excel 2019 步骤 点击插入函数 打开文档,点击公式菜单下的插入函数. 双击选择IF函数 在函数列表双击选择IF函数. 输入条件测试值 在第一个输入框输入条件测试值. 设置输出结果值

  8. div里元素横向排列 居中对齐

      <div>             <img src="//s.weituibao.com/1582958061265/mlogo.png" alt=&quo ...

  9. vue去除富文本的标签和样式

    vue利用正则去除富文本的标签和样式 ts: const removeHtmlStyle =(html :any)=> { let relStyle = /style\s*?=\s*?(['&q ...

  10. docker kafka 一键搞定

    1. docker network create app-tier 2. docker run -d --name zookeeper-server \ --network app-tier \ -e ...