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: 0;
}
.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;
}

代码不长，怕遗忘，记录下动情一刻！

转载于:https://www.cnblogs.com/woheni/p/10945615.html

html css 布局小细节相关推荐

第八十四节，css布局小技巧及font-awesome图标使用
css布局小技巧及font-awesome图标使用图片鼠标放上去遮罩效果,显示文字当鼠标放上去时 /*最外层div*/ .a{width: 384px;height: 240px;backgrou ...
css布局小练习，学会它在室友面前小秀一下吧！
前言很多同学在大学学习HTML+CSS这门课程的时候,并没有过多的重视,这就导致有许多同学在学完以后还只会使用最基本的表格布局方式对页面进行布局,这样做很明显是不能达到我们课程标准的要求的,所以让我 ...
css 的小细节，小总结
CSS的一些零碎总结 1.CSS 伪元素用于向某些选择器设置特殊效果(用来当作一个东西的,跟一个元素差不多,但不是元素). ① :frist-line伪元素:用于向文本首行设置特殊样式,但是只能用于块 ...
select自定义下拉三角符号,css样式小细节
本来没有写文章的习惯,但是闲下来了,整理资料,发现还挺纠结,对前端来说.所以整理下,希望对看到的人有所帮助,毕竟我不是前端开发. 起因,是前端告诉我select 框的三角箭头不能自定义.但是第二次的时 ...
【小5聊】使用div+css布局绘制32支球队比赛对阵图，拭目以待冠军花落谁家
虽然不是狂爱足球爱好者,但多少会有关注下,像梅西和C罗是经常听到的可能是没有我们队的原因,关注会比较少,只看个结果,所以趁着这次机会,通过js前端技术div+css布局方式绘制本次世界杯足球比赛对 ...
小程序跳转样式布局错乱_解决导致CSS布局页面错乱的方法
在做网站建设中,经常会遇到css布局页面错乱,下面是如解决错乱的方法. 1. float元素务必指定width属性很多浏览器在显示未指定width的float元素时会有bug.所以不管float元素 ...
bootstrap 垂直居中布局_给你一份详细的CSS布局指南，请查收
作者:catboy 文章来源:http://t.cn/A6wtKzip 在我们前端开发过程中,写css(包括sass, less, stylus这样的预处理器)进行设计稿的样式还原是一项重要的工作,而 ...
css布局与ldquo;切图rdquo;
CSS布局与"切图" 很多朋友问到关于在网页设计中,特别是使用CSS布局的时候,如何切图的问题,今天就来说说这个问题. 在过去,使用表格布局的时候,通常是整个页面在Photosho ...
转: 自适应css布局—-流动布局新时代(译文)
流动网页设计有很多好处,但也只有在正确使用的时候.合适的技巧会使页面在大屏幕.小屏幕抑.PDA小屏幕上都能得到良好的呈现.但是,糟糕的代码结构,对于流动布局来说将是灾难性的.因此,我们需要针对大多数流 ...
css布局难,运用 CSS布局到底有多难?[多图]
找Bug 篇原始代码,未做修正: 运行代码框首页-牛腩新闻揭晓系统 /* /* * 建立人:牛腩 */ * { /* 把默认值都配置为0 */ margin:0; padding:0; bo ...

html css 布局小细节

html css 布局小细节相关推荐

最新文章

热门文章