学了两个月的html和css每天都重复一样的生活,敲着大同小异的代码,这样的生活枯燥无味。我腻了,我也累了!小米首页算是我写的第三个静态页面,写了好久,很多细节都把握不好,下面的这个简单的布局细节是我觉得最有趣的了萌呆萌呆的!记录下来,留个回忆!

效果图:鼠标经过的时候改变背景颜色!

话不多说,直接上代码!

html代码如下:

<div class="radius">
<ol>
<li class="radiusOne"><span class="point">1</span></li>
<li class="radiusTwo"><span class="pointOne">2</span></li>
<li class="radiusTwo"><span class="pointOne">3</span></li>
<li class="radiusTwo"><span class="pointOne">4</span></li>
</ol
</div>

css代码如下:

.radius {
position: absolute;
width: 100%;
bottom: 15px;
text-align: center;
left:;
}
.radiusOne {
display: inline-block;
widht: 10px;
height: 10px;
padding: 10px;
margin: 0 2px;
cursor: default;
}
.radiusOne .point {
display: block;
width: 6px;
height: 6px;
border: 2px solid #f5f5f5;
border-color: #FF6700;
border-radius: 6px;
text-align: left;
overflow: hidden;
text-indent: -9999em;
}
.radiusTwo {
display: inline-block;
widht: 10px;
height: 10px;
padding: 10px;
margin: 0 2px;
cursor: pointer;
}
.radiusTwo .pointOne {
display: block;
width: 6px;
height: 6px;
border: 2px solid #f5f5f5;
border-color: #FF6700;
border-radius: 6px;
text-align: left;
overflow: hidden;
text-indent: -9999em;
background-color: #b0b0b0;
border-color: #fff;
}
.radiusTwo .pointOne:hover {
background-color: #ffac13;
color: #ffac13;
}

代码不长,怕遗忘,记录下动情一刻!

html css 布局小细节的更多相关文章

  1. 第八十四节,css布局小技巧及font-awesome图标使用

    css布局小技巧及font-awesome图标使用 图片鼠标放上去遮罩效果,显示文字 当鼠标放上去时 /*最外层div*/ .a{ width: 384px; height: 240px; backg ...

  2. 面试学到的css布局,细节影响了我的面试成绩

    这几天的面试很纠结,也让我注意到我的前端知识确实不行,从两个小细节总结: 1:body体的居中样式. 这个在IE和非IE Firefox Chrome Opera下面的差别 IE下text-align ...

  3. css布局小技巧 2016.03.06

    偶遇一个可爱的css布局学习网站,立刻学起来哟- max-width: 当页面左右宽度缩小时,为了避免出现左右滚动条的糟糕体验,就可以用到max-width啦!页面比宽度小时,会自动缩小哦- max- ...

  4. css 的小细节,小总结

    CSS的一些零碎总结 1.CSS 伪元素用于向某些选择器设置特殊效果(用来当作一个东西的,跟一个元素差不多,但不是元素). ① :frist-line伪元素:用于向文本首行设置特殊样式,但是只能用于块 ...

  5. select自定义下拉三角符号,css样式小细节

    本来没有写文章的习惯,但是闲下来了,整理资料,发现还挺纠结,对前端来说.所以整理下,希望对看到的人有所帮助,毕竟我不是前端开发. 起因,是前端告诉我select 框的三角箭头不能自定义.但是第二次的时 ...

  6. html+css布局小练习w3cfuns

    虽然花了很长时间,但是也知道了不少,这次也不像以前了,不知道怎么下手,虽然是照着图片做,不过也做出来了图片来自w3cfuns:网站图片url  看了w3cfuns的两天驾驭DIV+CSS 这个网站对新 ...

  7. jQuery+css+div--一些细节详解

    (一).首先.让我们认识一下最基本普通的alert()弹出框!(改变alert()提示弹出框的样式) 我们在写html或是jsp页面的时候,谁都不希望自己精心设计,且非常美观的页面颜色布局被破坏掉吧! ...

  8. css小细节罗列

    有空时候把一些常见可能不是每个人都知道的css小细节总结了下,共勉. 1.line-height 众多周知,line-height是行高的意思,我们时常会使用类似line-height:24px;这样 ...

  9. CSS布局方面的一些小总结

    1. display属性 display是CSS布局的第一站,它控制一个元素以什么“身份”出现在页面布局当中.它的值有很多个,常用的有block,inline,inline-block,table,n ...

随机推荐

  1. MySQL 常用数据存储引擎区别

    mysql有多种存储引擎,目前常用的是 MyISAM 和 InnoDB 这两个引擎,除了这两个引擎以为还有许多其他引擎,有官方的,也有一些公司自己研发的.这篇文章主要简单概述一下常用常见的 MySQL ...

  2. web appbuilder 正式版用yo esri-appbuilder-js:widget生成widget读取不到config解决方案

           对于在webappBuilder正式版中,如果用yo esri-appbuilder-js:widget生成的widget,在写widget的时候widget里面的config.json ...

  3. storm(二)消息的可靠处理

    storm 通过 trident保证了对消息提供不同的级别.beast effort,at least once, exactly once. 一个tuple 从spout流出,可能会导致大量的tup ...

  4. 机器学习Machine Learning(ML)

    什么是机器学习 定义 对于某个任务T和表现的衡量P,当计算机程序在该任务T的表现上,经过P的衡量,随着经验E而增长,称计算机能够通过经验E来学习该任务.(Tom Mitchell) 举例而言,在跳棋游 ...

  5. 遗漏的SQL语句

    一.简单查询 1.限制返回行数 使用TOP n [PERCENT]选项限制返回的数据行数,TOP n说明返回n行,而TOP n PERCENT时,说明n是表示一百分数,指定返回的行数等于总行数的百分之 ...

  6. 海康威视频监控设备Web查看系统(二):服务器篇

    声明:本系列文章只提供交流与学习使用.文章中所有涉及到海康威视设备的SDK均可在海康威视官方网站下载得到.文章中所有除官方SDK意外的代码均可随意使用,任何涉及到海康威视公司利益的非正常使用由使用者自 ...

  7. iis mime 类型

    application/sqlite3 .db application/octet-stream .MP4 application/vnd.android.package-archive .apk

  8. Redis 学习笔记(篇二):字典

    字典 字典又称为符号表.关联数组或映射(map),是一种用于保存键值对(key-value)的数据结构. 那么 C 语言中有没有这样 key-value 型的内置数据结构呢? 答案:没有. 说起键值对 ...

  9. sql关联查询—将一个表的查询结果作为新表进行查询操作

    例题:#  各个部门中 最高工资中最低的那个部门的 最低工资是多少? 先考虑取得各个部门最高工资 SELECT MAX(salary) AS max_salary,e.`department_id` ...

  10. Metasploit学习笔记

    原创博客,转载请注出处! 各位看官可参看——Metasploit实验操作 1.打开msf        msfconsole2.帮助选项:    msfconsole -h        显示在msf ...