html css 布局小细节
学了两个月的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 布局小细节的更多相关文章
- 第八十四节,css布局小技巧及font-awesome图标使用
css布局小技巧及font-awesome图标使用 图片鼠标放上去遮罩效果,显示文字 当鼠标放上去时 /*最外层div*/ .a{ width: 384px; height: 240px; backg ...
- 面试学到的css布局,细节影响了我的面试成绩
这几天的面试很纠结,也让我注意到我的前端知识确实不行,从两个小细节总结: 1:body体的居中样式. 这个在IE和非IE Firefox Chrome Opera下面的差别 IE下text-align ...
- css布局小技巧 2016.03.06
偶遇一个可爱的css布局学习网站,立刻学起来哟- max-width: 当页面左右宽度缩小时,为了避免出现左右滚动条的糟糕体验,就可以用到max-width啦!页面比宽度小时,会自动缩小哦- max- ...
- css 的小细节,小总结
CSS的一些零碎总结 1.CSS 伪元素用于向某些选择器设置特殊效果(用来当作一个东西的,跟一个元素差不多,但不是元素). ① :frist-line伪元素:用于向文本首行设置特殊样式,但是只能用于块 ...
- select自定义下拉三角符号,css样式小细节
本来没有写文章的习惯,但是闲下来了,整理资料,发现还挺纠结,对前端来说.所以整理下,希望对看到的人有所帮助,毕竟我不是前端开发. 起因,是前端告诉我select 框的三角箭头不能自定义.但是第二次的时 ...
- html+css布局小练习w3cfuns
虽然花了很长时间,但是也知道了不少,这次也不像以前了,不知道怎么下手,虽然是照着图片做,不过也做出来了图片来自w3cfuns:网站图片url 看了w3cfuns的两天驾驭DIV+CSS 这个网站对新 ...
- jQuery+css+div--一些细节详解
(一).首先.让我们认识一下最基本普通的alert()弹出框!(改变alert()提示弹出框的样式) 我们在写html或是jsp页面的时候,谁都不希望自己精心设计,且非常美观的页面颜色布局被破坏掉吧! ...
- css小细节罗列
有空时候把一些常见可能不是每个人都知道的css小细节总结了下,共勉. 1.line-height 众多周知,line-height是行高的意思,我们时常会使用类似line-height:24px;这样 ...
- CSS布局方面的一些小总结
1. display属性 display是CSS布局的第一站,它控制一个元素以什么“身份”出现在页面布局当中.它的值有很多个,常用的有block,inline,inline-block,table,n ...
随机推荐
- Android零基础入门第82节:Activity数据回传
上一节学习了将简单的数据从MainActivity传递到SecondActivity,本节一起来学习数据如何从SecondActivity回传到MainActivity. 一.简介 前面己经提到,Ac ...
- Entity Framework的查询
Entity Framework是个好东西,虽然没有Hibernate功能强大,但使用更简便.今天整理一下常见SQL如何用EF来表达,Func形式和Linq形式都会列出来(本人更喜欢Func形式). ...
- 知识的内化:学习、实践、输出(与Focus Feedback FixIt的原理是一致的)
一个人的能力分三个层次: 资源,比如知识.技能.经验.时间.精力.金钱.人脉等 应用流程,即使用资源解决问题的能力,包括做事的方法.流程.策略等,它是你整合应用资源创造价值的能力. 价值取向,即你觉得 ...
- qtchooser - a wrapper used to select between Qt development binary(2种方法)
---------------------------------------------------------------------------------------------------- ...
- jquery中的ajax应用集锦
一,原生JS实现ajax: 1 2 3 4 5 6 7 8 9 10 11 function AjaxGet() { var xhrObj; ...
- play框架之简介
Play Framework是一个开源的Web框架,背后商业公司是Typesafe.要介绍Play之前,首先理清Play的两个不同的分支. Play 1.x 使用Java开发,最新版本是1.3.1,只 ...
- vuejs切换导航条高亮路由高亮做法
我的GitHub前端经验总结,喜欢的话请点star✨✨Thanks.:https://github.com/liangfengbo/frontend-develop vuejs导航条高亮我的做法: 用 ...
- m3u8解析、转码、下载、合并
m3u8解析.转码.下载.合并 现在网也上大多数视频需要下载都很麻烦,极少数是MP4,大多都是m3u8, 先说视频下载, pc端: 打开网页,点击视频播放,打开开发者工具,找到网络那一栏, 等整个网页 ...
- 机器学习之支持向量机原理和sklearn实践
1. 场景描述 问题:如何对对下图的线性可分数据集和线性不可分数据集进行分类? 思路: (1)对线性可分数据集找到最优分割超平面 (2)将线性不可分数据集通过某种方法转换为线性可分数据集 下面将带着这 ...
- 《大型网站系统与Java中间件》读书笔记 (中)
前言 只有光头才能变强. 文本已收录至我的GitHub仓库,欢迎Star:https://github.com/ZhongFuCheng3y/3y 回顾上一篇: <大型网站系统与Java中间件& ...