[Google style系列]五彩缤纷的圆角框

最新推荐文章于 2022-02-25 21:57:21 发布
原创 最新推荐文章于 2022-02-25 21:57:21 发布 · 952 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#google #div #class #float #c
#list
本文介绍了一种使用HTML和CSS实现五彩缤纷的圆角框的方法，通过细致的代码和布局技巧，使得最终效果既美观又实用。适用于网页设计中需要圆角框元素的各种场景。
 
 
 
[Google style系列]五彩缤纷的圆角框
 
 
 
 
说明:
这次文章是Google Style系列的最后一次更新了,为了这一系列我耗费了太多的时间,以至于项目的进度都拖后了,期间有我经常问自己:”我到底是网页设计师还是做软件工程师呢?”, 现在看哪一类都不像啊!
 
 
但是,不要担心,这一次的更新是整个系列最重磅,效果最漂亮,也是最实用的一篇了.不用多说,看了效果就明白了
 
 
 
 
效果:
 
 
 
 
 
 
代码:
 
<!--外框最好比内框大6px-->

<style>
.w {
    background-color: white;
    overflow: hidden
}
.l {
    float: left
}
.r {
    float: right
}
.c {
    clear: both
}
.t {
    height: 1px;
    width: 4px
}
.o {
    height: 1px;
    width: 2px
}
.p {
    height: 2px;
    width: 1px
}
.d {
    padding: 2px 10px 5px 10px
}


#CircleFrame {
    background: #B4A1D8;    /* 背景颜色 */
    float: left;
    margin-left: 5px!important;
    margin-left: 3px;
    width: 400px;   
    font-family:Arial;
    font-size:12px;
}
#CircleFrame a: hover {
    text-decoration: underline
}


/*小标题设置 begin*/
#CircleFrame span div {
    font-family: simsun,arial;
    font-size: 20px;
    font-weight: bold;
    line-height: 24px;
    text-align: left
}

/*小标题设置 end*/




#CircleFrame div div.w {
    background: #fff;  
    float: left;
    margin-left: 2px!important;
    margin-left: 1px;
    overflow: hidden;
    text-align: center;
    width: 394px;
}


#CircleFrame div div.b {
    background: red;
    float: left;
    margin-left: 2px!important;
    margin-left: 1px;
    overflow: hidden;
    text-align: center;
    width: 394px
}
#CircleFrame div div div {
    margin-left: 10px
}

#CircleFrame div.more a {
    color: #607fbb
}
#CircleFrame ul {
    display: inline
}

#CircleFrame li {
    float: left;
    line-height: 24px;  /*项目高度,如果放图片则改大一点*/
    text-align: left; 
    width: 32%    /*修改这个可以改变一行内放几个list,自己试试看看*/
}
</style>



<div id=CircleFrame>
            <div class="w t l"></div>
            <div class="w t r"></div>
            <div class=c></div>
            <div class="w o l"></div>
            <div class="w o r"></div>
            <div class=c></div><div class="w p l"></div>
            <div class="w p r"></div>
            <div class=c></div>
            <!--这一块是Google经常用的样式,效果就是圆角框的效果,下同-->            
                        
                        
                      <span><div><font color=#52597B>&nbsp;Title1</font></div></span>
                          <div><div class=w><div>
                              <ul>
                                  <li><a href="http://blog.csdn.net/PeakLui" target="_blank">PeakLui's blog!</a></li>
                                  <li><a href="http://blog.csdn.net/PeakLui" target="_blank">PeakLui's blog!</a></li> 
                                  <li><a href="http://blog.csdn.net/PeakLui" target="_blank">PeakLui's blog!</a></li> 
                                  <li><a href="http://blog.csdn.net/PeakLui" target="_blank">PeakLui's blog!</a></li> 
                                  <li><a href="http://blog.csdn.net/PeakLui" target="_blank">PeakLui's blog!</a></li> 
                                  <li><a href="http://blog.csdn.net/PeakLui" target="_blank">PeakLui's blog!</a></li> 
                                  <li><a href="http://blog.csdn.net/PeakLui" target="_blank">PeakLui's blog!</a></li> 
                              </ul>             
                        </div></div></div>
                        
                        
                        
                        <span><div><font color=#52597B>&nbsp;Title2</font></div></span>
                          <div><div class=w><div>
                              <ul>
                                  <li><a href="http://blog.csdn.net/PeakLui" target="_blank">PeakLui's blog!</a></li>
                                  <li><a href="http://blog.csdn.net/PeakLui" target="_blank">PeakLui's blog!</a></li> 
                                  <li><a href="http://blog.csdn.net/PeakLui" target="_blank">PeakLui's blog!</a></li> 
                                  <li><a href="http://blog.csdn.net/PeakLui" target="_blank">PeakLui's blog!</a></li> 
                                  <li><a href="http://blog.csdn.net/PeakLui" target="_blank">PeakLui's blog!</a></li> 
                                  <li><a href="http://blog.csdn.net/PeakLui" target="_blank">PeakLui's blog!</a></li> 
                                  <li><a href="http://blog.csdn.net/PeakLui" target="_blank">PeakLui's blog!</a></li> 
                              </ul>             
                        </div></div></div>
                        
                        
                        <span><div><font color=#52597B>&nbsp;Title3</font></div></span>
                          <div><div class=w><div>
                              <ul>
                                  <li><a href="http://blog.csdn.net/PeakLui" target="_blank">PeakLui's blog!</a></li>
                                  <li><a href="http://blog.csdn.net/PeakLui" target="_blank">PeakLui's blog!</a></li> 
                                  <li><a href="http://blog.csdn.net/PeakLui" target="_blank">PeakLui's blog!</a></li> 
                                  <li><a href="http://blog.csdn.net/PeakLui" target="_blank">PeakLui's blog!</a></li> 
                                  <li><a href="http://blog.csdn.net/PeakLui" target="_blank">PeakLui's blog!</a></li> 
                                  <li><a href="http://blog.csdn.net/PeakLui" target="_blank">PeakLui's blog!</a></li> 
                                  <li><a href="http://blog.csdn.net/PeakLui" target="_blank">PeakLui's blog!</a></li> 
                              </ul>             
                        </div></div></div>
                        
            
                        
                        


            <div class=c></div>
            <div class="w p l"></div>
            <div class="w p r"></div>
            <div class=c></div>
            <div class="w o l"></div>
            <div class="w o r"></div>
            <div class=c></div>
            <div class="w t l"></div>
            <div class="w t r"></div>
</div>      
 
 
 
 
 
 
 
P.S.
 
  •  可更换的颜色我已经在前面的博文(交替相近颜色的表格)中发过了,需要用Google设计好了的颜色才好看,不信,你直接写个red试试看
  • 如果有任何问题,请评论或联系我.
[Google Style系列] 加框效果
02-25 1451
Google的网页别具风格,简单,一眼就可以看出分类而又不失美观.我暂且称这个网页的风格为Google Style吧(自己觉得很合适),查看了它的源代码,研究了一番,希望以后借助这种风格来设计自己的网页. Google Style No1: 加框效果 原处在http://labs.google.cn/ 右边的”实验室毕业生”这个框. 思路:实现上这是一个table,而且
CSS和JavaScript代码格式化工具
03-09 1187
CSS和JavaScript代码格式化工具 l CSS代码格式化工具CSSFormator.html这个工具是我在网上搜集了一些资料后,利用先前Google Style系列的网页效果写的,用法也不用多说了,看截图吧:   l JavaScript代码格式化工具这个软件叫JavaScript Code Improver,截图如下:  a)        
[Google Style系列] 底部版权信息
03-02 1155
[Google Style系列] 底部版权信息 Google底部的版权信息一般是放在蓝色的框里面,这个效果很简单,不需要说明了,直接上代码吧. 第一种,方框的代码:STYLE type=text/css>   .footer {    PADDING-RIGHT: 5px;    BORDER-TOP: #ffffff 1px solid;    PADDING-L
[Google style系列] 标题效果
02-26 1016
[Google style系列] 标题效果 Google网页的标题非常醒目,效果很多了,就不说明出处了. 思路:这个标题的效果也是个table,这里巧妙的是,Google用一个图片(并非实实在在的图片),来控制一个单元格的height,width,通过设置其中某一单元格的height = 1,实现了一根细线的效果.  下面是代码: TABLE cellSpa
Web开发必备参考书
03-18 970
  Web开发必备参考书 不用多介绍了吧,好多都是O’relly出的经典之作,全部是chm格式,方便关键字查找   No.1 Cascading Style Sheet 2.0 中文手册.chm
[模板] 交替相近颜色的表格
03-16 774
  [模板] 交替相近颜色的表格  效果:      不用多说,直接看代码:style type="text/css">...td.title {...}{  width: 142.0pt;  border-top: solid #4F81BD 1.0pt;      /**//*第一行 上边缘线 的颜色*/  border-left
[Google style系列]Google登录框
03-02 690
 [Google style系列]Google登录框 Google的登录框在不同的网页中基本上是一致的,有自己的风格.这里我模仿写了一个,只是写了个Shell吧,以作参考. 思路:  这个表单也是个table,而且也只有一个tr,一个td,这里面放的又是个table.(跟前面几个效果采用一样的手段),不同的是这次使用的CSS来控制表格最外面的框的颜色,粗细,以及线型.其他的
[笔记]CSS--Cascading Style Sheet
01-26 598
CSS===========================================CSS is a rule that tells the browser how torender a specified tagtype inline CSS File CSS Extended CSSinline CSS   //NOTICE :File CSS===============
[笔记]HTML中不常用及容易出错的attribute
01-26 597
attributions in html dir（从左到有还是从右到左）  两种属性 ltr rtl lang（lanuage）常用的属性 tags in head base 相对地址前面的路径 meta 服务器到浏览器的数据 script 脚本的函数 style attributions in body bgcolor 两种属性值   eg： blue  #007F7F text   
ASP笔记
06-08 585
ASP学习笔记      这几天在学ASP,虽然学习过程很顺利,但感觉对这门语言没什么兴趣,自己更习惯于JSP的那一套风格,下面的笔记希望可以帮助JSP的程序员能马上上手ASP,如果你想深入学习ASP,下面的笔记并不适合你.   ASP中选择语句,循环语句示例====================================================
初步使用Ajax
06-25 554
初步使用Ajax What is Ajax? Ajax 全称 Asynchronous JavaScript and XML,其实它没有用到新的技术,只是将JavaScript技术和XML结合和发展,使Web应用更加高效和快捷  Why use Ajax? B/S结构的不足a)         表现力比较弱, 相比C/S结构中的客户端程序,浏览器
K8s 很难么？带你从头到尾捋一遍，不信你学不会
热门推荐
民工哥的博客
02-23 1万+
点击关注公众号，回复“1024”获取2TB学习资源！为什么要学习 Kubernetes?虽然 Docker 已经很强大了，但是在实际使用上还是有诸多不便，比如集群管理、资源调度、文件管理等...
10天智能锁项目实战第1天（了解单片机STM32F401RET6和C语言基础）
北豼不太皮的博客
02-21 4543
10天智能锁项目实战第1天（了解单片机STM32F401RET6和C语言基础）一、学习目标二、了解单片机STM32F401RET6三、C语言基础 一、学习目标 二、了解单片机STM32F401RET6 4、STM32F401RE特征 三、C语言基础 1.数据类型 常用2的次方： 2^7 = 128 2^8 = 256 2^15 = 32768 2^16= 65536 51单片机常见的数据类型： char: 占内存1字节 取值范围：-128~127 -2^7 ~ 2
Android开发（1） | Fragment 的应用——新闻应用
Jormungand_V的博客
02-21 7889
文章目录 news_item.xml： <TextView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/news_title" android:layout_width="match_parent" android:layout_height="wrap_content" android:lines="1" android:ellipsize="
系统学习 TypeScript（四）——变量声明的初步学习
编程三昧
02-25 2379
认识了 TypeScript 中的基础类型，接下来当然是变量声明的相关学习了，我在这里记录一下我学习过程中的一些总结。
清除浮动的五种方法
weixin_52212950的博客
02-22 3415
为什么要清除浮动？因为往往浮动后的子元素因为脱离了标准流，不能自动撑起父元素的高度，所以会对后续布局产生影响，对此清除浮动不如理解为清除浮动产生的影响更为合理。 例如：我们设置了两个盒子如图所示，粉色为父盒子，只有宽度没有高度，蓝色盒子有宽有高，粉色盒子的高由蓝盒子的高度撑开。 但是给蓝色的子盒子设置了左浮动后，脱离了标准流，无法再撑开粉盒子，可以看到粉盒子高度变成了0； 清除浮动有五种方法： 直接设置父元素的高度 额外标签法 单伪元素法 双伪元素法 ove.
HTML实现学习网站首页
做技术，坚持才是最重要的，一时的热情只是暂时的进步
02-20 4804
项目访问 reset.css /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del
C语言经典小游戏之----推箱子
嵌入式技术开发
02-25 5043
在进行推箱子的实验中，可以使用对应的API函数来改变对应箱子的颜色，也需要根据，人在移动的过程中，可以通过方向键，并改变对应的颜色，从而实现控制人物的目的。 代码实现如下： #include<stdio.h> #include<stdlib.h> #include<string.h> #include<windows.h> #include<conio.h> int x = 0, y = 0; //存储当前使用的...
关于Dubbo的mock=true降级无法调用降级类ServiceMock的解决方案
weixin_45754452的博客
02-25 1889
问题 消费者使用mock=“true”，想调用TestServiceMock进行服务降级无法调用 原因 我的项目结构如下，首先要知道服务降级代码应该是谁执行的，服务降级是服务消费者也就是controller包处对应的服务执行的，因为我只是测试dubbo怎么使用，所以并没有分多模块，但完全可以把一个包理解为一个模块，再看下面配置文件 为什么可以把一个包当成一个模块呢，因为我把配置文件的scan改成controller包然后启动一个服务器，即消费者，如果把scan改成service则可以启动服务提供者服务器
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值